Interfaz generativa

Muestra las respuestas estructuradas del agente en tu producto.

Con Generative UI activada en el proyecto, las respuestas pueden incluir bloques openui junto al Markdown: tarjetas, comparaciones, listas de tareas, gráficos, mapas y pestañas. El texto y el código siguen en Markdown.

Instalación

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

Instala las dependencias opcionales antes de importar el parser o el renderizador React. La entrada principal del SDK y los hooks de React no las cargan.

Puntos de entrada

Mostrar un bloque

Detecta el bloque en tu renderizador Markdown con genuiVersionFromClassName(className). null indica un bloque de código normal. Carga el renderizador bajo demanda cuando aparezca un bloque generativo.

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

Pasa tus componentes mediante components o empieza con defaultGenuiComponents. Mantén estable renderMarkdown. Pon streaming en false al cerrarse este bloque, aunque la respuesta continúe.

renderPending puede reservar espacio para elementos grandes aún incompletos. enabled={false} muestra Markdown. onSettled informa del resultado y el tiempo una vez por bloque, sin su contenido.

Texto y compatibilidad

Usa genuiToMarkdown(text) para interfaces de texto. Los gráficos pasan a tablas y los mapas a listas de lugares; las pestañas y paneles se expanden. Durante el streaming, pasa { streaming: true } para evitar avisos prematuros de corte.

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

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

Los bloques inválidos o no compatibles muestran una alternativa sin ejecutar contenido. Actualiza el SDK para admitir nuevos tipos. Las selecciones de las listas quedan en el componente; Beeuni no las guarda ni las envía.

Seguridad

Los bloques contienen datos, no código ejecutable. Los enlaces e imágenes requieren URL absolutas http o https. La interfaz generada no puede ejecutar herramientas ni cambiar el estado de la aplicación.