cloudflare-playwright-mcp

Cloudflare Playwright MCP の例

概要

このプロジェクトは、Playwright with Cloudflare Workers を、Cloudflare Playwright MCP を使用した Model Control Protocol (MCP) サーバーとして使用する方法を示しています。

これにより、AI アシスタントは一連のツールを通じてブラウザを制御し、ナビゲーション、入力、クリック、スクリーンショット取得などの Web 自動化タスクを実行できるようになります。

このサーバーは、Cloudflare AI Playground、Claude Desktop、VS Code の GitHub Copilot など、さまざまな AI プラットフォームで使用できます。

デプロイ

プロジェクトをセットアップしてデプロイするには、次の手順に従います。

1. 依存関係をインストールします:

npm ci

2. Cloudflare Workers にデプロイします:

npx wrangler deploy

Cloudflare AI Playground で使用する

Cloudflare playground AI は、Workers AI で利用可能な LLM モデルを使用して MCP サーバーをテストするのに最適な方法です。

• https://playground.ai.cloudflare.com/ に移動します。

• モデルが llama-3.3-70b-instruct-fp8-fast に設定されていることを確認します。

• MCP Servers で、URL を https://[my-mcp-url].workers.dev/sse に設定します。

• Connect をクリックします。

• ステータスが Connected に更新され、利用可能なツールが 14 個表示されるはずです。

これでモデルとの対話を開始でき、要求されたことを達成するために必要なツールが実行されます。

[!TIP] 最良の結果を得るには、1 つのアクションだけからなる簡単な指示を与えてください。例: 「新しい TODO エントリを作成」「cloudflare サイトに移動」「スクリーンショットを撮る」

会話の例:

Claude Desktop で使用する

現時点では、Claude Desktop はローカル MCP サーバーのみをサポートしています。Claude Desktop で playground-mcp を使用するには、リモート MCP サーバーをプロキシしてローカルに公開するツールである mcp-remote を利用します。次の構成を使用してください。

1. Claude Desktop の構成ファイルを開きます。

2. mcpServers セクションの下に次の JSON スニペットを追加します:

{
  "mcpServers": {
    "cloudflare-playwright-mcp": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://[my-mcp-url].workers.dev/sse"
      ]
    }
  }
}

3. 構成ファイルを保存し、変更を適用するために Claude Desktop を再起動します。

この設定により、Claude Desktop が Cloudflare Playwright MCP サーバーと通信できるようになります。

以下は、playwright-mcp ツールと Browser Rendering を利用して、TODO デモアプリを開き、「buy lemons」を追加してスクリーンショットを撮るセッションの例です:

VSCode で構成する

Playwright MCP サーバーは、VS Code CLI を使用してインストールできます:

# For VS Code
code --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"cloudflare-playwright","type":"sse","url":"https://[my-mcp-url].workers.dev/sse"}'

インストール後、Playwright MCP サーバーは VS Code の GitHub Copilot エージェントで使用できるようになります。