リモートMCPサーバーカタログ

### 更新履歴

:::note info
2025年6月22日
Vercelのmcp-adapterを利用する方法を更新
:::

# 前書き

![ChatGPT Image 2025年4月17日 19_19_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/4df14f58-cac5-473a-aee5-922ff0197327.png)

技術の進歩は急速であり、ここでお話しする内容はあくまで現時点（2025年4月18日）のものです。:point_up_tone1:

# MCPとは何か

Model Context Protocol（MCP）は、大規模言語モデル（LLM）をさまざまなデータソースやツールに接続するための標準化されたプロトコルです。

LLMに対して独自のツールや機能を提供し、AIアシスタントの能力を大幅に拡張することができます。

![https___qiita-image-store.s3.ap-northeast-1.amazonaws.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/a1335cdf-4e91-4fef-b368-d96e05cf7da1.png)

詳しい説明は稔さんのスライドをご参照してください、マジでわかりやすいです:point_up_tone1:

https://speakerdeck.com/minorun365/yasasiimcpru-men

# なぜリモートMCPサーバー

現在、多くのMCPサーバーはユーザーがローカル環境にインストールする必要があります。
これにより、特定の環境構築が求められるだけでなく、Webクライアントでの利用が困難です。

さらに、もしサービスとして展開する場合、権限管理が複雑になり、ユーザーの行動を把握しにくいという課題もあります。

ここでいくつかリモートMCPサーバー構築する方法を紹介します。

## 1. AWS Lambdaを使用したセキュアなMCPサーバーの実装

先月、AWSがMCPサーバーのリポジトリを公開し、

その中にLambdaを使用したMCPサーバーの実装が含まれています。

https://github.com/awslabs/mcp

AWS環境を普段から利用されている方であれば、非常に簡単に始められます。

下記のようなシンプルなLambda関数をデプロイします。

この関数は、パラメータの掛け算を行うシンプルなツールです。

```python:index.py
import json

def lambda_handler(event, context):
    try:
        num1 = event.get('num1')
        num2 = event.get('num2')
        
        # Validate input
        if num1 is None or num2 is None:
            return {
                'statusCode': 400,
                'body': json.dumps({
                    'error': 'Missing required parameters. Please provide both "num1" and "num2".'
                })
            }
        
        # Convert to numbers if they are strings
        if isinstance(num1, str):
            num1 = float(num1)
        if isinstance(num2, str):
            num2 = float(num2)
            
        # Calculate the sum
        result = num1 + num2
        
        # Return the result
        return {
            'statusCode': 200,
            'body': json.dumps({
                'num1': num1,
                'num2': num2,
                'sum': result
            })
        }
    except Exception as e:
        # Handle any errors
        return {
            'statusCode': 500,
            'body': json.dumps({
                'error': str(e)
            })
        }

```

関数名を`mcp-add-tool`にして、デプロイ先を東京リージョン（ap-northeast-1）にします。

実装はとてもシンプルなので、以下の手順で簡単に作成できます：

1.AWSコンソールからLambda関数の「一から作成」を選択
2.ランタイムは最新のPythonバージョンを選択
3.「関数の作成」ボタンをクリック
4.エディタに上記のコードを貼り付け
5.「デプロイ」をクリック

これだけで完了です。

![8A019AC5-B118-4BD2-B7EC-BD5CC564F786_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/4ee80c92-454c-4827-9a63-59e5e69cc423.jpeg)

Claude Desktopの設定を編集します。

```json:claude_desktop_config.json
{
  "mcpServers": {
    "awslabs.lambda-mcp-server": {
      "command": "uvx",
      "args": ["awslabs.lambda-mcp-server@latest"],
      "env": {
        "AWS_PROFILE": "you_profile",
        "AWS_REGION": "ap-northeast-1",
        "FUNCTION_PREFIX": "", # 使用できる関数のプレフィックスを指定するに使えます
        "FUNCTION_LIST": "mcp-add-tool",
        "FUNCTION_TAG_KEY": "", # 特定のタグを指定できます
        "FUNCTION_TAG_VALUE": "" # タグ指定と一緒に使えます
      }
    },
  }
}
```
今回の関数はタグやプレフィックスを付与していないため、`FUNCTION_LIST`には関数名のみを指定するだけで構いません。
設定の編集が完了したら、Claude Desktopを再起動するだけで新しいツールを利用できるようになります。

