tools-ui

用途

tools-ui 是一套工具生命周期 UI 组件，来自 ui.inference.sh，面向 React/Next.js 项目。它用于在界面中呈现 AI 工具调用的完整过程，让用户能够看到工具何时被请求、何时正在执行、何时需要人工审批，以及最终的执行结果或错误。

主要能力

该技能覆盖以下工具状态：

• pending：工具调用已请求，等待执行
• running：工具正在执行
• approval：执行前需要人工审批
• success：工具执行成功
• error：工具执行失败

提供的组件包括：

• ToolCall：显示工具调用信息，接收 name、args、status 等属性
• ToolResult：显示工具执行结果，接收 name、result、status 等属性
• ToolApproval：显示审批界面，接收 name、args、onApprove、onDeny 等属性

组件支持通过 className 自定义样式，例如为工具卡片设置边框颜色。

工具图标会根据工具名称自动匹配：

• search*、find*：搜索图标
• read*、get*：文件图标
• write*、create*：铅笔图标
• delete*、remove*：垃圾桶图标
• send*、email*：邮件图标
• 默认：扳手图标

使用方式

安装 belt CLI 技能：

npx skills add belt-sh/cli

通过 shadcn 添加组件：

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

单独使用 ToolCall：

import { ToolCall } from "@/registry/blocks/tools/tool-call"

<ToolCall name="search_web" args={{ query: "latest AI news" }} status="running" />

单独使用 ToolResult：

import { ToolResult } from "@/registry/blocks/tools/tool-result"

<ToolResult name="search_web" result={{ results: [...] }} status="success" />

单独使用 ToolApproval：

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} /> ) }

自定义样式：

<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

文档

• Adding Tools to Agents：为智能体配备工具
• Human-in-the-Loop：审批流程
• Tool Approval Gates：实现审批门控
• 组件文档：ui.inference.sh/blocks/tools

适用场景

适用于需要在 React/Next.js 界面中展示 AI 工具调用过程的场景，尤其是需要向用户呈现工具执行状态、结果，或需要人工审批才能执行工具的场景。

限制

资料中未提供关于收费、价格、平台兼容范围、性能效果等方面的信息，暂未提供。