tools-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Tool UI Components

Tool UI 组件

Tool lifecycle components from ui.inference.sh.

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

Quick Start

快速开始

bash

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

bash

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

Tool States

工具状态

State	Description
`pending`	Tool call requested, waiting to execute
`running`	Tool is currently executing
`approval`	Requires human approval before execution
`success`	Tool completed successfully
`error`	Tool execution failed

状态	描述
`pending`	工具调用已请求，等待执行
`running`	工具正在执行中
`approval`	执行前需要人工审批
`success`	工具执行成功完成
`error`	工具执行失败

Components

组件

Tool Call Display

工具调用展示

tsx

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

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

tsx

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

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

Tool Result

工具结果

tsx

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

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

tsx

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

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

Tool Approval

工具审批

tsx

import { ToolApproval } from "@/registry/blocks/tools/tool-approval"

<ToolApproval
  name="send_email"
  args={{ to: "user@example.com", subject: "Hello" }}
  onApprove={() => executeTool()}
  onDeny={() => cancelTool()}
/>

tsx

import { ToolApproval } from "@/registry/blocks/tools/tool-approval"

<ToolApproval
  name="send_email"
  args={{ to: "user@example.com", subject: "Hello" }}
  onApprove={() => executeTool()}
  onDeny={() => cancelTool()}
/>

Full Example

完整示例

tsx

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

tsx

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

Styling Tool Cards

工具卡片样式定制

tsx

<ToolCall
  name="read_file"
  args={{ path: "/src/index.ts" }}
  status="running"
  className="border-blue-500"
/>

tsx

<ToolCall
  name="read_file"
  args={{ path: "/src/index.ts" }}
  status="running"
  className="border-blue-500"
/>

Tool Icons

工具图标

Tools automatically get icons based on their name:

Pattern	Icon
`search` , `find`	Search
`read` , `get`	File
`write` , `create`	Pencil
`delete` , `remove`	Trash
`send` , `email`	Mail
Default	Wrench

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

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

With Agent Component

与Agent组件配合使用

The Agent component handles tool lifecycle automatically:

tsx

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

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

tsx

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, // 启用审批流程
      },
    ],
  }}
/>

Related Skills

Full agent component (recommended)

完整Agent组件（推荐）

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

Chat UI blocks

聊天UI组件

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

Widgets for tool results

工具结果小部件

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

undefined