tools-ui

用途

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。

使用方式

安装 belt CLI 技能： npx skills add belt-sh/cli

通过 shadcn 添加组件： npx shadcn@latest add https://ui.inference.sh/r/tools.json

组件可从 @/registry/blocks/tools 导入使用。示例：

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

可通过 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, }, ], }} />

相关技能

• 完整 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

适用场景

适用于需要在 React/Next.js 应用中展示 AI 工具调用过程、结果以及人工审批流程的界面开发。

限制

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