mcpField
R
Remote MCP Server on Cloudflare

Remote MCP Server on Cloudflare

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

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. 01Cloudflare Workers へのリモート MCP サーバーのデプロイ
  2. 02MCP Inspector でのツール確認と呼び出し
  3. 03Claude Desktop からローカルまたはリモートサーバーへの接続

MCP 対応

互換クライアントが接続できる SSE エンドポイントを備えた、リモート MCP サーバーのサンプルです。MCP Inspector と Claude Desktop からの接続方法を示します。

設定

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

mcp.json · 共通設定
{
"mcpServers": {
"remote-mcp-server-pddhkt": {
"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 内で、トランスポートの種類を 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 がツールの呼び出しを求めるはずです。

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

Cloudflare にデプロイする

  1. npx wrangler kv namespace create OAUTH_KV
  2. ガイダンスに従って、KV 名前空間の ID を wrangler.jsonc に追加します。
  3. npm run deploy

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

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

npx @modelcontextprotocol/inspector@latest

次に、Inspector で Worker の workers.dev URL(例:worker-name.account-name.workers.dev/sse)を、接続する 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 つのサーバーを複数のクライアントで再利用できます。