# OpenUI: El Framework Open Source de Generative UI que Usa la Mitad de Tokens que JSON (lo probamos) **URL:** \ **Category:** AI Dev Tools — General\ **Tags:** react, open-source, agentes-ia, yodev-tested, generative-ui, openui, a2ui\ **Created:** [18 Octubre, 2026 19:56 UTC](https://www.yodev.dev/t/openui-el-framework-open-source-de-generative-ui-que-usa-la-mitad-de-tokens-que-json-lo-probamos/5713 "2026-10-18T19:56:18Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Devy](https://yyz1.discourse-cdn.com/flex009/user_avatar/www.yodev.dev/devy/32/62_2.png) [@Devy](https://www.yodev.dev/u/Devy)\ **Post date:** [18 Octubre, 2026 19:56 UTC](https://www.yodev.dev/t/openui-el-framework-open-source-de-generative-ui-que-usa-la-mitad-de-tokens-que-json-lo-probamos/5713/1 "2026-10-18T19:56:19Z")
OpenUI es un framework open source (MIT) que hace que un LLM responda con componentes de interfaz (tablas, gráficos, formularios, botones) en lugar de texto, y los dibuja en pantalla mientras el modelo todavía está escribiendo. Lo logra con OpenUI Lang, un lenguaje compacto que, según el benchmark de sus propios autores, usa cerca de la mitad de tokens que el JSON equivalente. La versión 1.0 del lenguaje salió el 12 de octubre. ![demo](https://canada1.discourse-cdn.com/flex009/uploads/inovacon/original/2X/4/4335652809945ad72d45112b0f7df27328fd3ec9.gif) > **[GitHub - thesysdev/openui: The Open Standard for Generative UI](https://github.com/thesysdev/openui)** > > The Open Standard for Generative UI > **✅ yoDEV Tested** · 18 de octubre de 2026 Generamos un proyecto con el CLI de OpenUI 0.6.0 en nuestro sandbox, verificamos sus tipos y pasamos programas de OpenUI Lang por el parser 1.0.1; no ejecutamos el chat contra un modelo. Los resultados que reportamos como nuestros salen de esa prueba. ## ¿Qué es generative UI y qué hace OpenUI? Generative UI (interfaz generativa) significa que la respuesta del modelo _es_ la interfaz. Le pides a un asistente las ventas del trimestre y, en vez de una tabla en markdown, recibes un gráfico de barras real con un botón debajo. OpenUI es un framework para construir eso, creado por Thesys, con 11.7K estrellas en GitHub y runtimes para React, Vue, Svelte y Angular. El flujo tiene cinco pasos: 1. Defines (o reutilizas) una **librería de componentes** , cada uno con sus props tipadas en Zod. 2. OpenUI **genera el system prompt** a partir de esa librería, así que el modelo solo conoce los componentes que tú permites. 3. El modelo responde en **OpenUI Lang**. 4. La respuesta llega al cliente en streaming. 5. El **renderer** la dibuja de forma progresiva a medida que llegan los tokens. El punto de control está en el paso 2: el modelo no puede inventar un componente que no esté en tu librería. Si lo intenta, el parser lo rechaza (lo comprobamos más abajo). ## ¿Cómo se escribe OpenUI Lang? Es una sentencia por línea, `nombre = expresión`, con los componentes llamados por posición. Este es el programa que usamos en nuestra prueba, escrito contra la librería por defecto que trae el proyecto generado: ```auto root = Stack([card]) card = Card([header, chart, askBtn]) header = CardHeader("Ventas por trimestre", "Datos de ejemplo") chart = BarChart(["Q1", "Q2", "Q3"], [Series("Ventas", [120, 180, 150])]) askBtn = Button("Explicar", @ToAssistant("Explica este gráfico")) ``` `root` es el punto de entrada. Los nombres se pueden usar antes de definirlos (`card` referencia a `header`, que llega dos líneas después) y no muestran nada hasta que existen. Las llamadas que empiezan con `@` son built-ins: `@ToAssistant` le envía un mensaje al asistente cuando el usuario hace clic en el botón. ¿Por qué líneas y no JSON? Porque un objeto JSON a medio escribir no es válido hasta que se cierra la última llave, mientras que cada línea de OpenUI Lang está completa por sí sola. Le pasamos el programa al parser de streaming una línea a la vez, y esto es lo que se podía renderizar después de cada una: | Después de la línea | Árbol renderizable | | --- | --- | | 1 | `Stack` (vacío) | | 2 | `Stack → Card` (vacío) | | 3 | `Card → [CardHeader]` | | 4 | `Card → [CardHeader, BarChart]` | | 5 | `Card → [CardHeader, BarChart, Button]` | Otros dos resultados de la misma prueba: - **El orden importa.** Con la línea `root` movida al final, no se podía renderizar nada hasta que llegó la última línea. Las notas de la versión 1.0 dicen exactamente eso: escribe `root` primero, como indica el system prompt generado. - **Los componentes desconocidos se rechazan.** Un programa que llamaba a `Sparkline`, que no está en la librería, devolvió un error `unknown-component` con la lista de componentes que sí existen, y no renderizó nada en su lugar. ## ¿De verdad usa la mitad de tokens que JSON? Según la medición del propio fabricante, sí: unos 52 por ciento menos en total, y hasta 67 por ciento menos en el mejor caso. Son cifras autorreportadas. Thesys las midió con `tiktoken` (encoder de GPT-5) en siete escenarios de interfaz, comparando OpenUI Lang con dos formatos JSON de streaming: json-render de Vercel y el C1 JSON del propio Thesys. | Escenario | Vercel JSON-Render | Thesys C1 JSON | OpenUI Lang | | --- | --- | --- | --- | | simple-table | 340 | 357 | 148 | | contact-form | 893 | 849 | 294 | | dashboard | 2,247 | 2,261 | 1,226 | | Total (7 escenarios) | 10,180 | 9,948 | 4,800 | La metodología y los pasos para reproducirlo están publicados en la carpeta `benchmarks/` del repo, algo que la mayoría de los benchmarks de fabricantes no ofrece. Nosotros no lo reprodujimos. Menos tokens importa por partida doble: pagas menos por respuesta, y la interfaz aparece antes, porque el modelo tiene menos que escribir hasta completar el componente. ## ¿OpenUI, A2UI o json-render? Los tres resuelven el mismo problema (que un agente responda con interfaz y no solo con texto), pero con apuestas distintas. A2UI es el protocolo de Google y json-render es el formato de Vercel; ambos se basan en JSON. El README de OpenUI incluye esta comparación, hecha por el fabricante sobre sus competidores, así que léela como posicionamiento y no como una evaluación independiente: | | OpenUI | json-render (Vercel) | A2UI (Google) | CopilotKit OpenGenUI | | --- | --- | --- | --- | --- | | Tokens | 1x | 3x | 3x | 4x | | Latencia (60 tok/s) | 4.9s | 14.2s | 14.2s | ~20s | | Componentes | Librería + propios | Librería + propios | Solo propios | Ninguno | | Plataformas | Web, móvil, email | Web, móvil, PDF, email, video | Web, iOS, Android | Web | | Chat UI incluido | Sí | No | No | Sí | Dos matices que la tabla deja ver: json-render cubre más formatos de salida (PDF y video), y A2UI tiene renderers nativos para iOS y Android. OpenUI no compite solo contra A2UI: también lo integra. El paquete `@openuidev/a2ui` es un cliente del protocolo A2UI que usa OpenUI Lang para el contenido de los componentes, así que no tienes que elegir uno u otro. ## ¿Cómo se instala OpenUI? El camino más rápido es el CLI, que genera una app Next.js completa con chat en streaming, la librería de componentes por defecto y un agente: ```bash npx @openuidev/cli@latest create --name genui-chat-app ``` Usa `--name` o una carpeta como argumento, no ambos: en nuestra prueba, pasar los dos detuvo el CLI con un error. Puedes elegir el backend del agente con `--backend-framework` (`langgraph` por defecto, o `vercel-ai-sdk`). Lo que obtuvimos: un proyecto Next.js 16 con un agente LangGraph, una ruta `/api/chat`, un selector de modelos, una herramienta de ejemplo para el clima y un archivo `AGENTS.md` con instrucciones de OpenUI para agentes de código. El proyecto pasó la verificación de tipos sin errores con los paquetes 1.0.1. No necesitas cuenta para generar el proyecto, pero sí para ejecutar el chat. Los siguientes pasos que indica el CLI son: ```bash cd genui-chat-app npx @openuidev/cli@latest generate-api-key npm run dev ``` `generate-api-key` inicia sesión en OpenUI Cloud y escribe `THESYS_API_KEY` en `.env`. Esto se debe a que el proyecto generado no llama directamente a OpenAI o Anthropic: su agente envía todas las llamadas al modelo a través de OpenUI Gateway (la API de Thesys) y guarda el historial de conversaciones en OpenUI Cloud. Un detalle más: el CLI recopila analíticas de uso anónimas por defecto. Puedes desactivarlas con `--no-telemetry` o con la variable de entorno `DO_NOT_TRACK=1`. ## ¿OpenUI es gratis? El framework sí: los paquetes son MIT y puedes usarlos sin pagar nada. OpenUI Gateway, el servicio que usa el proyecto generado, es comercial. Al momento de publicar esta nota, su página de precios indicaba: - Un plan **Free** con 3,000 llamadas a la API al mes, que incluye bring-your-own-key (BYOK) y un conjunto de modelos gratuitos. - Planes **Build** y **Grow** de 49 y 499 dólares al mes, con más llamadas. - Sin recargo sobre los tokens del modelo: pagas el precio del proveedor, o el proveedor te factura directamente si usas BYOK. - Autofix, que repara OpenUI Lang inválido sobre la marcha, con cobro por cada corrección. Un detalle que conviene que lea cualquier CTO: según esa misma página, los modelos gratuitos tienen límites de uso y **los datos de las solicitudes pueden usarse para entrenamiento** , mientras que los modelos de pago no retienen datos. Sirve para prototipar; no es donde deberían ir los datos de tus clientes. ## ¿Se puede usar OpenUI sin OpenUI Cloud? Sí. La documentación tiene una guía de self-hosting en la que montas tu propio backend con tus propias claves de proveedor: una ruta que lee `OPENAI_API_KEY` o `ANTHROPIC_API_KEY` desde el entorno del servidor, un cliente `fetchLLM` que apunta a tu propio `/api/chat`, y `restStorage` para guardar las conversaciones en tu propia base de datos. Anthropic necesita un paso extra, porque OpenUI no trae un adaptador para Anthropic: la ruta traduce el stream a eventos AG-UI y el cliente usa `agUIAdapter()`. El matiz es que los valores por defecto apuntan en la otra dirección. El proyecto generado está construido sobre el Gateway, y el `AGENTS.md` que crea le indica a tu agente de código que envíe las llamadas al modelo por ahí. Si quieres una instalación self-hosted, pídeselo explícitamente a tu agente cuando le encargues construirla. ## ¿Qué cambia en OpenUI Lang 1.0? La versión 1.0 (PR #1348, publicada el 12 de octubre) rompe compatibilidad y suma tres capacidades a las librerías de componentes: - **Acciones propias** con `defineAction`, para que un botón dispare tu propia lógica (por ejemplo, copiar un ID de pedido al portapapeles) y tu app la reciba tipada en `onAction`. - **Funciones de librería** con `defineFunction`, que el modelo llama igual que a los built-ins, como un `@Percent(done, total)`. - **`library.extend()`**, para derivar una librería de otra, agregando, reemplazando o quitando componentes sin tocar la base. La actualización se hace en conjunto: `@openuidev/lang-core` y `@openuidev/react-lang` 1.0, más el servidor que genera el system prompt, porque un prompt 1.0 enseña sintaxis que un cliente 0.x no ejecuta. Al momento de publicar esta nota, los runtimes de Vue, Svelte y Angular seguían en la versión 0.4 (OpenUI Lang 0.x); por ahora, las novedades de la 1.0 son solo para React. ## ¿Es lo mismo que OpenUI de Weights & Biases? No. `wandb/openui` es un proyecto anterior y sin relación, de Weights & Biases: describes una interfaz en lenguaje natural y genera HTML que puedes convertir a React o Svelte, una especie de v0 open source. El OpenUI de Thesys no es un generador de páginas: es un lenguaje y un runtime para que tu propio producto responda con interfaces. Si buscas “openui” vas a encontrar los dos. El README también advierte que OpenUI no tiene ninguna criptomoneda ni token oficial. ## ¿Cómo se usa con Claude Code, Codex o Cursor? OpenUI publica una Agent Skill que le enseña a tu agente de código el lenguaje, los paquetes del SDK y cómo depurar salidas mal formadas: ```bash npx skills add thesysdev/skills --skill openui ``` En un proyecto existente, `npx @openuidev/cli@latest setup-agent` agrega las mismas instrucciones a tu `AGENTS.md`, entre los marcadores `` y ``, así que si lo vuelves a ejecutar las actualiza sin tocar el resto del archivo. Como vimos antes, esas instrucciones favorecen el Gateway. ## ¿Para quién es OpenUI? Para equipos que construyen asistentes, copilotos o agentes cuyas respuestas hoy terminan en un texto largo que el usuario tiene que leer: dashboards, comparaciones, formularios, aprobaciones. Si tu producto ya parsea JSON de un LLM para dibujar componentes, OpenUI reemplaza esa capa frágil por un contrato tipado y en streaming del que el modelo no puede salirse. Si lo que buscas es que tu interfaz y tu agente compartan las mismas funciones, también te puede interesar [Agent-Native](https://www.yodev.dev/t/que-es-agent-native-y-como-permite-compartir-funciones-entre-tu-interfaz-y-tu-agente-de-ia/5424). Y si solo necesitas un chatbot que responda con texto, OpenUI agrega una complejidad que no te hace falta. * * * **¿Y tú?** ¿Tu producto ya muestra componentes generados por un LLM, o todavía responde solo con texto? _Poll ([view on site](https://www.yodev.dev/t/openui-el-framework-open-source-de-generative-ui-que-usa-la-mitad-de-tokens-que-json-lo-probamos/5713/1))_ Comenta abajo o, si este artículo te llegó por correo, responde directamente al email: tu respuesta se publica aquí. Relacionado: [Hallmark: El Skill que Hace que las Interfaces Generadas por IA Dejen de Parecer… Generadas por IA](https://www.yodev.dev/t/hallmark-el-skill-que-hace-que-las-interfaces-generadas-por-ia-dejen-de-parecer-generadas-por-ia/4017)