remote-mcp-server

Cloudflare 上の Web 検索対応リモート MCP サーバー

挨拶ツールと Web 検索機能を実装した、本番環境対応のリモート MCP（Model Context Protocol）サーバーです。Cloudflare Workers にデプロイされます。このサーバーは、Cursor や Claude Desktop などの AI アシスタントで使用できるカスタムツールの構築とデプロイ方法を示します。

概要

このプロジェクトは、次の実装例です。

• カスタム MCP サーバーの構築
• OAuth 認証の実装
• MCP サーバーの Cloudflare Workers へのデプロイ
• AI アシスタントとカスタムツールの接続
• Web 検索機能の統合

特長

• 🚀 Cloudflare Workers にデプロイされたリモート MCP サーバー
• 🔐 安全なアクセスのための OAuth 認証
• 👋 MCP の機能をテストするためのシンプルな挨拶ツール
• 🔍 リアルタイムで情報を取得する Web 検索ツール
• 🤖 Cursor および Claude Desktop との互換性
• 📊 MCP Inspector のサポートを内蔵
• 📦 簡単なローカル開発環境のセットアップ
• 🛠️ 本番環境対応のデプロイ設定

前提条件

• Node.js 18 以降
• pnpm パッケージマネージャー
• Cloudflare アカウント（デプロイ用）
• Git
• Web 検索サービスの API キー（任意）

ローカル開発

1. リポジトリをクローンします。

# Using HTTPS
git clone https://github.com/cloudflare/ai.git

# Or using SSH
git clone [email protected]:cloudflare/ai.git

2. 依存関係をインストールします。

cd ai
pnpm install

3. 環境変数を設定します（任意）。

# Create a .env file
cp .env.example .env

# Add your web search API key if needed
WEB_SEARCH_API_KEY=your_api_key_here

4. 開発サーバーを起動します。

npx nx dev remote-mcp-server

サーバーは http://localhost:8787/ で利用できます。

統合ガイド

Cursor への接続

1. Cursor を開き、Settings > AI Settings に移動します。
2. MCP Configuration セクションで、次の設定を追加します。

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

3. Cursor を再起動します。
4. メールアドレスとパスワードは任意のものを入力してログインします（テスト用のモック認証です）。
5. 次の方法でツールをテストします。
   • Cursor に誰かへの挨拶を依頼する
   • 検索クエリの Web 検索結果を依頼する

Claude Desktop への接続

1. Claude Desktop を開き、Settings > Developer > Edit Config に移動します。
2. 次の設定を追加します。

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

3. Claude Desktop を再起動します。
4. 任意のメールアドレスとパスワードでログインします。
5. 次の方法でツールをテストします。
   • Claude に誰かへの挨拶を依頼する
   • 検索クエリの Web 検索結果を依頼する

MCP Inspector でのテスト

1. Inspector を起動します。

npx @modelcontextprotocol/inspector

2. ブラウザーで http://localhost:5173 を開きます。
3. 接続を設定します。
   • Transport Type を SSE に設定します。
   • MCP サーバーの URL として http://localhost:8787/sse を入力します。
   • 「Connect」をクリックします。
4. 任意のメールアドレスとパスワードでログインします。
5. 2 つのツールをテストします。
   • 挨拶ツールを使って挨拶を送信する
   • Web 検索ツールを使って情報を検索する

利用可能なツール

挨拶ツール

• パーソナライズされた挨拶を生成するシンプルなツールです。
• 使用方法：AI に名前を指定して挨拶を依頼します。
• 例：「John に挨拶してください」

Web 検索ツール

• Web をリアルタイムで検索します。
• 関連する検索結果を返します。
• 使用方法：AI に情報の検索を依頼します。
• 例：「AI に関する最新ニュースを検索してください」

デプロイ

Cloudflare へのデプロイ

1. KV 名前空間を作成します。

npx wrangler kv namespace create OAUTH_KV

2. KV 名前空間 ID を wrangler.jsonc に追加します。
3. Cloudflare で環境変数を設定します。
   • Workers > Your Worker > Settings > Variables に移動します。
   • 必要に応じて、Web 検索 API キーを追加します。
4. Cloudflare にデプロイします。

npm run deploy

デプロイ済みサーバーへの接続

Cursor または Claude Desktop の設定を更新し、ワーカーの URL を使用します。

{
  "mcpServers": {
    "greeting": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://your-worker-name.your-account.workers.dev/sse"
      ]
    },
    "webSearch": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://your-worker-name.your-account.workers.dev/sse"
      ]
    }
  }
}

トラブルシューティング

よくある問題

1. 接続の問題

   • サーバーがローカルで実行中であることを確認します。
   • ポート 8787 が利用可能か確認します。
   • ファイアウォールで接続がブロックされていないことを確認します。

2. 認証の問題

   • 認証ファイルを削除します。

   rm -rf ~/.mcp-auth
   

   • アプリケーションを再起動します。
   • もう一度ログインします。

3. ツールが動作しない

   • 設定が正しいことを確認します。
   • ブラウザーのコンソールでエラーを確認します。
   • サーバーログを確認し、問題がないか調べます。

4. Web 検索の問題

   • API キーが正しく設定されていることを確認します。
   • API のレート制限に達していないか確認します。
   • 検索クエリが正しい形式であることを確認します。

デバッグ

1. 接続を直接テストします：

npx mcp-remote http://localhost:8787/sse

2. サーバーのログを確認します：

npx wrangler tail

3. ウェブ検索リクエストを監視します：

npx wrangler tail --format=pretty

コントリビューション

コントリビューションを歓迎します！お気軽にプルリクエストを送信してください。

ライセンス

このプロジェクトはMITライセンスの下でライセンスされています。詳細についてはLICENSEファイルをご覧ください。

サポート

問題が発生した場合やご質問がある場合は、次の方法をご利用ください：

• GitHubでissueを作成する
• Cloudflare Workersのドキュメントを確認する
• MCP仕様を確認する
• Web Search APIのドキュメントを参照する