---
title: Генеративни интерфејс
description: "Прикажите структуриране одговоре агента у свом производу."
---

Када је **Generative UI** укључен за пројекат, одговори могу да садрже `openui` блокове уз Markdown: картице, поређења, контролне листе, графиконе, мапе и картице са садржајем. Текст и код остају Markdown.

## Инсталација

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

Инсталирајте опционе зависности пре увоза парсера или React приказивача. Главни улаз SDK-а и React куке их не учитавају.

## Улазне тачке

| Import | API |
| --- | --- |
| `@beeuni/sdk/genui/fence` | Откривање блокова без опционих зависности |
| `@beeuni/sdk/genui` | Парсер, каталог и претварање у Markdown |
| `@beeuni/sdk/genui/react` | React приказивач без задатог стила и подразумеване HTML компоненте |

## Приказ блока

Откријте блок у Markdown приказивачу помоћу `genuiVersionFromClassName(className)`. `null` означава обичан блок кода. Приказивач учитајте тек када се појави генеративни блок.

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

Проследите своје компоненте кроз `components` или почните са `defaultGenuiComponents`. Држите `renderMarkdown` стабилним. Поставите `streaming` на `false` чим се овај блок затвори, чак и ако одговор још траје.

`renderPending` може да резервише простор за велике недовршене елементе. `enabled={false}` приказује Markdown. `onSettled` једном по блоку пријављује исход и трајање, без садржаја.

## Текст и компатибилност

Користите `genuiToMarkdown(text)` за текстуалне интерфејсе. Графикони постају табеле, мапе листе места, а картице и склопиви панели се отварају. Током стримовања проследите `{ streaming: true }` да не бисте прерано приказали обавештење о прекиду.

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

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

Неисправни или неподржани блокови приказују заменски садржај без извршавања. Ажурирајте SDK за нове типове. Означене ставке листе остају у компоненти; Beeuni их не чува и не шаље.

## Безбедност

Блокови садрже податке, а не извршни код. Линкови и слике захтевају апсолутне `http` или `https` URL-ове. Генерисани интерфејс не покреће алате и не мења стање апликације.