Interface générative

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

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

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

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.

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

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.