mcpField
M
MCP Demo

MCP Demo

ローカル
github.com/akazwz開発ツール3086 週間前に更新
リポジトリ

MCP Demo について

MCP Demo は Cloudflare Workers MCP を使ったデモプロジェクトで、Claude や Cursor などの MCP クライアントから呼び出せるカスタムツールを作成します。サーバーレス環境に MCP サーバーをデプロイする方法を知りたい開発者を対象としています。

主な機能

  1. 01Cloudflare Workers 上で動作するカスタムツール
  2. 02乱数生成と画像生成のツール
  3. 03スクリーンショットと画像抽出には有料プランが必要
  4. 04src/index.ts を編集した新規ツールの追加

活用シーン

  1. 01Cloudflare Workers での MCP サーバーの構築方法の学習
  2. 02Claude Desktop や Cursor へのカスタムツールの追加
  3. 03サーバーレス MCP ツールの開発の出発点としての利用

MCP 対応

MCP サーバーとして、Cloudflare Workers MCP を通じて Claude Desktop や Cursor などの MCP クライアントにツールを公開します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "workers-mcp-demo": {
      "command": "npx",
      "args": [
        "-y",
        "workers-mcp"
      ]
    }
  }
}
起動コマンドnpx -y workers-mcp

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npmworkers-mcp

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

MCP デモ

これは、Cloudflare Workers MCP を使用してカスタム AI ツールを作成するシンプルなデモプロジェクトです。これらのツールは、Claude、Cursor、その他 MCP をサポートする AI アシスタントと一緒に使用できます。

MCP とは？

MCP (Model Context Protocol) は、Anthropic がオープンソース化した標準であり、AI アシスタントをデータソース（コンテンツリポジトリ、ビジネスツール、開発環境など）に接続するためのものです。その目的は、最先端のモデルがより良く、より関連性の高い応答を生成できるようにすることです。

本プロジェクトは、Cloudflare Workers MCP を活用してカスタムツールを作成し、それらのツールを AI アシスタントがアクセスして使用できるようにすることで、AI の能力を拡張します。

特徴

  • Cloudflare Workers 上で動作するカスタム AI ツール
  • Claude、Cursor、その他の MCP クライアントとのシームレスな統合
  • 独自のサーバーレス関数を通じて AI の能力を拡張可能

前提条件

セットアップ手順

1. このリポジトリをクローン
git clone https://github.com/akazwz/workers-mcp-demo.git
cd workers-mcp-demo
2. 依存関係をインストール
pnpm install
3. Cloudflare Worker を設定

Wrangler を使用して Cloudflare にログイン済みであることを確認してください：

pnpx wrangler login

次に、MCP セットアップコマンドを実行します：

npx workers-mcp setup

これにより、Worker が MCP をサポートするように自動的に設定されます。

無料ユーザー向けの設定に関する注意事項

Cloudflare Workers の無料ユーザー（有料ユーザーではない）の場合、wrangler.jsonc ファイルを修正し、以下の設定を削除またはコメントアウトする必要があります：

"browser": {
  "binding": "BROWSER"
}

これは、Browser Rendering API が有料ユーザーのみ利用可能であるためです。この設定を削除すると、screenshotURL と extractImagesFromURL の機能は使用できなくなりますが、その他の機能は引き続き正常に動作します。

4. Worker をデプロイ
pnpm run deploy
5. MCP クライアントを設定
Claude Desktop の場合：

以下のコマンドを実行して、Claude に MCP サーバーをインストールします：

pnpx workers-mcp install:claude
Cursor の場合：

Cursor の MCP 設定に以下を追加します：

{
  "type": "command",
  "command": "/path/to/workers-mcp run workers-mcp-demo https://your-worker-url.workers.dev /path/to/workers-mcp-demo"
}

使用方法

設定が完了すると、AI アシスタントから直接カスタム MCP ツールを使用できます。たとえば、Claude Desktop では次のようなコマンドを使用できます：

@workers-mcp-demo getRandomNumber

利用可能なツール

このデモには以下のツールが含まれています：

  • getRandomNumber：ランダムな数値を生成します
  • generateImage：テキストプロンプトに基づいて画像を作成します
  • screenshotURL：指定した URL のスクリーンショットを撮ります（有料アカウントが必要）
  • extractImagesFromURL：ウェブページから画像を抽出します（有料アカウントが必要）

カスタマイズ

独自のツールを追加するには、src/index.ts ファイルを編集し、Worker クラスに新しいメソッドを追加します。変更後、以下のコマンドで Worker を再デプロイします：

pnpm run deploy

トラブルシューティング

  • AI アシスタントがツールを認識しない場合は、アシスタントを再起動してみてください。
  • メソッド名やパラメータを変更した場合、変更を反映するには AI アシスタントを再起動する必要があります。
  • デプロイ時のエラーを確認するには、Cloudflare Workers のログを確認してください。
  • 無料アカウントを使用しているときに Error: Browser Rendering API is only available for Workers Paid plans エラーが発生した場合は、上記の無料ユーザー向けの設定に関する注意事項を参照してください。

ライセンス

本プロジェクトは MIT ライセンス を採用しています。

謝辞

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。