Files
openclaw/skills/agent-ui/SKILL.md
root 7b2aa28545 紧急优化完成:修复State dir权限并创建媛媛独立session
- 修复State dir安全问题:chmod 700 /root/.clawdbot
- 为媛媛创建独立WhatsApp session:agent:main:yuanyuan
- 上下文完全隔离:媛媛不再处理淇淇和领导的大量历史
- 响应速度预期提升:从处理137k token(67%)到0% token(干净session)
- 创建优化执行报告:urgent-optimization-plan.md
- 创建优化完成报告:optimization-execution-report.md
- 效果预期:响应速度提升3-5倍,上下文质量显著改善

紧急优化已完成!请指示下一步任务或开始nanoclaw调研。
2026-02-09 15:15:25 +08:00

3.4 KiB

name, description
name description
agent-ui Batteries-included agent component for React/Next.js from ui.inference.sh. One component with runtime, tools, streaming, approvals, and widgets built in. Capabilities: drop-in agent, human-in-the-loop, client-side tools, form filling. Use for: building AI chat interfaces, agentic UIs, SaaS copilots, assistants. Triggers: agent component, agent ui, chat agent, shadcn agent, react agent, agentic ui, ai assistant ui, copilot ui, inference ui, human in the loop

Agent Component

Batteries-included agent component from ui.inference.sh.

Quick Start

# Install the agent component
npx shadcn@latest add https://ui.inference.sh/r/agent.json

# Add the SDK for the proxy route
npm install @inferencesh/sdk

Setup

1. API Proxy Route (Next.js)

// app/api/inference/proxy/route.ts
import { route } from '@inferencesh/sdk/proxy/nextjs';
export const { GET, POST, PUT } = route;

2. Environment Variable

# .env.local
INFERENCE_API_KEY=inf_...

3. Use the Component

import { Agent } from "@/registry/blocks/agent/agent"

export default function Page() {
  return (
    <Agent
      proxyUrl="/api/inference/proxy"
      agentConfig={{
        core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },
        description: 'a helpful ai assistant',
        system_prompt: 'you are helpful.',
      }}
    />
  )
}

Features

Feature Description
Runtime included No backend logic needed
Tool lifecycle Pending, progress, approval, results
Human-in-the-loop Built-in approval flows
Widgets Declarative JSON UI from agent responses
Streaming Real-time token streaming
Client-side tools Tools that run in the browser

Client-Side Tools Example

import { Agent } from "@/registry/blocks/agent/agent"
import { createScopedTools } from "./blocks/agent/lib/client-tools"

const formRef = useRef<HTMLFormElement>(null)
const scopedTools = createScopedTools(formRef)

<Agent
  proxyUrl="/api/inference/proxy"
  config={{
    core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },
    tools: scopedTools,
    system_prompt: 'You can fill forms using scan_ui and fill_field tools.',
  }}
/>

Props

Prop Type Description
proxyUrl string API proxy endpoint
name string Agent name (optional)
config AgentConfig Agent configuration
allowFiles boolean Enable file uploads
allowImages boolean Enable image uploads
# Chat UI building blocks
npx skills add inference-sh/agent-skills@chat-ui

# Declarative widgets from JSON
npx skills add inference-sh/agent-skills@widgets-ui

# Tool lifecycle UI
npx skills add inference-sh/agent-skills@tools-ui

Documentation

Component docs: ui.inference.sh/blocks/agent