Playwright MCP と Claude Desktop を使用して Claude Cowork 風のブラウザエージェントを構築する

Claude Cowork は、AI をチャットベースの支援からタスク委任へと変革します。ユーザーに指示を与える代わりに、直接コンピュータ、ファイル、アプリケーション、ブラウザワークフローを操作します。Playwright MCP と組み合わせることで、Claude Desktop はスクリーンショットベースの自動化よりもはるかに構造化された方法で、ページを開いたり、ボタンをクリックしたり、フォームに入力したり、データを抽出したり、インターフェースをデバッグしたりできます。

Playwright MCP は、ブラウザの自動化機能を AI アシスタントに提供する MCP サーバーです。Microsoft の Playwright フレームワークに基づいており、Chromium、Firefox、WebKit、Microsoft Edge などのブラウザをサポートします。Playwright MCP の重要な点は、ページの状態を LLM にマッピングする方法にあります。ピクセルベースではなく、アクセシビリティツリーを利用して構造化されたスナップショットを返すため、Claude はページ構造を理解し、何をクリックするか、何を入力するかを決定できます。

アーキテクチャ

Claude Desktop + Playwright MCP のセットアップは、4 つの主要コンポーネントで構成されます：Claude Desktop、MCP プロトコル、Playwright MCP サーバー、ブラウザ。MCP プロトコルにより、ツールとサーバーが管理された方法で他のシステムに接続し、AI アプリケーションの機能を強化します。このアーキテクチャは、ブラウザ自動化層を LLM から分離するため、技術リーダーにとって有用です。Claude は Playwright の内部を意識する必要がなく、ページのスナップショットを確認してツールを呼び出します。

インストール手順

まず、次のコマンドで Playwright MCP をインストールします：

npm install -D @playwright/test@latest

次に、Claude Desktop の設定ファイル（macOS では ~/Library/Application Support/Claude/claude_desktop_config.json、Windows では %APPDATA%\Claude\claude_desktop_config.json）を開き、Playwright MCP サーバーを追加します。Claude Desktop を再起動すると、ツールが使用可能になります。

機能一覧

Playwright MCP は以下のようなブラウザ操作をサポートします：

• ナビゲーション：ページを開く、クリック、スクロール。
• クリックと入力：ユーザーのクリックとキーボード入力のシミュレーション。
• フォーム入力：フォームフィールドの自動入力。
• スクリーンショット：視覚的な検証のための画面キャプチャ。
• キーボードとマウス操作：ショートカットキーやマウスアクションのシミュレーション。
• タブ管理：複数タブでのワークフロー。
• ダイアログ処理：アラート、確認ダイアログなどの処理。
• ネットワーク監視：リクエストとレスポンスの表示。
• API モッキング：バックエンドレスポンスのモック。
• ストレージ状態：Cookie や localStorage の保存と復元。
• Playwright コードの実行：任意の JavaScript を実行（RCE 相当のため注意が必要）。

セキュリティ

専用のテストアカウントを使用し、本番環境の認証情報を避けることが重要です。ヘッドレスモード、ブラウザ選択、ビューポートサイズ設定、プロキシ設定などの高度なオプションも利用できます。

まとめ

Playwright MCP と Claude Desktop を組み合わせることで、Claude Cowork のようなブラウザ自動化エージェントを無料で構築できます。この設定は、Web テスト、データ抽出、製品調査などに役立ち、AI にブラウザ制御権限を与えながらモジュール性と拡張性を維持します。