Chat SDK 代理可通过 json-render 流式生成 UI 卡片

现在你可以用 json-render 从 Chat SDK agent 流式输出生成式 UI。

借助带类型定义的组件目录，agent 会写出一份 JSON spec，由 json-render 转换成 Chat SDK 卡片。随后各个 adapter 会按对应平台的原生格式发布这张卡片，比如 Slack 上的 Block Kit、Teams 上的 Adaptive Cards。

该目录覆盖表格、图表、按钮等组件，因此不必为每种消息形态单独构建和维护一个工具。

lib/bot.ts import { defineCatalog } from "@json-render/core"; import { schema, standardComponentDefinitions, streamCard, } from "@json-render/chat"; import { streamText } from "ai"; const catalog = defineCatalog(schema, { components: standardComponentDefinitions, }); bot.onNewMention(async (thread, message) => { const result = streamText({ model: "anthropic/claude-haiku-5.5", system: catalog.prompt(), prompt: message.text, }); await streamCard(thread, result.textStream); }); 当你的 agent 被提及时，把生成的卡片流式发送到该 thread 中。

在模型生成的同时流式发送卡片

只要卡片的根元素有了内容，streamCard 就会发布这张卡片，并在新元素流式到达时更新消息。默认情况下，编辑最多每 500 ms 发出一次，这与 Chat SDK 的流式间隔一致。流结束后，消息会显示最终经过校验的卡片。

校验 spec 并遵守平台限制

toCard 会依据组件 schema 检查每个元素的 props，遇到无效 spec 时抛出 CardSpecError。每个问题都有各自可读的 issue 描述，因此你可以把这份列表发回给模型，让它给出修正后的 spec。

平台对单条消息能承载的内容有上限，超过这些上限时 Chat SDK 的 adapter 会对内容做降级处理。例如 Slack adapter 会把第二张表格转成代码块。传入 limits 可以改为直接拒绝这些 spec。

阅读文档开始使用，或者试试 playground。