chat-sdk

작성자: vercel

Vercel Chat SDK 전문가 가이드. Slack, Telegram, Microsoft Teams, Discord, Google Chat, GitHub, Linear 등 멀티 플랫폼 챗봇을 구축할 때 사용합니다.

npx skills add https://github.com/vercel/vercel-plugin --skill chat-sdk

Chat SDK

Unified TypeScript SDK for building chat bots across Slack, Teams, Google Chat, Discord, Telegram, GitHub, Linear, and WhatsApp. Write bot logic once, deploy everywhere.

Start with published sources

When Chat SDK is installed in a user project, inspect the published files that ship in node_modules:

node_modules/chat/docs/                    # bundled docs
node_modules/chat/dist/index.d.ts          # core API types
node_modules/chat/dist/jsx-runtime.d.ts    # JSX runtime types
node_modules/chat/docs/contributing/       # adapter-authoring docs
node_modules/chat/docs/guides/             # framework/platform guides

If one of the paths below does not exist, that package is not installed in the project yet.

Read these before writing code:

  • node_modules/chat/docs/getting-started.mdx — install and setup
  • node_modules/chat/docs/usage.mdxChat config and lifecycle
  • node_modules/chat/docs/handling-events.mdx — event routing and handlers
  • node_modules/chat/docs/threads-messages-channels.mdx — thread/channel/message model
  • node_modules/chat/docs/posting-messages.mdx — post, edit, delete, schedule
  • node_modules/chat/docs/streaming.mdx — AI SDK integration and streaming semantics
  • node_modules/chat/docs/cards.mdx — JSX cards
  • node_modules/chat/docs/actions.mdx — button/select interactions
  • node_modules/chat/docs/modals.mdx — modal submit/close flows
  • node_modules/chat/docs/slash-commands.mdx — slash command routing
  • node_modules/chat/docs/direct-messages.mdx — DM behavior and openDM()
  • node_modules/chat/docs/files.mdx — attachments/uploads
  • node_modules/chat/docs/state.mdx — persistence, locking, dedupe
  • node_modules/chat/docs/adapters.mdx — cross-platform feature matrix
  • node_modules/chat/docs/api/chat.mdx — exact Chat API
  • node_modules/chat/docs/api/thread.mdx — exact Thread API
  • node_modules/chat/docs/api/message.mdx — exact Message API
  • node_modules/chat/docs/api/modals.mdx — modal element and event details

For the specific adapter or state package you are using, inspect that installed package's dist/index.d.ts export surface in node_modules.

Quick start

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(),
  dedupeTtlMs: 600_000,
});

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

Core concepts

  • Chat — main entry point; coordinates adapters, routing, locks, and state
  • Adapters — platform-specific integrations for Slack, Teams, Google Chat, Discord, Telegram, GitHub, Linear, and WhatsApp
  • State adapters — persistence for subscriptions, locks, dedupe, and thread state
  • Thread — conversation context with post(), stream(), subscribe(), setState(), startTyping()
  • Message — normalized content with text, formatted, attachments, author info, and platform raw
  • Channel — container for threads and top-level posts

Event handlers

HandlerTrigger
onNewMentionBot @-mentioned in an unsubscribed thread
onDirectMessageNew DM in an unsubscribed DM thread
onSubscribedMessageAny message in a subscribed thread
onNewMessage(regex)Regex match in an unsubscribed thread
onReaction(emojis?)Emoji added or removed
onAction(actionIds?)Button clicks and select/radio interactions
onModalSubmit(callbackId?)Modal form submitted
onModalClose(callbackId?)Modal dismissed/cancelled
onSlashCommand(commands?)Slash command invocation
onAssistantThreadStartedSlack assistant thread opened
onAssistantContextChangedSlack assistant context changed
onAppHomeOpenedSlack App Home opened
onMemberJoinedChannelSlack member joined channel event

Read node_modules/chat/docs/handling-events.mdx, node_modules/chat/docs/actions.mdx, node_modules/chat/docs/modals.mdx, and node_modules/chat/docs/slash-commands.mdx before wiring handlers. onDirectMessage behavior is documented in node_modules/chat/docs/direct-messages.mdx.

Streaming

Pass any AsyncIterable<string> to thread.post() or thread.stream(). For AI SDK, prefer result.fullStream over result.textStream when available so step boundaries are preserved.

import { ToolLoopAgent } from "ai";

const agent = new ToolLoopAgent({ model: "anthropic/claude-4.5-sonnet" });

bot.onNewMention(async (thread, message) => {
  const result = await agent.stream({ prompt: message.text });
  await thread.post(result.fullStream);
});

Key details:

  • streamingUpdateIntervalMs controls post+edit fallback cadence
  • fallbackStreamingPlaceholderText defaults to "..."; set null to disable
  • Structured StreamChunk support is Slack-only; other adapters ignore non-text chunks

