agent-ui

用途

agent-ui 是来自 ui.inference.sh 的“电池全包”式智能体组件，面向 React/Next.js 应用。它的目标是把构建 AI 智能体界面所需的常见能力集中到一个组件中，让开发者不必从零搭建后端逻辑与交互流程。

主要能力

根据资料，该组件内置以下能力：

运行时内置：无需自行编写后端逻辑。
工具生命周期：覆盖待处理（Pending）、进行中（Progress）、审批（Approval）、结果（Results）等阶段。
人在回路（Human-in-the-loop）：内置审批流程。
小组件（Widgets）：根据智能体响应生成声明式 JSON UI。
流式输出：实时 token 流式传输。
客户端工具：可在浏览器中运行的工具。

使用方式

安装

先安装 belt CLI 技能：

npx skills add belt-sh/cli

安装智能体组件：

npx shadcn@latest add https://ui.inference.sh/r/agent.json

为代理路由安装 SDK：

npm install @inferencesh/sdk

配置

API 代理路由（Next.js）：在 app/api/inference/proxy/route.ts 中导入并导出路由：

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

环境变量：在 .env.local 中设置：

INFERENCE_API_KEY=inf_...

使用组件：

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

客户端工具示例

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	智能体名称（可选）
config	AgentConfig	智能体配置
allowFiles	boolean	启用文件上传
allowImages	boolean	启用图片上传

适用场景

适合需要在 React/Next.js 项目中快速集成可交互 AI 智能体界面的开发者，尤其是希望直接获得流式输出、工具调用展示、审批交互和声明式小组件渲染等能力的场景。

限制

资料未提供关于收费、价格、平台兼容范围、性能表现或效果保证的信息，这些内容暂未提供。

技能介绍

用途