Technology1 min read

Chat SDK agents can now stream generative UI with json-render

By · Published by Everything Blog

In short

The integration utilizes the `streamCard` function to display cards the moment root element content arrives, updating every 500 milliseconds to match Chat SDK's streaming interval. Once the stream ends, the platform renders a fully validated interface based on elements like charts, tables, and buttons. To ensure reliability, the `toCard` function checks specifications against schemas and triggers a `CardSpecError` if defects occur. Developers can also enforce size limits to stop platforms like Slack from downgrading second tables into raw code blocks.

Key points

  • Developers avoid creating unique tools for each messaging ecosystem by using a unified ty…: Developers avoid creating unique tools for each messaging ecosystem by using a unified typed component catalog.
  • Cards render progressively during generation and present a fully validated layout once st…: Cards render progressively during generation and present a fully validated layout once streaming concludes.
  • Configurable limits prevent target platforms from degrading oversized rich content into f…: Configurable limits prevent target platforms from degrading oversized rich content into fallback elements like code blocks.

Sources checked by our analysis pipeline: 1

You can now stream generative UI from your Chat SDK agent with json-render.

With a typed catalog of components, the agent writes a JSON spec that json-render

converts into a Chat SDK card. Each adapter then posts the card in its platform’s native format, such as Block Kit on Slack and Adaptive Cards on Teams.

The catalog covers tables, charts, buttons, and more, so there’s no separate tool to build and maintain for each message shape.

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

Stream a generated card into the thread when your agent is mentioned.

Copy link to headingStream cards as the model writes

streamCard

posts the card once its root element has content and updates the message as new elements stream in. Edits go out at most once every 500 ms by default, which matches Chat SDK’s streaming interval. Once the stream ends,…

Technology

More in Technology