Instala el skill belt CLI:
npx skills add belt-sh/cli
Componentes de IU para Herramientas
Componentes de ciclo de vida de herramientas provenientes de ui.inference.sh.
Inicio Rápido
npx shadcn@latest add https://ui.inference.sh/r/tools.json
Estados de Herramienta
| Estado | Descripción |
|---|---|
pendiente | Llamada a herramienta solicitada, esperando ejecución |
ejecutando | La herramienta se está ejecutando actualmente |
aprobación | Requiere aprobación humana antes de ejecutar |
éxito | La herramienta se completó exitosamente |
error | Falló la ejecución de la herramienta |
Componentes
Visualización de Llamada a Herramienta
import { ToolCall } from "@/registry/blocks/tools/tool-call"
<ToolCall
name="buscar_web"
args={{ query: "últimas noticias de IA" }}
status="ejecutando"
/>
Resultado de Herramienta
import { ToolResult } from "@/registry/blocks/tools/tool-result"
<ToolResult
name="buscar_web"
result={{ resultados: [...] }}
status="éxito"
/>
Aprobación de Herramienta
import { ToolApproval } from "@/registry/blocks/tools/tool-approval"
<ToolApproval
name="enviar_correo"
args={{ to: "[email protected]", subject: "Hola" }}
onApprove={() => ejecutarHerramienta()}
onDeny={() => cancelarHerramienta()}
/>
Ejemplo Completo
import { ToolCall, ToolResult, ToolApproval } from "@/registry/blocks/tools"
function ToolDisplay({ tool }) {
if (tool.status === 'aprobación') {
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}
/>
)
}
Estilización de Tarjetas de Herramienta
<ToolCall
name="leer_archivo"
args={{ path: "/src/index.ts" }}
status="ejecutando"
className="border-blue-500"
/>
Iconos de Herramientas
Las herramientas obtienen automáticamente iconos basados en su nombre:
| Patrón | Icono |
|---|---|
buscar*, encontrar* | Búsqueda |
leer*, obtener* | Archivo |
escribir*, crear* | Lápiz |
eliminar*, remover* | Papelera |
enviar*, correo* | Correo |
| Predeterminado | Llave |
Con el Componente Agente
El componente Agente maneja automáticamente el ciclo de vida de las herramientas:
import { Agent } from "@/registry/blocks/agent/agent"
<Agent
proxyUrl="/api/inference/proxy"
config={{
core_app: { ref: 'openrouter/claude-sonnet-45@0fkg6xwb' },
tools: [
{
name: 'buscar_web',
description: 'Buscar en la web',
parameters: { query: { type: 'string' } },
requiresApproval: true, // Habilitar flujo de aprobación
},
],
}}
/>
Skills Relacionados
# Componente Agente completo (recomendado)
npx skills add inference-sh/skills@agent-ui
# Bloques de IU de Chat
npx skills add inference-sh/skills@chat-ui
# Widgets para resultados de herramientas
npx skills add inference-sh/skills@widgets-ui
Documentación
- Añadir Herramientas a Agentes - Equipar agentes con herramientas
- Humano-en-el-Bucle - Flujos de aprobación
- Puertas de Aprobación de Herramientas - Implementación de aprobaciones
Documentación de componentes: ui.inference.sh/blocks/tools