Generative UI: Jenseits der Textwand – Wie KI Benutzeroberflächen neu definiert

Generative UI: Jenseits der Textwand – Wie KI Benutzeroberflächen neu definiert
Deine Reaktion:

Ein Entwickler sitzt an seinem Arbeitsplatz und tippt eine Freitextabfrage in ein Chatfeld: „Plan mir ein Wochenende in Porto, das wetterfest ist.“ Der Bildschirm zeigt keinen klassischen Antworttext, sondern eine neu zusammengesetzte Seite: eine Überschrift, ein Wetter-Widget, eine Tagesplanung und eine Packliste – alles in einem sauberen Dashboard-Arrangement, das der Entwickler nie manuell designt hat. Er klickt kurz durch die Elemente, überprüft die Daten und nickt. Die Oberfläche ist zur Laufzeit aus einer KI-Abfrage entstanden – ein Beispiel für Generative UI.

In einem Tech-Talk bei Pixelmatters im Juli 2026 hat sich ein Entwickler und Designer genau dieser Frage gewidmet: Wie verändert Generative UI die Art, wie wir Software bauen und nutzen? Seine Präsentation trägt den Titel „Eliminating the Wall of Text“ und zeigt anhand praktischer Demos, wie KI-generierte Schnittstellen die klassische Chat-Antwort – diesen endlosen Textblock – durch dynamische, interaktive Elemente ersetzen. Er betont dabei, dass es nicht nur um das Design einzelner Widgets geht, sondern um eine grundlegende Verschiebung: Die Benutzeroberfläche wird nicht mehr statisch im Voraus definiert, sondern entsteht im Moment, basierend auf dem, was der Nutzer wirklich will. Das klingt futuristisch, doch die Bausteine dafür existieren bereits.

Drei Domänen der Generativen UI: vom Design-Tool bis zur Laufzeit

Wenn von „Generative UI“ die Rede ist, schwingt schnell die einfache Formel mit: „KI erzeugt eine Benutzeroberfläche.“ Doch diese Definition greift zu kurz, wie er in seinem Vortrag klarstellt. Er unterscheidet drei klar getrennte Einsatzgebiete. Erstens: die KI-gestützte Generierung von UI-Designs in Tools wie Figma oder Claude Design – hier entstehen statische Layouts, die dann von Menschen weiterverarbeitet werden. Zweitens: die Erzeugung von Web-Code über Chatbots wie ChatGPT, die komplette Apps ausspielen, und drittens: die dynamische, serverbasierte Generierung von Interfaces zur Laufzeit, also genau das, was in den Demos gezeigt wird.

Der Fokus des Vortrags liegt auf der dritten Kategorie – der Schnittstelle zwischen Server und Interface. Er erinnert daran, dass heutige Large Language Models noch zu groß sind, um direkt im Browser zu laufen; erst wenn das in Zukunft auf Geräten möglich ist, werde sich eine ganz neue Ära auftun. Bis dahin bleibt die Architektur zentral: Der Server berechnet, was der Nutzer braucht, und schickt strukturierte Daten an den Client, der sie in UI-Elemente übersetzt. Diese Trennung ist essenziell, um Sicherheit und Performance zu gewährleisten.

Die Textwand fällt: Wie Generative UI User-Interfaces lebendig macht

Der offensichtlichste Nutzen Generativer UI liegt in der Überwindung der „Wall of Text“, die in herkömmlichen KI-Chats dominiert. Wenn du einem Chatbot eine komplexe Frage stellst – etwa nach den besten Restaurants in einer fremden Stadt oder den wichtigsten Schritten für ein Projekt – bekommst du oft eine ellenlange Antwort, die du selbst parsen musst. Die neuen Ansätze zeigen, wie das anders geht: Gemini integriert Google Maps-Karten direkt in die Chatantwort, Claude erzeugt interaktive Flashcards für Lerninhalte. Diese ephemeren UI-Elemente – Karten, Kalender, Formulare, Diagramme – werden im Moment generiert und passen sich exakt der Intention des Nutzers an. Er erklärt, dass wir zunehmend weniger „Textwände“ und mehr dynamische Oberflächen sehen werden, die direkt auf die jeweilige Anfrage zugeschnitten sind.

