Cómo usar
- Copia el comando y revisa el paquete antes de instalarlo en tu entorno de agente.
- Consulta las herramientas, credenciales y entornos necesarios en el documento original.
- Describe las entradas y el resultado deseado; contrasta la salida con las fuentes.
npx skills add https://github.com/101-skills/superpowers --skill tools-uiAntes de empezar
- La instalación no incluye suscripción al modelo, cuota API ni permisos sobre tus archivos.
- Las estrellas e instalaciones reflejan actividad, no una prueba independiente de calidad o seguridad.
Documento original del Skill
Contenido del repositorio de origen con títulos, ejemplos, código, tablas, enlaces e imágenes preservados.
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
