Generative UI

Strukturierte Agentenantworten in deinem Produkt darstellen.

Wenn Generative UI im Projekt aktiviert ist, können Antworten neben Markdown auch openui-Blöcke enthalten: Karten, Vergleiche, Checklisten, Diagramme, Kartenansichten und Tabs. Text und Code bleiben Markdown.

Installation

npm install @beeuni/sdk zod @openuidev/lang-core@0.3.1
# React:
npm install react

Installiere die optionalen Abhängigkeiten vor dem Import des Parsers oder React-Renderers. Der SDK-Haupteinstieg und die React-Hooks laden sie nicht.

Einstiegspunkte

Einen Block rendern

Erkenne den Block im Markdown-Renderer mit genuiVersionFromClassName(className). null bedeutet einen normalen Codeblock. Lade den Renderer erst bei einem Generative-UI-Block nach.

import type { ReactNode } from 'react';
import { GenuiBlock, defaultGenuiComponents } from '@beeuni/sdk/genui/react';
import { genuiVersionFromClassName } from '@beeuni/sdk/genui/fence';

type Props = {
  code: string;
  className?: string;
  streaming: boolean;
  renderMarkdown: (markdown: string) => ReactNode;
};

function StructuredReply({ code, className, streaming, renderMarkdown }: Props) {
  const version = genuiVersionFromClassName(className);
  if (version === null) return <pre><code>{code}</code></pre>;
  return (
    <GenuiBlock
      code={code}
      version={version}
      streaming={streaming}
      components={defaultGenuiComponents}
      renderMarkdown={renderMarkdown}
    />
  );
}

Übergib eigene Komponenten mit components oder beginne mit defaultGenuiComponents. Halte renderMarkdown stabil. Setze streaming auf false, sobald dieser Block geschlossen ist, auch wenn die Antwort weiterläuft.

renderPending kann Platz für große, unfertige Elemente reservieren. enabled={false} zeigt Markdown. onSettled meldet Ergebnis und Dauer einmal je Block, ohne Inhalte.

Nur Text und Kompatibilität

Nutze genuiToMarkdown(text) für reine Textansichten. Diagramme werden zu Tabellen, Karten zu Ortslisten; Tabs und Akkordeons klappen auf. Übergib beim Streaming { streaming: true }, damit kein vorzeitiger Abbruchhinweis erscheint.

import { genuiToMarkdown } from '@beeuni/sdk/genui';

const markdown = genuiToMarkdown(reply, { streaming: true });

Ungültige oder unbekannte Blöcke zeigen eine Ersatzdarstellung und führen nichts aus. Aktualisiere das SDK für neue Blocktypen. Checklisten speichern Häkchen nur in der Komponente; Beeuni speichert oder überträgt sie nicht.

Sicherheit

Blöcke enthalten Daten, keinen ausführbaren Code. Links und Bild-URLs müssen absolute http- oder https-URLs sein. Generierte UI kann weder Tools ausführen noch den Anwendungszustand ändern.