Back to Details

agent-ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Agent Component

Agent Component

Agent Component
Batteries-included agent component from ui.inference.sh.
Agent Component
来自ui.inference.sh的开箱即用Agent组件。

Quick Start

快速开始

bash
undefined
bash
undefined

Install the agent component

安装Agent组件

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

Add the SDK for the proxy route

为代理路由添加SDK

npm install @inferencesh/sdk
undefined
npm install @inferencesh/sdk
undefined

Setup

设置

1. API Proxy Route (Next.js)

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

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

2. Environment Variable

2. 环境变量

bash
undefined
bash
undefined

.env.local

.env.local

INFERENCE_API_KEY=inf_...
undefined
INFERENCE_API_KEY=inf_...
undefined

3. Use the Component

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

Features

功能特性

FeatureDescription
Runtime includedNo backend logic needed
Tool lifecyclePending, progress, approval, results
Human-in-the-loopBuilt-in approval flows
WidgetsDeclarative JSON UI from agent responses
StreamingReal-time token streaming
Client-side toolsTools that run in the browser
功能描述
内置运行时无需后端逻辑
工具生命周期待处理、执行中、审批、结果反馈
人机协同内置审批流程
小组件基于Agent响应生成声明式JSON UI
流处理实时令牌流传输
客户端工具在浏览器中运行的工具

Client-Side Tools Example

客户端工具示例

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

Props

组件属性

PropTypeDescription
proxyUrl
stringAPI proxy endpoint
name
stringAgent name (optional)
config
AgentConfigAgent configuration
allowFiles
booleanEnable file uploads
allowImages
booleanEnable image uploads
属性类型描述
proxyUrl
stringAPI代理端点
name
stringAgent名称（可选）
config
AgentConfigAgent配置项
allowFiles
boolean启用文件上传
allowImages
boolean启用图片上传

Related Skills

相关技能

bash
undefined
bash
undefined

Chat UI building blocks

聊天UI构建模块

npx skills add inferencesh/skills@chat-ui
npx skills add inferencesh/skills@chat-ui

Declarative widgets from JSON

基于JSON的声明式小组件

npx skills add inferencesh/skills@widgets-ui
npx skills add inferencesh/skills@widgets-ui

Tool lifecycle UI

工具生命周期UI

npx skills add inferencesh/skills@tools-ui
undefined
npx skills add inferencesh/skills@tools-ui
undefined

Documentation

文档

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