Vercel adds streaming generative UI to Chat SDK agents
Vercel says Chat SDK agents can now stream generative UI with json-render, allowing agents to generate cards from typed JSON specifications. Chat SDK adapters then convert those cards into native platform formats, including Slack Block Kit and Microsoft Teams Adaptive Cards.
- Chat SDK agents can stream generative UI with json-render.
- Typed catalogs support tables, charts, buttons and other components.
- Cards update as elements stream in, with edits sent at most once every 500 ms by default.
- toCard validates component properties and reports invalid specifications.
- Adapters can enforce or degrade content when platform limits are exceeded.
Agents generate cards from a typed catalog
The integration uses a catalog of components that defines the UI elements an agent can use. According to Vercel, the catalog includes tables, charts, buttons and other components, allowing developers to support multiple message shapes without building and maintaining a separate tool for each one.
The agent writes a JSON specification, and json-render converts that specification into a Chat SDK card. Each platform adapter is responsible for posting the card in its native format. Vercel gives Slack Block Kit and Teams Adaptive Cards as examples of those formats.
The example in Vercel's announcement defines a catalog with defineCatalog, using the standard component definitions from @json-render/chat. A Chat SDK bot then responds to a new mention by passing the message text to streamText and sending the resulting text stream to streamCard.
Cards update as the model writes
Vercel says streamCard posts a card when its root element has content, then updates the message as additional elements arrive. By default, edits are sent at most once every 500 ms, matching Chat SDK's streaming interval.
When generation finishes, the message contains the final validated card. This means a user can see the card take shape inside the thread instead of waiting for the complete specification before the message is posted.
The example uses anthropic/claude-haiku-5.5 as its model and streams a generated card into a thread when the agent is mentioned. Vercel presents the pattern as a way to add generated interface elements to Chat SDK conversations.
Validation handles invalid specs and platform limits
json-render checks each element's properties against its component schema through toCard. If a specification is invalid, the function throws CardSpecError. Vercel says each problem receives its own readable issue, which can be sent back to the model to request a corrected specification.
Chat platforms also limit how much content a single message can contain. Chat SDK adapters can degrade content that exceeds those limits. Vercel gives the example of the Slack adapter turning a second table into a code block.
Developers who want to reject content that exceeds platform limits can pass limits to toCard instead. Vercel directs users to its documentation for getting started and also provides a playground for trying the integration.
