Chat SDK に Web アダプターサポートが追加
Vercel は Chat SDK に新しい Web アダプターを追加し、サーバー側で定義したボットをブラウザベースのチャット UI や社内アシスタントとして直接実装可能にした。
キーポイント
Web アダプターの導入
Chat SDK に新機能として Web アダプターが追加され、サーバー側で定義したボットをブラウザ環境に接続できるようになった。
リアルタイムストリーミング対応
@ai-sdk/react の useChat フックを使用することで、ボットの返信をブラウザ上でリアルタイムにストリーム配信できる。
多様なユースケースの実現
この機能により、社内製品のアシスタント、サポートエージェント、およびその他のブラウザベースのチャット体験を容易に構築可能になる。
影響分析・編集コメントを表示
影響分析
このアップデートは、Vercel のエコシステム内での AI チャット機能の実装コストと時間を大幅に削減し、フロントエンド開発者が複雑なバックエンド処理を意識せずに AI アシスタントを迅速にリリースできる環境を整えた。特に React ベースの Web アプリケーション開発において、AI 機能を標準的なチャットコンポーネントとして組み込むハードルを下げる重要な一歩となる。
編集コメント
開発者体験（DX）の向上に直結する機能追加であり、React プロジェクトにおける AI チャット実装のパターンを標準化しつつある。ただし、単なるアダプターの追加であり、LLM の推論能力そのものが革新されたわけではない点には留意が必要だ。
1 min read
May 8, 2026
新しい web adapter を使用して、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 ドキュメント を読むか、サポートされているアダプター を閲覧するか、独自のアダプターの構築方法 を学ぶことができます。
原文を表示
1 min read
May 8, 2026
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}`);});Echo each direct message back to the sender
Then stream replies live 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();Wire the bot into a React component
Read the Chat SDK documentation to get started, browse the supported adapters, or learn how to build your own.
関連記事
今日のまとめ
AI日報で今日の重要ニュースをまとめ読み