Cloudflare プレイライト MCP

👁 Cloudflareにデプロイする

概要

このプロジェクトは、ブラウザのテストを自動化するために Playwright を活用し、デプロイメントのために Cloudflare Workers、ブラウザ レンダリング、 @cloudflare/playwrightと統合します。

ビルドとデプロイ

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

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

npm ci

2. 建てる：

cd cloudflare
npm run build

3. Cloudflare Workers にデプロイする:

cd cloudflare/example
npx wrangler deploy

Cloudflare AI Playgroundでの使用

👁 代替テキスト

Cloudflare プレイグラウンド AI は、 Workers AI で利用可能な LLM モデルを使用して MCP サーバーをテストするのに最適な方法です。

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

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

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

• **「接続」**をクリック

• ステータスが**「接続済み」**に更新され、利用可能なツールが14個表示されます。

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

[!TIP] 最良の結果を得るには、「新しい ToDo エントリを作成する」、「CloudFlare サイトに移動する」、「スクリーンショットを撮る」など、1 つのアクションで構成される簡単な指示を与えます。

会話の例:

Claude Desktop で使用する

現在、 Claude DesktopはローカルMCPサーバーのみをサポートしています。playground playground-mcp Claude Desktopで使用するには、リモート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 ツールとブラウザ レンダリングを利用して、TODO デモ アプリを開き、「レモンを購入」を追加し、スクリーンショットを撮るセッションの例です。

👁 代替テキスト

VSCodeで設定する

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

# 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 エージェントで使用できるようになります。

ツールモード

ツールは次の 2 つのモードで使用できます。

1. スナップショットモード（デフォルト）：アクセシビリティスナップショットを使用してパフォーマンスと信頼性を向上します

2. ビジョンモード: スクリーンショットを使用して視覚的なインタラクションを行います

ビジョン モードは、提供されたスクリーンショットに基づいて、XY 座標空間を使用して要素と対話できるコンピューター使用モデルで最も効果的に機能します。

スナップショットベースのインタラクション

• ブラウザのスナップショット

  • 説明: 現在のページのアクセシビリティスナップショットをキャプチャします。これはスクリーンショットよりも優れています。

  • パラメータ: なし

• ブラウザクリック

  • 説明: Webページでクリックを実行する

  • パラメータ:

    • element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明

    • ref (文字列): ページスナップショットからの正確なターゲット要素参照

• ブラウザドラッグ

  • 説明: 2つの要素間でドラッグアンドドロップを実行します

  • パラメータ:

    • startElement (文字列): 要素と対話するための許可を取得するために使用される、人間が読めるソース要素の説明

    • startRef (文字列): ページスナップショットからの正確なソース要素参照

    • endElement (文字列): 要素と対話するための許可を取得するために使用される、人間が読めるターゲット要素の説明

    • endRef (文字列): ページスナップショットからの正確なターゲット要素参照

• ブラウザホバー

  • 説明: ページ上の要素にマウスを移動します

  • パラメータ:

    • element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明

    • ref (文字列): ページスナップショットからの正確なターゲット要素参照

• ブラウザの種類

  • 説明: 編集可能な要素にテキストを入力します

  • パラメータ:

    • element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明

    • ref (文字列): ページスナップショットからの正確なターゲット要素参照

    • text (文字列): 要素に入力するテキスト

    • submit （ブール値、オプション）：入力したテキストを送信するかどうか（送信後にEnterキーを押す）

    • slowly (boolean, オプション): 一度に1文字ずつ入力するかどうか。ページ内のキーハンドラをトリガーするのに便利です。デフォルトでは、テキスト全体が一度に入力されます。

• ブラウザ選択オプション

  • 説明: ドロップダウンからオプションを選択します

  • パラメータ:

    • element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明

    • ref (文字列): ページスナップショットからの正確なターゲット要素参照

    • values (配列): ドロップダウンで選択する値の配列。単一の値または複数の値を指定できます。

• ブラウザのスクリーンショット

  • 説明: 現在のページのスクリーンショットを撮ります。スクリーンショットに基づいてアクションを実行することはできません。アクションには browser_snapshot を使用してください。

  • パラメータ:

    • raw (ブール値、オプション): 圧縮せずにPNG形式で返すかどうか。デフォルトはfalseで、JPEG画像を返します。

    • element (文字列, オプション): 要素のスクリーンショットの許可を得るために使用される、人間が読める形式の要素説明。指定されていない場合は、ビューポートのスクリーンショットが撮影されます。element を指定する場合は、ref も指定する必要があります。

    • ref (文字列, オプション): ページスナップショットから取得する正確なターゲット要素の参照。指定されていない場合は、ビューポートのスクリーンショットが取得されます。ref を指定する場合は、要素も指定する必要があります。

