Generative UI: drei Ansätze für KI

Generative UIs: Drei Strategien für KI-Agenten

KI-Agenten erzeugen nicht nur Text – sie erstellen dynamische UI-Komponenten, die perfekt auf den Kontext des Nutzers abgestimmt sind. So können interaktive Diagramme, Formulare oder Karten gerendert werden, statt statischer Bildschirme. Dieser Ansatz löst das Problem der Interface-Variabilität, bei dem vordefinierte Zustände nicht jeden Fall abdecken können.

Wichtige Anwendungsfälle

Generative UIs (GenUI) kommen dort zum Einsatz, wo Interfaces zu flexibel für fest codierte Lösungen sind. Die Hauptscenarien:

• Live-Artefakte: Der Agent erzeugt ein editierbares Objekt – wie ein Diagramm oder eine Tabelle. Nutzer passen Parameter an, und die KI reagiert in Echtzeit mit Vorschlägen.
• Datenerfassung: Dynamische Formulare, maßgeschneidert für die Aufgabe, z. B. Buchungsoptionen.
• Datenvisualisierung: Diagramme oder Karten ersetzen Textbeschreibungen und reduzieren die kognitive Belastung.
• Optionsnavigation: Filter und Vergleiche für den Umgang mit mehreren Ergebnissen.

Ansatz 1: Direkte HTML-Generierung

Das Modell gibt HTML-Code direkt an den Browser aus, der ihn rendert. Der Ablauf ist einfach: Prompt → HTML → Rendering.

Vorteile:

• Schnell umsetzbar.
• Das Modell hat volle Freiheit bei der Auswahl von Elementen.

Nachteile:

• Verletzt die Konsistenz des Designsystems: Knöpfe und Farben variieren stark.
• Sicherheitsrisiken: Ausführbarer Code vom Modell.
• Erfundene Attribute oder Browserfehler.

Ideal für Prototypen oder Tools ohne strenge UI-Vorgaben. In der Produktion meiden wegen Instabilität.

Ansatz 2: Deklarative Beschreibungen

Der Agent erzeugt JSON, das die Struktur beschreibt: Komponententypen, Reihenfolge und Props. Der Client rendert mit einem Katalog atomarer Elemente (Texte, Knöpfe, Eingabefelder). Basierend auf Googles A2UI-Protokoll.

Vorteile:

• Konsistentes Styling im Einklang mit dem Designsystem.
• Flexible Zusammensetzung ohne eigene Komponenten.

Nachteile:

• Strukturelle Abweichungen je nach Prompt.
• Abhängig von der Modellqualität.

Perfekt für hochvariable Visualisierungen bei Erhalt der Markenidentität.

Ansatz 3: Auswahl aus Komponentenbibliothek

Der Agent wählt eine fertige Komponente aus einem Katalog und füllt deren Props. Maximale Kontrolle: Kein Code- oder Strukturaufbau.

Das Tambo-Framework setzt das über das AG-UI-Protokoll um: Komponenten werden mit Zod-Schemas registriert. Unterstützt zwei Typen:

• Generativ: Direkt im Chat gerendert (Diagramme, Karten).
• Interaktiv: React-Komponenten überall in der UI mit bidirektionaler Bindung (Agent überwacht Zustand).

Vorteile:

• Volle Kontrolle über Optik und UX.
• Wasserdichte Sicherheit.

Nachteile:

• Alle benötigten Komponenten im Voraus antizipieren.

Vergleich der Ansätze

| Kriterium | HTML | Deklarativ | Statisch (Tambo) |

|-----------|------|------------|------------------|

| Visuelle Kontrolle | Niedrig | Mittel | Hoch |

| Freiheit des Agents | Maximal | Hoch | Begrenzt |

| Komplexität | Niedrig (+Abstimmungsaufwand) | Mittel | Mittel |

| Sicherheit | Riskant | Sicher | Sicher |

Umsetzung in einem Analytics-Produkt

In einem KI-Assistenten für Marketing-Analytics teilen wir die UI auf:

• Arbeitsbereich: Interaktive Komponenten (Tabellen). Agent aktualisiert Daten, ohne die Struktur anzutasten.
• Chat: Generative Komponenten (Insight-Karten, Mini-Diagramme).

Registrierung: Komponenten mit Beschreibungen und Schemas. Agent streamt Props in Echtzeit.

Wichtige Erkenntnisse

• GenUI mindert die kognitive Belastung, erfordert aber Balance zwischen Freiheit und Kontrolle.
• Wählen Sie den Ansatz je nach UI-Variabilität und Bedarf an Vorhersagbarkeit.
• Tambo und A2UI sind reife Tools für React-Projekte (Tambo v1.0 erscheint Februar 2026).
• Streng auf Sicherheit und Cross-Browser-Kompatibilität testen.
• Nutzer im Fokus: KI soll verbessern, nicht stören.

— Editorial Team