Was ist generative UI?

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.

Video von der Google Cloud Next '26: Generative UI für jeden Agent, überall: A2UI, AG-UI, MCP-Apps und mehr

Wichtigste Ergebnisse

  • Was ist das? Generative UI ist eine Frontend-Architektur, bei der die Benutzeroberfläche in Echtzeit von KI erstellt wird, anstatt von Entwickelnden fest codiert zu werden.
  • Funktionsweise: GenUI verwendet fortschrittliche KI-Modelle wie LLMs, um Schnittstellenlayouts in Echtzeit zu erstellen, zu ändern und zu verbessern. Dabei werden das Nutzerverhalten, der Kontext und die Absicht berücksichtigt.
  • Bedeutung: Sie tragen dazu bei, die Nutzererfahrung zu verbessern und zu personalisieren. Außerdem können Entwicklungszyklen drastisch beschleunigt werden, da die KI automatisch Teile der Benutzeroberfläche erstellen und anpassen kann.

Warum ist generative UI wichtig?

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.

  • Verbesserte Nutzerfreundlichkeit: Empirische Studien zeigen, dass Nutzerinnen und Nutzer interaktive Inhalte, die mit generativer KI erstellt wurden, passiven Textausgaben, herkömmlichen Suchergebnissen oder Standard-Markdown-Ausgaben deutlich vorziehen.
  • Hyperpersonalisierung: Schnittstellen können von Anfang an speziell auf das Verhalten und die Vorlieben einzelner Nutzer zugeschnitten werden. Mit herkömmlichen Methoden mit festem Code ist das kaum möglich.
  • Schnellere Entwicklungszyklen: Durch die Automatisierung der Erstellung und Anpassung von Schnittstellenkomponenten im laufenden Betrieb kann GenUI die Entwicklung drastisch beschleunigen, was zu einer schnelleren Markteinführung und einem geringeren Wartungsaufwand für das Frontend führt.
  • Architektonische Skalierbarkeit: Bei herkömmlichen Methoden sind für jedes neue Nutzerszenario manuelle Frontend-Updates erforderlich. Mit GenUI lässt sich die Benutzeroberfläche auch für Sonderfälle skalieren, ohne dass CSS oder Komponenten ständig manuell angepasst werden müssen.

Das Spektrum der generativen Benutzeroberfläche: Kontrolle versus Flexibilität

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.

Führende Frameworks und Protokolle

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.

Operative Überlegungen für die Umstellung auf die Produktion

Für die Umstellung von GenUI vom Prototyp zur Produktion müssen vier wichtige Aspekte berücksichtigt werden:

1. Vertrauensgrenzen festlegen (Sicherheit)

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.

2. Intent vor Pixel testen

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.

3. Latenzsteuer verwalten (Leistung)

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).

4. Automatisierte Barrierefreiheit (A11y)

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.

Entscheidungs-Framework für die Implementierung

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

Gleich loslegen

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

Google Cloud