![F4E1FDA5-9BA1-4E23-82CF-A333A0D9E525.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/88ad37b7-9588-41f8-bba1-27b44b9f4eee.jpeg)


### 利点
- AWS IAMとの統合により、細かいアクセス制御が可能
- Lambda経由で利用できるAWSサービスを自由に活用でき、可能性は無限大
- 実質的なMCPサーバーはAWS側でホスティングされるため、ツールの準備だけで済む
- AWS関連イベントでの事例紹介や技術発表に最適
- 既存のLambdaツールを再利用できるため、車輪の再発明を避けられる

### 欠点
- サービス提供の際にIAMユーザー側で権限管理が必要となり、横展開がやや難しい
- ツールの作成はできるが、現状ではサーバー側のカスタマイズができない


## 2. Cloudflareワーカーによるトークン認証のMCPサーバー

Cloudflareワーカーを使ってMCPサーバーを実装する方法とサンプルコードを紹介します。

MCPサーバーについては公式ブログで詳しく解説されています：

https://blog.cloudflare.com/remote-model-context-protocol-servers-mcp/

### プロジェクトの初期化

実装は非常に簡単です。公式のテンプレートを使ってプロジェクトを初期化しましょう。

```
npm create cloudflare@latest -- mcp-server-bearer-auth --template=cloudflare/ai/demos/mcp-server-bearer-auth
```

または、以下のリポジトリをローカルにクローンすることもできます。

https://github.com/huanshenyi/mcp-server-bearer-auth

### KVネームスペースの作成

デプロイに必要なKVネームスペースを作成します。

```bash
cd mcp-server-bearer-auth

wrangler kv namespace create {任意のnamespace}
```
コマンド実行後、以下のような出力が表示されます：
```
🌀 Creating namespace with title "worker-mcp-server-bearer-auth"
✨ Success!
Add the following to your configuration file in your kv_namespaces array:
[[kv_namespaces]]
binding = "mcp_server_bearer_auth"
id = "you-id"
```

### 設定ファイルの編集

表示されたidの値をコピーして、wrangler.jsoncのOAUTH_KVのidを置き換えます。

```json:wrangler.jsonc
	"kv_namespaces": [
		{
			"binding": "OAUTH_KV",
		    "id": "{you-id}"
		}
	]
```

### 機能紹介

このサンプルコードには、次の2つのツールが実装されています：

- 掛け算ツール
- トークン取得ツール

### ローカル開発環境での確認

ローカルサーバーを起動してみましょう。

```bash
npm run dev
...
⎔ Starting local server...
[wrangler:inf] Ready on http://localhost:8788
```

Claude Desktopから接続するために、設定ファイルを修正します。

```json:claude_desktop_config.json
{
  "mcpServers": {
    "example-local": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "http://localhost:8788/sse",
        "--header",
        "Authorization: Bearer token123"
      ]
    }
  }
}
```
Claude Desktopを再起動すると、2つのツールが接続されていることが確認できます。
![8F25C713-30E3-462D-827E-8ADDF8C3DFCF.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/f1faba64-a00e-4c52-8d00-73cb4c834e86.jpeg)

トークンを確認してみましょう。claude_desktop_config.jsonに設定したBearer tokenが正しく取得できています。

![4D2835A8-0F14-4C4C-843B-F26DD6B40ED9.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/8ce0f495-9cc8-4bcc-871c-9fa47253886d.jpeg)

### Cloudflareへのデプロイ

次にCloudflareにデプロイします。

デプロイ前にCloudflareアカウントを作成しておくことをお勧めします。クレジットカード登録不要で、無料枠も十分使えるのでとても便利です。

```bash
npm run deploy

> remote-mcp-server-bearer-auth@0.0.0 deploy
> wrangler deploy


 ⛅️ wrangler 4.11.0 (update available 4.12.0)
-------------------------------------------------------

Total Upload: 449.28 KiB / gzip: 87.24 KiB
Worker Startup Time: 38 ms
Your worker has access to the following bindings:
- Durable Objects:
  - MCP_OBJECT: MyMCP
- KV Namespaces:
  - OAUTH_KV: you-token
- AI:
  - Name: AI
Uploaded mcp-server-bearer-auth (3.73 sec)
Deployed mcp-server-bearer-auth triggers (0.96 sec)
  https://{you-domain}.workers.dev
```

