agent-ui

原文：🇺🇸 英文

已翻译

来自ui.inference.sh的、开箱即用的React/Next.js Agent组件。单个组件内置运行时、工具、流处理、审批机制和小组件。核心功能：即插即用Agent、人机协同、客户端工具、表单填充。适用场景：构建AI聊天界面、Agent化UI、SaaS副驾驶、智能助手。相关关键词：Agent组件、Agent UI、聊天Agent、Shadcn Agent、React Agent、Agent化UI、AI助手UI、副驾驶UI、Inference UI、人机协同

787次下载

来源1nf-sh/skills

添加于2026-02-10

NPX安装

npx skill4agent add 1nf-sh/skills agent-ui

SKILL.md 内容（中文）

查看翻译对照 →

Agent Component

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

快速开始

bash

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

# 为代理路由添加SDK
npm install @inferencesh/sdk

设置

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

typescript

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

2. 环境变量

bash

# .env.local
INFERENCE_API_KEY=inf_...

3. 使用组件

tsx

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
流处理	实时令牌流传输
客户端工具	在浏览器中运行的工具

客户端工具示例

tsx

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	启用图片上传

文档

Agents Overview - 构建AI Agent
Agent SDK - Agent程序化控制
Human-in-the-Loop - 审批流程
Agents That Generate UI - 构建生成式UI
Agent UX Patterns - 最佳实践

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