Instale a skill da CLI belt:
npx skills add belt-sh/cli
Renderizador de Widgets
UI declarativa a partir de JSON via ui.inference.sh.
Início Rápido
npx shadcn@latest add https://ui.inference.sh/r/widgets.json
Uso Básico
import { WidgetRenderer } from "@/registry/blocks/widgets/widget-renderer"
import type { Widget, WidgetAction } from "@/registry/blocks/widgets/types"
const widget: Widget = {
type: 'ui',
title: 'Meu Widget',
children: [
{ type: 'text', value: 'Olá Mundo' },
{ type: 'button', label: 'Clique em mim', onClickAction: { type: 'click' } },
],
}
<WidgetRenderer
widget={widget}
onAction={(action, formData) => console.log(action, formData)}
/>
Tipos de Widget
Layout
{ "type": "row", "gap": 2, "children": [...] }
{ "type": "col", "gap": 2, "children": [...] }
{ "type": "box", "background": "gradient-ocean", "padding": 4, "radius": "lg", "children": [...] }
Tipografia
{ "type": "title", "value": "Título", "size": "2xl", "weight": "bold" }
{ "type": "text", "value": "Texto do corpo", "variant": "bold" }
{ "type": "caption", "value": "Texto pequeno" }
{ "type": "label", "value": "Rótulo do campo", "fieldName": "email" }
Interativos
{ "type": "button", "label": "Enviar", "variant": "default", "onClickAction": { "type": "submit" } }
{ "type": "input", "name": "email", "placeholder": "Digite o email" }
{ "type": "textarea", "name": "mensagem", "placeholder": "Sua mensagem" }
{ "type": "select", "name": "plano", "options": [{ "value": "pro", "label": "Pro" }] }
{ "type": "checkbox", "name": "concordo", "label": "Eu concordo", "defaultChecked": false }
Exibição
{ "type": "badge", "label": "Novo", "variant": "secondary" }
{ "type": "icon", "iconName": "check", "size": "lg" }
{ "type": "image", "src": "https://...", "alt": "Imagem", "width": 100, "height": 100 }
{ "type": "divider" }
Exemplo: Cartão de Voo
const flightWidget: Widget = {
type: 'ui',
children: [
{
type: 'box', background: 'gradient-ocean', padding: 4, radius: 'lg', children: [
{
type: 'row', justify: 'between', children: [
{
type: 'col', gap: 1, children: [
{ type: 'caption', value: 'partida' },
{ type: 'title', value: 'SFO', size: '2xl', weight: 'bold' },
]
},
{ type: 'icon', iconName: 'plane', size: 'lg' },
{
type: 'col', gap: 1, align: 'end', children: [
{ type: 'caption', value: 'chegada' },
{ type: 'title', value: 'JFK', size: '2xl', weight: 'bold' },
]
},
]
},
]
},
],
}
Exemplo: Formulário
const formWidget: Widget = {
type: 'ui',
title: 'Formulário de Contato',
asForm: true,
children: [
{
type: 'col', gap: 3, children: [
{ type: 'input', name: 'nome', placeholder: 'Seu nome' },
{ type: 'input', name: 'email', placeholder: 'Endereço de email' },
{ type: 'textarea', name: 'mensagem', placeholder: 'Mensagem' },
{ type: 'button', label: 'Enviar', variant: 'default', onClickAction: { type: 'submit' } },
]
},
],
}
Gradientes
| Nome | Descrição |
|---|---|
gradient-ocean | Gradiente azul turquesa |
gradient-sunset | Gradiente laranja rosa |
gradient-purple | Gradiente roxo |
gradient-cool | Gradiente azul frio |
gradient-midnight | Gradiente azul escuro |
Manipulando Ações
const handleAction = (action: WidgetAction, formData?: WidgetFormData) => {
switch (action.type) {
case 'submit':
console.log('Dados do formulário:', formData)
break
case 'click':
console.log('Botão clicado')
break
}
}
Skills Relacionadas
# Componente completo do agente
npx skills add inference-sh/skills@agent-ui
# Blocos de interface de chat
npx skills add inference-sh/skills@chat-ui
# UI de ferramenta
npx skills add inference-sh/skills@tools-ui
Documentação
- Visão Geral dos Widgets - Entendendo widgets
- Esquema do Widget - Estrutura JSON do widget
- Agentes que Geram UI - Construindo UIs generativas
Documentação do componente: ui.inference.sh/blocks/widgets