視覚ベースのインタラクション

• ブラウザのスクリーンキャプチャ

  • 説明: 現在のページのスクリーンショットを撮ります

  • パラメータ: なし

• ブラウザ画面上のマウス移動

  • 説明: マウスを指定された位置に移動する

  • パラメータ:

    • element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明

    • x (数値): X座標

    • y (数値): Y座標

• ブラウザ画面のクリック

  • 説明: マウスの左ボタンをクリック

  • パラメータ:

    • element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明

    • x (数値): X座標

    • y (数値): Y座標

• ブラウザ画面ドラッグ

  • 説明: 左マウスボタンをドラッグ

  • パラメータ:

    • element (文字列): 要素と対話するための許可を得るために使用される、人間が読める要素の説明

    • startX (数値): 開始X座標

    • startY (数値): 開始Y座標

    • endX (数値): 終了X座標

    • endY (数値): 終了Y座標

• ブラウザ画面タイプ

  • 説明: テキストを入力

  • パラメータ:

    • text (文字列): 要素に入力するテキスト

    • submit （ブール値、オプション）：入力したテキストを送信するかどうか（送信後にEnterキーを押す）

タブ管理

• ブラウザタブリスト

  • 説明: ブラウザのタブを一覧表示する

  • パラメータ: なし

• ブラウザタブ新規

  • 説明: 新しいタブを開く

  • パラメータ:

    • url (文字列、オプション): 新しいタブで移動するURL。指定しない場合、新しいタブは空白になります。

• ブラウザタブ選択

  • 説明: インデックスでタブを選択する

  • パラメータ:

    • index （数値）：選択するタブのインデックス

• ブラウザタブを閉じる

  • 説明: タブを閉じる

  • パラメータ:

    • index (数値, オプション): 閉じるタブのインデックス。指定されていない場合は現在のタブを閉じます。

ナビゲーション

• ブラウザナビゲート

  • 説明: URL に移動する

  • パラメータ:

    • url (文字列): 移動するURL

• ブラウザの戻る

  • 説明: 前のページに戻る

  • パラメータ: なし

• ブラウザで進む

  • 説明: 次のページへ進む

  • パラメータ: なし

キーボード

• ブラウザのキーを押す

  • 説明: キーボードのキーを押します

  • パラメータ:

    • key (文字列): 押すキーの名前、または生成するa （例： ArrowLeft 、

コンソール

• ブラウザコンソールメッセージ

  • 説明: すべてのコンソールメッセージを返します

  • パラメータ: なし

ファイルとメディア

• ブラウザファイルアップロード

  • 説明: 1つまたは複数のファイルをアップロードします

  • パラメータ:

    • paths (配列): アップロードするファイルへの絶対パス。1つのファイルでも複数のファイルでも構いません。

• ブラウザPDF保存

  • 説明: ページをPDFとして保存

  • パラメータ: なし

ユーティリティ

• ブラウザを閉じる

  • 説明: ページを閉じる

  • パラメータ: なし

• ブラウザ待機

  • 説明: 指定された時間（秒）待機します

  • パラメータ:

    • time （数値）：待機時間（秒）

• ブラウザのサイズ変更

  • 説明: ブラウザウィンドウのサイズを変更する

  • パラメータ:

    • width （数値）：ブラウザウィンドウの幅

    • height （数値）：ブラウザウィンドウの高さ

• ブラウザハンドルダイアログ

  • 説明: ダイアログを処理する

  • パラメータ:

    • accept (boolean): ダイアログを受け入れるかどうか。

    • promptText (文字列、オプション): プロンプトダイアログの場合のプロンプトのテキスト。

Maintenance

Resources

• NPM Package
• GitHub Repository
Need Help?
• Reddit Discussion
Related Servers

Tools

• browser_clickC
• browser_closeA
• browser_console_messagesC
• browser_dragB
• browser_dropA
• browser_evaluateC
• browser_file_uploadC
• browser_fill_formC