Agent Skills
› NeverSight/learn-skills.dev
› tools-ui
tools-ui
GitHub提供React/Next.js工具生命周期UI组件，支持展示工具调用状态、进度指示、人工审批流程及结果输出。适用于Agent工具调用可视化与人机协作场景。
Trigger Scenarios
tool ui
tool calls
tool status
tool approval
tool results
agent tools
mcp tools ui
function calling ui
tool lifecycle
tool pending
Install
npx skills add NeverSight/learn-skills.dev --skill tools-ui -g -y
SKILL.md
Frontmatter
{
"name": "tools-ui",
"description": "Tool lifecycle UI components for React\/Next.js from ui.inference.sh.\nDisplay tool calls: pending, progress, approval required, results.\nCapabilities: tool status, progress indicators, approval flows, results display.\nUse for: showing agent tool calls, human-in-the-loop approvals, tool output.\nTriggers: tool ui, tool calls, tool status, tool approval, tool results,\nagent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending"
}
Tool UI Components
Tool lifecycle components from ui.inference.sh.
Quick Start
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 |
Components
Tool Call Display
import { ToolCall } from "@/registry/blocks/tools/tool-call"
<ToolCall
name="search_web"
args={{ query: "latest AI news" }}
status="running"
/>
Tool Result
import { ToolResult } from "@/registry/blocks/tools/tool-result"
<ToolResult
name="search_web"
result={{ results: [...] }}
status="success"
/>
Tool Approval
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
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
<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:
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
# Full agent component (recommended)
npx skills add inferencesh/skills@agent-ui
# Chat UI blocks
npx skills add inferencesh/skills@chat-ui
# Widgets for tool results
npx skills add inferencesh/skills@widgets-ui
Documentation
- 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
Version History
- e0220ca Current 2026-07-05 20:49
Dependencies
-
suggested
inferencesh/skills@agent-ui -
suggested
inferencesh/skills@chat-ui -
suggested
inferencesh/skills@widgets-ui
