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

Vercel launched generative UI streaming for Chat SDK agents using json-render, with contributor Chris Tate. As detailed in Vercel Blog's report, agents write typed JSON specifications that convert directly into native cards for workplace messaging platforms.

This report details the underlying component catalog, streaming update intervals, schema validation safeguards, and platform limits. It is written for software engineers and technical teams building workplace automation on Slack and Microsoft Teams.

Chat SDK agents can now stream generative UI: what actually changed

The release replaces static card templates with a streaming architecture driven by language model output. Previously, developers building conversational agents had to construct and maintain separate tools for every distinct message shape their bots produced. Under the new system, agents write a typed JSON specification based on a standardized component catalog. This catalog encompasses elements like data tables, charts, and interactive buttons. Because json-render converts this uniform specification into a Chat SDK card, teams no longer need isolated presentation tools for each visual format.

The implementation relies on three core software libraries: @json-render/core, @json-render/chat, and the standard ai package. In bot configuration files such as lib/bot.ts, developers define their catalog by calling defineCatalog with schema and standardComponentDefinitions. When an incoming mention event fires through bot.onNewMention, the agent invokes streamText with a model like anthropic/claude-haiku-5.5. The system parameter receives catalog.prompt() to guide the model on valid component structures. The resulting textStream feeds into streamCard, turning model token generation directly into a streaming card payload for users.

Chat SDK agents can now stream generative UI: how it works

The streaming cycle begins as soon as the language model starts outputting JSON text. The streamCard function posts the card to the thread once its root element has content, establishing the container immediately. As new elements stream in from the model, streamCard updates the message dynamically. To maintain stability, edits go out at most once every 500 ms by default, which matches the streaming interval of Chat SDK. Once the stream ends, the message displays the final, validated card for thread participants.

Adapter modules convert the intermediate card representation into native components tailored for specific messaging environments. For Slack deployments, the adapter outputs native Block Kit elements, while for Microsoft Teams, it translates identical specifications into Adaptive Cards. Because this transformation occurs downstream, bot developers author their catalog and model logic once without maintaining separate layout engines. The model focuses solely on emitting valid component trees, while each adapter reconciles the tree with platform-specific schema requirements, delivering interactive buttons, nested tables, and charts directly.

Chat SDK agents can now stream generative UI: why it matters

Generative UI historically suffered from structural instability when models produced invalid props or broken syntax. The json-render framework introduces strict validation through toCard, checking every element's props against its assigned component schema. When a specification contains errors, the parser throws a CardSpecError exception. Rather than crashing silently, each problem receives its own readable issue description. Developers can capture this issue list and route it back into the model prompt, allowing the language model to correct invalid parameters and produce a repaired specification.

Beyond syntax verification, the system protects applications against strict messaging platform payload boundaries. Chat platforms cap the content volume that a single message can hold, causing adapters to degrade elements that exceed those thresholds. In Slack, for instance, the adapter degrades a second table into a raw code block when platform caps are hit. Teams that avoid degraded rendering can pass explicit limits configurations to reject non-compliant specifications upfront, giving engineers predictable control over whether oversized output degrades gracefully or triggers validation failures.

Chat SDK agents can now stream generative UI: who is affected

Software engineers and backend developers maintaining conversational bots for enterprise workspaces are most directly impacted by this architecture. Teams that previously built complex, ad-hoc presentation utilities for diverse message types can now standardize on a typed component catalog. By declaring components through standardComponentDefinitions, engineering groups eliminate the overhead of writing bespoke serialization logic for Slack and Teams. Developers building workplace assistants can easily deliver structured tables, buttons, and charts directly within conversational threads without constructing custom webviews or maintaining disconnected reporting tools.

Workplace end users interacting with automated agents in daily chat channels gain a responsive, readable interface. Rather than waiting for a model to finish its entire output run before seeing content, users see the card root immediately, with elements streaming in every 500 ms. Because elements map to native Block Kit and Adaptive Cards, interaction feels native to host clients. Users click buttons, inspect tables, and read charts directly inside active conversations, avoiding external links while benefiting from validated layouts across desktop and mobile devices.

Chat SDK agents can now stream generative UI: what to watch

Engineering teams should closely monitor how models handle JSON generation under high concurrency. Using models such as anthropic/claude-haiku-5.5 requires testing whether prompt formatting from catalog.prompt() consistently produces valid component props without triggering frequent CardSpecError retries. When spec errors occur, teams should track how effectively models process issue feedback to recover valid JSON structures. Additionally, developers must calibrate limits settings to ensure that automatic degradation, such as Slack converting excess tables into code blocks, does not impair data readability for critical operational alerts.

Adoption also depends on how teams experiment with available resources, including published documentation and the interactive playground. Teams should test the default 500 ms streaming interval against specific network conditions and API quotas to prevent throttling from messaging platforms during burst traffic. Developers must also verify how standardComponentDefinitions accommodate richer UI patterns over time. Maintaining strict schema validation during testing will help teams identify platform-specific edge cases early, ensuring that automated agents deliver stable, responsive generative interfaces across production enterprise channels.