La UI generativa se vuelve práctica con json-render y jev
La mayoría de los productos de IA todavía coloca el modelo dentro de una ventana de chat fija. Eso funciona para responder preguntas, pero se queda corto en flujos de reservas, listas de soporte o paneles operativos que necesitan tarjetas, formularios, tablas y acciones.
La UI generativa permite que el modelo ayude a componer la interfaz. La versión útil no genera píxeles sin control ni React que nadie revisó. Selecciona componentes y acciones de un catálogo que tu equipo ya mantiene.
En este artículo veremos json-render de Vercel Labs, la combinación experimental con jev, el papel de AI Gateway y una pequeña demo interactiva.
Por qué jev está llamando la atención en Vercel AI Gateway
Vercel informó que Jev fue el modelo adoptado más rápido en la historia de AI Gateway. Durante el primer día, TypeSafe AI llegó aproximadamente al 13 % de los equipos, cerca de 2 veces la familia GPT-5.6 y 6 veces Fable 5.1.
Fuente: Vercel en X.
Jev es gratis en Vercel AI Gateway hasta el 25 de septiembre, una buena oportunidad para probar typesafe-ai/jev con composiciones reales.
Fuente: Vercel Developers en X.
La adopción no equivale a estar listo para producción. Sí demuestra que existe demanda por modelos capaces de tomar decisiones estructuradas, no solo de escribir textos largos.
Chat fijo frente a UI generativa
Chat fijo: solicitud -> texto del LLM -> burbuja de chat
UI generativa: solicitud -> elegir composición -> renderizar componentes aprobados
La aplicación sigue siendo dueña de los componentes, el acceso a datos, los manejadores, la validación y los permisos. El catálogo le da al modelo espacio para componer sin entregarle el control del producto.
Qué aporta json-render
json-render es un framework de UI generativa de Vercel Labs:
- Defines un catálogo con componentes, acciones y propiedades de Zod.
- El modelo genera una especificación JSON limitada a ese catálogo.
- Tus componentes reales de React, o React Native, la renderizan.
- SpecStream puede enviar parches JSONL para que la interfaz aparezca de forma progresiva.
El catálogo es un límite del producto. La creatividad permanece dentro del sistema de diseño.
Por qué las UI que generan árboles token a token pueden ser lentas
Una salida estructurada clásica le pide a un modelo grande que escriba un árbol JSON completo token a token. En una UI, ese árbol puede ser ancho y profundo, lo que retrasa la primera renderización útil.
El experimento público de Chris Tate combinó json-render con jev de TypeSafe AI, un modelo de decisiones estructuradas, mediante experimental_composeSpec y experimental_createEvaluator.
Demo de Chris Tate en X.
jev se concentra en qué componentes usar y dónde colocarlos. Tu renderer sigue dibujando la interfaz.
Arquitectura con Vercel AI Gateway
Cliente -> tu API (servidor) -> AI Gateway (typesafe-ai/jev) -> Spec -> React
import { experimental_createEvaluator } from "@json-render/core";
const evaluate = experimental_createEvaluator({
apiKey: process.env.AI_GATEWAY_API_KEY!,
model: "typesafe-ai/jev",
});Trata las APIs experimental_* como versiones no publicadas y fija sus versiones. Confirma que Gateway permite TypeSafe AI en tu equipo. Valida cada Spec antes de renderizar y maneja los estados finish, limit y unavailable.
Prueba una composición desde el catálogo
El playground envía la instrucción a una ruta del servidor que compone una Spec con jev en Vercel AI Gateway. La clave de API permanece en el servidor y nunca entra en el bundle del navegador. Si la ruta no está disponible, el playground muestra el error dentro de la interfaz.
Playground de jev en vivo
Compón una especificación de interfaz desde el catálogo usando AI Gateway en el servidor.
La clave permanece en el servidor y nunca llega al navegador.
Catálogo: Card, Text, Metric, Button, List · 73/600
Listo
Elige una instrucción y compón para mostrar una especificación en este lienzo.
Cuándo usar cada enfoque
| Enfoque | Úsalo cuando |
|---|---|
| Catálogo + jev / evaluator | Tienes un sistema de diseño y necesitas layouts dinámicos con límites claros |
| JSON estructurado con un LLM | Las Specs son pequeñas y la latencia es aceptable |
| Llamadas a herramientas | El modelo debe llamar APIs, no componer pantallas |
| Generación libre de código o píxeles | Solo estás explorando. Hay mucha libertad y también mucho riesgo |
Lista antes de publicar
- Mantén
AI_GATEWAY_API_KEYsolo en el servidor. - Confirma el acceso de Gateway a
typesafe-ai/jev. - Valida el catálogo y la Spec con Zod.
- Limita
maxElements,maxStepsymaxDepth. - Ofrece una interfaz fija como alternativa.
- Mide tu propia latencia y coste. No copies los tiempos de la demo.
La UI generativa no reemplaza la ingeniería frontend. Hace que la calidad del catálogo, las acciones y la validación sean todavía más importantes. El modelo se convierte en una capa entre la intención y las capacidades que ya publicaste.