Remote MCP Server On Cloudflare 2oo

🚀 Cloudflare 上でのリモート MCP サーバーの設定

Cloudflare Workers 上に、OAuth ログイン機能を統合した動作中のリモート MCP サーバーを構築しましょう！

🚀 クイックスタート

ローカル開発

以下の手順でローカル環境で開発を行うことができます。

# リポジトリをクローンします
git clone git@github.com:cloudflare/ai.git

# 依存関係をインストールします
cd ai
npm install

# ローカルで実行します
npx nx dev remote-mcp-server

これで、ブラウザで http://localhost:8787/ を開くことができます。

MCP インスペクターをサーバーに接続する

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

• npx @modelcontextprotocol/inspector を実行して起動します。
• インスペクター内で、転送タイプを SSE に切り替え、URL に http://localhost:8787/sse を MCP サーバーのアドレスとして入力し、「接続」をクリックします。
• （模擬の）ユーザー/パスワードのログインページにリダイレクトされます。任意のメールアドレスとパスワードを入力してログインします。
• ログインに成功すると、MCP インスペクターに戻り、定義されたツールを一覧表示したり呼び出したりすることができます！

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

MCP インスペクターは便利ですが、実際にやりたいのは Claude に接続することです。Anthropic のクイックスタートガイドに従い、Claude Desktop で 設定 > 開発者 > 編集設定 を選択し、設定ファイルを見つけます。

テキストエディタでそのファイルを開き、以下の内容に置き換えます。

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

これにより、Claude が HTTP を介して MCP サーバーと通信できるようになります。

Claude を開くと、ブラウザウィンドウにログインページが表示されます。利用可能なツールのリストが表示され、指示に従って Claude がツールを呼び出すはずです。

Cloudflare へのデプロイ

以下の手順で Cloudflare にデプロイします。

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

リモート MCP クライアントから新しいリモート MCP サーバーを呼び出す

「ローカル開発」で行ったように、MCP インスペクターを実行します。

npx @modelcontextprotocol/inspector@latest

そして、インスペクター内で Worker の workers.dev URL（例：worker-name.account-name.workers.dev/sse）を MCP サーバーのアドレスとして入力し、「接続」をクリックします。

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

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

Claude の設定ファイルを更新して、workers.dev URL（例：worker-name.account-name.workers.dev）を指すようにします。