Crear interfaces de usuario siempre ha seguido la misma lógica: los diseñadores crean y definen las pantallas y los desarrolladores maquetan e implementan ese diseño para que los usuarios utilicen esas pantallas tal y como se definieron.
La llegada de la IA esta revolucionando el sector y ya se están viendo nuevas propuestas que pueden cambiar esa forma de trabajar o incluso de revolucionar la web y las aplicaciones como las vemos actualmente.
Comparativa generativeUi
Una propuesta emergente es el Generative UI (GenUI), donde la inteligencia artificial pasa de ser un asistente de chat útil a directamente integrarse en una web o aplicación y responder al usuario generando una interfaz interactiva adaptada a la necesidad del usuario en ese momento
En este artículo veremos qué es Generative UI, cómo funciona a nivel técnico, pros y contras actuales y cuáles son los enfoques disponibles para implementarla —incluyendo el protocolo emergente A2UI
¿Qué es la Generative UI?
Generative UI es un patrón donde un modelo de inteligencia artificial —(LLM)— produce una descripción estructurada de interfaz: controles, elementos, formularios, listas, llamadas a la acción, pasos de confirmación… y el cliente los renderiza con componentes nativos, reales y controlados.
No se trata de «hacer un frontend con IA» ni de generar código HTML aleatorio en el servidor. La clave está en que la IA orquesta la composición de componentes ya existentes y auditados, adaptando la interfaz al contexto, la intención del usuario y el estado del sistema.
Esto resulta especialmente valioso cuando:
- El sistema necesita pedir información que no se conoce de antemano (campos variables según el contexto).
- El flujo depende del estado previo, políticas, inventario o disponibilidad en tiempo real.
- El resultado debe ser accionable: reservar, aprobar, pagar, generar un documento, abrir un ticket…
La diferencia es concreta. Compáralo con una respuesta textual clásica:
- IA con texto: «Dime cuántas personas quieres, qué fecha y a qué hora.»
- IA con Generative UI: renderiza directamente un selector de fecha y hora, un input de número de personas y un botón «Buscar disponibilidad» — todo enlazado al contexto y listo para actuar.
El salto no es solo estético. Es un cambio de paradigma que transforma el chat en acciones dentro de la web.
La evolución de la UI: de estática a generativa
Para entender este cambio, podemos hacer un repaso a como ha evolucionado el diseño de interfaces a lo largo del tiempo:
- UI Estática: pantallas fijas, actualizaciones manuales, layouts predefinidos para todos los usuarios por igual.
- UI Responsive: adaptación al tamaño de pantalla, pero sin adaptación al usuario ni al contexto.
- UI Adaptativa (personalización basada en reglas): segmentación, A/B testing, reglas de negocio. Mayor relevancia, pero todavía reactiva y manual.
- Generative UI: la IA construye la interfaz óptima en tiempo real, anticipando la intención del usuario y adaptándola al contexto sin intervención manual.
Cómo funciona la Generative UI por dentro
A alto nivel, el flujo de Generative UI tiene cuatro pasos:
- Captura de intención: el usuario expresa lo que necesita.
- Inferencia del modelo: un LLM interpreta la intención, el contexto y el estado del sistema y genera una descripción estructurada de la interfaz que debe mostrarse.
- Renderizado del cliente: el frontend interpreta esa descripción y construye la UI con componentes reales del design system.
- Interacción: el usuario interactúa con la UI.
como funciona generative UI
Dos enfoques para implementar Generative UI
En la práctica, existen dos grandes estrategias para probar GenUI:
Enfoque 1: GenUI a medida
Es un enfoque que consiste en obligar al modelo a devolver JSON en el formato que tu necesitas con un schema definido por el equipo y renderizado manualmente en el cliente.
Ventajas:
- Muy rápido para prototipos.
- Máxima libertad para diseñar el «lenguaje» de UI propio.
- Fácil de implementar con cualquier framework moderno
Limitaciones:
- Versionado del contrato: cualquier cambio en el schema puede romper clientes existentes.
- Gestión de acciones: normalizar eventos del usuario (clicks, submits) y su payload se vuelve complejo a escala.
- Seguridad: sin un contrato explícito y un catálogo cerrado, el modelo puede generar componentes no auditados.
Enfoque 2: GenUI por protocolo y catálogo — A2UI
El estándar emergente es A2UI (Agent-to-User Interface). El agente nunca envía código ejecutable — envía datos estructurados que el cliente interpreta con componentes de confianza.
A2UI: el protocolo que estandariza la Generative UI
A2UI es un ecosistema open source compuesto por tres capas:
- Una especificación de mensajes (actualmente v0.8 estable / v0.9 en evolución activa).
- Renderers por plataforma: Angular (
@a2ui/angular), React (@a2ui/react), Lit (@a2ui/lit) y Flutter. - Una librería compartida (
@a2ui/web_core) que gestiona el procesamiento de mensajes, el estado, el data binding y las actualizaciones incrementales.
Para entender A2UI, es útil pensar en cuatro piezas fundamentales:
1. Surfaces (superficies)
Una surface es el contenedor de UI. El agente puede crearla, actualizarla e indicar qué componente actúa como raíz. Piénsalo como el «lienzo» donde se construye la interfaz.
2. Componentes con IDs y referencias
Los componentes se definen con identificadores únicos y se referencian entre sí. Esto permite actualizaciones parciales sin reconstruir todo el árbol, lo que es fundamental para un rendering eficiente con streaming.
3. Data model y data binding
El estado de la UI se gestiona en un modelo de datos separado. Los inputs se enlazan a rutas dentro de ese modelo (/reservation/guests, /reservation/date…). El agente puede actualizar el modelo directamente y la UI reacciona en consecuencia.
4. Acciones
Cada interacción del usuario dispara una acción nombrada (por ejemplo, search_availability o confirm_reservation). El cliente captura esas acciones mediante un action handler y las envía al agente, cerrando el ciclo.
El agente no envía HTML ni JavaScript — envía una descripción declarativa que el renderer interpreta con componentes del design system auditados.
Más información en la guía oficial de configuración del cliente A2UI.
Caso práctico: demo de reservas con Angular 21 + A2UI + OpenAI
Para ilustrar cómo funciona todo esto en la práctica, construimos una demo funcional de reservas de restaurante usando Angular 21 con SSR, el renderer A2UI v0.9 y OpenAI GPT-4o-mini como modelo de lenguaje.
El flujo de experiencia de usuario
Demo A2UI
El usuario simplemente escribe o interactúa con la interfaz, y el sistema:
- Al conectar, el servidor envía automáticamente el formulario de búsqueda como mensajes A2UI: selector de fecha, número de personas, preferencias.
- El usuario rellena el formulario y pulsa «Buscar disponibilidad». Se dispara la acción
search_availability. - El backend llama a OpenAI con el contexto del formulario. El modelo devuelve JSON A2UI con tres restaurantes disponibles, cada uno con su tarjeta de opciones y botones de reserva.
- El usuario elige restaurante y horario. Se dispara la acción
confirm_<id>_<hora>. - El servidor construye la tarjeta de confirmación final con el resumen, la política de cancelación y el CTA «Confirmar reserva».
Por qué el streaming mejora la experiencia
El streaming no es un detalle de implementación — es un diferencial de UX. Con SSE, el cliente recibe y renderiza el formulario inicial en el primer «tick», muestra los resultados según llegan del modelo y puede corregir la UI incrementalmente si el agente decide pedir información adicional. La interfaz se siente viva, no cargada de golpe.
En A2UI, el streaming es un mecanismo natural: la UI se expresa como una secuencia de actualizaciones incrementales del estado, no como un bloque monolítico.
Aquí podéis ver el ejemplo completo implementado con OpenIA
Seguridad en Generative UI
El mayor problema de GenUI: cuanta más libertad tiene el modelo para generar la interfaz, mayor es el riesgo. A2UI aborda esto con principios de seguridad explícitos que vale la pena conocer.
Los cuatro pilares de seguridad de A2UI
- No ejecutar código generado: la UI es declarativa, no genera scripts. El agente no puede inyectar JavaScript.
- Catálogo como allowlist: el agente solo puede instanciar componentes preaprobados. Si un componente no está en el catálogo, no puede renderizarse. Tu design system auditado es la frontera de seguridad.
- Acciones bajo control del cliente: el cliente decide qué acciones son válidas y cómo se procesan. El servidor no puede ejecutar acciones arbitrarias.
- Validación de mensajes: errores comunes como surface IDs inválidas, component IDs duplicados, paths erróneos o fallos de schema validation deben capturarse y manejarse explícitamente.
Contras actuales de Generative UI en producción
La Generative UI no es magia — tiene desafíos que un equipo de producto debe anticipar antes de adoptarla.
Latencia y rendimiento
Generar UI dinámicamente requiere procesamiento en tiempo real. Sin streaming y sin una estrategia de «first paint rápido», el usuario percibe la espera.
Consistencia de marca y design system
Sin un catálogo cerrado, el modelo puede generar interfaces incoherentes con el design system corporativo.
Accesibilidad
Las interfaces generadas dinámicamente deben seguir cumpliendo las guías WCAG. Cada componente del catálogo debe ser accesible por diseño.
Privacidad y cumplimiento
Las interfaces adaptativas se nutren de contexto del usuario. En entornos regulados (GDPR, sector salud, finanzas), hay que definir claramente qué datos fluyen hacia el modelo y cómo se gestionan.
Costes
Cada interacción puede disparar llamadas al modelo. Un sistema en producción necesita:
- Trazas end-to-end: acción del usuario → prompt → respuesta del modelo → mensajes A2UI → render.
- Métricas: latencia por etapa, tokens consumidos, errores de validación, reintentos.
- Control de costes: modelos por tarea (clasificación de intención vs. generación UI completa), límites de output, caché donde aplique.
Casos de uso reales de Generative UI
Perplexity AI
Perplexity es actualmente el referente más claro. No solo te da texto; su función Pages genera una estructura visual completa (layout) basada en tu consulta.
Vercel (v0.dev)
Vercel ha llevado la Generative UI al flujo de trabajo de producción para desarrolladores. Su herramienta v0 permite generar interfaces completas de React (usando Tailwind y Shadcn UI) mediante lenguaje natural.
Conclusión: de interfaces que se diseñan a interfaces que se generan
La Generative UI no es una tendencia tecnológica más. Es un cambio en el modelo mental de cómo construimos y entregamos experiencias digitales. Las interfaces dejan de ser artefactos estáticos diseñados por adelantado y se convierten en respuestas inteligentes y accionables al contexto de cada usuario en cada momento.
Mi opinion personal después de probarlo es que estamos en una fase demasiado temprana, por tanto puede ser ideal para probar en proyectos internos o proyectos B2B donde la UX puede ser más experimental.
Tenemos que esperar un poco más y ver como van evolucionando estos patrones.