tools-ui

用途

tools-ui 提供来自 ui.inference.sh 的工具生命周期 UI 组件，面向 React/Next.js 项目，用于在界面中展示工具调用（tool calls）的状态与结果。

主要能力

组件覆盖工具调用的完整生命周期，支持以下状态：

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

快速开始：

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

样式定制：可为工具卡片传入 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
      },
    ],
  }}
/>

适用场景

适用于需要在 React/Next.js 界面中可视化智能体工具调用过程、展示执行状态、结果以及提供人工审批交互的场景。

限制

关于收费、价格、平台支持范围及具体效果等事实，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

配合 Agent 组件

相关技能与文档

适用场景

限制