Das Static Web ist tot

Seit der Erfindung von HTML lautet das Paradigma:

Der Entwickler entwirft ein Layout (Kopfzeile, Inhalt, Fußzeile).
Entwickler schreibt Code.
Seite „Benutzer besucht“.
Der Benutzer sieht genau, was der Entwickler entworfen hat.

Dies ist Statische Benutzeroberfläche. Im Idealfall passt es für 80 % der Benutzer. Die anderen 20 % beschäftigen sich einfach damit. Wenn ein Benutzer fragt „Zeige mir Flüge nach Paris“, zeigen wir eine Liste. Wenn ein Benutzer fragt „Vergleichen Sie das Wetter in Paris und London“, zeigen wir eine Textantwort an. Warum? Weil wir kein „Wettervergleichs-Widget“ entworfen haben. Wir haben lediglich ein „Fluglisten-Widget“ entworfen. Wir sind durch das eingeschränkt, was wir vorhergesagt haben, was der Benutzer wollen würde.

Generative UI durchbricht dieses Limit. Die KI entscheidet zur Laufzeit, welche Komponenten gerendert werden sollen. Benutzer: „Wetter vergleichen.“ AI: Beschließt, zwei „“-Komponenten nebeneinander zu rendern. Benutzer: „Buchen Sie einen Flug.“ AI: Beschließt, ein „“ zu rendern. Das Interface passt sich dem Intent an.

Warum Maison Code dies bespricht

Bei Maison Code sind wir besessen von der „Zero UI“-Zukunft. Wir glauben, dass der ultimative Luxus eine Schnittstelle ist, die Ihre Bedürfnisse antizipiert. Für unsere High-End-Concierge-Kunden reicht ein statisches Dashboard nicht aus. Wenn ein VIP-Kunde nach „Eine Wochenendreise nach Kyto“ fragt, sollte er keinen Textblock erhalten. Sie sollten sofort eine Karte, eine Liste mit Hotelreservierungen und ein Wetter-Widget erhalten. Wir implementieren Vercel AI SDK und React Server Components (RSC), um diese adaptiven Erlebnisse zu schaffen. Wir sprechen darüber, weil dies die größte Veränderung im Frontend Engineering seit React selbst ist.

Die Technologie: Vercel AI SDK (RSC)

Das Vercel AI SDK (insbesondere der „allow-rsc“-Modus) ermöglicht es dem LLM, React Components als Teil der Antwort zu streamen.

Wie es funktioniert (The Flow)

Benutzeranfrage: „Zeigen Sie mir den Aktienkurs von Apple.“
Serveraktion: Sendet eine Eingabeaufforderung an GPT-4.
Funktionsaufruf: Wir stellen Tools für GPT-4 bereit. „Javascript Werkzeuge: { show_stock: { Beschreibung: „Börsenticker-Chart anzeigen“, Parameter: z.object({ symbol: z.string() }) } } „
LLM-Entscheidung: GPT-4 sagt „Rufen Sie „show_stock“ mit dem Symbol „AAPL“ auf.“
Serverausführung: Der Server führt die Funktion aus. Aber statt JSON zurückzugeben, wird eine React Component zurückgegeben. „Javascript // server/actions.tsx asynchrone Funktion show_stock({ symbol }) { const data = waiting fetchStock(symbol); return ; } „
Streaming: Die Benutzeroberfläche streamt „“ an den Client. Der Client rendert es sofort.

Codebeispiel: Erstellen eines generativen Chats

„tsx // app/action.tsx import { createAI, getMutableAIState, render } from „ai/rsc“; import { z } from „zod“;

const ai = createAI({ Aktionen: { submitUserMessage: async (Inhalt: string) => { „Server verwenden“; const aiState = getMutableAIState();

  const ui = waiting render({
    Modell: „gpt-4-turbo“,
    Anbieter: openai,
    Nachrichten: [{ Rolle: „Benutzer“, Inhalt }],
    Werkzeuge: {
      get_crypto_price: {
        Beschreibung: „Ermitteln Sie den Preis einer Kryptowährung“,
        Parameter: z.object({coin: z.string() }),
        render: asynchrone Funktion* ({ Münze }) {
          yield <Spinner />; // Sofortiger Ladezustand
          const Preis = Warten auf fetchPrice(coin);
          return <CryptoCardcoin={coin} price={price} />; // Endgültige Benutzeroberfläche
        }
      }
    }
  });
  
  return { id: Date.now(), display: ui };
}

} }); „

