The Pulse
Vercel's Chat SDK Agents Can Now Stream json-render Cards to Slack and Teams
Vercel adds json-render support for streaming generative UI from Chat SDK agents. The integration turns JSON specs from a typed component catalog into platform-native cards and validates element props against component schemas.
AI.info Team · Written with AI · fact-checked ·
json-render converts JSON specs from a typed catalog into platform-native cards
Chat SDK agents can now stream generative UI with json-render. An agent writes a JSON spec using a typed catalog of components, and json-render converts the spec into a Chat SDK card. Each adapter posts the card in its platform’s native format, such as Block Kit on Slack and Adaptive Cards on Teams.
A generated card streams into a thread when an agent is mentioned
The sample registers an onNewMention handler and calls streamText with the catalog prompt as its system instruction and the incoming message text as its prompt. It uses anthropic/claude-haiku-5.5 as the model. The handler passes the result’s textStream to streamCard for delivery to the thread.
Cards update as new elements stream in
streamCard posts the card once its root element has content, then updates the message as new elements stream in. By default, edits go out at most once every 500 ms, matching Chat SDK’s streaming interval. Once the stream ends, the message shows the final, validated card.
toCard validates specs and platforms cap single-message content
toCard checks each element’s props against its component schema and throws CardSpecError when a spec is invalid. Each problem gets its own readable issue that can be sent back to the model for a corrected spec. Platforms cap how much a single message can hold, and Chat SDK adapters degrade content beyond those caps.
Slack’s adapter turns a second table into a code block
Limits can be passed to reject those specs instead. The catalog covers tables, charts, buttons and more, so there’s no separate tool to build and maintain for each message shape.