Chat SDK, 웹 어댑터 지원 추가

Source: Vercel Blog

개요

새로운 웹 어댑터를 사용하여 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 훅을 사용해 브라우저에 실시간으로 응답을 스트리밍합니다.

파일: app/chat/page.tsx

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

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

봇을 React 컴포넌트에 연결합니다.

리소스

• Chat SDK 문서 – 웹 어댑터
• 지원되는 어댑터 살펴보기
• 자신만의 어댑터 만드는 방법 배우기