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

OAuth ログインを備えた Cloudflare Workers でリモート MCP サーバーを起動して実行してみましょう。

ローカルで開発する

# clone the repository
git clone git@github.com:cloudflare/ai.git

# install dependencies
cd ai
npm install

# run locally
npx nx dev remote-mcp-server

ブラウザでhttp://localhost:8787/を開くことができるはずです。

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

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

npx @modelcontextprotocol/inspectorで起動します。
インスペクタ内で、トランスポートタイプをSSEに切り替え、接続するMCPサーバーのURLとしてxを入力し、「接続」をクリックします。
（模擬）ユーザー名/パスワードログイン画面が表示されます。任意のメールアドレスとパスワードを入力してログインしてください。
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にデプロイする

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

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

上記の「ローカルで開発する」と同じように、MCP インスペクターを実行します。

npx @modelcontextprotocol/inspector@latest

次に、接続先の MCP サーバーの URL として、インスペクターにワーカーのworkers.dev URL (例: worker-name.account-name.workers.dev/sse ) を入力し、「接続」をクリックします。

これで、リモート 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

Remote MCP Server

Integrations