デプロイが完了したら、発行されたworkers.devで終わるURLを使って設定ファイルを更新します。
区別しやすいように、トークンも変更しておきましょう。

```json:claude_desktop_config.json
{
  "mcpServers": {
    "example-local": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://{you-domain}.workers.dev/sse",
        "--header",
        "Authorization: Bearer remoto123"
      ]
    }
  }
}
```

Claude Desktopを再起動し、トークンを確認してみましょう。

![F0B96ED7-AEDD-46B7-9B51-627A903CC30F.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/e01de5c5-4110-48d9-8c6c-e55044fe03de.jpeg)

いい感じに最新のトークンを教えてくれました。
サーバー側でトークンを取得できるため、権限管理などの追加実装も可能です。

### 利点
- サーバー側のカスタマイズが容易
- 横展開しやすい
- 導入の敷居が低い

### 欠点
- サーバー管理の手間が増える
- CloudflareとHono APIの知識が必要
- LTのネタにしづらい
- 権限管理のための別サービス構築が必要
- クライアントからの定期的なヘルスチェックが横展開時の阻害にありかねない

## 3. CloudflareワーカーによるOAuth認証プロバイダーMCPサーバー

トークン認証のMCPサーバーと全体の構成と近いですが、OAuth認証プロバイダー追加することで、自前で認証システム構築する手間が省けます、こちらの記事でも紹介してます。

https://qiita.com/Syoitu/items/d4a376832dcd2c895e24#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E5%88%9D%E6%9C%9F%E5%8C%96

### プロジェクト初期化

任意のディレクトリでアプリを初期化します。

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

初期化プロセス中に質問されますが、下記のよに回答しましょう。

> You're in an existing git repository. Do you want to use git for version control?
- yes

> Do you want to deploy your application?

- No

初期化完了したら、リポジトリに入って、`OAUTH_KV`を作ります。

```bash
cd my-mcp-server-github-auth
wrangler kv namespace create "test-remoto-mcp(任意)"
```

実行したら、Cloudflareの認証画面が開かれます、事前にアカウント作っておくことをおすすめです。

Cloudflareはクレジットカードの登録なしでアカウントを作成でき、無料プランでも十分な機能が提供されているため、気軽に利用を始めることができます。

```
🌀 Creating namespace with title "worker-test-remoto-mcp"
✨ Success!
Add the following to your configuration file in your kv_namespaces array:
[[kv_namespaces]]
binding = "test_remoto_mcp"
id = "xxxxxxxxx"
```

実行完了したら、できた値(id)をリポジトリ配下のwrangler.jsoncのOAUTH_KVに書き換えます。
```diff_json: wrangler.jsonc

	"kv_namespaces": [
		{
			"binding": "OAUTH_KV",
+			"id": "{OAUTH_KV}"
		}
	]

```

ここまでできたら一度デプロイしましょう。

```
npm run deploy
```

デプロイ完了したら、Cloudflareワーカーのurlが表示されます、
`https://your-worker-name.your-account.workers.dev`
それをコピーしておいてください、後でまた使います。


### GitHub OAuth Appを作る

[GitHub OAuth Appドキュメント](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app)

GitHubにログインして、`Settings` -> `Developer Settings` -> `New OAuth App`

![EBB3B313-1E08-4E5A-A356-CF1CA4FA6B6A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/5591e3d0-8766-4d4f-8540-c632b5d4821e.jpeg)

> Application name

覚えやすい名前を入力しましょう。

> Homepage URL

先コピーしたCloudflareワーカーのurlを入力しましょう、`https://your-worker-name.your-account.workers.dev`。

> Authorization callback URL

Cloudflareワーカーのurl+/callback, `https://your-worker-name.your-account.workers.dev/callback`。

完了したら、クライアントIDとクライアントシークレットが発行されます、
それらをWorkerのシークレットとして追加します。

namespaceに入る値は`OAUTH_KV`を作った際に使った値になります。

```bash
wrangler secret put GITHUB_CLIENT_ID --name {namespace}
wrangler secret put GITHUB_CLIENT_SECRET --name {namespace}
```

最後、COOKIE_ENCRYPTION_KEYの値も作ります。

```bash
openssl rand -hex 32
```

