Vercel Chat SDK Adds json-render for Streaming Generative UI on Slack and Teams

Vercel has officially rolled out support for streaming Generative UI from Chat SDK agents using json-render. Rather than confining agent responses to static Markdown text, the framework allows language models to stream structured interface specifications that render directly into native chat components.

Image source: https://vercel.com/changelog/json-render-and-chat-sdk-agents

Building rich conversational agents previously required developers to implement and maintain custom UI tooling for every message variation across enterprise platforms. By integrating Chat SDK with @json-render/core and @json-render/chat, Vercel provides a unified pipeline where an agent writes a structured JSON specification based on a typed catalog, and dedicated adapters post native cards into platforms like Slack and Microsoft Teams.

Typed Component Catalogs and Native Platform Adapters

At the foundation of this workflow is the pairing of a typed component catalog with platform-specific native adapters.

Developers configure their component catalog using defineCatalog from @json-render/core, binding the schema to standard definitions and feeding catalog instructions directly into the agent's system prompt. Because the catalog covers tables, charts, buttons, and other interaction primitives, teams no longer need to build dedicated handler tools for each UI layout.

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

As the agent outputs a valid JSON specification, Chat SDK adapters convert the structure into native formats: Slack receives Block Kit blocks, while Microsoft Teams receives Adaptive Cards payloads.

Incremental streamCard Rendering and 500ms Update Intervals

To streamline token streaming into live chat environments, Vercel introduced the streamCard function.

Instead of delaying display until the model completes generation, streamCard posts the card as soon as its root element contains content. It then continues updating the message as subsequent child components stream in.

• Throttled Updates: Edits are dispatched at a default interval of once every 500 ms, aligning directly with Chat SDK's standard streaming update cadence.
• Final Validation: Once text streaming concludes, the message displays the final, fully validated card.

This design brings responsive, web-grade streaming UX into workplace collaboration platforms without triggering API rate limits.

Schema Validation with toCard and Platform Limit Handling

For runtime reliability, the framework includes an explicit validation layer powered by toCard.

The toCard function verifies each element's props against its component schema. If the specification contains errors, it throws a CardSpecError. Each schema violation generates a clear, readable issue description, allowing the application to pass the error list back to the model for automated correction.

Additionally, adapters handle the physical payload caps imposed by chat platforms:

• Automatic Content Degradation: When a card exceeds message limits, adapters adapt content to prevent delivery failure. For example, the Slack adapter converts a secondary table into a code block.
• Explicit Limit Enforcement: Teams seeking strict compliance can pass limits options to reject oversized specifications outright rather than allowing degraded rendering.

Developers can start testing the json-render integration through the Vercel documentation and the companion interactive playground.

Sources

• Vercel Changelog: Stream generative UI from Chat SDK agents with json-render
• Guillermo Rauch Official X (@rauchg): Generative UI for conversational agents