Instale el skill de CLI de belt:
npx skills add belt-sh/cli
Componente Agente
Componente de agente completo de ui.inference.sh.
Inicio Rápido
# Instale el componente agente
npx shadcn@latest add https://ui.inference.sh/r/agent.json
# Agregue el SDK para la ruta proxy
npm install @inferencesh/sdk
Configuración
1. Ruta Proxy de la API (Next.js)
// app/api/inference/proxy/route.ts
import { route } from '@inferencesh/sdk/proxy/nextjs';
export const { GET, POST, PUT } = route;
2. Variable de Entorno
# .env.local
INFERENCE_API_KEY=inf_...
3. Use el Componente
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 asistente de IA útil',
system_prompt: 'eres útil.',
}}
/>
)
}
Características
| Característica | Descripción |
|---|---|
| Runtime incluido | No se necesita lógica de backend |
| Ciclo de vida de herramientas | Pendiente, progreso, aprobación, resultados |
| Humano en el bucle | Flujos de aprobación integrados |
| Widgets | UI JSON declarativa a partir de respuestas del agente |
| Streaming | Transmisión de tokens en tiempo real |
| Herramientas del lado del cliente | Herramientas que se ejecutan en el navegador |
Ejemplo de Herramientas del Lado del Cliente
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: 'Puedes llenar formularios usando las herramientas scan_ui y fill_field.',
}}
/>
Props
| Prop | Tipo | Descripción |
|---|---|---|
proxyUrl | string | Endpoint del proxy de la API |
name | string | Nombre del agente (opcional) |
config | AgentConfig | Configuración del agente |
allowFiles | boolean | Habilitar carga de archivos |
allowImages | boolean | Habilitar carga de imágenes |
Skills Relacionados
# Bloques de construcción de UI de chat
npx skills add inference-sh/skills@chat-ui
# Widgets declarativos desde JSON
npx skills add inference-sh/skills@widgets-ui
# UI de ciclo de vida de herramientas
npx skills add inference-sh/skills@tools-ui
Documentación
- Visión General de Agentes - Construcción de agentes de IA
- SDK de Agentes - Control programático de agentes
- Humano en el Bucle - Flujos de aprobación
- Agentes que Generan UI - Construcción de UIs generativas
- Patrones de UX de Agentes - Mejores prácticas
Documentación del componente: ui.inference.sh/blocks/agent