Eine Chat-Antwort hat oft die falsche Ausgabeform für eine echte Produktaufgabe.
Wenn ein Benutzer nach einer Portfolioaufstellung, einem Zeitrahmen oder einer Vergleichstabelle fragt, ist die nützlichste Antwort oft eine Komponente, nicht ein Absatz. Das ist die Idee hinter generative UI: Lass das Modell an der Auswahl oder Konfiguration von Schnittstellenelementen teilnehmen, nicht nur beim Generieren von Text.
Der wichtige Teil ist Kontrolle. Das Modell sollte keine beliebigen UI erfinden. Es sollte aus einem vertrauenswürdigen Satz von Komponenten auswählen, von denen dein System bereits weiß, wie man sie sicher rendern kann.
Ein besseres Muster
Anstatt ein LLM zu bitten, freiform Frontend-Markup zu erzeugen, gib ihm ein eingeschränktes Vokabular:
type UiIntent =
| { type: "chart"; metric: string; period: "7d" | "30d" | "90d" }
| { type: "table"; entity: "orders" | "users"; limit: number }
| { type: "summary"; topic: string };
Dann ordnet die Anwendung dieses Ausgabeformat realen Komponenten zu:
function RenderIntent({ intent }: { intent: UiIntent }) {
switch (intent.type) {
case "chart":
return <RevenueChart metric={intent.metric} period={intent.period} />;
case "table":
return <EntityTable entity={intent.entity} limit={intent.limit} />;
case "summary":
return <SummaryCard topic={intent.topic} />;
}
}
Das gibt dir den besten Teil von generative UI, ohne die Kontrolle über das Layout an ein stochastisches System abzugeben.
Wo Server-Komponenten helfen
React Server-Komponenten machen dieses Muster natürlicher, weil der Server:
- private Daten abrufen kann
- das Ergebnis gestalten kann
- den richtigen Komponentenbaum rendern kann
ohne jede interne Abhängigkeit an den Browser zu liefern.
Der Kompromiss besteht darin, dass du immer noch eine klare Grenze zwischen dem, was das Modell entscheidet, und dem, was die Anwendung garantiert, benötigst.
Kompromisse
Generative UI ist nützlich, wenn:
- die Form der Schnittstelle vom Benutzerintent abhängt
- der Satz der unterstützten Komponenten bekannt ist
- die Anwendung von dynamischer Komposition profitiert
Es ist weniger nützlich, wenn die UI statisch, eng workflow-gesteuert oder stark überprüft sein sollte.
Weiterführende Literatur