用途:@json-render/chat 将 json-render 规格渲染为 Chat SDK 的 CardElement 对象,再由各 Chat SDK 适配器转换为对应平台的卡片格式,例如 Slack 的 Block Kit 或 Teams 的 Adaptive Cards。
主要能力:
- 提供 streamCard(target, textStream, options),在根元素存在后发布卡片,按 updateIntervalMs(默认 500 毫秒)随元素到达进行编辑,最终以经过校验的卡片结束。
- 提供 toCard(spec, options),将完整规格转换为卡片。
- 提供 toPartialCard(spec),对正在流式生成的规格返回尽力而为的卡片;根元素不存在时返回 null。
- 标准组件包括:Card、Section、Text(markdown)、Fields 与 Field、Table、Chart(pie 支持 segments;bar、line、area 支持 categories 与 series[].values)、Divider、Image、Actions 与 Button、LinkButton。
- 规格结构与其他渲染器相同,为扁平树:root 加 elements,可选 state。根元素必须是 Card。内部 Card 渲染为带标题的区块,因为聊天卡片不能嵌套。
- 支持 $state、$item、$index、$template 基于 spec.state 解析;visible 条件会丢弃元素;repeat 会按每个条目渲染元素的子元素。重复的 Table 会将行作为模板展开,对象行按键名映射到表头。$bindState 和 $bindItem 不起作用,因为已发布消息没有输入控件。展开在 maxElements(默认 1000 个元素和表格行)处停止,超过时 toCard 抛出错误。
使用方式: 先通过 defineCatalog(schema, { components: standardComponentDefinitions }) 定义目录,然后在聊天事件中调用 streamText 并用 streamCard 将文本流渲染为卡片。示例代码:
import { defineCatalog } from "@json-render/core"; import { schema, standardComponentDefinitions, streamCard } from "@json-render/chat"; import { streamText } from "ai";
const catalog = defineCatalog(schema, { components: standardComponentDefinitions });
chat.onNewMention(async (thread, message) => { const result = streamText({ model: "anthropic/claude-haiku-4.5", system: catalog.prompt(), prompt: message.text, }); await streamCard(thread, result.textStream); });
规格示例: { "root": "card", "elements": { "card": { "type": "Card", "props": { "title": "Weekly deploys" }, "children": ["kpis", "chart"] }, "kpis": { "type": "Fields", "props": {}, "children": ["total"] }, "total": { "type": "Field", "props": { "label": "Deploys", "value": "985" }, "children": [] }, "chart": { "type": "Chart", "props": { "title": "Deploys per day", "chart": { "type": "bar", "categories": ["Mon", "Tue"], "series": [{ "name": "Deploys", "values": [180, 210] }] } }, "children": [] } } }
校验与限制:toCard 在出错时抛出 CardSpecError,并附带 issues 数组,每个问题一个条目。可将 issues 返回给模型以修复规格。还可传入 limits 拒绝平台可能降级的规格,例如 Slack 可设 { tables: 1, charts: 2 }。可用限制项包括:tables、charts、fields、tableRows、tableColumns、chartTitle、chartLabel、chartSeries、chartPoints。
运行时:渲染器仅以类型方式导入 chat 包,因此可在浏览器和服务器端运行。要转换为特定平台的卡片,需使用相应适配器,例如 @chat-adapter/slack/blocks 的 cardToSlackBlocks 或 @chat-adapter/teams/cards 的 cardToAdaptiveCard。
适用场景:需要在聊天平台中以卡片形式流式展示结构化内容(如指标、表格、图表)的 Chat SDK 应用。
限制:根元素必须是 Card;内部 Card 不能嵌套,只能渲染为带标题区块;已发布消息无输入控件,因此 $bindState 和 $bindItem 无效;展开元素数量受 maxElements 限制;平台格式转换依赖 Chat SDK 适配器。收费、价格、具体平台支持范围等资料暂未提供。