Chat SDK adds web adapter support

Source: Vercel Blog

Overview

You can now build chat UIs that connect to Chat SDK with the new web adapter. Build in‑product assistants, support agents, or any other browser‑based chat experience.

Define the bot on your server

File: lib/bot.ts

import { Chat } from "chat";
import { createWebAdapter } from "@chat-adapter/web";

const bot = new Chat({
  userName: "mybot",
  adapters: {
    web: createWebAdapter({
      userName: "mybot",
      getUser: (req) => ({ id: getUserIdFromCookie(req) }),
    }),
  },
});

bot.onDirectMessage(async (thread, message) => {
  await thread.post(`You said: ${message.text}`);
});

Echo each direct message back to the sender.

Stream replies live to the browser

Then stream replies live to the browser with a preconfigured @ai-sdk/react useChat hook.

File: app/chat/page.tsx

import { useChat } from "@chat-adapter/web/react";

const { messages, sendMessage, status } = useChat();

Wire the bot into a React component.

Resources

• Chat SDK documentation – Web adapter
• Browse the supported adapters
• Learn how to build your own adapter