工具UI组件

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

快速开始

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

工具状态

组件

工具调用显示

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

name=search_web
args={{ query: 最新AI新闻 }}
status=running
/>

工具结果

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

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

工具审批

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

name=send_email
args={{ to: user@example.com, subject: 你好 }}
onApprove={() => executeTool()}
onDeny={() => cancelTool()}
/>

完整示例

tsx
import { ToolCall, ToolResult, ToolApproval } from @/registry/blocks/tools

function ToolDisplay({ tool }) {
if (tool.status === approval) {
return (
name={tool.name}
args={tool.args}
onApprove={tool.approve}
onDeny={tool.deny}
/>
)
}

if (tool.result) {
return (
name={tool.name}
result={tool.result}
status={tool.status}
/>
)
}

return (
name={tool.name}
args={tool.args}
status={tool.status}
/>
)
}

样式化工具卡片

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

工具图标

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

与Agent组件配合使用

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

tsx
import { Agent } from @/registry/blocks/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, // 启用审批流程
},
],
}}
/>

相关技能

bash

完整Agent组件（推荐）

聊天UI模块

工具结果小部件

文档

• - 为Agent添加工具 - 为Agent配备工具
• 人机协同 - 审批流程
• 工具审批门控 - 实现审批机制

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