Chat SDK 智能体可用 json-render 流式生成 UI 卡片

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

借助带类型的组件目录，agent 会编写一份 JSON spec，由 json-render 将其转换成 Chat SDK 卡片。随后每个适配器会按各自平台的原生格式发布该卡片，例如 Slack 上的 Block Kit 和 Teams 上的 Adaptive Cards。

该目录涵盖表格、图表、按钮等，因此无需为每种消息形态单独构建和维护工具。

        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 被提及时，将生成的卡片流式发送到该会话串中。

复制标题链接随着模型写入而流式更新卡片

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

复制标题链接校验 spec 并遵守平台限制

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

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

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