使用方法
- 复制安装命令，在自己的智能体环境安装前先检查源码包。
- 从原始文档核对所需工具、凭据和支持的宿主。
- 说明输入材料与期望交付物，并对照来源检查输出。
npx skills add https://github.com/101-skills/superpowers --skill tools-ui开始前需了解
- 安装不包含模型订阅、API 额度或访问文件的权限。
- 仓库星数和安装量反映活跃情况，不等于独立质量或安全测试。
仓库原始内容
按源仓库内容呈现，保留标题、案例、代码、表格、链接以及原文引用的演示图片。
Install the belt CLI skill: npx skills add belt-sh/cliTool UI Components
Tool lifecycle components from ui.inference.sh.
Quick Start
bash
npx shadcn@latest add https://ui.inference.sh/r/tools.jsonTool 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 |
Components
Tool Call Display
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"
/>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()}
/>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}
/>
)
}Styling Tool Cards
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* | |
| Default | Wrench |
With Agent Component
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
},
],
}}
/>Related Skills
bash
# 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-uiDocumentation
- Adding Tools to Agents - Equip agents with tools
- Human-in-the-Loop - Approval flows
- Tool Approval Gates - Implementing approvals
Component docs: ui.inference.sh/blocks/tools
