Skip to content

Chat SDK adds web adapter support

Ben Sabic, Josh Singh

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:

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}`);
});

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

app/chat/page.tsx
import { useChat } from "@chat-adapter/web/react";


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

Read the documentation to get started, browse the directory, or build your own adapter.

The Complete Guide to Chat SDK

Learn how Chat SDK works end-to-end: from core concepts to building your first chatbot to deploying it across platforms.

Read the guide