Agent 组件（开箱即用）

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

Agent 组件

来自 ui.inference.sh 的全功能 Agent 组件。

快速开始

# 安装 Agent 组件
npx shadcn@latest add https://ui.inference.sh/r/agent.json

# 为代理路由添加 SDK
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: '一个有用的 AI 助手',
        system_prompt: '你很有帮助。',
      }}
    />
  )
}

功能特性

特性	描述
内置运行时	无需后端逻辑
工具生命周期	待处理、进行中、审批、结果
人机审批循环	内置审批流程
声明式 UI 组件	从 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: '你可以使用 scan_ui 和 fill_field 工具填写表单。',
  }}
/>

属性

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

相关技能

# 聊天 UI 构建块
npx skills add inference-sh/skills@chat-ui

# 来自 JSON 的声明式 UI 组件
npx skills add inference-sh/skills@widgets-ui

# 工具生命周期 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