How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/101-skills/superpowers --skill tools-uiBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
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
