@chat-adapter/web weekly downloads statistics

@chat-adapter/web

npm package: @chat-adapter/web

Web adapter for Chat SDK. Lets a chat-sdk bot serve a browser chat UI alongside Slack, Teams, Discord, etc. — the same bot.onDirectMessage(...) handler fires for every platform.

The adapter speaks the AI SDK UI message stream protocol, so React, Vue, and Svelte AI SDK clients work against the same server endpoint.

Documentation: chat-sdk.dev/adapters/official/web · Guides: vercel.com/kb/chat-sdk

Installation

Then install the framework package that matches your UI:

| Framework | Package | Import from |

| React / Next.js | @ai-sdk/react | @chat-adapter/web/react | | Vue / Nuxt | @ai-sdk/vue | @chat-adapter/web/vue | | Svelte / SvelteKit | @ai-sdk/svelte | @chat-adapter/web/svelte |

Scaffold with the CLI

To scaffold a new browser chat bot with the Web adapter preselected:

Visit the adapters directory to see other available official and vendor-official adapters.

Quick start

Server

Client

React

Vue

Svelte

Authentication

getUser is the security boundary for the Web adapter. Unlike Slack/Teams where the platform signs every webhook, web requests come straight from a browser — you must identify the caller yourself. Returning null causes the adapter to respond with HTTP 401 and no handler runs.

Plug in whatever your app already uses:

If getUser throws, the adapter returns 401 and logs the error. Don't include sensitive data in the error message — it's not surfaced to the client, but it is logged.

The resolved user.id is embedded in the chat-sdk thread id (see Threading below). User ids containing : are rejected with HTTP 400 because they would corrupt the round-trip through decodeThreadId. If your auth provider emits ids with colons (e.g. provider:sub claims), normalize them inside getUser — for example by base64-encoding.

Threading

By default, each useChat conversation maps to one chat-sdk thread:

conversationId is the id field useChat sends in its request body. If your client supplies one (useChat({ id: "support-chat" })), it's reused across reloads; otherwise a fresh id is generated per request.

channel.messages and thread.messages are equivalent on web — the channel id is the thread id. This avoids cross-conversation bleed when persistMessageHistory is enabled and the same user has multiple useChat conversations open.

To override (for example, one thread per user regardless of conversation):

The encode/decode helpers are exposed on the adapter:

Streaming

thread.post accepts an AsyncIterable and pumps deltas straight onto the SSE response body — no edit loop, no rate limiting. Plays nicely with the AI SDK's streamText:

The adapter honors request.signal, so calling stop() from useChat short-circuits the iterator on the server. task_update and plan_update StreamChunks have no native v1 representation in the UI message stream and are dropped silently.

Message persistence

persistMessageHistory defaults to true. Web has no platform-side history API, so the only way for chat-sdk handlers to see prior turns via thread.messages / channel.messages is through the configured state adapter's message history cache. Set it to false only if your handler re-derives history from the request body's messages[] itself:

The AI SDK client retains the conversation in its UI state and resends it on every request, so opting out is a valid choice for stateless handlers — but anything that calls await thread.messages won't see prior turns.

Framework helpers

@chat-adapter/web/react exports a thin wrapper around @ai-sdk/react's useChat preconfigured with DefaultChatTransport:

| Option | Description |

| api | API endpoint for the Web adapter route. Defaults to /api/chat. | | threadId | chat-sdk thread id — surfaces in the request body's id so the server can derive the chat-sdk thread id. Strongly recommended. Falls back to id from ChatInit. | | experimental_throttle | Throttle wait in ms for chat messages and data updates. | | resume | Whether to resume an ongoing chat generation stream. | | ...rest | All other options pass through to @ai-sdk/react's useChat. |

For advanced configuration (custom transport, response interceptors, etc.) use @ai-sdk/react's useChat directly — there's nothing magical in the wrapper.

@chat-adapter/web/vue exports a useChat factory that returns a Vue-reactive Chat instance from @ai-sdk/vue:

@chat-adapter/web/svelte exports a useChat factory that returns a Svelte-reactive Chat instance from @ai-sdk/svelte:

Unlike the React helper, Vue and Svelte return the Chat instance directly. Access chat.messages, chat.sendMessage(), chat.status, and chat.stop() on that object instead of destructuring.

Configuration

| Option | Required | Description |

| userName | Yes | Bot username. Required by chat-sdk for mention detection (@username) and seeds the bot identity for assistant messages. | | getUser | Yes | (request: Request) => WebUser \| null \| Promise. Resolves the user from the inbound HTTP request. Returning null produces HTTP 401. | | persistMessageHistory | No | Persist incoming message history in the configured state adapter. Default: true. | | threadIdFor | No | Derive a chat-sdk thread id from the resolved user and the useChat conversation id. Default: web:{user.id}:{conversationId}. | | logger | No | Logger instance (defaults to ConsoleLogger("info")). |

Features

Messaging

| Feature | Supported |

| Post message | Yes | | Edit message | No (every assistant turn is a fresh streamed response) | | Delete message | No | | File uploads | No (deferred to v2) | | Streaming | Native (SSE / UI message stream) | | Scheduled messages | No |

Rich content

| Feature | Supported |

| Card format | Markdown only in v1 (cards/JSX deferred to v2) | | Buttons | No | | Tables | Yes (GFM markdown) | | Modals | No |

Conversations

| Feature | Supported |…

Description from the npm listing.