tools-ui

用途

tools-ui 是一套面向 React/Next.js 的工具生命周期 UI 组件，来自 ui.inference.sh。它用于在 AI 应用界面中展示工具调用的过程与结果，覆盖从请求发起到执行完成或失败的完整状态。

主要能力

组件支持以下工具状态：

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

提供的组件包括：

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

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

• search*、find* 对应 Search 图标
• read*、get* 对应 File 图标
• write*、create* 对应 Pencil 图标
• delete*、remove* 对应 Trash 图标
• send*、email* 对应 Mail 图标
• 默认使用 Wrench 图标

可通过 className 自定义工具卡片样式，例如设置边框颜色。

使用方式

安装组件：

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

安装 belt CLI skill：

npx skills add belt-sh/cli

在代码中按需引入组件，例如：

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

完整示例中可根据 tool.status 与 tool.result 判断渲染 ToolApproval、ToolResult 或 ToolCall。

与 Agent 组件配合时，Agent 组件可自动处理工具生命周期，通过 config 中的 tools 数组配置工具，并可用 requiresApproval 开启审批流程。

相关技能安装命令：

npx skills add inference-sh/skills@agent-ui
npx skills add inference-sh/skills@chat-ui
npx skills add inference-sh/skills@widgets-ui

适用场景

适用于需要在 React/Next.js 界面中展示 AI 工具调用状态、结果以及人工审批流程的应用，例如带工具调用的智能体前端、需要人工确认敏感操作（如发送邮件）的交互界面。

限制

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