ClaudeのWeb版で待望のModel Context Protocol (MCP)連携ができるようになりました！
2025.05.02はじめに
Claudeから以下の発表がありました。
Model Context Protocol (MCP) をリモートサーバー経由でも利用可能にし、デスクトップ版だけでなく Web 上の MCP サーバーとも連携します。
MCPを使う場合、Claudeの場合以下の制約がありました。
- Claude Desktopのみ利用可能
- StdioTransportのみ利用可能
今回のアップデートでClaudeのWeb版で任意のサーバーとMCPで連携できるようになりました。
今回はSSEでMCPサーバーを自作し、ClaudeのWeb版との連携を試します。
注意事項は以下です。
- 既存のMCPサーバーはStdioTransportのため、MCP連携するには別途対応が必要です。
- 本統合機能は、Max、Team、Enterpriseプランでベータ版として提供
やってみる
(今試したい人だけ!!)Maxプランへアップデート
Proプランにもロールアウトされる機能なので、今試したい人だけで大丈夫です。
現在はMaxプランだと早めにロールアウトされているようなのでアップデートします。
私は年額プランを2月に契約済みなので、残りの年額クレジットを充当してアップデートする形となりました。これはありがたいですね！
リモートMCPサーバーの構築
基本こちらの資料を参考に進めます。適宜手順を引用します。
npm create cloudflare@latest -- my-mcp-server-github-auth --template=cloudflare/ai/demos/remote-mcp-github-oauth
wranglerがない場合導入します
npm install -g wrangler
wranglerの認証をします。
wrangler login
KVを作成します
$ wrangler kv namespace create "OAUTH_KV"
⛅️ wrangler 4.14.1
-------------------
Resource location: remote
🌀 Creating namespace with title "OAUTH_KV"
✨ Success!
Add the following to your configuration file in your kv_namespaces array:
{
"kv_namespaces": [
{
"binding": "OAUTH_KV",
"id": "<KV_ID>"
}
]
}
エディタで wrangler.jsonc ファイルを開き、kv_namespaces セクションを見つけて、id の値を先ほどコピーしたIDに書き換えます。
// wrangler.jsonc の例
"kv_namespaces": [
{
"binding": "OAUTH_KV",
"id": "<コピーしたKV_ID>" // ここを書き換える
}
],
workersのデプロイを実施します。
❯ npm run deploy
> remote-mcp-github-oauth@0.0.1 deploy
> wrangler deploy
Cloudflare collects anonymous telemetry about your usage of Wrangler. Learn more at https://github.com/cloudflare/workers-sdk/tree/main/packages/wrangler/telemetry.md
⛅️ wrangler 3.114.6 (update available 4.14.1)
--------------------------------------------------------
▲ [WARNING] The version of Wrangler you are using is now out-of-date.
Please update to the latest version to prevent critical errors.
Run `npm install --save-dev wrangler@4` to update to the latest version.
After installation, run Wrangler with `npx wrangler`.
Total Upload: 733.85 KiB / gzip: 139.86 KiB
Worker Startup Time: 23 ms
Your worker has access to the following bindings:
- Durable Objects:
- MCP_OBJECT: MyMCP
- KV Namespaces:
- OAUTH_KV: <KV_ID>
- AI:
- Name: AI
Uploaded mcp-github-oauth (2.70 sec)
Deployed mcp-github-oauth triggers (0.91 sec)
https://mcp-github-oauth.<アカウント名>.workers.dev
Current Version ID: cbad2e2f-13c2-4b55-a078-42d27308f9c6
こちらを参考にGitHub Appを作成します。
3つのシークレットを登録します。
# Client IDを保存
wrangler secret put GITHUB_CLIENT_ID
# プロンプトが表示されたら、メモしたClient IDを入力
# Client Secretを保存
wrangler secret put GITHUB_CLIENT_SECRET
# プロンプトが表示されたら、メモしたClient Secretを入力
openssl rand -hex 32 # COOKIE_ENCRYPTION_KEYを生成
wrangler secret put COOKIE_ENCRYPTION_KEY
# プロンプトが表示されたら、opensslで発行された値を入れる
こちらを参考にWorkers AI LLM Playgroundを開いて動作確認をします。
MCP Servers URLに Cloudflareワーカーのurl+/sseを入力します。https://your-worker-name.your-account.workers.dev/sse。
add toolを使って34+24をしてください。
動作していることが確認できました。
Claudeと連携してMCP呼び出ししてみる
Integrationsの画面に行き、Add moreを押下します
以下の設定を実施します。
My MCP Server Authhttps://mcp-github-oauth.<アカウント名>.workers.dev/sse
Connectを押下し、連携を開始します。
Approveします
連携完了すると以下のような画面になります
ConnectがDisconnectになっており、正常に連携できていそうです
トップのチャット画面でも追加されていることがわかります。
先ほどと同じようにadd toolを使って34+24をしてください。をClaudeのWeb画面で入力します。いつもの確認画面がでます！！
無事リモートで呼び出し成功していることが確認できました。
スマホアプリの方は対応はまだしていないみたいです！スマホのブラウザからであればもちろん使えるので、そちらを利用するのが良さそうです！
もう一つのツールも試してみます。
うまく連携できてますね！
最後に
簡単ではありますが、ClaudeのWeb上から自作のMCPが呼び出せることが確認できました！これにより自社のRAGや便利なツールを任意のユーザーや他社に提供することができます！設定も簡易なので、非エンジニアへの配布も楽になりそうです。プレスリリースの Claudeはあなたの世界に接続できるようになる というタイトル通りですね！
今回はSSEで試しましたが、Streamable HTTPでも試したいです。ますますMCP盛り上がりそうですね！
![[MCPって何？から始める ビジネスのためのMCP活用セミナー]「企業が押さえるべきMCPの未来」というタイトルで登壇しました](https://devio2024-media.developers.io/image/upload/v1746164709/user-gen-eyecatch/pofvupochdzgpjprtr3w.webp)
