Playwright MCPを使ってAIによるブラウザ自動化を行ったことがあるなら、そのつらさは分かるはずです。ページ遷移のたびに、DOMツリー全体がモデルのコンテキストに投げ込まれます。「この店で商品を5点注文する」といった単純なフローでも、タスクに関係のないnavbar/sidebar/footerのノイズだけで数十万トークンが燃えます。
そこで、Playwrightの前に小さなMCPレイヤーをかませて、関連する部分だけを転送する仕組みを作りました。オープンソースとして公開しています。
詳細な解説: https://treesoop.com/blog/playwright-mcp-optimizer-token-saving-2026
GitHub: https://github.com/treesoop/claude-native-plugin
問題
Playwright MCPはDOMの全体をシリアライズします:
AI ← {ENTIRE_DOM_JSON} ← Playwright MCP
これは、すべてを把握する必要があるQAではうまく動きます。ですが「閲覧してアクションを実行する」系では、実際に必要な量の5〜10倍のトークンになります。
最適化（オプティマイザ）
AI ← {relevant_only} ← Optimizer ← {full DOM} ← Playwright MCP
フィルタルールは3つです:
- インタラクティブ要素を優先: button, input, a — 装飾用のdiv/spanではありません
- セマンティックなグルーピング: navigation / main / form / footerの領域をまとめ、モデルが「今どこにいるか」を理解できるようにします
- タスクに応じたスキップ: 現在のタスクが「checkout（チェックアウト）」なら、サイドバーのおすすめや広告バナーをスキップします
測定した効果
GPT-4を使った「cart（カート）→ checkout（チェックアウト）」のフローでは、トークンが大幅に減り、副作用として往復レイテンシも改善しました（ペイロードが小さいほどエージェントの判断が速くなるためです）。
万能薬ではありません。DOMの完全な正確性が必要なQAタスクでは、素のPlaywright MCPを使ってください。一般的な閲覧／自動化エージェントなら、このほうが安価で高速です。
ツール比較（当社のテスト）
| ツール | 強み | 向いている用途 |
|---|---|---|
| playwright-mcp (default) | DOMの完全な正確性 | QA、複雑なバリデーション |
| playwright-optimizer (this) | トークン効率 | 自動化エージェント、ブラウジング |
| vercel-browser-agent | コード生成の速さ | シンプルなブラウジング |
| claude-chrome-extension | ログイン済みセッションを使用 | 認証状態が必要なタスク |
私たちは、用途に応じて4つすべてを使います。
インストール
npm install -g @treesoop/playwright-optimizer
claude mcp add playwright-opt -- playwright-optimizer
- MITライセンス
- サイトごとのプリセットで設定可能
-
--log-tokens計測用フラグ
TreeSoopの他のOSS: ai-news-mcp, hwp-mcp, whisper_transcription, claude2codex
