工具UI组件Skill tools-ui

---

名称：工具UI 描述：“来自 ui.inference.sh 的 React/Next.js 工具生命周期UI组件。显示工具调用：待定、进度、需要批准、结果。功能：工具状态、进度指示器、批准流程、结果显示。用途：显示代理工具调用、人机交互批准、工具输出。触发词：工具UI、工具调用、工具状态、工具批准、工具结果、” 代理工具、MCP工具UI、函数调用UI、工具生命周期、工具待定

工具UI组件

来自 ui.inference.sh 的工具生命周期组件。

快速开始

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

工具状态

状态	描述
pending	工具调用已请求，等待执行
running	工具正在执行
approval	需要人工批准后才能执行
success	工具执行成功
error	工具执行失败

组件

工具调用显示

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

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

工具结果

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

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

工具批准

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"
/>

工具图标

工具自动根据名称获取图标：

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

与代理组件配合

代理组件自动处理工具生命周期：

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: '搜索网络',
        parameters: { query: { type: 'string' } },
        requiresApproval: true, // 启用批准流程
      },
    ],
  }}
/>

相关技能

# 完整代理组件（推荐）
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

文档

• 为代理添加工具 - 为代理配备工具
• 人机交互 - 批准流程
• 工具批准门 - 实现批准

组件文档： ui.inference.sh/blocks/tools