Model Context Protocol (MCP) Server + Github OAuth

Model Context Protocol (MCP) サーバー + Github OAuth

これは、Github OAuth を組み込んだ、リモート MCP 接続に対応する Model Context Protocol (MCP) サーバーです。

ご自身の Cloudflare アカウントにデプロイし、独自の Github OAuth クライアントアプリを作成すると、拡張して利用できる、完全に機能するリモート MCP サーバーが手に入ります。ユーザーは GitHub アカウントでサインインして、MCP サーバーに接続できます。

これは、workers-oauth-provider library を使って、Cloudflare にデプロイされた MCP サーバーに他の OAuth プロバイダーを統合する方法を示す参考例として利用できます。

MCP サーバー（Cloudflare Workers を利用）：

• MCP クライアントに対する OAuth サーバー として動作します
• 実際の OAuth サーバー（この場合は GitHub）に対する OAuth クライアント として動作します

はじめに

リポジトリを直接クローンして、依存関係をインストールします：npm install。

または、以下のコマンドラインを使って、リモート MCP サーバーをローカルマシンに作成できます：

npm create cloudflare@latest -- my-mcp-server --template=cloudflare/ai/demos/remote-mcp-github-oauth

本番環境向け

新しい GitHub OAuth App を作成します：

• ホームページ URL に https://mcp-github-oauth.<your-subdomain>.workers.dev を指定します
• 認証コールバック URL に https://mcp-github-oauth.<your-subdomain>.workers.dev/callback を指定します
• クライアント ID を控え、クライアントシークレットを生成します。
• Wrangler でシークレットを設定します

wrangler secret put GITHUB_CLIENT_ID
wrangler secret put GITHUB_CLIENT_SECRET
wrangler secret put COOKIE_ENCRYPTION_KEY # add any random string here e.g. openssl rand -hex 32

KV 名前空間を設定する

• KV 名前空間を作成します： wrangler kv:namespace create "OAUTH_KV"
• Wrangler ファイルを KV ID で更新します

デプロイとテスト

MCP サーバーをデプロイして、workers.dev ドメインで利用できるようにします wrangler deploy

Inspector を使ってリモートサーバーをテストします：

npx @modelcontextprotocol/inspector@latest

https://mcp-github-oauth.<your-subdomain>.workers.dev/sse を入力して、接続をクリックします。認証フローを完了すると、ツールが動作していることを確認できます：

これで、リモート MCP サーバーがデプロイされました！

アクセス制御

この MCP サーバーは、認証に GitHub OAuth を使用します。認証済みのすべての GitHub ユーザーは、「add」や「userInfoOctokit」などの基本的なツールにアクセスできます。

「generateImage」ツールは、ALLOWED_USERNAMES 設定に記載された特定の GitHub ユーザーに制限されています：

// Add GitHub usernames for image generation access
const ALLOWED_USERNAMES = new Set([
  'yourusername',
  'teammate1'
]);

Claude Desktop からリモート MCP サーバーにアクセスする

Claude Desktop を開き、Settings -> Developer -> Edit Config に移動します。これにより、Claude がアクセスできる MCP サーバーを制御する設定ファイルが開きます。

内容を次の設定に置き換えます。Claude Desktop を再起動すると、OAuth ログインページを表示するブラウザーウィンドウが開きます。認証フローを完了して、Claude に MCP サーバーへのアクセスを許可します。アクセスを許可すると、ツールを利用できるようになります。

{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp-github-oauth.<your-subdomain>.workers.dev/sse"
      ]
    }
  }
}

インターフェースにツール（🔨の下）が表示されたら、Claude にツールの使用を依頼できます。たとえば、「数学ツールを使って 23 と 19 を足してもらえますか？」と尋ねます。Claude はツールを呼び出し、MCP サーバーが生成した結果を表示します。

ローカル開発向け

MCP サーバーを変更してテストする場合は、ローカル開発環境で作業できます。そのためには、GitHub で別の OAuth App を作成する必要があります：

• ホームページ URL に http://localhost:8788 を指定します
• 認証コールバック URL に http://localhost:8788/callback を指定します
• クライアント ID を控え、クライアントシークレットを生成します。
• プロジェクトのルートに .dev.vars ファイルを作成し、次の内容を記述します：

GITHUB_CLIENT_ID=your_development_github_client_id
GITHUB_CLIENT_SECRET=your_development_github_client_secret

開発とテスト

サーバーをローカルで実行して、http://localhost:8788 で利用できるようにします wrangler dev

ローカルサーバーをテストするには、Inspector に http://localhost:8788/sse を入力して、接続をクリックします。表示される指示に従うと、「List Tools」を実行できます。

Claude およびその他の MCP クライアントの使用

Claude を使用してリモート MCP サーバーに接続すると、エラーメッセージが表示される場合があります。これは、Claude Desktop がまだリモート MCP サーバーをサポートしていないため、混乱することがあるためです。MCP サーバーが接続されているか確認するには、Claude のインターフェース右下にある 🔨 アイコンにカーソルを合わせてください。利用可能なツールが表示されます。

Cursor およびその他の MCP クライアントの使用

Cursor を MCP サーバーに接続するには、Type に「Command」を選択し、Command フィールドで command と args の各フィールドの内容を 1 つにまとめます（例：npx mcp-remote https://<your-worker-name>.<your-subdomain>.workers.dev/sse）。

Cursor は HTTP+SSE サーバーをサポートしていますが、認証には対応していないため、引き続き mcp-remote を使用する必要があります（また、HTTP サーバーではなく STDIO サーバーを使用してください）。

クライアントの設定ファイルを開き、Claude の設定に使用したのと同じ JSON を追加してから MCP クライアントを再起動すれば、Windsurf などの他の MCP クライアントを MCP サーバーに接続できます。

どのように動作しますか？

OAuth プロバイダー

OAuth Provider ライブラリは、Cloudflare Workers 向けの OAuth 2.1 サーバー実装を一式提供します。トークンの発行、検証、管理など、OAuth フローの複雑な処理を担います。このプロジェクトでは、次の 2 つの役割を果たします。

• サーバーに接続する MCP クライアントを認証する
• GitHub の OAuth サービスへの接続を管理する
• KV ストレージにトークンと認証状態を安全に保存する

Durable MCP

Durable MCP は、Cloudflare の Durable Objects によって基本的な MCP 機能を拡張し、次の機能を提供します。

• MCP サーバーの状態を永続的に管理する
• リクエスト間で認証コンテキストを安全に保存する
• this.props を介して認証済みユーザー情報にアクセスする
• ユーザーの ID に基づいてツールの利用可否を切り替える

MCP Remote

MCP Remote ライブラリを使用すると、Inspector などの MCP クライアントから呼び出せるツールをサーバーで公開できます。次の機能があります。

• クライアントとサーバー間の通信プロトコルを定義する
• ツールを構造化して定義する方法を提供する
• リクエストとレスポンスのシリアライズおよびデシリアライズを処理する
• クライアントとサーバー間の Server-Sent Events（SSE）接続を維持する