Cards and modals (JSX)

Set jsxImportSource: "chat" in tsconfig.json.

Card components:

  • Card, CardText, Section, Fields, Field, Button, CardLink, LinkButton, Actions, Select, SelectOption, RadioSelect, Table, Image, Divider

Modal components:

  • Modal, TextInput, Select, SelectOption, RadioSelect
await thread.post(
  <Card title="Order #1234">
    <CardText>Your order has been received.</CardText>
    <Actions>
      <Button id="approve" style="primary">Approve</Button>
      <Button id="reject" style="danger">Reject</Button>
    </Actions>
  </Card>
);

Adapter inventory

Official platform adapters

PlatformPackageFactory
Slack@chat-adapter/slackcreateSlackAdapter
Microsoft Teams@chat-adapter/teamscreateTeamsAdapter
Google Chat@chat-adapter/gchatcreateGoogleChatAdapter
Discord@chat-adapter/discordcreateDiscordAdapter
GitHub@chat-adapter/githubcreateGitHubAdapter
Linear@chat-adapter/linearcreateLinearAdapter
Telegram@chat-adapter/telegramcreateTelegramAdapter
WhatsApp Business Cloud@chat-adapter/whatsappcreateWhatsAppAdapter

Official state adapters

State backendPackageFactory
Redis@chat-adapter/state-rediscreateRedisState
ioredis@chat-adapter/state-iorediscreateIoRedisState
PostgreSQL@chat-adapter/state-pgcreatePostgresState
Memory@chat-adapter/state-memorycreateMemoryState

Community adapters

  • chat-state-cloudflare-do
  • @beeper/chat-adapter-matrix
  • chat-adapter-imessage
  • @bitbasti/chat-adapter-webex
  • @resend/chat-sdk-adapter
  • chat-adapter-baileys

Coming-soon platform entries

  • Instagram
  • Signal
  • X
  • Messenger

Building a custom adapter

Read these published docs first:

  • node_modules/chat/docs/contributing/building.mdx
  • node_modules/chat/docs/contributing/testing.mdx
  • node_modules/chat/docs/contributing/publishing.mdx

Also inspect:

  • node_modules/chat/dist/index.d.tsAdapter and related interfaces
  • node_modules/@chat-adapter/shared/dist/index.d.ts — shared errors and utilities
  • Installed official adapter dist/index.d.ts files — reference implementations for config and APIs

A custom adapter needs request verification, webhook parsing, message/thread/channel operations, ID encoding/decoding, and a format converter. Use BaseFormatConverter from chat and shared utilities from @chat-adapter/shared.

Webhook setup

Each registered adapter exposes bot.webhooks.<name>. Wire those directly to your HTTP framework routes. See node_modules/chat/docs/guides/slack-nextjs.mdx and node_modules/chat/docs/guides/discord-nuxt.mdx for framework-specific route patterns.

vercel의 다른 스킬

vercel
vercel
로컬 개발 및 테스트를 위한 Vercel REST API 에뮬레이션입니다. 사용자가 로컬에서 Vercel API 엔드포인트와 상호작용하거나 Vercel 통합을 테스트해야 할 때 사용합니다.
cron-jobs
vercel
Vercel Cron Jobs 구성 및 모범 사례. vercel.json에서 예약된 작업을 추가, 편집 또는 디버깅할 때 사용합니다.
codegen
vercel
json-render을 위한 코드 생성 유틸리티입니다. UI 명세서에서 코드를 생성하거나, 사용자 정의 코드 내보내기를 구축하거나, 명세서를 탐색하거나, props를 직렬화할 때 사용합니다.
next-best-practice
vercel
Next.js 모범 사례 - 파일 규칙, RSC 경계, 데이터 패턴, 비동기 API, 메타데이터, 오류 처리, 라우트 핸들러, 이미지/폰트 최적화,…
benchmark-sandbox
vercel
Vercel Sandbox에서 vercel-plugin eval 시나리오를 로컬 WezTerm 패널 대신 실행합니다. Claude Code와 플러그인이 사전 설치된 임시 마이크로VM을 프로비저닝합니다.
write-guide
vercel
점진적인 예제를 통해 실제 사용 사례를 가르치는 기술 가이드를 제작합니다. 개념은 독자가 필요로 할 때만 소개됩니다.
benchmark-testing
vercel
벤치마크 테스트 프로젝트를 생성하고 실행하여 실제 시나리오에서 vercel-plugin 스킬 인젝션을 테스트합니다. 격리된 디렉토리를 설정하고, 설치하며…
ai-gateway
vercel
Vercel AI Gateway 전문가 안내. 모델 라우팅, 제공업체 장애 조치, 비용 추적 또는 통합된 방식을 통해 여러 AI 제공업체를 관리할 때 사용합니다.