Stop burning tokens on DOM noise: a Playwright MCP optimizer layer

If you've used Playwright MCP for AI browser automation, you know the pain. Every page navigation dumps the full DOM tree into the model context. Simple flows like "order 5 items from this shop" can burn hundreds of thousands of tokens on navbar/sidebar/footer noise that has nothing to do with the task.

We built a small MCP layer that sits in front of Playwright and only forwards the relevant bits. Open sourced it.

📚 Full writeup: https://treesoop.com/blog/playwright-mcp-optimizer-token-saving-2026
🔧 GitHub: https://github.com/treesoop/claude-native-plugin

The problem

Playwright MCP serializes the full DOM:

AI ← {ENTIRE_DOM_JSON} ← Playwright MCP

This works for QA where you need to see everything. For "browse and take an action" it's 5-10× the tokens you actually need.

The optimizer

AI ← {relevant_only} ← Optimizer ← {full DOM} ← Playwright MCP

Three filter rules:

1. Interactive elements first: button, input, a — not decorative div/span
2. Semantic grouping: navigation / main / form / footer regions, so the model knows where it is
3. Task-aware skipping: if the current task is "checkout", skip sidebar recommendations and ad banners

Measured impact

On a "cart → checkout" flow with GPT-4: tokens dropped substantially, and round-trip latency improved as a side effect (smaller payloads → faster agent decisions).

Not a silver bullet. For QA tasks where you need full DOM accuracy, use vanilla Playwright MCP. For general browsing / automation agents, this is the cheaper + faster path.

Tool comparison (our testing)

We use all four for different jobs.

Install

npm install -g @treesoop/playwright-optimizer
claude mcp add playwright-opt -- playwright-optimizer

• MIT licensed
• Configurable per-site presets
• --log-tokens flag for measurement

More OSS from TreeSoop: ai-news-mcp, hwp-mcp, whisper_transcription, claude2codex

Blog: https://treesoop.com/blog