What is Generative UI?

Generative UI is an interface paradigm where layout and components are assembled at runtime by an LLM in response to user intent, rather than pre-designed for every screen. In commerce contexts it adapts what a shopper sees, often pulling components from a fixed design system so brand and accessibility hold even when the composition is dynamic.

Definition

A Generative UI stack registers a catalogue of typed React or Web Components with the LLM, exposes data through MCP or REST tools and gives the model a goal such as "help the user complete their kitchen". The model then emits a structured JSON tree, not free HTML, that picks components like ProductCard, ComparisonTable or QuizStep, fills them with content and arranges them. A renderer validates the tree against allowed shapes, hydrates it with data and ships it to the browser. Because output is constrained, the model cannot invent attributes or break the design system, and tokens spent on layout decisions stay bounded.

Why it matters

Pre-baked pages waste real estate on shoppers with unusual intents and bury the right answer behind clicks. Generative UI lets a Composable Commerce frontend respond to the actual question, so a query like "I need running shoes for flat feet under 120 euros" can return a comparison table, a fit guide and three direct recommendations rather than a category page. It extends Personalization beyond content swaps into layout decisions and pairs naturally with Conversational Commerce. The risk is Hallucination in layout choices, so renderers reject invalid trees and fall back to canonical pages, with Eval suites covering common queries.

Use cases

A search page renders a quiz, a guide and a results grid for a complex query, but just a grid for a clear product search. A B2B portal generates a procurement dashboard with quote requests and reorder buttons tuned to the buyer's role. A post-purchase page assembles tracking, complementary accessories and care instructions specific to the items just ordered, all driven by a single agent call.

Related

Explore Agentic Frontend Management Platform · Composable Visual Page Builder.