json-render 接入 Chat SDK：Agent 在 Slack 和 Teams 里直接回表格和按钮

Vercel Labs 的 Chris Tate 11 月 6 日在 X 上介绍了 @json-render/chat。用 Chat SDK 写的 Agent 接上它之后，回复不再只有文字，可以在 Slack、Teams 等平台发出原生卡片，里面有表格、字段、图表和按钮，卡片随模型输出一块块长出来。一套组件目录，对应 Chat SDK 支持的所有平台。

这个包在 json-render v0.22.0（11 月 4 日）进入仓库。在这之前，想让聊天机器人发一张带表格的消息，通常要为每种消息形状各写一个工具，表格一个、图表一个。PR #451 写的动机就是这个：没有给聊天平台用的 json-render 渲染器，Agent 没法从目录里挑组件拼出一条原生消息。

从一份 JSON 到各平台的原生卡片

开发者先用 defineCatalog 定义一个类型化组件目录；模型按目录生成 JSON spec；@json-render/chat 把 spec 转成 Chat SDK 的 card，再由各平台适配器换成本地格式发出，Slack 上是 Block Kit，Teams 上是 Adaptive Cards。

标准组件以 Card 为根，内部可用 Section、Text（支持 Markdown）、Fields/Field、Table、Chart（饼图、柱状图、折线图、面积图）、Divider、Image，以及 Actions 下的 Button 和 LinkButton。卡片不能嵌套，嵌在里面的 Card 会渲染成带标题的分区。

接入代码很短。官方示例在 Agent 被 @ 时调用 AI SDK 的 streamText，把 catalog.prompt() 作为系统提示，再把文本流交给 streamCard：

ts 复制代码

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

安装命令是 npm install @json-render/core @json-render/chat chat zod。按 PR #451 的说明，渲染器只把 chat 当类型导入，浏览器和服务端都能运行。

边写边发，最后再校验

streamCard 等根元素一出现就发出消息，之后每到一批新元素就编辑同一条消息，最后换成校验通过的完整卡片。两次编辑的间隔默认 500 毫秒，与 Chat SDK 自己的流式间隔一致，可用 updateIntervalMs 调整。

校验由 toCard 负责。它按各组件的 schema 检查每个元素的属性，也检查结构，比如没有插槽的组件不能带子元素，根 Card 至少要有标题、图片或一个子元素。出错时抛出 CardSpecError，issues 数组里每个问题一条可读描述，文档建议把这份清单发回模型，让它改出一份正确的 spec。

边写边发也带来一个问题：最终 spec 不合格时，错误抛出前，半成品卡片已经出现在对话里。文档说可以重试或编辑那条消息，但错误对象没有带上那条消息。11 月 7 日提交的 PR #456 打算在 CardSpecError 上加 postedMessage 字段来补这个缺口，截至本文写作时它还未合并。

平台上限：默认降级，也可以直接拒绝

每个聊天平台对单条消息能装多少东西都有上限，Chat SDK 的适配器遇到超限内容会降级处理。官方举的例子是 Slack：一条消息里的第二张表会被转成代码块。

如果宁可报错也不要降级，可以给 toCard 传 limits，比如 { tables: 1, charts: 2 }。可限制的项包括每条消息的表格数和图表数、每个 Fields 的字段数、表格行数和列数、图表标题和标签的字数、图表的系列数和数据点数。

spec 还能读 spec.state 里的数据，支持 repeat、visible 条件和 $state、$item 等表达式。展开有上限，maxElements 默认 1000 个元素和表格行，防止嵌套的 repeat 无限膨胀。发出去的消息没有输入框，$bindState、$bindItem 这类双向绑定在这里不起作用。

谁适合现在试

已经用 Chat SDK 在 Slack 或 Teams 里做内部 Agent、又想让回复带表格和图表的团队，可以先跑仓库里的 examples/chat-sdk。这个 playground 能按 Slack 的样子预览生成的消息，也有 Teams Adaptive Card 视图和一键复制到 Block Kit Builder 的按钮。

这个包上线不到一周，目前能找到的只有官方文档、代码和演示视频，还没有第三方的实测或复现。各平台的降级细节、复杂卡片在 Teams 上的效果，需要自己在目标平台上验证。json-render 仓库采用 Apache-2.0 许可。

json-render 接入 Chat SDK：Agent 在 Slack 和 Teams 里直接回表格和按钮

从一份 JSON 到各平台的原生卡片

边写边发，最后再校验

平台上限：默认降级，也可以直接拒绝

谁适合现在试

推荐阅读