Das hat auch einen praktischen Vorteil: Der Nutzer muss nicht mehr zwischen Chat und anderer App wechseln. Die UI kommt direkt in den Dialog, ist sofort interaktiv und braucht keine manuelle Konfiguration. Statt eine lange Liste von Restaurants zu lesen, bekommst du eine Karte mit Markierungen, Filtern und Bewertungen – alles direkt an deine Anfrage gekoppelt. Er nennt das „Intent-basierte UI“: Die Oberfläche wird von der Absicht des Nutzers gesteuert, nicht von einem starren Layout.

Die geschäftliche Dimension: Vom Feature-Overload zur Super-App

Aber Generative UI ist mehr als nur ein nettes Gimmick für Chat-Erlebnisse. Der Autor bringt eine unternehmerische Perspektive ins Spiel: Jede erfolgreiche digitale Plattform muss eine wachsende Anzahl an Funktionen und Integrationen verwalten – von der eigenen App bis zu Drittanbieterdiensten wie Airbnb oder OpenTable. Jede neue Integration multipliziert die Komplexität der UI-Entwicklung. Wenn du also ein Produkt mit vielen Features, Integrationen und Skalierung hast, wirst du irgendwann an Ressourcen- und Zeitgrenzen stoßen – und damit deine Wettbewerbsfähigkeit verlieren. Hier sieht er einen Ausweg in der „Super-App“-Idee: eine Plattform, die alles abdeckt, um das UI-Problem zu vereinfachen. Als Beispiel führt er WeChat an, das bereits 2017 seine Mini-Programme einführte, um die riesige Nutzerbasis ohne die Notwendigkeit nativer Apps zu bedienen.

WeChat Mini-Programme bedienen heute schätzungsweise eine Milliarde Nutzer – für Shopping, Essensbestellungen, Terminbuchungen, Fahrradverleih, Flugverfolgung, Cloud-Dokumente und sogar Steuererklärungen. Er merkt an, dass dieser Ansatz in China früh notwendig war, weil die Infrastruktur- und Produktdesign-Herausforderungen mit der Skalierung zunahmen. Im Westen hingegen setzt man zunehmend auf KI-Chatbots als Einstiegspunkt: Statt QR-Codes oder App-Stores werden freie Texteingaben zur Intention. Der Schlüsselbegriff dabei ist „Intent“: Jede Anfrage erfordert eine flexibel angepasste UI, und genau hier kommt Generative UI ins Spiel. Ohne diesen Intent-basierten Einstieg, so weist er darauf hin, würden westliche Apps vermutlich in QR-Code-Scans versinken.

Die drei Kategorien der Generativen UI: Static, Declarative, Open-ended

Um das Potenzial zu strukturieren, stellt der Vortrag drei Kategorien entlang der Generationsachsen vor – also dem Maß an Freiheit, das das Modell bei der UI-Erstellung erhält. Sie sind nicht strikt getrennt, sondern können sich mischen. Die erste Kategorie nennt sich „Static/Controlled“. Hier bleibt die Kontrolle weitgehend beim Entwickler: Die App besitzt bereits eine Reihe von vordefinierten Komponenten und Layouts, und die KI liefert nur noch die Daten bzw. Auswahlparameter. Ein Beispiel: Eine Liste von Unterkünften auf einer Website wird gefiltert nach „Parks & Natur“ – das geht ohne KI per SQL. Aber wenn ein Nutzer „Zeig mir coole Cafés, die heute geöffnet sind, mit besserer Bewertung als 4,5“ eintippt, dann kann eine KI diese Anfrage verstehen und die bestehenden Karten und Filter neu zusammenstellen. Die Oberfläche bleibt dabei im Design-System, aber die Zusammenstellung ist dynamisch.

In der zweiten Kategorie, „Declarative“, geht es einen Schritt weiter. Hier beschreibt das Modell die gewünschte UI in einem strukturierten Format – meist JSON – und ein Renderer auf dem Client setzt diese in echte Komponenten um. Er zeigt eine Demo einer Reiseplanungsseite: Der Nutzer tippt „Plane ein wetterfestes Wochenende von Paris nach Porto“ und die KI erzeugt nicht nur eine Antwort, sondern eine komplette Seite mit Einführungsabsatz, Flugschätzung, Wetterwidget, Tagesplänen und Packliste – in einem Dashboard-Layout, das sie selbst gewählt hat. Diese Spezifikationen laufen über Protokolle wie A2UI und AG-UI, die eine Maschine-zu-Menschen-Kommunikation auf UI-Ebene ermöglichen. Er betont, dass solche Spezifikationen wie „Regeln“ sind, die von SDKs ausgeführt werden – also Executoren.

