Die generative Benutzeroberfläche (GenUI) ersetzt statische, vorgerenderte Vorlagen durch dynamische Oberflächen, die in Echtzeit erstellt werden. Anstatt dass ein Entwickler jeden möglichen Zustand fest codiert, orchestriert ein Large Language Model (LLM) die Benutzeroberfläche und passt Layout, Komponenten und Datenvisualisierung an die spezifische Nutzerabsicht und den Sitzungskontext an.
In der Praxis fungiert die Benutzeroberfläche als flexible Orchestrierungsebene. Es kann sofort ein Dashboard neu konfigurieren oder eine funktionale Mini-App erstellen, um eine bestimmte Anfrage zu bearbeiten, die eine statische Schnittstelle nicht vorhersehen konnte.
Frühe Integrationen von LLMs in Anwendungen litten oft unter dem „Wall of Text“-Problem. Modelle konnten zwar komplexe Aufgaben planen, ausführen und logisch durchdenken, aber ihre Ausgaben waren meist lange Absätze oder Standard-Markdown. Generative UI kann hier Abhilfe schaffen, indem sie die natürliche Schnittstelle für ein leistungsstarkes LLM zu einer vollständigen, funktionalen und interaktiven Nutzererfahrung macht.
Generative KI für die Benutzeroberfläche ist keine einzelne Technologie, sondern eine Reihe von Implementierungsstrategien. Die Wahl des richtigen Tools hängt von Ihren Anforderungen an Markensicherheit und Schutz ab.
Ansatz | So funktioniert es | Hinweise |
Statische GenUI | Der Agent wählt aus einer festen Bibliothek von handgefertigten Komponenten aus. | Mehr Kontrolle: Für Markenkonsistenz und Sicherheit ist gesorgt, aber die visuelle Flexibilität ist eingeschränkt. |
Deklarative GenUI | Der Agent gibt ein strukturiertes Schema (wie JSON) zurück, das UI-Elemente (Karten, Listen, Widgets) darstellt. | Ausgewogen: Lässt sich gut skalieren und behält die Konsistenz bei, während der Agent ausdrucksstark bleibt. |
Offene Fragen mit generativer KI beantworten | Der Agent generiert Rohcode (HTML/CSS), der im Frontend gerendert wird. | Maximale Flexibilität: Unbegrenzte Kreativität, aber erhebliche Sicherheitsrisiken (XSS) und Styling-Risiken. |
Ansatz
So funktioniert es
Hinweise
Statische GenUI
Der Agent wählt aus einer festen Bibliothek von handgefertigten Komponenten aus.
Mehr Kontrolle: Für Markenkonsistenz und Sicherheit ist gesorgt, aber die visuelle Flexibilität ist eingeschränkt.
Deklarative GenUI
Der Agent gibt ein strukturiertes Schema (wie JSON) zurück, das UI-Elemente (Karten, Listen, Widgets) darstellt.
Ausgewogen: Lässt sich gut skalieren und behält die Konsistenz bei, während der Agent ausdrucksstark bleibt.
Offene Fragen mit generativer KI beantworten
Der Agent generiert Rohcode (HTML/CSS), der im Frontend gerendert wird.
Maximale Flexibilität: Unbegrenzte Kreativität, aber erhebliche Sicherheitsrisiken (XSS) und Styling-Risiken.
Das Ökosystem für die Entwicklung von Agent-basierten Schnittstellen entwickelt sich rasant weiter. Es gibt bereits mehrere Frameworks, die den Transport und das Rendering von Benutzeroberflächen übernehmen.
A2UI ist ein von Google entwickeltes Open-Source-Toolkit für die Benutzeroberfläche, das die Erstellung von LLM-generierten Benutzeroberflächen über Vertrauensgrenzen hinweg erleichtert. Es verwendet einen hochsicheren, deklarativen JSONL-Stream (JSON Lines), um UI-Strukturen und Datenmodelle von beliebigen Agents an beliebige Clientanwendungen zu senden. Da A2UI deklarative Daten und keinen ausführbaren Code überträgt, ist es von Natur aus sicher und frameworkunabhängig. So kann die gleiche Agentenausgabe nativ im Web, in Flutter, Android und iOS gerendert werden. Agents können die Benutzeroberfläche für alle vorhandenen Designsysteme „sprechen“.
AG-UI ist ein universelles, bidirektionales Verbindungsprotokoll, das zwischen einem agentenbasierten Frontend und einem agentenbasierten Backend eingesetzt wird. Es wurde von CopilotKit entwickelt, übernimmt die komplexe Statussynchronisierung und unterstützt nahtlos verschiedene Spezifikationen für generative UIs. Es fungiert als Brücke, um die Ausgaben von Agenten in umfangreiche, interaktive Frontend-Komponenten zu übersetzen.
MCP Apps ist eine Model Context Protocol-UI-Erweiterung, die Benutzeroberflächen als interaktive „Ressourcen“ behandelt, die das Tool eines Agent zurückgeben kann. MCP-Server können UI-Komponenten erstellen und zurückgeben, die als HTML in geschützten iFrames gerendert werden. So können Drittanbieterdienste ihre eigene visuelle Identität in jedem konformen Agent beibehalten.
Für die Umstellung von GenUI vom Prototyp zur Produktion müssen vier wichtige Aspekte berücksichtigt werden:
Um UI-Injection zu verhindern, bei der durch Prompt-Injection das Modell gezwungen wird, schädlichen Code zu rendern, sollten Sie ein UI-Modell mit dem Prinzip der geringsten Berechtigung verwenden. Protokolle wie A2UI übertragen Daten, nicht Code, und der Client sollte nur vorab genehmigte, geprüfte Komponenten rendern.
Herkömmliche visuelle Regressionstests können bei den nicht deterministischen Schnittstellen von GenUI leichter fehlschlagen. Tests sollten auf probabilistische Zusicherungen umgestellt werden, um zu prüfen, ob die Absicht und die funktionalen Komponenten (z. B. ein bestimmter Button) vorhanden und interaktiv sind, unabhängig von ihrer genauen Platzierung.
Der zusätzliche Schritt zur Begründung wirkt sich auf die Zeit bis zur Interaktivität (Time to Interactive, TTI) aus. Um die Reaktionsfähigkeit zu erhalten, sollten Sie Streaming-UI-Updates implementieren, z. B. JSONL verwenden, um sofort mit dem Rendering zu beginnen, und vektorbasierte Cache-Mechanismen verwenden, um zuvor generierte UI-Strukturen für ähnliche Abfragen bereitzustellen (semantisches Caching).
Dynamische UIs müssen WCAG-konform sein. Nutzen Sie schemagesteuerte Barrierefreiheit, indem Sie die Anforderungen an die Barrierefreiheit in das zugrunde liegende JSON-Schema einbauen. Die Rendering-Engine kann dann automatisch die erforderlichen ARIA-Labels und -Rollen basierend auf dem angeforderten Komponententyp einfügen.
Faktor | Herkömmliche Benutzeroberfläche | Generative UI |
Entwicklungsgeschwindigkeit | Manuelle Sprintzyklen | On-Demand-Generierung |
Einheitliche UX | Höher (starres Designsystem) | Variable (kontextbezogene Anpassung) |
Sicherheitsrisiko | Geringer (statische Code-Prüfungen) | Höher (erfordert strenge Sandbox-Technologie) |
Primärer Anwendungsfall | Wichtige Workflows und Einstellungen | Datenerkennung und komplexe Abfragen |
Faktor
Herkömmliche Benutzeroberfläche
Generative UI
Entwicklungsgeschwindigkeit
Manuelle Sprintzyklen
On-Demand-Generierung
Einheitliche UX
Höher (starres Designsystem)
Variable (kontextbezogene Anpassung)
Sicherheitsrisiko
Geringer (statische Code-Prüfungen)
Höher (erfordert strenge Sandbox-Technologie)
Primärer Anwendungsfall
Wichtige Workflows und Einstellungen
Datenerkennung und komplexe Abfragen
Google Cloud bietet ein umfassendes Portfolio an Tools zum Erstellen, Verwalten und Skalieren von KI-Agenten, die generative Benutzeroberflächen bereitstellen können.



Profitieren Sie von einem Guthaben in Höhe von 300 $ und mehr als 20 immer kostenlose Produkten, um Google Cloud kennenzulernen.