@ assistant-ui/ react-generative-ui (英语)

此套件再出口 @assistant-ui/generative-ui,框架中立之家 助理-伊的基因UI。 现有进口继续维持不变;新编码应取决于 @assistant-ui/generative-ui 直接导入反应渲染器 @assistant-ui/generative-ui/react。 。 。 .

用于助手-ui的基因UI工具.

安装

npm install @assistant-ui/react-generative-ui

使用量

在图书馆里宣布模型的组件 然后曝光 他们通过 present 工具。 模型发出一个 { _type, ...props } 树 (单位:千美元)_type 命名组件, 因此是真实的 type 道具从不碰撞;工具 让它与图书馆对立.

import { JSONGenerativeUI } from "@assistant-ui/react-generative-ui";
import { Thread, Tools } from "@assistant-ui/react";
import { z } from "zod";

const generativeUI = new JSONGenerativeUI({
  library: {
    Card: {
      description: "A card container with a title.",
      properties: z.object({ title: z.string() }),
      render: ({ title, children }) => (
        <section className="card">
          <h3>{title}</h3>
          {children}
        </section>
      ),
    },
    Text: {
      description: "A run of text.",
      properties: z.object({ tone: z.enum(["muted", "normal"]).optional() }),
      render: ({ tone, children }) => <p data-tone={tone}>{children}</p>,
    },
  },
});

const toolkit = {
  present: generativeUI.present(),
};

function App() {
  return (
    <Thread>
      <Tools toolkit={toolkit} />
      {/* MessageList, Composer, ... */}
    </Thread>
  );
}

节点的 children 道具是递归得到的,因此组件可以被嵌入:

{
  "_type": "Card",
  "title": "Hello",
  "children": [{ "_type": "Text", "tone": "muted", "children": "Nested text" }]
}

流出道具

默认一个部件只有在道具完全到达后才能制作,所以 render 总是看到完整的道具。 选择从部分道具渲染 streamProperties。当你这样做, render 接收注入的 $status 道具 歧视道具: "streaming" 他们是 Partial一次 "done" 都结束了.

const generativeUI = new JSONGenerativeUI({
  library: {
    Weather: {
      description: "A live weather card.",
      properties: z.object({ city: z.string(), temp: z.number() }),
      streamProperties: true,
      render: (props) => {
        if (props.$status === "done") {
          return <Card>{`${props.city}: ${props.temp}°`}</Card>; // complete props
        }
        return <Card>{props.city ?? "Loading…"}</Card>; // partial props
      },
    },
  },
});

render 是函数 props,而不是反应组件——但它运行在其 拥有纤维,所以你可以叫钩子 里面像往常一样.

"use generative" 撰写

上面的例子用手将图书馆连接到客户端上. 与 "use generative" 编译器( e)@assistant-ui/next 或者说 @assistant-ui/vite? 你吗 也可以将一个组件的 properties 计划 render 财务报告和审定财务报表 将图书馆暴露为工具,建筑将每半分到正确的目标: 策略到服务器(所以模型看到工具) render 继续 客户.

"use generative";

import { z } from "zod";
import { Weather } from "@/components/weather";
import { defineToolkit } from "@assistant-ui/react";
import {
  JSONGenerativeUI,
  defineGenerativeComponents,
} from "@assistant-ui/react-generative-ui";

const generative = new JSONGenerativeUI({
  library: defineGenerativeComponents({
    Weather: {
      description: "Show a weather card.",
      properties: z.object({ city: z.string() }),
      render: (props) => <Weather {...props} />,
    },
  }),
});

export default defineToolkit({
  // `present` displays a component; `prompt_user` is a human-in-the-loop prompt.
  present: generative.present(),
  prompt_user: generative.promptUser(),
});

模特儿打电话来 present 一个节点像 { "_type": "Weather", "city": "SF" }。 。 。 . 过 present({ display: "standalone" }) 自行制作该部分 表面而不是内线。 见 "use generative" 文档 用来建房的.

Slack 团队和A2UI

同一树为平原JSON,因此没有被绑入浏览器. 三条无反应子路径转换为 Slack Block Kit, Microsoft Teams 适配卡,并输入 A2UI (英语) 表面 。 他们运行在服务器动作, 队列工人,和webhook处理器。 转换超过了内置词汇; a $type 在外边被丢弃 警告。 每个目标都有一个组件,以及未支持的内容如何降解,记录如下: Slack 上的基因UI, (中文(简体) ), 微软团队的基因UI,以及 A2UI 过AG-UI。 。 。 .

@assistant-ui/react-generative-ui/slack

将树转换为 Slack Block Kit JSON ()toSlackBlocks),解码 block_actions 网络鼠标返回 $action 有效载荷(decodeBlockAction),并将 Block Kit 映射回词汇节点(fromSlackBlocks) (中文(简体) ).

import { toSlackBlocks } from "@assistant-ui/react-generative-ui/slack";

const { blocks, warnings } = toSlackBlocks({
  $type: "Card",
  title: "Order #48213",
  children: [{ $type: "Text", value: "Shipped, arriving Thursday." }],
});

@assistant-ui/react-generative-ui/teams

将树转换为 Microsoft Teams 适配卡(toAdaptiveCard)或有根-木质支持的活体框架附件(toTeamsAttachments),并解码 activity.value (单位:千美元)decodeSubmitData) (中文(简体) ).

import { toAdaptiveCard } from "@assistant-ui/react-generative-ui/teams";

const { card, warnings } = toAdaptiveCard({
  $type: "Card",
  title: "Order #48213",
  children: [{ $type: "Text", value: "Shipped, arriving Thursday." }],
});

@assistant-ui/react-generative-ui/a2ui

入境方向:应用A2UI地表操作(applyA2uiOperations),并将表面转换为词汇树(convertSurfaceToUISpec),通过同一途径产生 present 路径.

import {
  applyA2uiOperations,
  convertSurfaceToUISpec,
} from "@assistant-ui/react-generative-ui/a2ui";

const { state } = applyA2uiOperations(new Map(), operations);
for (const surface of state.values()) {
  const { spec, warnings } = convertSurfaceToUISpec(surface);
}

许可证

麻省理工学院