- Framework de UI generativa em que a IA recebe prompts do usuário, gera uma estrutura JSON e a renderiza com componentes previamente definidos
- Gera uma UI dinâmica e personalizada a partir de prompts, enquanto garante uma saída segura e previsível por meio de um catálogo de componentes pré-definido
- Ao definir no catálogo os componentes, ações e funções de validação disponíveis, a IA gera JSON restrito (constrained) apenas dentro desse escopo
- O JSON gerado é renderizado progressivamente em streaming, permitindo que a UI seja exibida imediatamente conforme a resposta do modelo chega
- É possível exportar a UI gerada como código React executável de forma independente (projeto Next.js) e também distribuí-la como código React puro, capaz de funcionar sem dependências de runtime
- Tanto React quanto React Native são compatíveis com renderização usando o mesmo catálogo e formato de especificação, permitindo cobrir web e mobile com uma única definição
- Componentes fornecidos
- Layout: Card, Grid, Stack, Tabs, Carousel, Collapsible, Accordion
- Entrada: Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Toggle, ToggleGroup, Rating
- Exibição: Text, Heading, Image, Badge, Alert, Progress, Skeleton, Spinner, Table, Avatar, Separator
- Interação: Button, ButtonGroup, Link, DropdownMenu, Dialog, Drawer, Popover, Tooltip, Pagination
- Gráficos: BarGraph, LineGraph
- Cada componente oferece suporte a data binding bidirecional por meio de
{ $bindState }
- É possível definir de forma declarativa regras de validação como
required, email e minLength com o array checks
- Os manipuladores de eventos podem ser vinculados com
on.press, on.change, on.select, on.submit etc.
npm install @json-render/core @json-render/react
1 comentários
Impressionante. Acho que, daqui para frente, isso pode ser um ótimo meio para conectar planejamento, design e publicação.