¿Qué es Generative UI?

Generative UI es un paradigma de interfaz en el que el layout y los componentes se ensamblan en tiempo de ejecución mediante un LLM en respuesta a la intención del usuario, en lugar de diseñarse de antemano para cada pantalla. En contextos de comercio, adapta lo que ve el comprador, a menudo extrayendo componentes de un design system fijo para que la marca y la accesibilidad se mantengan incluso cuando la composición es dinámica.

Definición

Un stack de Generative UI registra un catálogo de React o Web Components tipados ante el LLM, expone datos a través de herramientas MCP o REST y le da al modelo un objetivo como "ayudar al usuario a completar su cocina". El modelo emite entonces un árbol JSON estructurado, no HTML libre, que elige componentes como ProductCard, ComparisonTable o QuizStep, los rellena con contenido y los organiza. Un renderer valida el árbol frente a las formas permitidas, lo hidrata con datos y lo envía al navegador. Como la salida está restringida, el modelo no puede inventar atributos ni romper el design system, y los tokens dedicados a decisiones de layout se mantienen acotados.

Por qué es importante

Las páginas predefinidas desaprovechan espacio con compradores de intenciones inusuales y esconden la respuesta correcta detrás de varios clics. Generative UI permite que un frontend de Composable Commerce responda a la pregunta real, de modo que una consulta como "necesito zapatillas de running para pie plano por menos de 120 euros" pueda devolver una tabla comparativa, una guía de ajuste y tres recomendaciones directas en lugar de una página de categoría. Extiende la Personalization más allá de las sustituciones de contenido hacia decisiones de layout, y combina de forma natural con el Conversational Commerce. El riesgo es la Hallucination en las decisiones de layout, por lo que los renderers rechazan árboles no válidos y recurren a páginas canónicas, con suites de Eval que cubren las consultas habituales.

Casos de uso

Una página de búsqueda muestra un quiz, una guía y una cuadrícula de resultados para una consulta compleja, pero solo una cuadrícula para una búsqueda de producto clara. Un portal B2B genera un dashboard de compras con solicitudes de cotización y botones de recompra ajustados al rol del comprador. Una página posterior a la compra ensambla el seguimiento del envío, accesorios complementarios e instrucciones de cuidado específicas de los artículos recién pedidos, todo impulsado por una única llamada al agente.

Relacionado

Descubre Agentic Frontend Management Platform · Composable Visual Page Builder.