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

X postGuillermo RauchAnnouncement

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.

Key points

  1. json-render converts LLM-generated JSON specifications directly into interactive cards inside chat apps.
  2. Adapters render components natively, using Slack Block Kit and Microsoft Teams Adaptive Cards.
  3. A typed component catalog provides tables, charts, and buttons, avoiding bespoke tools for each message type.
  4. streamCard posts the card immediately and streams edits at a default interval of up to once every 500 ms.
  5. Invalid component specs trigger CardSpecError with actionable feedback that can be sent back to the model.

Why it matters

Teams building conversational agents can deliver rich, native UI experiences within workplace tools like Slack and Teams without maintaining separate frontend payloads or custom rendering pipelines.

Analysis

Vercel connects the AI SDK, Chat SDK, and json-render to bring Generative UI directly into conversational enterprise platforms. Rather than relying solely on raw text or Markdown, agents emit structured JSON based on a pre-defined component catalog.

How It Works

Using standard definitions from json-render, developers provide a component catalog to the model prompt (illustrated in documentation using models such as Claude Haiku 5.5). When mentioned, the bot streams JSON that json-render parses and turns into a Chat SDK card. The streamCard function renders the initial root element immediately and throttles incremental updates to 500 ms intervals, matching platform streaming limits.

Validation and Platform Constraints

Schema enforcement is handled via toCard, which checks element properties against the component definition. If the model generates invalid parameters, CardSpecError provides granular issue descriptions that can be fed back to the model for automated correction. Adapters also manage platform-specific message caps; for instance, the Slack adapter will gracefully degrade a second table into a code block, or reject the specification if strict limits are enabled.

Original post

Guillermo Rauch

@rauchg · 7 November 2026

Generative UI for conversational agents. Combining @aisdk with Chat SDK and 𝚓𝚜𝚘𝚗-𝚛𝚎𝚗𝚍𝚎𝚛, you can go straight from LLM to UI on platforms like Slack and Teams. I believe this will become the dominant Human-Agent Interaction (HAI) paradigm: t.co/MHxtLyoy7t t.co/tRgxRi5Hey

2.4k likes219 replies2.6k bookmarks163k views

View on X
Selected replies (5)
  • @KenjiGinjo @rauchg @aisdk LLM → JSON → UI on Slack. this path will stick.
  • @davidtakeaction @seflless @marcelmarais @rauchg @aisdk yes like we used to do in telnet with MUDs, screen is refreshed each time but its a grid, so some things stay some things go
  • @rickwong888 @rauchg @aisdk @grok what’s the license for these libraries os/mit?
  • @UtkarshDeoli @rauchg @aisdk I've shipped this for chat. Tool calls rendering as forms works for read only flows, but when the model picks a field you need strict schema validation or users submit garbage. UI generation is the easy half.
  • @kris_tinkers @rauchg @aisdk Generative UI in Slack and Teams makes sense. The interesting question is whether permissions follow the UI. An agent rendering an approval button is easy. Making sure the right person is allowed to press it is the actual product.

Mentioned links

Links and tools from this entry

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.

  • Link:Chris Tate

    Stream Generative UI in Chat SDK Agents Using json-render

    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.

    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.