Tools ui
Skill ComeOnOliver/skillshub/skills/aiskillstore/marketplace/inferen-sh/tools-ui
🧠The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.
npx -y skills add ComeOnOliver/skillshub --skill tools-uiAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
Tool lifecycle UI components for React/Next.js from ui.inference.sh. Display tool calls: pending, progress, approval required, results. Capabilities: tool status, progress indicators, approval flows, results display. Use for: showing agent tool calls, human-in-the-loop approvals, tool output. Triggers: tool ui, tool calls, tool status, tool approval, tool results, agent tools, mcp tools ui, function calling ui, tool lifecycle, tool pending
SKILL.md
3.8 KB, 922 tokens by cl100k_base, as published. Nobody here has run it
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: "[email protected]", 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 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
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