用途
tools-ui 是一组用于 React / Next.js 的工具生命周期 UI 组件，来自 ui.inference.sh。它的目标是在界面上清晰展示 AI 工具调用的状态——从发起请求、执行中、等待人工批准，到成功或失败的结果，让用户能看懂并介入工具的执行过程。
主要能力
该组件集围绕工具调用生命周期提供多种状态展示，支持的状态包括：
- pending：工具调用已请求，等待执行
- running：工具正在执行
- approval：执行前需要人工批准
- success：工具执行成功
- error：工具执行失败
提供的主要组件包括：
- ToolCall：展示工具调用的名称、参数与状态
- ToolResult：展示工具调用的名称、结果与状态
- ToolApproval：展示工具的名称与参数，并提供 onApprove 与 onDeny 回调用于批准或拒绝执行
组件还支持自动图标匹配。工具会根据名称自动获得图标，规则如下：
- search*、find*：Search 图标
- read*、get*：File 图标
- write*、create*：Pencil 图标
- delete*、remove*：Trash 图标
- send*、email*：Mail 图标
- 默认：Wrench 图标
使用方式
安装相关技能可通过命令行完成：
npx skills add belt-sh/cli
安装组件可使用 shadcn 命令：
npx shadcn@latest add https://ui.inference.sh/r/tools.json
组件从 @/registry/blocks/tools 下的路径引入。以下为官方示例代码，内容保持原样：
Tool Call Display：
import { ToolCall } from "@/registry/blocks/tools/tool-call"
<ToolCall name="search_web" args={{ query: "latest AI news" }} status="running" />
Tool Result：
import { ToolResult } from "@/registry/blocks/tools/tool-result"
<ToolResult name="search_web" result={{ results: [...] }} status="success" />
Tool Approval：
import { ToolApproval } from "@/registry/blocks/tools/tool-approval"
<ToolApproval name="send_email" args={{ to: "user@example.com", subject: "Hello" }} onApprove={() => executeTool()} onDeny={() => cancelTool()} />
完整示例：
import { ToolCall, ToolResult, ToolApproval } from "@/registry/blocks/tools"
function ToolDisplay({ tool }) { if (tool.status === 'approval') { return ( <ToolApproval name={tool.name} args={tool.args} onApprove={tool.approve} onDeny={tool.deny} /> ) }
if (tool.result) { return ( <ToolResult name={tool.name} result={tool.result} status={tool.status} /> ) }
return ( <ToolCall name={tool.name} args={tool.args} status={tool.status} /> ) }
样式定制可通过 className 传入，例如：
<ToolCall name="read_file" args={{ path: "/src/index.ts" }} status="running" className="border-blue-500" />
与 Agent 组件配合使用时，Agent 组件会自动处理工具生命周期：
import { Agent } from "@/registry/blocks/agent/agent"
<Agent proxyUrl="/api/inference/proxy" config={{ core_app: { ref: 'openrouter/claude-sonnet-45@0fkg6xwb' }, tools: [ { name: 'search_web', description: 'Search the web', parameters: { query: { type: 'string' } }, requiresApproval: true, // Enable approval flow }, ], }} />
相关技能还包括：完整 Agent 组件（推荐，npx skills add inference-sh/skills@agent-ui）、聊天 UI 块（npx skills add inference-sh/skills@chat-ui）、工具结果组件（npx skills add inference-sh/skills@widgets-ui）。
适用场景
适合需要向用户展示 AI 工具调用过程的 React / Next.js 应用，尤其适用于涉及人工审批（Human-in-the-Loop）的智能体场景，例如发送邮件、执行敏感操作前的确认流程。也适合需要统一展示工具调用状态、结果和审批交互的智能体产品界面。
限制
资料未提供关于收费、价格、平台支持范围、性能表现或具体效果的信息，暂未提供。组件代码示例需按原样使用，相关文档可参考「Adding Tools to Agents」「Human-in-the-Loop」「Tool Approval Gates」以及组件文档 ui.inference.sh/blocks/tools。