Remote MCP Server On Cloudflare Rh3

🚀 クラウドフレア上でのリモートMCPサーバーの運用

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

🚀 クイックスタート

ローカル開発

# リポジトリをクローン
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インスペクターを使用できます。

• npx @modelcontextprotocol/inspector でインスペクターを起動します。
• インスペクター（http://localhost:5173）で、転送タイプを SSE に切り替え、MCPサーバーのURLとして http://localhost:8787/sse を入力し、「接続」をクリックします。
• （模擬の）ユーザー/パスワードログイン画面に移動します。任意のメールアドレスとパスワードを入力してログインします。
• 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はMCP加法ツールを呼び出して質問に回答するはずです。

クラウドフレアへのデプロイ

1. npx wrangler kv namespace create OAUTH_KV
2. 指示に従って、KVネームスペースIDを wrangler-config.ts ファイルに追加します。
3. npm run build と npm run deploy を使用して、コードをCloudflare Workersにデプロイします。

ClaudeをクラウドフレアMCPサーバーに接続する

Claudeの設定ファイルを次のように更新します。

{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://your-deployed-url.com/sse"
      ]
    }
  }
}

your-deployed-url.com を実際のデプロイURLに置き換えてください。

デバッグ

接続をテストするには、以下のコマンドを実行できます。

npx mcp-remote https://your-deployed-url.com/sse

問題が発生した場合は、Cloudflare Workersサービスが正しく構成されていることを確認し、ブラウザキャッシュをクリアして問題を解決できます。