Instale o skill CLI do belt:
npx skills add belt-sh/cli
Componente Agente
Componente de agente completo do ui.inference.sh.
Início Rápido
# Instale o componente agente
npx shadcn@latest add https://ui.inference.sh/r/agent.json
# Adicione o SDK para a rota proxy
npm install @inferencesh/sdk
Configuração
1. Rota de Proxy da API (Next.js)
// app/api/inference/proxy/route.ts
import { route } from '@inferencesh/sdk/proxy/nextjs';
export const { GET, POST, PUT } = route;
2. Variável de Ambiente
# .env.local
INFERENCE_API_KEY=inf_...
3. Use o 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: 'um assistente de IA útil',
system_prompt: 'você é útil.',
}}
/>
)
}
Funcionalidades
| Funcionalidade | Descrição |
|---|---|
| Runtime incluso | Nenhuma lógica de backend necessária |
| Ciclo de vida de ferramentas | Pendente, progresso, aprovação, resultados |
| Humano no loop | Fluxos de aprovação integrados |
| Widgets | UI JSON declarativa a partir de respostas do agente |
| Streaming | Streaming de tokens em tempo real |
| Ferramentas do lado do cliente | Ferramentas executadas no navegador |
Exemplo de Ferramentas do Lado do 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: 'Você pode preencher formulários usando as ferramentas scan_ui e fill_field.',
}}
/>
Props
| Prop | Tipo | Descrição |
|---|---|---|
proxyUrl | string | Endpoint do proxy da API |
name | string | Nome do agente (opcional) |
config | AgentConfig | Configuração do agente |
allowFiles | boolean | Habilitar upload de arquivos |
allowImages | boolean | Habilitar upload de imagens |
Skills Relacionados
# Blocos de construção de UI de chat
npx skills add inference-sh/skills@chat-ui
# Widgets declarativos a partir de JSON
npx skills add inference-sh/skills@widgets-ui
# UI do ciclo de vida de ferramentas
npx skills add inference-sh/skills@tools-ui
Documentação
- Visão Geral de Agentes - Construindo agentes de IA
- SDK do Agente - Controle programático do agente
- Humano no Loop - Fluxos de aprovação
- Agentes que Geram UI - Construindo UIs generativas
- Padrões de UX de Agentes - Melhores práticas
Documentação do componente: ui.inference.sh/blocks/agent