mcpField
R
Remote MCP Server on Cloudflare

Remote MCP Server on Cloudflare

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

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. 01Workers 上でのリモート MCP サーバーの試作
  2. 02MCP Inspector を使ったツールのテスト
  3. 03Claude Desktop とローカルまたはデプロイ済みサーバーの接続

MCP 対応

SSE を使うリモート MCP サーバーを実装し、MCP Inspector と Claude Desktop の接続方法を示します。OAuth ログインと Cloudflare Workers へのデプロイも扱います。

設定

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

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