Vercel's json-render streams generative UI cards from Chat SDK agents to Slack and Teams

Agents can now stream UI, not just text

Vercel's Chat SDK can now stream generative UI from agents using a new package called json-render. According to the Vercel blog, the agent emits a JSON specification describing what it wants to display, and json-render turns that spec into a Chat SDK card. Platform adapters then deliver the card in whatever format the destination expects — Block Kit on Slack, Adaptive Cards on Microsoft Teams.

The built-in catalog includes tables, charts, buttons and other common elements, so a single spec can serve every platform rather than requiring a bespoke renderer for each message shape.

How a card gets built and streamed

On the implementation side, developers register components in a typed catalog using defineCatalog from @json-render/core. Calling catalog.prompt() injects the catalog's rules into the agent's system prompt so the model knows which components it may use. Vercel's example wires this into an agent built with streamText from the AI SDK: when the bot is mentioned in a thread, the model's text stream is piped through streamCard from @json-render/chat, and a live card appears in the thread instead of a plain text reply.

Streaming is incremental. Vercel says streamCard publishes the card as soon as the root element has content, then keeps updating the message as further elements arrive. Updates are throttled to at most one edit every 500 milliseconds by default, matching Chat SDK's existing streaming cadence. Once the model finishes, the thread settles on a final, validated card.

Specs are validated, and platform limits are explicit

Because a model is generating the structured output, json-render treats it skeptically. The toCard function checks each element's props against its component schema and raises a CardSpecError when something does not conform. Every failure carries its own human-readable description, so the list of problems can be fed back to the model to request a corrected spec rather than failing opaquely.

Platform ceilings are handled as well. Chat platforms restrict how much a single message can hold, and Chat SDK adapters fall back to simpler presentation when a spec exceeds those limits — Vercel notes that the Slack adapter, for instance, renders a second table as a code block. Teams that prefer strict behavior can pass limits in and have oversized specs rejected outright instead of quietly downgraded. Vercel also points developers to documentation and a playground for trying the flow.

Why it matters

Most agents today still communicate in prose. The moment an agent can produce tables, charts and interactive buttons inside a chat the user already has open, its output becomes directly usable rather than something to copy elsewhere — a results table, a chart, a confirm-or-cancel prompt all become first-class replies.

The harder part is doing that across platforms. Block Kit and Adaptive Cards are different formats with different constraints, and per-platform rendering code is exactly the kind of glue work that slows agent deployments down. A single JSON spec that each adapter renders natively removes most of that burden, which is the notable capability here: one agent output, many native surfaces.

The design also acknowledges the realities of LLM output. Throttled edits make streamed cards feel native to chat, schema validation with readable errors gives developers a repair loop for malformed specs, and explicit handling of platform caps means degraded output is a policy choice rather than a surprise. For teams building production chat agents, that combination is what turns generative UI from a demo into something dependable.