Installer la compétence belt CLI :
npx skills add belt-sh/cli
Composants d'interface utilisateur pour les outils
Composants de cycle de vie des outils provenant de ui.inference.sh.
Démarrage rapide
npx shadcn@latest add https://ui.inference.sh/r/tools.json
États des outils
| État | Description |
|---|---|
pending | Appel d'outil demandé, en attente d'exécution |
running | L'outil est en cours d'exécution |
approval | Nécessite une approbation humaine avant exécution |
success | L'outil s'est terminé avec succès |
error | L'exécution de l'outil a échoué |
Composants
Affichage d'un appel d'outil
import { ToolCall } from "@/registry/blocks/tools/tool-call"
<ToolCall
name="search_web"
args={{ query: "latest AI news" }}
status="running"
/>
Résultat d'outil
import { ToolResult } from "@/registry/blocks/tools/tool-result"
<ToolResult
name="search_web"
result={{ results: [...] }}
status="success"
/>
Approbation d'outil
import { ToolApproval } from "@/registry/blocks/tools/tool-approval"
<ToolApproval
name="send_email"
args={{ to: "[email protected]", subject: "Hello" }}
onApprove={() => executeTool()}
onDeny={() => cancelTool()}
/>
Exemple complet
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}
/>
)
}
Personnalisation des cartes d'outils
<ToolCall
name="read_file"
args={{ path: "/src/index.ts" }}
status="running"
className="border-blue-500"
/>
Icônes des outils
Les outils reçoivent automatiquement des icônes en fonction de leur nom :
| Motif | Icône |
|---|---|
search*, find* | Recherche |
read*, get* | Fichier |
write*, create* | Crayon |
delete*, remove* | Corbeille |
send*, email* | Enveloppe |
| Par défaut | Clé |
Avec le composant Agent
Le composant Agent gère automatiquement le cycle de vie des outils :
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: 'Rechercher sur le web',
parameters: { query: { type: 'string' } },
requiresApproval: true, // Activer le flux d'approbation
},
],
}}
/>
Compétences associées
# Composant agent complet (recommandé)
npx skills add inference-sh/skills@agent-ui
# Blocs d'interface de chat
npx skills add inference-sh/skills@chat-ui
# Widgets pour les résultats d'outils
npx skills add inference-sh/skills@widgets-ui
Documentation
- Ajouter des outils aux agents - Équiper les agents avec des outils
- Boucle humaine (Human-in-the-Loop) - Flux d'approbation
- Portes d'approbation des outils - Mise en œuvre des approbations
Documentation des composants : ui.inference.sh/blocks/tools