Die Zukunft der Benutzeroberflächen: Generative UI und Agenten gesteuerte Interfaces

Einleitung

In den letzten Jahren hat die Verwendung von künstlicher Intelligenz (KI) eine grundlegende Transformation in der Art und Weise, wie Benutzeroberflächen (UI) gestaltet und genutzt werden, ermöglicht. Ein herausragendes Beispiel dafür ist die Generative UI, die nicht nur einfache Textausgaben ermöglicht, sondern komplexe, dynamische und politisierte Nutzererfahrungen schafft. In diesem Artikel werfen wir einen detaillierten Blick auf die Generative UI, AG-UI und die Technologien, die hinter agenten-gesteuerten Schnittstellen stehen.

Was ist Generative UI?

Generative UI bezieht sich auf die Fähigkeit einer Benutzeroberfläche, teilweise oder vollständig durch KI-gestützte Agenten produziert zu werden. Anstelle der traditionellen Texteingabe kann der Agent auch:

• Stateful-Komponenten wie Formulare und Filter erzeugen
• Visualisierungen wie Diagramme und Tabellen anfertigen
• Mehrstufige Prozesse wie Assistenten erstellen
• Statusoberflächen wie Fortschrittsbalken anzeigen
  Die Hauptidee dabei ist, dass die UI immer noch von der Anwendung implementiert wird, während der Agent beschreibt, was geändert werden soll.

Die drei Hauptmuster der Generativen UI

1. Statische generative UI: Der Agent wählt aus einem festen Katalog von Komponenten aus und fügt Eigenschaften hinzu.
2. Deklarative generative UI: Der Agent gibt ein strukturiertes Schema zurück, das einem Renderer zugeordnet wird.
3. Vollständig generierte UI: Das Modell gibt Roh-Markup wie HTML oder JSX aus.

Die Mehrheit der Produktionssysteme verwendet derzeit statische oder deklarative Formen, da sie leichter zu sichern und zu testen sind.

Warum ist Generative UI für Entwickler wichtig?

Ein entscheidender Schmerzpunkt bei Agentenanwendungen ist die Verbindung zwischen dem Modell und dem Produkt. Ohne einen standardisierten Ansatz muss jedes Team individuelle Websockets, ad-hoc-Ereignisformate und einmalige Möglichkeiten zum Streamen von Werkzeugaufrufen und dem Status erstellen. Generative UI in Verbindung mit einem Protokoll wie AG-UI bietet ein konsistentes mentales Modell:

• Das Agenten-Backend gibt Status, Werkzeugaktivitäten und UI-Absichten als strukturierte Ereignisse aus, die vom Frontend konsumiert werden, um die Komponenten zu aktualisieren.
• Benutzerinteraktionen werden in strukturierte Signale umgewandelt, über die der Agent nachdenken kann.

Wie wirkt sich dies auf Endbenutzer aus?

Für Endbenutzer wird der Unterschied sichtbar, sobald der Arbeitsablauf nicht trivial wird. Ein Datenanalyse-Copilot kann Filter, Metrik-Widgets und Live-Diagramme zeigen, anstatt Diagramme nur textuell zu beschreiben. Ein Support-Agent kann Bearbeitungsformulare und Status-Zeitlinien anzeigen, anstatt lange Erklärungen darüber, was er getan hat. Dies ist, was CopilotKit und das AG-UI-Ökosystem “agenten-gesteuerte UI” nennen – Benutzeroberflächen, in denen der Agent in das Produkt eingebettet ist und die UI in Echtzeit aktualisiert, während die Benutzer durch direkte Interaktionen die Kontrolle behalten.

Der Protokollstapel: AG-UI, MCP-Apps, A2UI, Open-JSON-UI

Es gibt mehrere Spezifikationen, die definieren, wie Agenten ihre UI-Absichten ausdrücken. Die Dokumentation von CopilotKit und die AG-UI-Dokumente fassen drei Hauptspezifikationen der generativen UI zusammen:

1. A2UI von Google: Eine deklarative, JSON-basierte Generative-UI-Spezifikation, die für Streaming und plattformunabhängiges Rendering entwickelt wurde.
2. Open-JSON-UI von OpenAI: Eine offene Standardisierung des internen deklarativen Generative-UI-Schemas von OpenAI für strukturierte Schnittstellen.
3. MCP-Apps von Anthropic und OpenAI: Eine Generative-UI-Schicht über MCP, in der Werkzeuge interaktive Oberflächen in iframes zurückgeben können.

Diese Formate beschreiben, welche UI gerendert werden soll, z. B. eine Karte, Tabelle oder ein Formular, und die zugehörigen Daten.

Wichtige Erkenntnisse

1. Generative UI ist strukturierte UI und nicht nur ein Chat: Agenten geben strukturierte UI-Absichten wie Formulare, Tabellen und Fortschritt aus, die die App als echte Komponenten rendert, sodass das Modell zustandsabhängige Ansichten steuert.
2. AG-UI ist das Runtime-Pipe: AG-UI trägt Ereignisse zwischen Agent und Frontend, während A2UI, Open JSON UI und MCP-Apps definieren, wie UI als JSON oder iframe-basierte Payloads beschrieben wird, die die UI-Schicht rendert.
3. CopilotKit standardisiert Agent-zu-UI-Verkabelung: CopilotKit bietet SDKs, gemeinsamen Zustand, typisierte Aktionen und generative UI-Helfer, sodass Entwickler keine benutzerdefinierten Protokolle für das Streaming von Status, Werkzeugaktivität und UI-Updates erstellen müssen.
4. Statische und deklarative generative UI sind produktionstauglich: Die meisten realen Apps verwenden statische Kataloge von Komponenten oder deklarative Spezifikationen wie A2UI oder Open JSON UI, die Sicherheit, Tests und Layoutkontrolle in der Hostanwendung halten.
5. Benutzerinteraktionen werden zu erstklassigen Ereignissen für den Agenten: Klicks, Bearbeitungen und Einsendungen werden in strukturierte AG-UI-Ereignisse umgewandelt, die der Agent als Eingaben für Planungen und Werkzeugaufrufe konsumiert, was den menschlichen Kontrollzyklus schließt.

Fazit

Generative UI löst viele der Herausforderungen, die mit der Entwicklung und Nutzung von agenten-gesteuerten Schnittstellen verbunden sind. Wenn Sie neugierig sind, wie diese Ideen in realen Anwendungen umgesetzt werden, bietet CopilotKit Open Source-Lösungen zur Erstellung agenten-nativer Schnittstellen. Der Code und die Muster sind offen zugänglich und bieten Entwicklern die Möglichkeit, ihre eigenen Anwendungen in der spannenden Welt der Generativen UI zu kreieren.