Inside vercel/chat: A JSX Runtime for the Chat Interface

We quickly learned that that chat API seems similar on the surface but completely different under the hood.

- Malte Ubl, CTO, Vercel (Introducing Chat SDK)

The End of JSON Schema Hell

If you have ever built a bot that spans multiple platforms, you know the pain of UI fragmentation. Slack requires Block Kit, a deeply nested JSON schema. Microsoft Teams demands Adaptive Cards, an entirely different XML-like JSON structure. Discord relies on its own proprietary embed format. The result is usually a codebase riddled with conditional platform checks and duplicated presentation logic.

The vercel/chat SDK eliminates this by introducing a functional JSX runtime specifically for chat interfaces. Instead of writing bespoke JSON, developers build interactive <Card>, <Table>, and <Button> components. The SDK rendering engine compiles these generic components down to the target platform native format on the fly.

When a target platform lacks a native equivalent (for instance, rendering a data table on Discord), the SDK gracefully degrades the output into padded ASCII text. This write-once, run-anywhere approach mirrors what React achieved for the browser DOM. It allows developers to focus on AI logic rather than platform-specific formatting quirks.

Faking a Real-Time Stream

Modern AI applications rely on token streaming to keep users engaged while large language models generate responses. However, most legacy chat platforms were built for static messages. While Slack supports native message updating that can simulate a stream, platforms like Teams and Discord do not have built-in streaming APIs.

To bridge this gap, vercel/chat implements a clever Post+Edit fallback mechanism. As the Vercel AI SDK streams tokens, the Chat SDK buffers them. Once a specific chunk size is reached, or a semantic finish-step event fires, the SDK issues a standard POST request to create the initial message. Subsequent chunks trigger PATCH or Edit requests, appending the new text to the existing message.

Serverless State and Event Normalization

Beneath the UI layer, the SDK operates on a Core + Adapter architecture. The central Chat class acts as an orchestrator, while platform-specific adapters translate incoming webhooks into a normalized event lifecycle. A "reaction_added" webhook from Slack and a "messageReactionAdd" payload from Discord both trigger the exact same onReaction handler in the developer codebase.

Because the SDK is designed for serverless environments like Vercel Edge Functions, it cannot rely on in-memory state to track conversation context. It solves this using a Thread primitive backed by pluggable State Adapters, such as Redis or PostgreSQL. When a user replies to an AI agent, the SDK rehydrates the conversation state from the database, processes the new input, and suspends the state again. This makes the bot entirely stateless between invocations.

The Headless Delivery Layer

It is important to understand what vercel/chat is not. It is not a monolithic bot server like the Microsoft Bot Framework, nor is it a full-stack, consumer-facing application like LibreChat. It is a headless integration layer.

By decoupling the AI logic (handled by the Vercel AI SDK) from the delivery mechanism, teams can build complex, multi-agent systems and deploy them wherever their users already work.

Sources:

• vercel/chat GitHub Repository
• Vercel Chat SDK Open Source Announcement
• Introducing Chat SDK (YouTube)