Revisado por Iván Quintas, Editor de IA News
OpenUI: que tu chatbot responda con gráficos y formularios
OpenUI, de Thesys, hace que el modelo devuelva componentes de interfaz en vez de texto, con menos tokens que JSON. Cómo funciona, qué ahorra y cuánto cuesta.
“Tu chatbot responde con texto. A veces lo que quieres es un gráfico, una tabla o un formulario”, resumía Precis0x en X. Es lo que hace OpenUI, de la empresa Thesys: el modelo no te devuelve un párrafo, sino componentes de interfaz que se pintan en tu app mientras llegan. El tuit acierta en lo técnico. Lo que no cuenta es que la vía recomendada pasa por un servicio de pago.
Cómo funciona
El centro de todo es OpenUI Lang, un lenguaje por líneas pensado para streaming y más compacto que JSON.
- Tú eliges los componentes que el modelo puede usar: gráficos, formularios, tablas, layouts. Sus props se tipan con Zod.
- OpenUI genera el system prompt a partir de esa lista. El modelo no puede inventarse un botón que no existe.
- El modelo responde en OpenUI Lang y tu app va renderizando a medida que llegan los tokens.
Hay runtimes oficiales para React, Vue 3, Svelte 5 y Angular. Eso sí: las librerías de componentes ya hechas y la interfaz de chat lista para usar son solo de React. También trae integraciones con LangChain y LangGraph, assistant-ui y React Email.
Para empezar:
npx @openuidev/cli@latest create --name genui-chat-appEl ahorro de tokens
El tuit dice que gasta “alrededor de la mitad” que JSON, con un 67% en el mejor caso. Cuadra con el benchmark del repo:
| Comparación | Ahorro de tokens |
|---|---|
| Frente a Vercel json-render (7 escenarios) | 52,8% |
| Frente a Thesys C1 JSON | 51,7% |
| Mejor caso: formulario de contacto | 67,1% |
El matiz: es un benchmark de la propia Thesys. Las respuestas las genera GPT-5.2 en OpenUI Lang y después ese mismo resultado se convierte a JSON para contar tokens; el JSON no lo escribe un modelo. Y la latencia es una estimación fija a 60 tokens por segundo, no una medición.
Lo que cuesta
El código tiene licencia MIT y el parser y el renderizador no dependen de la nube. Pero la documentación ofrece dos caminos:
- OpenUI Gateway (el recomendado): llamas con el SDK de OpenAI a la API de Thesys y necesitas una
THESYS_API_KEY. - Tu propio backend: llamas directamente a OpenAI, Anthropic u otro proveedor, y la salida inválida puede pasar por el servicio “Autofix” de Thesys.
Los planes de OpenUI Cloud cobran por llamada, y los tokens del modelo se pagan aparte:
| Plan | Precio | Llamadas al mes |
|---|---|---|
| Free | 0 $ | 3.000 |
| Build | 49 $ | 25.000 |
| Grow | 499 $ | 500.000 |
Ofrecen además modelos gratis por tiempo limitado, unas 100 llamadas al día, pero con esos tus datos pueden usarse para entrenar.
La letra pequeña
No es nuevo. El repo existe desde diciembre de 2024 y tiene 12.766 estrellas; OpenUI Lang llegó después. Las últimas versiones de sus paquetes son del 15 de octubre.
Cuidado con el nombre. wandb/openui, de Weights & Biases, es otro proyecto que genera interfaces a partir de una descripción. Y el README avisa de que OpenUI no tiene ningún token ni criptomoneda oficial.
Merece la pena si…
- Tienes un asistente que devuelve datos y quieres mostrarlos como tabla o gráfico, no como texto.
- Trabajas en React, o te basta con el runtime en Vue, Svelte o Angular y tus propios componentes.
- Te importa el coste de tokens en respuestas largas.
Si generas interfaces con agentes de código, mira también Awesome DESIGN.md y sus guías de UI para agentes.
¿Te ha servido? Márcanos como fuente preferida en Google y verás antes nuestros artículos en Noticias destacadas, AI Overviews y AI Mode.
📎 Fuente original: GitHub / thesysdev ↗