agent-ui

安装 belt CLI 技能： npx skills add belt-sh/cli

Agent 组件

来自 ui.inference.sh 的开箱即用 Agent 组件。

快速入门

# 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

设置

1. API 代理路由（Next.js）

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

2. 环境变量

# .env.local
INFERENCE_API_KEY=inf_...

3. 使用组件

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.',
      }}
    />
  )
}

功能

功能	描述
内置运行时	无需后端逻辑
工具生命周期	等待中、进度、审批、结果
人机协作	内置审批流程
小组件	根据 Agent 响应声明式生成 JSON UI
流式传输	实时 Token 流式传输
客户端工具	在浏览器中运行的工具

客户端工具示例

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.',
  }}
/>

属性

属性	类型	描述
proxyUrl	string	API 代理端点
name	string	Agent 名称（可选）
config	AgentConfig	Agent 配置
allowFiles	boolean	启用文件上传
allowImages	boolean	启用图片上传

相关技能

# Chat UI building blocks
npx skills add inference-sh/skills@chat-ui

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

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

文档

• Agent 概览 - 构建 AI Agent
• Agent SDK - 以编程方式控制 Agent
• 人机协作 - 审批流程
• 生成 UI 的 Agent - 构建生成式 UI
• Agent UX 模式 - 最佳实践

组件文档：ui.inference.sh/blocks/agent