Was ist Generative UI?

Generative UI ist ein Interface-Paradigma, bei dem Layout und Komponenten zur Laufzeit durch ein LLM auf Basis des User-Intents zusammengestellt werden, statt für jeden Screen vorab designt zu sein. Im Commerce passt sich an, was ein Shopper sieht, wobei die Komponenten meist aus einem festen Design System stammen, damit Brand und Accessibility auch bei dynamischer Komposition halten.

Definition

Ein Generative-UI-Stack registriert beim LLM einen Katalog typisierter React- oder Web-Components, stellt Daten über MCP- oder REST-Tools bereit und gibt dem Modell ein Ziel wie "Hilf dem User, seine Küche zu vervollständigen". Das Modell emittiert dann einen strukturierten JSON-Tree, kein freies HTML, der Komponenten wie ProductCard, ComparisonTable oder QuizStep auswählt, mit Content befüllt und anordnet. Ein Renderer validiert den Tree gegen erlaubte Shapes, hydriert ihn mit Daten und schickt ihn an den Browser. Weil der Output Constrained ist, kann das Modell weder Attribute erfinden noch das Design System brechen, und die für Layout-Entscheidungen verbrauchten Tokens bleiben kalkulierbar.

Warum es zählt

Vorgebackene Seiten verschwenden Real Estate bei Shoppern mit ungewöhnlichem Intent und vergraben die richtige Antwort hinter Clicks. Generative UI erlaubt einer Composable-Commerce-Frontend, auf die tatsächliche Frage zu reagieren: Eine Query wie "Laufschuhe für Senkfüße unter 120 Euro" liefert eine Vergleichstabelle, einen Fitting-Guide und drei direkte Empfehlungen statt einer generischen Kategorieseite. Es erweitert Personalization über reine Content-Swaps hinaus auf Layout-Ebene und ergänzt Conversational Commerce. Risiko ist Hallucination in Layout-Entscheidungen, daher lehnen Renderer invalide Trees ab und fallen auf kanonische Seiten zurück; Eval-Suites decken häufige Queries ab.

Anwendungsfälle

Eine Search-Page zeigt für komplexe Anfragen Quiz, Guide und Ergebnisraster, für klare Produktsuchen nur das Raster. Ein B2B-Portal generiert ein Procurement-Dashboard mit Quote-Requests und Reorder-Buttons, abgestimmt auf die Rolle des Buyers. Eine Post-Purchase-Page komponiert Tracking, passende Accessoires und Care Instructions zu den gerade bestellten Items, alles aus einem einzigen Agent-Call.

Verwandt

Mehr dazu: Agentic Frontend Management Platform · Composable Visual Page Builder.