Beachten Sie den „yield “. Das ist erstaunlich. Die KI erkennt die Absicht („Ich erhalte den Preis“) und zeigt eine Benutzeroberfläche an, bevor die Daten bereit sind. Dann ersetzt es den Spinner durch die Karte. Dies ist die Streaming-Benutzeroberfläche.

Anwendungsfälle für E-Commerce

Produktvergleich: Benutzer: „Welcher eignet sich besser zum Laufen, der Air Max oder der Pegasus?“ KI: Erzeugt ein „<ComparisonTable products={[A, B]} />“, in dem Gewicht und Polsterung hervorgehoben werden.
Größenhinweis: Benutzer: „Ich bin 1,80 m groß, welche Größe?“ AI: Rendert ein benutzerdefiniertes „“.
Bundle Builder: Benutzer: „Ich brauche ein Outfit für eine Gala.“ KI: Rendert ein „<LookBook items={[Suit, Tie, Shoes]} />“ mit der Schaltfläche „Alles in den Warenkorb legen“.

Die Design-Herausforderung

Generative UI ist ein Albtraum für Designer. Sie können „Die Seite“ nicht gestalten. Es gibt keine Seite. Sie müssen ein Komponentensystem entwerfen. Sie entwerfen die „Atome“ (Karten, Diagramme, Tabellen, Listen). Die KI fungiert als „Page Builder“. Dies erfordert ein striktes Designsystem (siehe Atomic Design), um sicherzustellen, dass alles, was die KI zusammenstellt, kohärent aussieht. Wenn nicht perfekt standardisierte Ränder und Typografie erzwungen werden, sieht das von der KI generierte Layout fehlerhaft aus.

Die Sicht des Skeptikers

„Das ist übertrieben. Zeigen Sie mir einfach den Text.“ Kontrapunkt: Text ist schwer zu analysieren. „Apple ist um 5 % auf 150 US-Dollar gestiegen“ ist schwerer zu lesen als ein grüner Chart, der steigt. Das Gehirn verarbeitet visuelle Elemente 60.000-mal schneller als Text. Bei der generativen Benutzeroberfläche geht es um Informationsdichte. Es ermöglicht uns, komplexe Daten (Tabellen, Diagramme) in einer Konversationsoberfläche zu vermitteln, ohne den Benutzer zu überfordern.

FAQ

F: Ist es langsam? A: Ja, GPT-4 ist langsam. Deshalb verwenden wir Streaming. Der Text/Spinner erscheint sofort. Die umfangreiche UI-Komponente wird 1 Sekunde später geladen. Es fühlt sich ansprechend an.

F: Kann es die Benutzeroberfläche halluzinieren? A: Es kann Argumente halluzinieren (z. B. die Übergabe einer Zeichenfolge an eine Requisite, die eine Zahl benötigt). Allerdings verhindert die Implementierung der Zod-Schemavalidierung Laufzeitabstürze. Wenn die KI fehlerhafte Daten ausgibt, erkennen wir dies und zeigen eine Fehlermeldung an, anstatt die Benutzeroberfläche zum Absturz zu bringen.

Fazit

Wir gehen von „Point and Click“ zu „Describe and Receive“ über. Die generative Benutzeroberfläche ist die Brücke. Es kombiniert die Flexibilität von Chat mit der Benutzerfreundlichkeit einer GUI. Es ist die Zukunft der Software-Interaktion.

Bereit, die Zukunft zu gestalten?

Wenn Sie Generative UI mithilfe des Vercel AI SDK in Ihre Anwendung integrieren möchten, ist Maison Code der kompetente Partner, den Sie brauchen. Wir bauen intelligente Schnittstellen, die sich an Ihre Benutzer anpassen.

Kontaktieren Sie uns, um einen KI-Architekten zu engagieren.

Benutzeroberfläche, die sich selbst zeichnet?

Wir erstellen generative UI-Erlebnisse mit Vercel AI SDK und React Server Components. Stellen Sie unsere Architekten ein.