mcpField
T
tools-ui

tools-ui

github.com/magentosh设计与 UI442 次安装12 周前更新
代码仓库

关于 tools-ui

这是 ui.inference.sh 提供的一组界面组件，用于展示工具调用、结果和审批步骤。它面向构建 Agent 界面的开发者，并呈现工具执行的不同状态。

主要功能

  1. 01展示工具调用与结果
  2. 02呈现五种工具生命周期状态
  3. 03支持人工审批流程
  4. 04根据工具名称分配图标

适用场景

  1. 01显示等待中和运行中的工具调用
  2. 02在 Agent 界面呈现工具输出
  3. 03在执行前请求审批

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/magentosh/superpowers --skill tools-ui

安装后在 Claude Code 中输入/tools-ui确认已加载。

详细介绍

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

工具 UI 组件

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

工具 UI 组件

快速开始

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: "[email protected]", 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*邮件
默认扳手

与 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
      },
    ],
  }}
/>

相关技能

# Full agent component (recommended)
npx skills add inference-sh/skills@agent-ui

# Chat UI blocks
npx skills add inference-sh/skills@chat-ui

# Widgets for tool results
npx skills add inference-sh/skills@widgets-ui

文档

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

评论

支持 Markdown