💬 チャットSDK
SlackやTeamsなど様々なチャットサービスで
📺 まず動画で見る(YouTube)
▶ 【最新版】Claude(クロード)完全解説!20以上の便利機能をこの動画1本で全て解説 ↗
※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。
📜 元の英語説明(参考)
Build multi-platform chat bots with Chat SDK (`chat` npm package). Use when developers want to (1) Build a Slack, Teams, Google Chat, Discord, GitHub, or Linear bot, (2) Use the Chat SDK to handle mentions, messages, reactions, slash commands, cards, modals, or streaming, (3) Set up webhook handlers for chat platforms, (4) Send interactive cards or stream AI responses to chat platforms. Triggers on "chat sdk", "chat bot", "slack bot", "teams bot", "discord bot", "@chat-adapter", building bots that work across multiple chat platforms.
🇯🇵 日本人クリエイター向け解説
SlackやTeamsなど様々なチャットサービスで
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o chat-sdk.zip https://jpskill.com/download/1269.zip && unzip -o chat-sdk.zip && rm chat-sdk.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/1269.zip -OutFile "$d\chat-sdk.zip"; Expand-Archive "$d\chat-sdk.zip" -DestinationPath $d -Force; ri "$d\chat-sdk.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
chat-sdk.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
chat-sdkフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-17
- 同梱ファイル
- 1
💬 こう話しかけるだけ — サンプルプロンプト
- › Chat SDK で、お客様への返信文を作って
- › Chat SDK を使って、社内向けアナウンスを書いて
- › Chat SDK で、メールテンプレートを整備して
これをClaude Code に貼るだけで、このSkillが自動発動します。
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Chat SDK
Slack、Teams、Google Chat、Discord、GitHub、Linear など、さまざまなプラットフォームでチャットボットを構築するための統合 TypeScript SDK です。ボットのロジックを一度書けば、どこにでもデプロイできます。
重要: バンドルされているドキュメントをお読みください
chat パッケージには、node_modules/chat/docs/ に完全なドキュメントと TypeScript ソースタイプが同梱されています。コードを書く前に、必ずこれらをお読みください。
node_modules/chat/docs/ # 完全なドキュメント (MDX ファイル)
node_modules/chat/dist/ # ビルドされた型 (.d.ts ファイル)
タスクに基づいて読むべき主要なドキュメント:
docs/getting-started.mdx— セットアップガイドdocs/usage.mdx— イベントハンドラー、スレッド、メッセージ、チャンネルdocs/streaming.mdx— AI SDK を使用した AI ストリーミングdocs/cards.mdx— JSX インタラクティブカードdocs/actions.mdx— ボタン/ドロップダウンハンドラーdocs/modals.mdx— フォームダイアログ (Slack のみ)docs/adapters/*.mdx— プラットフォーム固有のアダプター設定docs/state/*.mdx— 状態アダプター設定 (Redis、ioredis、memory)
また、node_modules/chat/dist/ から TypeScript の型を読んで、完全な API サーフェスを理解してください。
クイックスタート
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({
botToken: process.env.SLACK_BOT_TOKEN!,
signingSecret: process.env.SLACK_SIGNING_SECRET!,
}),
},
state: createRedisState({ url: process.env.REDIS_URL! }),
});
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}`);
});
コアコンセプト
- Chat — メインのエントリーポイントで、アダプターを調整し、イベントをルーティングします。
- Adapters — プラットフォーム固有 (Slack、Teams、GChat、Discord、GitHub、Linear)
- State — プラグ可能な永続化 (本番環境では Redis、開発環境ではメモリ)
- Thread —
post()、subscribe()、startTyping()を持つ会話スレッド - Message —
text、formatted(mdast AST)、rawを持つ正規化された形式 - Channel — スレッドのコンテナで、リスト表示と投稿をサポートします。
イベントハンドラー
| ハンドラー | トリガー |
|---|---|
onNewMention |
未購読スレッドでボットが @メンションされた場合 |
onSubscribedMessage |
購読済みスレッド内の任意のメッセージ |
onNewMessage(regex) |
未購読スレッド内でパターンに一致するメッセージ |
onSlashCommand("/cmd") |
スラッシュコマンドの呼び出し |
onReaction(emojis) |
絵文字リアクションが追加/削除された場合 |
onAction(actionId) |
ボタンクリックとドロップダウン選択 |
onAssistantThreadStarted |
Slack Assistants API スレッドが開かれた場合 |
onAppHomeOpened |
Slack App Home タブが開かれた場合 |
ストリーミング
任意の AsyncIterable<string> を thread.post() に渡します。AI SDK の textStream と連携します。
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.textStream);
});
カード (JSX)
tsconfig で jsxImportSource: "chat" を設定します。コンポーネント: Card、CardText、Button、Actions、Fields、Field、Select、SelectOption、Image、Divider、LinkButton、Section、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>,
);
パッケージ
| パッケージ | 目的 |
|---|---|
chat |
コア SDK |
@chat-adapter/slack |
Slack |
@chat-adapter/teams |
Microsoft Teams |
@chat-adapter/gchat |
Google Chat |
@chat-adapter/discord |
Discord |
@chat-adapter/github |
GitHub Issues |
@chat-adapter/linear |
Linear Issues |
@chat-adapter/state-redis |
Redis 状態 (本番環境) |
@chat-adapter/state-ioredis |
ioredis 状態 (代替) |
@chat-adapter/state-memory |
インメモリ状態 (開発環境) |
Changesets (リリースフロー)
このモノレポは、バージョン管理と変更履歴に Changesets を使用しています。パッケージの動作を変更するすべての PR には、Changeset を含める必要があります。
pnpm changeset
# → 影響を受けるパッケージを選択 (例: @chat-adapter/slack, chat)
# → バンプタイプを選択: patch (修正), minor (機能), major (破壊的変更)
# → CHANGELOG の短い要約を記述
これにより、.changeset/ にファイルが作成されます。これを PR とともにコミットしてください。main にマージされると、Changesets GitHub Action が「Version Packages」PR を開き、バージョンをバンプして CHANGELOG を更新します。その PR をマージすると、npm に公開されます。
Webhook のセットアップ
各アダプターは、bot.webhooks.{platform} を介して Webhook ハンドラーを公開しています。これらを HTTP フレームワークのルート (例: Next.js API ルート、Hono、Express) に接続してください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Chat SDK
Unified TypeScript SDK for building chat bots across Slack, Teams, Google Chat, Discord, GitHub, and Linear. Write bot logic once, deploy everywhere.
Critical: Read the bundled docs
The chat package ships with full documentation in node_modules/chat/docs/ and TypeScript source types. Always read these before writing code:
node_modules/chat/docs/ # Full documentation (MDX files)
node_modules/chat/dist/ # Built types (.d.ts files)
Key docs to read based on task:
docs/getting-started.mdx— setup guidesdocs/usage.mdx— event handlers, threads, messages, channelsdocs/streaming.mdx— AI streaming with AI SDKdocs/cards.mdx— JSX interactive cardsdocs/actions.mdx— button/dropdown handlersdocs/modals.mdx— form dialogs (Slack only)docs/adapters/*.mdx— platform-specific adapter setupdocs/state/*.mdx— state adapter config (Redis, ioredis, memory)
Also read the TypeScript types from node_modules/chat/dist/ to understand the full API surface.
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({
botToken: process.env.SLACK_BOT_TOKEN!,
signingSecret: process.env.SLACK_SIGNING_SECRET!,
}),
},
state: createRedisState({ url: process.env.REDIS_URL! }),
});
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 and routes events
- Adapters — platform-specific (Slack, Teams, GChat, Discord, GitHub, Linear)
- State — pluggable persistence (Redis for prod, memory for dev)
- Thread — conversation thread with
post(),subscribe(),startTyping() - Message — normalized format with
text,formatted(mdast AST),raw - Channel — container for threads, supports listing and posting
Event handlers
| Handler | Trigger |
|---|---|
onNewMention |
Bot @-mentioned in unsubscribed thread |
onSubscribedMessage |
Any message in subscribed thread |
onNewMessage(regex) |
Messages matching pattern in unsubscribed threads |
onSlashCommand("/cmd") |
Slash command invocations |
onReaction(emojis) |
Emoji reactions added/removed |
onAction(actionId) |
Button clicks and dropdown selections |
onAssistantThreadStarted |
Slack Assistants API thread opened |
onAppHomeOpened |
Slack App Home tab opened |
Streaming
Pass any AsyncIterable<string> to thread.post(). Works with AI SDK's textStream:
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.textStream);
});
Cards (JSX)
Set jsxImportSource: "chat" in tsconfig. Components: Card, CardText, Button, Actions, Fields, Field, Select, SelectOption, Image, Divider, LinkButton, Section, 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>,
);
Packages
| Package | Purpose |
|---|---|
chat |
Core SDK |
@chat-adapter/slack |
Slack |
@chat-adapter/teams |
Microsoft Teams |
@chat-adapter/gchat |
Google Chat |
@chat-adapter/discord |
Discord |
@chat-adapter/github |
GitHub Issues |
@chat-adapter/linear |
Linear Issues |
@chat-adapter/state-redis |
Redis state (production) |
@chat-adapter/state-ioredis |
ioredis state (alternative) |
@chat-adapter/state-memory |
In-memory state (development) |
Changesets (Release Flow)
This monorepo uses Changesets for versioning and changelogs. Every PR that changes a package's behavior must include a changeset.
pnpm changeset
# → select affected package(s) (e.g. @chat-adapter/slack, chat)
# → choose bump type: patch (fixes), minor (features), major (breaking)
# → write a short summary for the CHANGELOG
This creates a file in .changeset/ — commit it with the PR. When merged to main, the Changesets GitHub Action opens a "Version Packages" PR to bump versions and update CHANGELOGs. Merging that PR publishes to npm.
Webhook setup
Each adapter exposes a webhook handler via bot.webhooks.{platform}. Wire these to your HTTP framework's routes (e.g. Next.js API routes, Hono, Express).