Vercel: Chat SDK streams generative UI with json-render

In this article you will see:

• What json-render is and how it connects to Chat SDK
• How the streaming flow of a generative interface works
• Spec validation and platform limits
• How to start using it today

The problem this integration solves

Anyone who has built a bot for Slack or Teams knows the problem: each platform has its own card format. Block Kit on Slack, Adaptive Cards on Teams. Keeping both in sync manually is repetitive work and prone to error.

json-render solves this with a typed component catalog. The agent writes a spec in JSON, and the library converts it into a Chat SDK card. Each adapter then posts the card in the platform native format.

How streaming works

The function streamCard posts the card as soon as the root element has content and updates the message as new elements arrive. Edits are sent at most once every 500 ms by default, which matches the Chat SDK streaming interval. When the stream ends, the message shows the final validated card.

The catalog covers tables, charts, buttons and other components. This eliminates the need to build and maintain a separate tool for each message format.

Validation and platform limits

The function toCard checks the props of each element against the component schema and throws CardSpecError for invalid specs. Each problem generates a readable message, which allows sending the error list back to the model for correction.

Platforms impose limits on what a single message can contain. Chat SDK adapters degrade content that exceeds those limits. The Slack adapter, for example, turns a second table into a code block. You can pass limits to reject those specs instead of degrading them.

Code example

The example below shows a bot that uses streamCard to respond to mentions with a generative interface.

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

The model receives the catalog prompt as a system prompt and emits a JSON spec. streamCard handles posting and updating the card on the platform.

Why this matters for bot builders

Before this integration, anyone who wanted to stream a rich interface in a Slack bot needed to build their own pipeline: generate JSON, validate against the platform schema, post, update. Each platform required specific code.

With streamCard, the model emits a generic spec and the adapter handles the translation. This reduces integration code and allows switching platforms without rewriting presentation logic.

It is also worth noting that json-render is not exclusive to Chat SDK. The library can be used in other contexts where you want to generate declarative interfaces from language models. The integration with Chat SDK is just the most direct use case for bots.

Comparison with previous approaches

The traditional approach was to generate Markdown and let the platform render it. The problem is that Markdown does not support interactive tables, charts or buttons. json-render fills this gap with a typed component vocabulary.

The downside is the dependency on a catalog. If the model emits a component outside the catalog, validation fails. That is why the catalog prompt is passed as a system prompt to the model, so it knows which components it can use.

What changes for bot builders

The main shift is mental model. Instead of generating text and then formatting for each platform, the agent generates a declarative spec. Rendering is handled by the adapter, which knows the limits and conventions of each channel.

This also makes iteration easier. Because the spec is validated before it is sent, format errors are caught early. And because streaming is native, the user sees the interface being built in real time.

If you already work with agents and interfaces, it is worth comparing this approach with creating TypeScript MCP servers and with debugging web pages with Chrome DevTools MCP.

How to test today

1. Install Chat SDK and json-render.
2. Define a component catalog with defineCatalog.
3. Use streamCard to stream the spec from the model.
4. Check the documentation at json-render.dev/docs/api/chat.
5. Try the playground at chat-sdk-demo.json-render.dev.

The official documentation is in the Vercel changelog at vercel.com/changelog/json-render-and-chat-sdk-agents.