Chat SDK 添加 Web 适配器支持

Source: Vercel Blog

概览

现在可以使用全新的 web 适配器 构建连接到 Chat SDK 的聊天 UI。无论是产品内助理、客服代理，还是其他基于浏览器的聊天体验，都可以轻松实现。

在服务器上定义机器人

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

将每条直接消息原样回显给发送者。

实时向浏览器推送回复

随后使用预配置好的 @ai-sdk/react useChat Hook 将回复实时流式传输到浏览器。

文件: app/chat/page.tsx

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

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

将机器人接入到 React 组件中。

资源

• Chat SDK 文档 – Web 适配器
• 浏览受支持的适配器
• 学习如何构建自己的适配器