# Interface générative

Affichez les réponses structurées de l’agent dans votre produit.

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

Avec **Generative UI** activée dans le projet, les réponses peuvent inclure des blocs `openui` dans le Markdown : cartes, comparaisons, listes à cocher, graphiques, plans et onglets. Le texte et le code restent en Markdown.

## Installation

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

Installez les dépendances facultatives avant d’importer le parseur ou le moteur React. L’entrée principale du SDK et les hooks React ne les chargent pas.

## Points d’entrée

| Import | API |
| --- | --- |
| `@beeuni/sdk/genui/fence` | Détection des blocs sans dépendances facultatives |
| `@beeuni/sdk/genui` | Parseur, catalogue et conversion Markdown |
| `@beeuni/sdk/genui/react` | Moteur React sans style imposé et composants HTML par défaut |

## Afficher un bloc

Détectez le bloc dans votre moteur Markdown avec `genuiVersionFromClassName(className)`. `null` indique un bloc de code ordinaire. Chargez le moteur à la demande lorsqu’un bloc génératif apparaît.

```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}
    />
  );
}
```

Passez vos composants dans `components`, ou commencez avec `defaultGenuiComponents`. Gardez `renderMarkdown` stable. Mettez `streaming` à `false` dès la fermeture de ce bloc, même si la réponse continue.

`renderPending` peut réserver de l’espace pour les grands éléments inachevés. `enabled={false}` affiche du Markdown. `onSettled` rapporte le résultat et la durée une fois par bloc, sans son contenu.

## Texte et compatibilité

Utilisez `genuiToMarkdown(text)` pour une interface textuelle. Les graphiques deviennent des tableaux et les cartes des listes de lieux ; onglets et accordéons se déplient. Pendant le streaming, passez `{ streaming: true }` pour éviter un avis de coupure prématuré.

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

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

Les blocs invalides ou inconnus affichent un contenu de remplacement sans rien exécuter. Mettez le SDK à jour pour les nouveaux types. Les cases cochées restent dans le composant ; Beeuni ne les enregistre ni ne les envoie.

## Sécurité

Les blocs contiennent des données, pas du code exécutable. Les liens et images exigent des URL absolues `http` ou `https`. L’interface générée ne peut ni exécuter d’outils ni modifier l’état de l’application.