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

框架中性基因UI为助手-ui. 根项持有无反光的UI树类型并规范化器, @assistant-ui/generative-ui/react 使树与反应 slack, (中文(简体) ), teams,以及 a2ui 子路径转换为其它表面, @assistant-ui/generative-ui/spec 在基因框架的光谱模式下制作一个库(在下方有反应原生组件) react-native 出口条件, @assistant-ui/generative-ui/spec/tree 将 Slack 和 Teams 子路径的 spec 转换为树,以及 @assistant-ui/generative-ui/vue 用于 Vue 组件.

安装

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

每个框架和库都是可选的对等点,只有一些子路径需要: @assistant-ui/generative-ui/react 需求 react, (中文(简体) ), @assistant-ui/react,以及 zod· ; @assistant-ui/generative-ui/spec 需求 react, (中文(简体) ), zod,以及 generative-frame附加时 react-native 土著反应; @assistant-ui/generative-ui/spec/tree 仅需要 generative-frame; 和 : @assistant-ui/generative-ui/vue 需求 vue, (中文(简体) ), zod,以及 generative-frame。根条目和 slack, (中文(简体) ), teams,以及 a2ui 子路径不需要它们.

使用量

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

import { JSONGenerativeUI } from "@assistant-ui/generative-ui/react";
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/generative-ui/react";

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 在外边被丢弃 警告。 从基因框架的光谱模式转换出来的光谱 specToUISpec 从 @assistant-ui/generative-ui/spec/tree 先说 每个目标都有一个组件,以及未支持的内容如何降解,记录如下: Slack 上的基因UI, (中文(简体) ), 微软团队的基因UI,以及 A2UI 过AG-UI。 。 。 .

@assistant-ui/generative-ui/slack

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

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

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

@assistant-ui/generative-ui/teams

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

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

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

@assistant-ui/generative-ui/a2ui

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

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

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

光谱模式

单位 基因框架的光谱模式,模型将UI构建为平面谱,流出为JSON Patch行,并带有状态,绑定,验证. toSpecCatalog 从 @assistant-ui/generative-ui/spec 默认将库、内置词汇转换为目录和组件 spec 模式。 安装 generative-frame 并肩作战.

import { createWidgetToolkit } from "generative-frame/assistant-ui";
import { createSpecToolkit } from "generative-frame/spec/assistant-ui";
import { toSpecCatalog } from "@assistant-ui/generative-ui/spec";

const { catalog, components } = toSpecCatalog();
const widgets = createWidgetToolkit({
  spec: createSpecToolkit(catalog, { components }),
});

光谱模式 列出每个组件发送的事件,绑定值如何回写,以及您自己的组件如何声明其事件和槽.

toSpecCatalog 从 @assistant-ui/generative-ui/vue 为 Vue 组件构建相同的目录 SpecRenderer 从 generative-frame/spec/vue它们使得 data-aui 标记为 React 词汇表,所以同样的样式表适用:

import { h } from "vue";
import type { Spec } from "generative-frame/spec";
import { SpecRenderer } from "generative-frame/spec/vue";
import { toSpecCatalog } from "@assistant-ui/generative-ui/vue";

const { catalog, components } = toSpecCatalog();
const render = (spec: Spec) => h(SpecRenderer, { spec, catalog, components });

许可证

麻省理工学院