名称: agent-ui 描述: “包含所有功能的代理组件，用于React/Next.js，来自ui.inference.sh。一个组件内置运行时、工具、流式传输、审批和小部件。能力：即插即用代理、人机交互、客户端工具、表单填充。用途：构建AI聊天界面、代理式UI、SaaS副驾驶、助手。触发词：代理组件、代理ui、聊天代理、shadcn代理、react代理、代理式ui、AI助手ui、副驾驶ui、inference ui、人机交互”

代理组件

来自 ui.inference.sh 的包含所有功能的代理组件。

代理组件

快速开始

# 安装代理组件
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: '你很有帮助。',
      }}
    />
  )
}

功能

功能	描述
运行时包含	无需后端逻辑
工具生命周期	待处理、进度、审批、结果
人机交互	内置审批流程
小部件	从代理响应的声明式JSON UI
流式传输	实时令牌流式传输
客户端工具	在浏览器中运行的工具

客户端工具示例

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

文档

代理概述 - 构建AI代理
代理SDK - 程序化代理控制
人机交互 - 审批流程
生成UI的代理 - 构建生成式UI
代理UX模式 - 最佳实践

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

代理UI开发技能Skill agent-ui

代理组件

快速开始

设置

1. API代理路由 (Next.js)

2. 环境变量

3. 使用组件

功能

客户端工具示例

属性

相关技能

文档