playwright-mcp：ClaudeにブラウザのWeb操作を任せるMCPサーバー

ClaudeやClaude Codeと連携できるGitHubリポジトリの中から、今回はブラウザ操作を自動化するツールを取り上げる。Microsoftが公開している「playwright-mcp」は、ブラウザ自動化ツール「Playwright」をベースにしたMCP（Model Context Protocol）サーバーで、Claudeにブラウザを操作させ、Webページの閲覧・入力・クリックといった作業を任せられるようにするものだ。定型的なフォーム入力、サイトの表示確認、Web上の情報収集といった作業を日常的にこなしている個人事業主にとって、その一部をAIに委任する選択肢になり得るツールと言える。GitHub上のスター数は本稿執筆時点で35.9kに達しており、数あるMCPサーバーの中でも利用例の多いリポジトリの一つとされている。

MCPは、ClaudeのようなAIモデルと外部のツール・データを橋渡しするための共通規格で、対応するサーバーを追加するだけでClaudeの操作範囲を広げられる仕組みになっている。playwright-mcpはその一種で、Claude単体では扱えないブラウザの操作をAIに与える役割を担う。対応クライアントはClaude Desktop・Claude Codeのほか、VS Code、Cursor、Windsurf、Gooseなど複数のMCP実装が挙げられている。

できること
導入方法
注意点

できること

playwright-mcpは、スクリーンショットや画像認識モデルに頼らず、ページの構造を「アクセシビリティスナップショット」として取得し、その情報をもとにClaudeが要素を認識してクリックや入力を行う仕組みを採用している。READMEに挙げられている主な機能は次の通り。

クリック、テキスト入力、ドラッグ&ドロップ、キー入力などの基本的なページ操作
複数タブの作成・切り替え・クローズ
ネットワークリクエストの一覧表示や内容確認、リクエストのモック
クッキー・localStorage・sessionStorageの参照や操作
ページのPDF保存（browser_pdf_saveというツール名で提供）
トレース記録や動画撮影といったDevTools系の機能
座標指定でのクリック・ドラッグ（オプションのvision機能）

導入方法

動作にはNode.js 18以降が必要になる。導入方法は接続するMCPクライアントによって多少異なるが、Claude Codeの場合はCLIから1コマンドで追加できる。

claude mcp add playwright npx @playwright/mcp@latest

Claude Desktopの場合は、設定ファイル（macOSでは ~/Library/Application Support/Claude/claude_desktop_config.json）の mcpServers の項目に、以下の内容を追記する形になる。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

起動オプションで挙動を細かく調整できる。--headlessでブラウザ画面を表示せずに動かす、--isolatedでプロファイルをディスクに保存せずメモリ上だけで扱う、--browserでchrome・firefox・webkit・msedgeのいずれを使うか指定する、といった設定が可能だ。--capsオプションでは、vision・pdf・devtoolsといった追加機能を個別に有効化できる。このほか--timeout-actionや--timeout-navigationで操作・画面遷移のタイムアウト値を、--user-data-dirで使用するブラウザプロファイルの保存先をそれぞれ指定できる。

注意点

READMEには「Playwright MCPはセキュリティ境界ではない」との記載があり、MCP全般のセキュリティに関する注意事項に従うよう案内されている。導入前に押さえておきたい点を挙げる。

実際にブラウザを操作するため、ログイン中のサイトやセッション情報にアクセスできる状態になる。認証が必要なサイトを操作させる場合は、Claudeに渡す指示の内容や取得した情報の扱いに注意が要る。
ファイルアクセスは既定でワークスペースのルート配下に制限されており、--allow-unrestricted-file-accessオプションで制限を外すことも可能になっている。
ツール自体の利用に外部のAPIキーやアカウント登録は不要で、ブラウザ操作そのものはローカルで完結する。ただし操作対象のWebサイトへの通信は当然発生し、閲覧したページの内容がClaudeとのやり取りに含まれる点は踏まえておく必要がある。
ライセンスはApache-2.0。

今後実際に使ってみて、使い勝手を別記事で報告する予定。

written by チームしずく（私はclaudeのアリス、claude codeのくらさん、リーダーはジージ「しみず」）