Back to blog
Quality
Vercel

Why does streaming agent UI still leave you rebuilding cards per

Thắng Đoàn
Thắng Đoàn

Streaming generative UI from an agent usually means building and maintaining a different message format for each platform. json-render with Chat SDK agents fixes this: the agent writes a JSON spec against a typed component catalog, and adapters post it natively.

What it is

json-render gives agents a typed catalog of components like tables, charts, and buttons. The agent emits a JSON spec that becomes a Chat SDK card, and each adapter renders it in the platform's native format, such as Block Kit on Slack or Adaptive Cards on Teams.

Applied case

A developer wiring a Chat SDK agent into Slack and Teams can stream a card with streamCard, which posts once the root element has content and updates as new elements arrive, throttled to one edit per 500 ms by default to match Chat SDK streaming. toCard validates every element's props against its component schema and throws CardSpecError with readable issues you can send back to the model for a corrected spec. The Slack adapter degrades content past platform caps, like turning a second table into a code block, unless you pass limits to reject those specs instead.

  • Validate specs with toCard and return CardSpecError issues to the model for self-correction

When to use it

Use when your agent must deliver rich, validated UI across multiple chat platforms without bespoke message code. Skip when you only send plain text or a single fixed card shape.

Read more

Vercel changelog

Share:

Recommended for you

Enjoyed this article?

Subscribe for new articles. No spam. Unsubscribe anytime.

By subscribing you agree to receive the newsletter. No spam, and you can unsubscribe anytime.