Генеративни интерфејс

Прикажите структуриране одговоре агента у свом производу.

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

Инсталација

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 означава обичан блок кода. Приказивач учитајте тек када се појави генеративни блок.

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 } да не бисте прерано приказали обавештење о прекиду.

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

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

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

Безбедност

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