# Generative UI

Strukturierte Agentenantworten in deinem Produkt darstellen.

Canonical page: https://beeuni.ai/docs/de/sdk/genui

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

```bash
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

| Import | API |
| --- | --- |
| `@beeuni/sdk/genui/fence` | Blöcke erkennen, ohne optionale Abhängigkeiten zu laden |
| `@beeuni/sdk/genui` | Parser, Katalog und Markdown-Konvertierung |
| `@beeuni/sdk/genui/react` | React-Renderer ohne festes Design und HTML-Standardkomponenten |

## 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.

```tsx
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.

```ts
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.