Die dritte Kategorie, „Open-ended“, ist die freieste: Die KI generiert direkt HTML, CSS und JavaScript, das im Browser ausgeführt wird. Das birgt jedoch erhebliche Sicherheitsrisiken. Aus diesem Grund nutzt man dafür oft sandboxed iframes oder serverbasierte Hosting-Lösungen. Er zeigt, dass dieser Ansatz durchaus für interne Dashboards oder Reporting-Tools brauchbar ist, aber für öffentlich zugängliche Apps nicht empfehlenswert. Stattdessen empfiehlt er, auf die declarative Variante zu setzen, gerade wenn man Sicherheit und Flexibilität vereinen möchte.

Praktische Umsetzung: Werkzeuge, Protokolle und die Zukunft

Wie setzt man Generative UI konkret um? Er demonstriert zwei Flows: einen static/controlled und einen declarative. Im ersten nutzt er einen agentic Backend-Framework wie Mastra, LangGraph oder ADK, kombiniert mit dem AI SDK für das Streaming von Chat-Nachrichten. Der Nutzer schickt eine Anfrage, die der Agent versteht, ruft ein Tool auf, das in der App die Daten filtert und zurückgibt, und dann rendert das Frontend basierend auf diesem Tool-Result die passende vorgefertigte Komponente – z.B. „EmptyMatch“ oder „PlaceCard“. Das ist eine sanfte Migration, weil das Design-System unverändert bleibt.

Im declarative Flow geht es weiter: Der Agent generiert eine Spezifikation in A2UI, die eine Baumstruktur von Komponenten beschreibt. Diese wird über AG-UI als Event an den Client geschickt, der sie mit einem Renderer wie CopilotKit interpretiert. CopilotKit bietet drei Pakete: Runtime für den Server, React-Core für den Browser und einen A2UI-Renderer für die Komponenten-Katalogisierung und das Rendering. Damit werden komplexe UI-Änderungen zur Laufzeit möglich, ohne dass man für jeden Fall manuell Code schreiben muss. Er fasst zusammen: „Wenn Code billig ist, delegieren Menschen die Erstellung an KI und konzentrieren sich auf höhere Anforderungen wie Spezifikationen.“ Höhere Abstraktionsebenen bedeuten mehr Flexibilität und Interoperabilität – und das könnte langfristig der entscheidende Vorteil sein.

Was bedeutet das für die Praxis? Generative UI könnte den Entwicklungsaufwand für komplexe Anwendungen deutlich reduzieren, besonders bei rapiden Prototypen oder datengetriebenen Interfaces. Statt jeden Zustand im Voraus zu definieren, reicht es, die Regeln festzulegen und die KI die Zusammenstellung übernehmen zu lassen. Das ist keine bloße Zukunftsmusik, sondern eine konkrete Erweiterung des Werkzeugkastens, die bereits jetzt verfügbar ist – auch wenn sie noch in den Kinderschuhen steckt. Die nächsten Jahre werden zeigen, ob sich die Spezifikationen wie A2UI durchsetzen und ob WeChat-ähnliche Super-Apps im Westen Fuß fassen. Sicher ist: Die Textwand wird bald genauso antiquiert wirken wie das Faxgerät.

Quelle: boda.sh

Deine Reaktion:
Artikel teilen:
Krötzsch-Check0 — 100
Fakten 70
Relevanz 60
Hype 60
Einschätzung 65
Redaktion 50 Stand 50 · noch keine Stimmen
Ist das Hype?
Sebastian Krötzsch
Autor

Sebastian Krötzsch

Sebastian Krötzsch schreibt auf sebask.de über Künstliche Intelligenz, Automatisierung, digitale Systeme und die Frage, was davon im Alltag wirklich nützlich ist. Ohne Buzzword-Nebel, dafür mit klarem Blick auf Praxis, Tools und echte Wirkung.