安裝 belt CLI 技能：
npx skills add belt-sh/cli
代理元件
來自 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: '你很有幫助。',
}}
/>
)
}
功能特色
| 功能 | 說明 |
|---|---|
| 內建執行時期 | 無需後端邏輯 |
| 工具生命週期 | 待處理、進行中、審核、結果 |
| 人類介入 (Human-in-the-loop) | 內建審核流程 |
| 小工具 (Widgets) | 從代理回應中解析宣告式 JSON UI |
| 串流 (Streaming) | 即時 Token 串流 |
| 用戶端工具 (Client-side tools) | 在瀏覽器中執行的工具 |
用戶端工具範例
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 工具來填寫表單。',
}}
/>
Props
| Prop | 型別 | 說明 |
|---|---|---|
proxyUrl | string | API 代理端點 |
name | string | 代理名稱（選填） |
config | AgentConfig | 代理設定 |
allowFiles | boolean | 啟用檔案上傳 |
allowImages | boolean | 啟用圖片上傳 |
相關技能
# 聊天 UI 建構區塊
npx skills add inference-sh/skills@chat-ui
# 從 JSON 產生的宣告式小工具
npx skills add inference-sh/skills@widgets-ui
# 工具生命週期 UI
npx skills add inference-sh/skills@tools-ui
文件
- 代理概覽 - 建構 AI 代理
- Agent SDK - 程式化代理控制
- 人類介入 (Human-in-the-Loop) - 審核流程
- 生成 UI 的代理 - 建構生成式 UI
- 代理 UX 模式 - 最佳實務