mcpField
R
Remote MCP Server on Cloudflare

Remote MCP Server on Cloudflare

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

Remote MCP Server on Cloudflare について

Cloudflare Workers 上で OAuth ログイン付きのリモート MCP サーバーを構築するテンプレートです。ローカル開発やデプロイに対応し、MCP Inspector や Claude Desktop から接続できます。

主な機能

  1. 01Cloudflare Workers でのローカル開発
  2. 02OAuth ログインフロー
  3. 03Wrangler によるデプロイ
  4. 04MCP Inspector との接続
  5. 05Claude Desktop との接続

活用シーン

  1. 01リモート MCP サーバーの試作
  2. 02MCP Inspector でのツールテスト
  3. 03Worker ベースの MCP エンドポイントのデプロイ

MCP 対応

`/sse` で MCP サーバーを提供し、MCP Inspector や `mcp-remote` 経由の Claude Desktop から利用できます。

設定

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

mcp.json · 共通設定
{
"mcpServers": {
"remote-mcp-server-wertpoiu": {
"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 つのサーバーを複数のクライアントで再利用できます。