Vercel brings streaming AI cards to Chat SDK
Vercel’s Chat SDK can now turn an AI agent’s structured output into a card inside a chat conversation. The November 6 announcement adds a json-render integration that turns model-generated JSON specifications into cards using a shared component catalog. Adapters deliver native formats such as Slack Block Kit and Microsoft Teams Adaptive Cards.
For developers building support bots, reporting assistants or internal agents, the useful change is control over presentation. An answer can arrive as a table, chart or set of buttons instead of a long text response. The application still needs a plan for oversized cards, interrupted streams and failed validation.
One catalog, platform-specific cards
Chat SDK is Vercel’s open-source TypeScript toolkit for bots and agents. It already provides event handlers and adapters for multiple messaging platforms. This announcement adds a way to let a model compose cards from typed components, rather than introducing the entire toolkit or its existing card system.
In Vercel’s example, the application supplies the catalog as instructions, the model streams a JSON specification, and streamCard posts and updates the result. Updates are spaced at least 500 milliseconds apart by default. That interval describes message edits, not how quickly the model produces its first answer.
A valid card still has to fit the destination
Vercel says the Slack adapter converts a second table into a code block when a message exceeds its table allowance. Developers can pass limits to reject such specifications instead. A common catalog therefore does not promise identical visual results across every chat platform.
The json-render API documentation describes additional constraints. A specification must start with a Card. Nested cards become titled sections, and posted messages do not support the library’s input bindings. Developers should treat these as chat messages with defined components, rather than unrestricted web applications embedded in a thread.
Choose the smallest useful card for each task. A support assistant might show the ticket, current owner and next action. A reporting agent might show one chart and a link to the full report. Keeping the main decision visible is more useful than making every available component appear at once.
Streaming needs an explicit recovery path
The documentation identifies an important failure case: if the final specification is invalid, streamCard throws CardSpecError after a partial message is already visible. Applications can retry or edit that message. Final validation does not automatically guarantee that the conversation contains only a complete, valid card.
Before deployment, deliberately interrupt a stream and submit an invalid specification. Check whether the user sees an incomplete result, whether a retry creates a duplicate, and whether the replacement message makes its status clear. These are suggested acceptance checks, not tests ByteForward has performed.
Keep action handling separate from layout generation. A model choosing where to place an approval button should not decide whether the person clicking it has authority to approve. Use the application’s existing permission checks and confirmed business state when the click arrives. This also makes repeated clicks and stale cards easier to handle consistently.
Who should try it
The integration is worth evaluating for teams already writing chat agents who want richer answers without maintaining a separate response builder for every message shape. Start with one read-only workflow and one destination, then check the same content on each additional platform. Judge the result by whether people can understand and use it, not just whether the JSON validates.
Featured image: AI-generated editorial illustration, not a product screenshot. Vercel, the Vercel design, Next.js and related marks, designs and logos are trademarks or registered trademarks of Vercel, Inc. or its affiliates in the US and other countries.
