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 上のリモート MCP サーバー
  2. 02OAuth ログインフロー
  3. 03ローカル開発のセットアップ
  4. 04Wrangler によるデプロイ
  5. 05MCP Inspector の接続手順

活用シーン

  1. 01MCP Inspector によるローカルサーバーのテスト
  2. 02Claude Desktop とローカルサーバーの接続
  3. 03Workers へのデプロイとリモートクライアントからの接続

MCP 対応

SSE 経由で MCP サーバーを実行し、MCP Inspector と Claude Desktop をローカルまたはデプロイ済み Workers のエンドポイントに接続する手順を示します。サンプルには OAuth ログインが含まれます。

設定

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

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

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

パッケージ
npmmcp-remote

ツール

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

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

詳細

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

OAuth ログインを備えたリモート MCP サーバーを、Cloudflare Workers 上で稼働させましょう!

ローカルで開発する

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

# navigate to this example
cd ai/demos/remote-mcp-server

# install dependencies
npm install

# run locally
npm run dev

ブラウザーで 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 のクイックスタート](<https://modelcontextprotocol.io/quickstart/user) に従い、Claude Desktop で「Settings」>「Developer」>「Edit Config」を開いて、設定ファイルを確認します。

テキストエディターでファイルを開き、次の設定に置き換えます。

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

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

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

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

Cloudflare にデプロイする

  1. npx wrangler@latest kv namespace create remote-mcp-server-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 つのサーバーを複数のクライアントで再利用できます。