ClaudeにCometChat MCPをつなぐ手順 — チャット実装の資料を会話で引く
CometChat MCPは認証不要・読み取り専用で、チャットや通話の実装資料をClaudeから引けます。claude.aiとClaude Codeへの接続、4つのツール、10個のバンドル、鍵の扱いをまとめます。
CometChat MCPは、アプリにチャット・音声・ビデオ通話を組み込むサービスCometChatが公開している、ドキュメント参照用のMCPサーバーです。Claudeにつなぐと、SDKの手引きやUI Kitのリファレンスを検索し、実装の手順書(バンドル)を取得させたうえで、自分のプロジェクトに合うコードを書かせられます。
特徴は、アカウントもAPIキーも要らず、4つのツールがすべて読み取り専用であることです。接続先は https://mcp.cometchat.com/mcp の1つだけで、チャット機能を入れる前の下調べに向いています。
CometChat MCPで何ができるか
このMCPが渡すのは、CometChatの公開ドキュメントと、あらかじめ整えられた実装レシピです。ユーザーのチャットデータやアプリの設定には触れません。
CometChat MCPの前提
接続先
1つ
https://mcp.cometchat.com/mcp
ツール
4つ
すべて読み取り専用
実装バンドル
10個
React・iOS・Androidなど
サインイン
不要
アカウント・APIキーなし
コネクタの掲載ページには、無料枠として「最初の100人の月間アクティブユーザーまで無料」という説明があります。これはCometChatというサービス本体の利用条件で、MCPに接続する費用ではありません。MCPの利用自体にサインインは要りませんが、書いてもらったコードを動かすには、別途CometChatのアプリを作ってApp IDなどを受け取る必要があります。
4つのツールの役割
CometChatのドキュメントは、ツールを4つ挙げています。Claudeは依頼内容に応じて、これらを順に呼びます。
| ツール | 役割 |
|---|---|
search_cometchat_docs | 役割SDKの手引き、UI Kitのリファレンス、REST APIドキュメント、OpenAPI仕様を検索し、リンク付きのスニペットを返す |
fetch_cometchat_doc_page | 役割ドキュメントの1ページをURLか相対パスで指定し、全文をMarkdownで取得する |
list_cometchat_bundles | 役割実装バンドルの識別子・タイトル・対象フレームワークの一覧を返す |
get_cometchat_implementation_bundle | 役割指定したシナリオの実装レシピ(前提条件・インストール・設定・動くコード)を返す |
検索で当たりをつけ、必要なページを全文で読み、バンドルがあればそれを土台にする、という順序が自然です。調べものとコードの土台づくりが別のツールに分かれているため、「このページを根拠に書いて」と頼みやすくなります。
10個の実装バンドルの選び方
バンドルは、目的のフレームワークか機能で選びます。CometChatのドキュメントにある一覧を、使い道ごとに分けると次のとおりです。
バンドルの分け方
画面を作る(UI Kit系・5個)
react-uikit-quickstart、react-native-uikit-quickstart、flutter-uikit-quickstart、ios-uikit-quickstart(SwiftUI)、android-uikit-quickstart(Compose)。インストールから初期化、ログイン、会話一覧とチャット画面までを扱います。SDKで自前実装する(1個)
js-sdk-messaging-basicsは、素のJavaScript SDKでのインストールと、テキストやメディアの送受信です。既存サイトにすぐ載せる(1個)
widget-embedは、ノーコードのウィジェットを既存サイトに埋め込む手順です。機能を足す(3個)
moderation-setup(AIモデレーション、禁止語、画像チェック、Webhook)、multi-tenant-chat(マルチテナントのSaaS向け。認証と分離)、presence-and-typing(オンライン表示、入力中表示、既読)。
React Nativeのアプリに「入力中」を出したいなら、UI Kit系のバンドルで土台を作ってから presence-and-typing を足す、という組み合わせになります。バンドルを1回の依頼で何個まで同時に引けるかは、ドキュメントに記載がありません。Claudeには「まずこのバンドルで土台、次にこのバンドルで機能追加」と、段階を分けて頼むと追いやすくなります。
ほかに、cometchat://skills/overview というリソースがあります。CometChatの製品群、選び方の判断木、よくある落とし穴をまとめたMarkdownで、エージェントが最初に1度読んで方向をつかむためのものです。
claude.aiに追加する手順
掲載ページには「Anthropic verified」の表示があり、コネクタの一覧から追加できる形になっています。一覧に出ない環境では、カスタムコネクタとしてURLを入れる方法があります。CometChatのドキュメントが案内しているのも、この手入力の方法です。
カスタムコネクタとして追加する流れ
- 1
コネクタの画面を開く
Pro・Maxプランでは、ClaudeのCustomizeからConnectorsを開きます。
- 2
カスタムコネクタを追加する
「+ Add」から「Add custom connector」を選び、名前に
CometChat、URLにhttps://mcp.cometchat.com/mcpを入れて進みます。 - 3
認証を選ぶ
CometChat側は認証不要です。認証の設定では、サインインを求めない「No sign in」を選びます。
- 4
会話で有効にする
追加しただけではオンになりません。チャット画面の「+」からConnectorsを開き、CometChatを有効にしてから依頼します。
プランごとの違いは次のとおりです。Claudeのヘルプによると、カスタムコネクタ(リモートMCP)はFree・Pro・Max・Team・Enterpriseで使えますが、Freeはカスタムコネクタを1つまでに制限されています。
- Team: 追加できるのはOwnerとPrimary Ownerだけです
- Enterprise: Owner、Primary Owner、ライブラリの管理権限を含むカスタムロールの人が追加できます
- メンバー: 組織に追加されたあと、各自がコネクタに接続し、会話ごとに有効にします
Claudeは、カスタムコネクタのサーバーにAnthropicのクラウドから接続します。手元のPCから届く社内サーバーでも、公開されていなければつながりません。CometChat MCPは公開サーバーなので、この点で詰まることはありません。
Claude Codeに追加する手順
開発中のプロジェクトでそのまま実装まで進めるなら、Claude Codeに追加します。リモートのHTTPサーバーを入れるコマンドは次の形です。
claude mcp add --transport http cometchat \
https://mcp.cometchat.com/mcpCometChatは通信方式を「HTTP with Server-Sent Events」と説明しています。Claude CodeのドキュメントはSSE方式を非推奨とし、SSEしか受け付けないサーバーにも同じ --transport http で追加できると案内しています。HTTPを先に試し、受け付けなければSSEへ切り替える動きで、この自動切り替えにはv2.1.265以降が必要です。それより前のバージョンで接続できないときは、--transport sse を指定して追加し直します。
追加できたかは、セッション内で /mcp を実行して確かめます。一覧に cometchat が出て、4つのツールが見えれば準備完了です。
読み取り専用のツールだけを自動許可する
4つのツールはどれも読み取り専用なので、毎回の許可確認を省いても、書き込み事故につながる心配は小さいはずです。許可ルールは mcp__<サーバー名>__* の形で書けます。サーバー名を cometchat で追加した場合は、プロジェクトの設定ファイルに次のように置きます。
{
"permissions": {
"allow": [
"mcp__cometchat__*"
]
}
}サーバー名に . や空白を含めると _ に置き換わるため、名前は cometchat のように記号なしで付けると、ルールの書き間違いが起きません。
自動許可にするのは、あくまで外部のドキュメントを引く動作です。Claudeが書いたコードの実行やファイル編集の許可とは別の話なので、そちらの確認は従来どおり残してください。
CLAUDE.mdに調べ方を書いておく
チャット機能の実装は何日もかかります。会話が変わるたびに「CometChatのバンドルから始めて」と頼み直すより、CLAUDE.mdに調べ方を残すほうが安定します。例えば次のような記述です。
## チャット機能の実装方針
- CometChatを使う実装の前に、まず `list_cometchat_bundles` で該当バンドルを探す。
- バンドルの内容と食い違う場合は、`fetch_cometchat_doc_page` で
該当ページを読み、そのページを根拠にコードを書く。
- App ID・Region・Auth Keyはソースに直書きせず、環境変数から読む。
- 本番用の認証は、サーバー側で発行したauth tokenを使う。Auth Keyは開発専用。最後の2行は、Lovable向けの案内ページにある注意に沿った内容です。CometChatは、Auth Keyは開発専用であり、公開前にはサーバーで作ったauth tokenでユーザーをログインさせるよう案内しています。MCPが鍵を要求しない分、鍵の扱いはコードを書く側で決めておく必要があります。
実際の頼み方
CometChatのドキュメントには、接続後に試せるプロンプト例が載っています。
- 「ReactアプリにユーザーどうしがDMできるチャットタブを足して」
- 「プロジェクトのメンバーが、ファイル共有つきでグループチャットできるようにして」
- 「2人のユーザーの間に、ワンクリックで発信できるビデオ通話を足して」
- 「禁止語が配信前にブロックされるモデレーションを設定して」
- 「ワークスペースごとにユーザーが分離される、マルチテナントのSaaSチャットを作って」
- 「会話一覧にオンライン表示と入力中のドットを出して」
どれも、機能の名前ではなく、やりたいことの文で書かれています。ドキュメントはそのうえで、エージェントがドキュメントを検索し、該当バンドルを取得してコードをプロジェクトに書く、という流れを説明しています。
自分の環境で最初に試すなら、書き込みを伴わない質問から始めると状況を切り分けられます。
CometChatのMCPで、使えるバンドルを一覧にして。
React Nativeで使えるものはどれか教えて。ここで一覧が返れば、接続とツールの許可は通っています。次に「そのバンドルの前提条件だけ読んで、必要なアカウント設定を教えて」と頼み、実装に進む前に何を用意するかを確認します。コードを書かせるのは、そのあとです。
掲載ページとドキュメントで違う点
2つの情報源には、ツールの数に差があります。
ツール数の食い違い
コネクタの掲載ページ
search_cometchat_docs、fetch_cometchat_doc_page、get_cometchat_implementation_bundle の3つを載せています。
CometChatのドキュメント
上の3つに加えて list_cometchat_bundles を載せ、バンドルの一覧を引くツールとして説明しています。
どちらのページにも、この差の理由は書かれていません。掲載ページの更新が追いついていないのか、環境によって見えるツールが違うのかは判断できません。実際に何個見えるかは、/mcp の画面やclaude.aiのツール一覧で確かめるのが確実です。list_cometchat_bundles が見えない場合は、ドキュメントの表にあるバンドル名を正確に指定して、取得を頼んでみてください。
他のツールにも同じサーバーを使える
CometChatのドキュメントには、Claude以外の接続方法も載っています。Cursor、Windsurf、Visual Studio CodeのCopilot Agent、Lovableです。同じURLを使い、形式だけがツールごとに違います。
| ツール | 設定の形 |
|---|---|
| Cursor | 設定の形mcpServers に cometchat を作り、url を指定する |
| Windsurf | 設定の形type に sse を指定し、キー名は serverUrl を使う |
| VS Code | 設定の形MCP: Add MCP Serverで名前・URL・トランスポート(SSE)を入力する |
| Lovable | 設定の形カスタムMCPのチャットコネクタとして、認証なし(No authentication)で追加する |
LovableのMCPはチャット用のコネクタで、公開するアプリの一部にはなりません。アプリがCometChatとやり取りするのは、コードに入ったUI KitかSDKを通してです。チームで複数のツールを使い分けているなら、実装方針をCLAUDE.mdだけでなく共有のドキュメントにも残しておくと、ツールを変えても揃います。
つまずきやすい点
- コネクタを追加したのに使われない: チャットごとにConnectorsで有効にする必要があります。有効化し忘れると、Claudeはドキュメントを引かず、学習済みの知識でコードを書きます
- ツールが見つからない: Claude Codeでは
/mcpで一覧を確認し、cometchatの接続状態を見ます。接続できていなければ、バージョンとトランスポートの指定を見直します - コードが動かない: MCPは資料を渡すだけです。App ID・Region・Auth Keyの設定がなければ、書かれたコードは動きません
- Team・Enterpriseで追加できない: Ownerなど権限のある人に追加を頼みます。メンバーは追加後に各自で接続します
信頼の面でも注意が要ります。Claudeのヘルプは、カスタムコネクタは未検証のサービスにつながる可能性があるとして、信頼できる提供元のサーバーだけに接続すること、ツールの入出力に注意することを求めています。掲載ページにも、開発者が提供するツールをAnthropicは管理していないという注意書きがあります。CometChat MCPは読み取り専用で認証もありませんが、返ってくる資料にあたるテキストは、Claudeへの指示として混ざる可能性があります。書かれたコードは、実行する前にdiffで読んでください。
まとめ
CometChat MCPは、サインインも鍵も要らず、チャットや通話の実装資料だけを引ける軽い接続です。Claude Codeなら1行のコマンドで追加でき、許可ルールを mcp__cometchat__* にして、調べ方をCLAUDE.mdに残せば、実装前の下調べを同じ手順で繰り返せます。
同じように認証のあるMCPを接続して操作する例は、Stytch MCPを接続する手順にあります。顧客管理サービスをコネクタから操作する場合は、ClaudeとClozeの連携手順が参考になります。MCPのツール名が長すぎて呼べないときは、MCPツール名が128文字を超えたときの対処も確認してください。