Instale a skill belt CLI:
npx skills add belt-sh/cli
Componentes de UI para Ferramentas
Componentes de ciclo de vida de ferramentas do ui.inference.sh.
Início Rápido
npx shadcn@latest add https://ui.inference.sh/r/tools.json
Estados da Ferramenta
| Estado | Descrição |
|---|---|
pending | Chamada de ferramenta solicitada, aguardando execução |
running | Ferramenta está sendo executada |
approval | Requer aprovação humana antes da execução |
success | Ferramenta concluída com sucesso |
error | Falha na execução da ferramenta |
Componentes
Exibição de Chamada de Ferramenta
import { ToolCall } from "@/registry/blocks/tools/tool-call"
<ToolCall
name="search_web"
args={{ query: "últimas notícias de IA" }}
status="running"
/>
Resultado da Ferramenta
import { ToolResult } from "@/registry/blocks/tools/tool-result"
<ToolResult
name="search_web"
result={{ results: [...] }}
status="success"
/>
Aprovação de Ferramenta
import { ToolApproval } from "@/registry/blocks/tools/tool-approval"
<ToolApproval
name="send_email"
args={{ to: "[email protected]", subject: "Olá" }}
onApprove={() => executarFerramenta()}
onDeny={() => cancelarFerramenta()}
/>
Exemplo Completo
import { ToolCall, ToolResult, ToolApproval } from "@/registry/blocks/tools"
function ExibirFerramenta({ 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}
/>
)
}
Estilizando Cartões de Ferramenta
<ToolCall
name="read_file"
args={{ path: "/src/index.ts" }}
status="running"
className="border-blue-500"
/>
Ícones de Ferramenta
As ferramentas recebem ícones automaticamente com base em seus nomes:
| Padrão | Ícone |
|---|---|
search*, find* | Pesquisa |
read*, get* | Arquivo |
write*, create* | Lápis |
delete*, remove* | Lixeira |
send*, email* | Correio |
| Padrão | Chave inglesa |
Com o Componente Agent
O componente Agent gerencia o ciclo de vida da ferramenta automaticamente:
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: 'Pesquisar na web',
parameters: { query: { type: 'string' } },
requiresApproval: true, // Habilita fluxo de aprovação
},
],
}}
/>
Skills Relacionadas
# Componente completo de agente (recomendado)
npx skills add inference-sh/skills@agent-ui
# Blocos de UI de chat
npx skills add inference-sh/skills@chat-ui
# Widgets para resultados de ferramentas
npx skills add inference-sh/skills@widgets-ui
Documentação
- Adicionando Ferramentas a Agentes - Equipar agentes com ferramentas
- Humano no Loop - Fluxos de aprovação
- Portões de Aprovação de Ferramentas - Implementando aprovações
Documentação dos componentes: ui.inference.sh/blocks/tools