できた値をメモして、次のコマンド実行後、入力します。

```bash
wrangler secret put COOKIE_ENCRYPTION_KEY --name {namespace}
```

ここまででセットアップは完了しました、実際の動作を確認してみましょう。

[Workers AI LLM Playground](https://playground.ai.cloudflare.com/)を開いてください。


![96F43FD7-4749-4DA0-8BFF-99B102B1D6FA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/ec223340-7bfb-4733-83fd-04024bb79a73.jpeg)


MCP Servers URLに Cloudflareワーカーのurl+`/sse`を入力しましょう、
`https://your-worker-name.your-account.workers.dev/sse`。

Connectを押すと、認証画面にリダイレクトされます。

![A33B26BC-9E36-483A-A711-33CFE0BF5F12.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/578ec737-e022-4790-a413-650e97475627.jpeg)

接続完了したら、デフォルトで実装されてる`add`ツールを呼び出してみます。

![83E43ED7-36C1-4DF6-A5BD-27DD49088A62_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/5fc3a4c1-2e90-49f1-97af-c53d278632b6.jpeg)

環境変数のセットやデプロイが完了していれば、問題なく呼び出せるはずです。

### githubドキュメント取得ツールを作る

簡易的なGitHubリポジトリのREADME.mdの内容を取得するツールを作ります、
`addツール`の下に下記のコードを追記します。

```typescript:src/index.ts
...

    this.server.tool(
      'getGithubReadme',
      'GitHubリポジトリのREADMEファイルを取得する',
      { repositoryUrl: z.string() },
      async ({ repositoryUrl }) => {
        try {
          // repositoryUrlからオーナー名とリポジトリ名を抽出
          const urlParts = repositoryUrl.replace('https://github.com/', '').split('/')
          const owner = urlParts[0]
          const repo = urlParts[1]

          // READMEのraw URLを構築
          const readmeUrl = `https://raw.githubusercontent.com/${owner}/${repo}/refs/heads/main/README.md`

          // READMEの内容を取得
          const response = await fetch(readmeUrl)

          if (!response.ok) {
            throw new Error(`README取得エラー: ${response.status} ${response.statusText}`)
          }

          const readmeContent = await response.text()

          return {
            content: [
              {
                type: 'text',
                text: readmeContent,
              },
            ],
          }
        } catch (error) {
          return {
            content: [
              {
                type: 'text',
                text: `エラーが発生しました: ${error.message}`,
              },
            ],
          }
        }
      },
    )
```

このツールはユーザーからGithubリポジトリのurl渡された際に、そのリポジトリにある`README.md`の中身を返すだけのシンプルなツールです。

修正完了したら、再度デプロイします。
```
npm run deploy
```

[Workers AI LLM Playground](https://playground.ai.cloudflare.com/)を使って検証してみよう。

同じくLangfuseとの連携の話を聞いてみます。

![9D8ED49D-79EF-480E-8A20-31970B4F1F46_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/68b4d7cf-ffe8-4c49-891b-0fa544bc473b.jpeg)

それぽい結果が返ってきました:relaxed:

Claude Desktopで利用する場合、下記のようにconfigファイルを修正すればいいです。

```json:claude_desktop_config.json
{
  "mcpServers": {
    "math": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://your-worker-name.your-account.workers.dev/sse"
      ],
      "timeout": 10
    }
  }
}
```

### 利点
- サーバー側のカスタマイズが容易
- 横展開しやすい
- 導入の敷居が低い

### 欠点
- サーバー管理の手間が増える
- CloudflareとHono APIの知識が必要
- クライアントからの定期的なヘルスチェックが横展開時の阻害にありかねない
- 認証ページがうまく開けなくて、無限ループによりサーバーダウンの可能性がある

## 4. Vercelのmcp-adapter使ったMCPサーバー

詳細内容はこちらの記事に書いています。
Vercelに限らず、AWSなど、Next.jsをデプロイ可能な環境であれば、リモートMCPサーバーとして利用可能です。

https://qiita.com/Syoitu/items/b735321d2ab6ad47b248

### 利点
- 横展開しやすい
- Next.jsをMCPサーバー化するため、クライアントと共存しやすい

### 欠点
- Next.jsが必須条件
- 認証用の関数はまだ検証段階

## 最後

その他の方法を確認次第、追加で更新する予定です:relaxed: