Installer le skill CLI belt :
npx skills add belt-sh/cli
Composant Agent
Composant agent complet provenant de ui.inference.sh.
Démarrage rapide
# Installer le composant agent
npx shadcn@latest add https://ui.inference.sh/r/agent.json
# Ajouter le SDK pour la route proxy
npm install @inferencesh/sdk
Configuration
1. Route Proxy API (Next.js)
// app/api/inference/proxy/route.ts
import { route } from '@inferencesh/sdk/proxy/nextjs';
export const { GET, POST, PUT } = route;
2. Variable d'environnement
# .env.local
INFERENCE_API_KEY=inf_...
3. Utiliser le composant
import { Agent } from "@/registry/blocks/agent/agent"
export default function Page() {
return (
<Agent
proxyUrl="/api/inference/proxy"
agentConfig={{
core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },
description: 'un assistant IA utile',
system_prompt: 'tu es utile.',
}}
/>
)
}
Fonctionnalités
| Fonctionnalité | Description |
|---|---|
| Runtime inclus | Aucune logique backend nécessaire |
| Cycle de vie des outils | En attente, progression, approbation, résultats |
| Humain-dans-la-boucle | Flux d'approbation intégrés |
| Widgets | UI JSON déclarative à partir des réponses de l'agent |
| Streaming | Diffusion de tokens en temps réel |
| Outils côté client | Outils exécutés dans le navigateur |
Exemple d'outils côté client
import { Agent } from "@/registry/blocks/agent/agent"
import { createScopedTools } from "./blocks/agent/lib/client-tools"
const formRef = useRef<HTMLFormElement>(null)
const scopedTools = createScopedTools(formRef)
<Agent
proxyUrl="/api/inference/proxy"
config={{
core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },
tools: scopedTools,
system_prompt: 'Vous pouvez remplir des formulaires en utilisant les outils scan_ui et fill_field.',
}}
/>
Propriétés
| Prop | Type | Description |
|---|---|---|
proxyUrl | string | Point de terminaison du proxy API |
name | string | Nom de l'agent (optionnel) |
config | AgentConfig | Configuration de l'agent |
allowFiles | boolean | Activer le téléchargement de fichiers |
allowImages | boolean | Activer le téléchargement d'images |
Compétences connexes
# Blocs de construction d'interface de chat
npx skills add inference-sh/skills@chat-ui
# Widgets déclaratifs à partir de JSON
npx skills add inference-sh/skills@widgets-ui
# UI du cycle de vie des outils
npx skills add inference-sh/skills@tools-ui
Documentation
- Aperçu des agents - Création d'agents IA
- SDK Agent - Contrôle programmatique des agents
- Humain-dans-la-boucle - Flux d'approbation
- Agents qui génèrent de l'UI - Création d'UIs génératives
- Modèles d'UX agent - Bonnes pratiques
Documentation du composant : ui.inference.sh/blocks/agent