Stream Generative UI in Chat SDK Agents Using json-render

LinkChris TateAnnouncement

Vercel has added json-render support to its Chat SDK, enabling agents to stream generative UI directly into chat platforms. A typed component catalogue converts JSON specs into native Block Kit or Adaptive Cards messages. This simplifies delivering structured, interactive UI from AI bots.

Key points

  1. json-render converts model-generated JSON specs into native platform formats such as Slack Block Kit and Teams Adaptive Cards.
  2. streamCard posts the card as soon as the root element arrives and streams updates at a default interval of up to 500 ms.
  3. The catalogue provides prebuilt components such as tables, charts, and buttons without requiring custom messaging tools.
  4. toCard validates element properties against component schemas, returning readable CardSpecError issues suitable for model re-prompting.
  5. Chat SDK adapters automatically degrade content exceeding platform caps (e.g. converting extra Slack tables into code blocks) or reject them via limits.

Why it matters

Engineers no longer need to build and maintain bespoke tool definitions or platform-specific UI builders for every messaging platform their agents support.

Analysis

Vercel's integration of json-render into the Chat SDK simplifies the delivery of rich, structured user interfaces inside conversational agents.

How it works

Developers create a typed catalogue using @json-render/core and standard components from @json-render/chat. This catalogue provides a system prompt to the LLM (demonstrated with anthropic/claude-haiku-5.5). The model streams back a JSON specification, which streamCard renders incrementally into the destination thread as elements arrive, throttling message edits to 500 ms intervals.

Validation and Platform Caps

  • Spec validation: The toCard function verifies element attributes against schema definitions. If invalid attributes are encountered, a CardSpecError is thrown with descriptive feedback, allowing systems to prompt the LLM for a corrected spec.
  • Adapter degradation: Because chat providers restrict message complexity, adapters handle oversized content gracefully. For example, Slack degrades a second table into raw code blocks, though developers can configure limits to reject oversized specs outright.

Found in

Summary generated by AI (Gemini 3.8 Flash, 8 November 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • X post:Guillermo Rauch

    Generative UI in Slack and Teams via AI SDK, Chat SDK, and json-render

    Vercel has introduced generative UI streaming for Chat SDK agents using json-render. Language models output typed JSON specifications that convert directly into native UI cards for platforms like Slack and Microsoft Teams. Guillermo Rauch predicts this approach will become the dominant paradigm for Human-Agent Interaction.

    2.6kbookmarks163kviews

    AI & LLMs· Announcement

  • X post:Chris Tate

    json-render/chat: Generative UI for Slack and Microsoft Teams

    Chris Tate announced json-render/chat, a library enabling generative user interfaces across enterprise chat apps such as Slack and Microsoft Teams. AI agents can reply with native cards containing tables, charts, fields, and buttons. UI components stream in real time using a unified catalogue across Chat SDK platforms.

    5.1kbookmarks240.4kviews

    AI & LLMs· Announcement

  • Repository:vercel/ai

    Vercel AI SDK: Provider-Agnostic TypeScript Toolkit for AI Applications and Agents

    Vercel's AI SDK is an open-source TypeScript library for developing AI-powered applications and agents. It provides a unified API across diverse model providers including OpenAI, Anthropic, and Google, and integrates directly with frameworks such as Next.js, React, Svelte, Vue, and Angular.

    26.6kstarsTypeScript

    AI & LLMs· Tool

  • Link:vercel.com

    Vercel AI Cloud: Infrastructure and AI SDK for AI Web Applications

    Vercel presents its specialised infrastructure platform designed for AI workloads. The offering combines services such as an AI Gateway for model switching, Fluid Compute, secure sandboxes, and the open-source AI SDK for JavaScript and TypeScript.

    AI & LLMs· Tool

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.