The previous commit let the card header row wrap, which fixed the clipping but made placement depend on each card's title length: with a 44px `Beta` badge, `Slack` (42px) and `Discord` (57px) still fit inline while `Google Chat` (93px) and `Microsoft Teams` (124px) pushed the badge onto the next line. Between roughly 430px and 560px — iPhone Pro Max width — a single grid row therefore showed both placements side by side. Wrapping is content-driven by definition, so replace it with a breakpoint switch. Below `md` (601px in the Geist scale) the header stacks: title, then badge on its own line, left-aligned, for every card. At `md` and up every card puts the badge inline to the right. Whether a badge fits is now a property of the layout, not of the name next to it. `md` is where the narrowest card can hold the widest badge with room to spare: the two-column band starts at 401px with ~123px of row width — less than the 115px `Vendor official` badge plus a gap — while at 601px the row is ~228px. Above `md` the title still wraps within its own flex item if it is long, so the badge keeps its position instead of being pushed out. Measured across 320-1440px: badge placement mode is uniform at every width (no width mixes inline and stacked), and the badge sits exactly 25px from the card edge in all 32 cards at all 22 widths sampled. Signed-off-by: aldo <5773006+aldosch@users.noreply.github.com> Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Co-Authored-By: aldo <5773006+aldosch@users.noreply.github.com>
.nvmrc file, formally specify Node version range support, and cover more versions in CI (#465)
Chat SDK
Unified TypeScript SDK for building chat bots across Slack, Microsoft Teams, Google Chat, Discord, Telegram, GitHub, Linear, WhatsApp, and more. Write your bot logic once, deploy everywhere.
Installation
npm i chat
Install one or more adapters for your platforms:
npm install @chat-adapter/slack @chat-adapter/teams @chat-adapter/gchat
CLI
Scaffold a minimal Next.js bot app with create-chat-sdk:
npx create-chat-sdk@latest my-bot
The CLI generates your Chat configuration, webhook route, .env.example file, dependencies, and optional Web adapter route from the adapter catalog. See the CLI docs for options and non-interactive usage.
Usage
import { Chat } from "chat";
import { createSlackAdapter } from "@chat-adapter/slack";
import { createRedisState } from "@chat-adapter/state-redis";
const bot = new Chat({
userName: "mybot",
adapters: {
slack: createSlackAdapter(),
},
state: createRedisState(),
});
bot.onNewMention(async (thread) => {
await thread.subscribe();
await thread.post("Hello! I'm listening to this thread.");
});
bot.onSubscribedMessage(async (thread, message) => {
await thread.post(`You said: ${message.text}`);
});
See the Getting Started guide for a full walkthrough.
Adapters
Browse official, vendor-official, and community adapters on chat-sdk.dev/adapters. Learn how to build your own adapter.
Features
- Event handlers — mentions, messages, reactions, button clicks, slash commands, modals
- AI streaming — stream LLM responses with native Slack streaming, Telegram private chat draft previews, and post+edit fallback
- Cards — JSX-based interactive cards (Block Kit, Adaptive Cards, Google Chat Cards)
- Actions — handle button clicks and dropdown selections
- Modals — form dialogs with text inputs, dropdowns, and validation
- Slash commands — handle
/commandinvocations - Emoji — type-safe, cross-platform emoji with custom emoji support
- File uploads — send and receive file attachments
- Direct messages — initiate DMs programmatically
- Ephemeral messages — user-only visible messages with DM fallback
- Overlapping messages - burst, queue, debounce, drop, or process concurrent messages on the same thread
AI Coding Agents
If you use an AI coding agent such as OpenAI Codex, Claude Code, or Cursor, install the Chat SDK skill so it knows the SDK APIs, adapter patterns, and project conventions before writing code.
npx skills add vercel/chat
The skill references bundled documentation in node_modules/chat/docs, plus adapter guides and starter templates in the published package.
You can also install the Vercel Plugin for a broader agent toolkit. It includes the Chat SDK skill alongside specialist agents, slash commands, and more:
npx plugins add vercel/vercel-plugin
For agent-readable documentation, see chat-sdk.dev/llms.txt (page index) or chat-sdk.dev/llms-full.txt (full text).
Documentation
Full documentation is available at chat-sdk.dev/docs and guides are available in the Vercel Knowledge Base.
Contributing
See CONTRIBUTING.md for guidance on contributing to Chat SDK.
Support
For help or questions, see SUPPORT.md.
To report a security vulnerability, see SECURITY.md.
License
MIT