<aside> <img src="/icons/dialogue_blue.svg" alt="/icons/dialogue_blue.svg" width="40px" />

• Índice de contenidos </aside>

¿Qué es Generative UI?

Una interfaz de usuario generativa (GenUI) es un tipo de interfaz que el sistema compone en tiempo real con ayuda de modelos de IA, en lugar de dejarla prefijada por adelantado. El usuario no se mueve por un conjunto fijo de pantallas; el propio sistema arma la interfaz adecuada a cada petición, combinando componentes, datos y contexto en tiempo real.

Por qué es importante

En el software tradicional, definimos vistas y flujos por adelantado y pedimos a las personas que encajen en ellos: casi todos ven lo mismo, estén empezando o sean power users.

Con Generative UI ocurre lo contrario: la interfaz se arma “a la carta” según la tarea, el contexto y el nivel de la persona, ya sea un planner simple, una comparación compleja o un formulario mínimo para avanzar. Esto importa porque:

• Reduce la carga cognitiva: la UI se configura sola en lugar de obligar a las personas a aprender menús complejos.
• Aumenta la personalización: diferentes usuarios pueden ver diferentes interfaces en el mismo producto.
• Cambia el enfoque del diseño: de "¿cuántas pantallas?" a "¿qué resultados ayudamos a los usuarios a alcanzar?".

<aside> <img src="/icons/bullseye_blue.svg" alt="/icons/bullseye_blue.svg" width="40px" />

Características clave

Creación dinámica: Los agentes de IA crean componentes de UI en tiempo real basándose en:

• Contexto e intención del usuario
• Estado actual de la conversación
• Requisitos de la aplicación
• Capacidades del dispositivo </aside>

<aside> <img src="/icons/magic-wand_blue.svg" alt="/icons/magic-wand_blue.svg" width="40px" />

Más allá del texto

En lugar de simplemente responder con texto, la IA puede generar experiencias interactivas completas que incluyen:

• Formularios y visualizaciones de datos
• Herramientas interactivas y simulaciones
• Juegos y aplicaciones
• Flujos de trabajo personalizados
• Experiencias multimedia enriquecidas </aside>

Taxonomía: Static, Declarative, Open-Ended

Siguiendo la clasificación popularizada por herramientas como CopilotKit y los SDK de Vercel/OpenAI, podemos hablar de tres grandes aproximaciones:

<aside> <img src="/icons/circle-alternate_blue.svg" alt="/icons/circle-alternate_blue.svg" width="40px" />

Static Generative UI

• Control: Tú controlas casi todo, la IA apenas decide qué componente usar y con qué datos rellenarlo.

• Cómo funciona: defines tus componentes (cards, tablas, banners, etc.) y un protocolo como AG‑UI permite que el agente diga “usa este componente con estos props”.

• Cuándo usarlo: cuando quieres experiencias muy consistentes de marca y poco riesgo visual (productos core, banking, salud, educación formal, etc.).

</aside>

<aside> <img src="/icons/square-alternate_blue.svg" alt="/icons/square-alternate_blue.svg" width="40px" />

Declarative Generative UI

• Control: Repartido. El agente decide la estructura (qué tipo de bloques y en qué orden), y tu frontend decide el look & feel exacto.

• Cómo funciona: el modelo devuelve un esquema con bloques genéricos (“lista de cards”, “formulario con 3 pasos”, “tabla con filtros”) usando formatos tipo A2UI u Open‑JSON‑UI.

• Tu capa de UI luego mapea ese esquema a tu design system: Card, FilterBar, DataTable, etc.

• Cuándo usarlo: cuando quieres bastante flexibilidad, pero sin renunciar a consistencia visual y accesibilidad. </aside>

<aside> <img src="/icons/triangle-alternate_blue.svg" alt="/icons/triangle-alternate_blue.svg" width="40px" />

Open-Ended Generative UI

• Control: Mucha libertad para el modelo, menos restricciones desde tu UI.

• Cómo funciona: el agente genera interfaces completas (HTML, apps MCP, iframes, etc.) que pueden incluir calendarios, visualizaciones a medida, juegos o herramientas específicas.

• Cuándo usarlo: en exploración, prototipos rápidos o productos donde la personalización extrema pesa más que la rigidez de marca. </aside>

Lo bueno y lo complicado

Beneficios

✅ Velocidad de desarrollo: Puede reducir de forma significativa trabajo repetitivo en UI (sobre todo variantes y estados), aunque el impacto real depende del stack y el equipo.

✅ Personalización: Verdadera individualización vs. talla única para todos

✅ Adaptabilidad: Las interfaces responden al contexto, dispositivo y necesidades del usuario en tiempo real

✅ Mantenimiento reducido: Actualizaciones universales basadas en reglas en lugar de específicas por versión

✅ Accesibilidad: Optimización automática de accesibilidad

✅ Multiplataforma: Una sola especificación funciona en múltiples plataformas

Desafíos y limitaciones

⚠️ Velocidad de generación: Actualmente puede tardar más de 60 segundos

⚠️ Imprecisiones ocasionales: Los resultados pueden tener errores

⚠️ Preocupaciones de previsibilidad: Algunos argumentan que las UIs deben ser claras y predecibles, no cambiar dinámicamente

⚠️ Complejidad de testing: Más difícil probar variaciones infinitas de UI

⚠️ Curva de aprendizaje: Los usuarios pueden necesitar adaptarse a interfaces cambiantes

⚠️ Control de diseño: Equilibrar la libertad de la IA vs. la consistencia de marca

DEMO MCP-UI

DEMO MCP-UI

<aside> <img src="/icons/dialogue_blue.svg" alt="/icons/dialogue_blue.svg" width="40px" />

</aside>

Cómo documentar Generative UI en un design system

Ver para creer: DEMOs