mcpField
R
Remote MCP Server on Cloudflare

Remote MCP Server on Cloudflare

ローカル
github.com/cmsparksクラウド・インフラ084 週間前に更新

Remote MCP Server on Cloudflare について

Cloudflare Workers 上で稼働するリモート MCP サーバーの例で、サーバーをデプロイして接続する開発者向けです。OAuth ログインを備え、MCP Inspector や Claude Desktop からの利用方法を示します。

主な機能

  1. 01Cloudflare Workers で稼働
  2. 02OAuth ログインフロー
  3. 03ローカル開発とデプロイ
  4. 04MCP Inspector への接続
  5. 05Claude Desktop の設定

活用シーン

  1. 01ローカルでリモート MCP サーバーをテスト
  2. 02Cloudflare Workers へのデプロイ
  3. 03MCP Inspector によるツールのデバッグ
  4. 04Claude Desktop からリモートサーバーへ接続

MCP 対応

SSE 経由でアクセスできるリモート MCP サーバーを提供し、定義済みのツールをクライアントに公開します。MCP Inspector と Claude Desktop から、ローカルまたはデプロイ済みのサーバーに接続する方法を説明しています。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
"mcpServers": {
"remote-mcp-server-cmsparks": {
"command": "npx",
"args": [
"-y",
"nx"
]
}
}
}
起動コマンドnpx -y nx

ローカルサーバーにはマシン上の実行環境(Node.js 18 以上など)が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmnx

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

Cloudflare 上のリモート MCP サーバー

OAuth ログイン機能を備えたリモート MCP サーバーを、Cloudflare Workers で起動しましょう!

ローカルで開発する

# clone the repository
git clone [email protected]:cloudflare/ai.git

# install dependencies
cd ai
npm install

# run locally
npx nx dev remote-mcp-server

ブラウザーで http://localhost:8787/ を開けるはずです。

MCP Inspector をサーバーに接続する

新しい MCP API を調べるには、MCP Inspector を使用できます。

  • npx @modelcontextprotocol/inspector で起動します
  • Inspector 内で、Transport Type を SSE に切り替え、接続する MCP サーバーの URL として http://localhost:8787/sse を入力し、「Connect」をクリックします
  • (模擬)ユーザー名/パスワードのログイン画面に移動します。任意のメールアドレスとパスワードを入力してログインします。
  • MCP Inspector にリダイレクトされ、定義済みのツールを一覧表示して呼び出せるようになります!
上記の設定を行った MCP Inspector
ツール呼び出し後の MCP Inspector

Claude Desktop をローカルの MCP サーバーに接続する

MCP Inspector は便利ですが、Claude に接続するのが本来の目的です!Anthropic のクイックスタートに従い、Claude Desktop で「Settings > Developer > Edit Config」を開いて設定ファイルを見つけてください。

テキストエディターでファイルを開き、次の設定に置き換えてください。

{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://localhost:8787/sse"
      ]
    }
  }
}

これによりローカルプロキシが起動し、Claude が HTTP 経由で MCP サーバーと通信できるようになります。

Claude を開くとブラウザーウィンドウが開き、ログインできます。右下に利用可能なツールが表示されます。適切なプロンプトを入力すると、Claude がツールの呼び出しを提案します。

ハンマーのアイコンをクリックすると利用可能なツールの一覧が表示されます
「計算機をなくして、指も足りなくなってしまいました。数学ツールで 23 と 19 を足してもらえますか?」というプロンプトに対し、MCP の add ツールを呼び出して Claude が回答します

Cloudflare にデプロイする

  1. npx wrangler@latest kv namespace create remote-mcp-server-oauth-kv
  2. ガイダンスに従って、wrangler.jsonc に KV 名前空間 ID を追加します
  3. npm run deploy

新しくデプロイしたリモート MCP サーバーをリモート MCP クライアントから呼び出す

上記の「ローカルで開発する」と同じように、MCP Inspector を実行します。

npx @modelcontextprotocol/inspector@latest

次に、Worker の workers.dev URL(例:worker-name.account-name.workers.dev/sse)を、Inspector の接続先 MCP サーバーの URL として入力し、「Connect」をクリックします。

これでリモート MCP クライアントから MCP サーバーに接続できました。

Claude Desktop をリモート MCP サーバーに接続する

Claude の設定ファイルを、workers.dev URL(例:worker-name.account-name.workers.dev/sse)を参照するように更新し、Claude を再起動します。

{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://worker-name.account-name.workers.dev/sse"
      ]
    }
  }
}

デバッグ

問題が発生した場合は、Claude を再起動するか、次のコマンドを使用してコマンドラインから MCP サーバーへの直接接続を試すと役立つことがあります。

npx mcp-remote http://localhost:8787/sse

まれに、~/.mcp-auth に追加されたファイルを削除すると解決する場合があります。

rm -rf ~/.mcp-auth

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。