# Interfaz generativa

Muestra las respuestas estructuradas del agente en tu producto.

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

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

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

| Import | API |
| --- | --- |
| `@beeuni/sdk/genui/fence` | Detección de bloques sin dependencias opcionales |
| `@beeuni/sdk/genui` | Parser, catálogo y conversión a Markdown |
| `@beeuni/sdk/genui/react` | Renderizador React sin estilo fijo y componentes HTML predeterminados |

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

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

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.

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