niki-til

Browser Automation MCP 2026 — Playwright・chrome-devtools・agent-browser

AI エージェントがブラウザを操作するための MCP (Model Context Protocol) サーバーを、トークン効率・認証セッション再利用・成熟度の3軸で比較するノート。

1. なぜ複数の選択肢があるのか

LLM がブラウザを動かす時、画面状態を「文字情報」として LLM に伝える必要がある。伝え方が以下のように分岐する：

| 方式 | コスト | 例 | |---|---|---| | スクリーンショット（vision） | 1枚で 5,000-8,000 tok | Anthropic Computer Use, PageBolt | | HTML 全文 | 数万 tok | 古典的なスクレイピング | | Accessibility Tree（DOMのセマンティック木） | 200-12,000 tok | Playwright MCP, chrome-devtools-mcp | | Accessibility Tree + Compact Refs（最も圧縮） | 200-400 tok | agent-browser |

→ トークン効率は「画面情報の表現方法」次第。後ろの方式ほど効率的だが、表現力は落ちる（ピクセル位置情報が消える等）。

2. Playwright MCP（Microsoft 公式）

正式名: @playwright/mcp

仕組み

トークン消費（実測ベンチマーク）

強み

弱み

起動例（Claude Code .mcp.json）

"playwright": {
  "command": "npx",
  "args": ["-y", "@playwright/mcp@latest", "--browser", "chrome"]
}

派生品

3. chrome-devtools-mcp（Google 公式）

正式名: chrome-devtools-mcp（ChromeDevTools/chrome-devtools-mcp）

仕組み

トークン消費

強み（決定的）

弱み

起動例

"chrome-devtools": {
  "command": "npx",
  "args": ["-y", "chrome-devtools-mcp@latest", "--browserUrl", "http://localhost:9222"]
}

事前に Chrome を CDP 有効で起動しておく必要がある：

chrome.exe --remote-debugging-port=9222 --user-data-dir="path\to\profile"

4. agent-browser / agent-browser-mcp（Vercel Labs ベース）

正式名: vercel-labs/agent-browser（CLI 本体） + minhlucvan/agent-browser-mcp（MCP ラッパー）

仕組み

トークン消費（突出して軽量）

強み

弱み

起動例

"agent-browser": {
  "command": "npx",
  "args": ["-y", "agent-browser-mcp@latest"]
}

補足: なぜ "CLI が MCP に勝てる"のか

5. 用途別 推奨マッピング

| 用途 | 推奨 | |---|---| | HT の日常業務（JFC・港区行政・Notion・CIC ダッシュボード） | chrome-devtools-mcp（既存 Chrome セッション再利用） | | 長時間自律ループ（数百ステップの自動運用） | agent-browser-mcp（トークン極小） | | E2E テスト・CI/CD・SaaS 動作確認 | Playwright MCP（成熟・安定） | | デバッグ・パフォーマンス分析・Lighthouse監査 | chrome-devtools-mcp | | ボット検知回避が必要なサイト | Stagehand / Browserbase | | 画面録画・スクリーンショット重視 | PageBolt（vision系） |

→ 多くの場合、chrome-devtools-mcp + agent-browser-mcp を併設し、用途で使い分けるのがベストプラクティス。

6. 自分用の判断フロー

ブラウザ操作が必要
  ├─ 既にログイン済みのサイトを使う？
  │   YES → chrome-devtools-mcp（CDP 接続）
  │   NO  → 次へ
  ├─ 数百ステップ続く自律ループ？
  │   YES → agent-browser-mcp
  │   NO  → 次へ
  ├─ E2E テストや CI 用途？
  │   YES → Playwright MCP
  │   NO  → 次へ
  └─ デフォルト: chrome-devtools-mcp（公式・安定・認証再利用OK）

参考・引用元

2026-05-20 作成。融資申込 セッションで Playwright vs chrome-devtools の最適解を検証する過程でまとめた。