Chat SDK Adds Web Adapter Support
TL;DR · AI Summary
Vercel's Chat SDK now supports Web Adapter, enabling developers to build browser-connected chat interfaces.
Key Takeaways
- Chat SDK now supports Web Adapter for direct client-server model communication.
- Use createWebAdapter to quickly integrate chat functionality in browser environm
- Ideal for real-time chat experiences like in-product assistants and support agen
Outline
Jump quickly between sections.
Vercel announced Web Adapter support for Chat SDK on May 8, 2026, enabling chat logic to run in browsers.
Web Adapter connects client and backend AI models via createWebAdapter function for bidirectional message flow.
Supports deploying chat features in real-time interactive Web apps such as in-product assistants and customer support agents.
Developers define bot logic in lib/bot.ts and use Web Adapter for browser compatibility.
Mindmap
See how the topics connect at a glance.
查看大纲文本（无障碍 / 无 JS 友好）
- Chat SDK Web Adapter 支持
- 核心功能
- 浏览器端聊天连接
- 双向消息流
- 技术实现
- createWebAdapter API
- 服务器端 Bot 定义
- 应用场景
- 产品内嵌助手
- 客服代理系统
- 实时 Web 对话
Highlights
Key sentences worth saving and sharing.
You can now build chat UIs that connect to Chat SDK with the new web adapter.
Define the bot on your server: import { Chat } from 'chat'; import { createWebAdapter } from '@chat-adapter/web';
Build in-product assistants, support agents, or any other browser-based chat experience.
Chat SDK adds web adapter support - Vercel
[](https://vercel.com/home)
- Products
- ##### AI Cloud
- AI Gateway One endpoint, all your models
- Sandbox Isolated, safe code execution
- Vercel Agent An agent that knows your stack
- AI SDK The AI Toolkit for TypeScript
- v0 Build applications with AI
- ##### Core Platform
- CI/CD Helping teams ship 6× faster
- Content Delivery Fast, scalable, and reliable
- Fluid Compute Servers, in serverless form
- Workflow Long-running workflows at scale
- Observability Trace every step
- ##### Security
- Bot Management Scalable bot protection
- BotID Invisible CAPTCHA
- Platform Security DDoS Protection, Firewall
- Web Application Firewall Granular, custom protection
- Resources
- ##### Company
- Customers Trusted by the best teams
- Blog The latest posts and changes
- Changelog See what shipped
- Press Read the latest news
- Events Join us at an event
- ##### Learn
- Docs Vercel documentation
- Academy Linear courses to level up
- Knowledge Base Find help quickly
- Community Join the conversation
- ##### Open Source
- Next.js The native Next.js platform
- Nuxt The progressive web framework
- Svelte The web’s efficient UI framework
- Turborepo Speed with Enterprise scale
- Solutions
- ##### Use Cases
- AI Apps Deploy at the speed of AI
- Composable Commerce Power storefronts that convert
- Marketing Sites Launch campaigns fast
- Multi-tenant Platforms Scale apps with one codebase
- Web Apps Ship features, not infrastructure
- ##### Tools
- Marketplace Extend and automate workflows
- Templates Jumpstart app development
- Partner Finder Get help from solution partners
- ##### Users
Ask AI
Ask AILog In
Chat SDK adds web adapter support
1 min read
Copy URL
Copied to clipboard!
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
1import { Chat } from "chat";2import { createWebAdapter } from "@chat-adapter/web";3
4const bot = new Chat({5 userName: "mybot",6 adapters: {7 web: createWebAdapter({8 userName: "mybot",9 getUser: (req) => ({ id: getUserIdFromCookie(req) }),10 }),11 },12});13
14bot.onDirectMessage(async (thread, message) => {15 await thread.post(`You said: ${message.text}`);16});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
1import { useChat } from "@chat-adapter/web/react";2
3const { 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.
Ready to deploy?Start building with a free account. Speak to an expert for your _Pro_ or Enterprise needs.
Start DeployingTalk to an Expert
Explore Vercel Enterprise with an interactive product tour, trial, or a personalized demo.
Get Started
Build
Scale
Secure
Resources
Learn
Frameworks
SDKs
Use Cases
Company
Community
[](https://vercel.com/home)
Loading status…Select a display theme:system light dark