4d (edited) • Building Out Loud
🏴☠️ BOL - Can I Reduce Playwright's Token Use by 98%? Probably Not, lol
Status: ON HOLD
Last update: 20251223 - wrestling with this thing to get it working was burning through tokens like crazy, lol. I still believe in it, but it couldn't write code the way Anthropic imagined. Every time it tried to activate a button or fill a field the action ended up closing the window, which sort of defeated the point. So it could open a browser window and navigate to a page, that is far as I got. All good. I'll come back to it when I have more time.
20251222 - Code execution with MCP was glitchy and very token intensive during iteration. I'm at the end of my credit week/window, so had to stop iterating - it was killing me, lol.
Note 1 - BOL: build out loud.
Note 2 - as I figure out this community, I'm going to have to start identify what I'm still building. CC built this, but now that I'm testing and iterating. I'm finding which use cases it can and can't do, and updating the repo as I go. Testing and iterating is:
a) the most interesting part of building (for me);
b) always longer than the initial build.
TL;DR - What's Playwright MCP? It gives CC the ability to open a browser window and navigate the web. Once you log in to an app it will take over and get to work. Very handy for flattening the learning curve and cuts bad UI/UX frustration by 100%.
The problem is that is that OG Playwright is an absolute token 🐷. It loads 5K just on being called. As it stumbled around invoking tools, that could bloat to 25K over multiple calls in a session 🤯.
Edit - I'm testing and iterating, now
Edit - I'm building (I conceived/CC is building) a wrapper that cuts that down based on this Anthropic concept - https://www.anthropic.com/engineering/code-execution-with-mcp - It calls three tools to start and then figures out which of the former's 22 tool capabilities are needed to get the job done.
Read on or check it out here - free to fork:
cd playwright-smart-mcp
npm install
+++++++++++++++++++++++++++++++++++
PIRATE TIP - I usually just copy everything
and paste it into Claude and tell it to figure
it out - articles, posts, etc. Easier that way.
+++++++++++++++++++++++++++++++++++
🧨 Installation Steps 💥
# 1. Clone and install
cd playwright-smart-mcp
npm install
2. Add to Claude Code configuration:
Open your MCP config file:
~/Library/Application Support/Claude/claude_desktop_config.json
Add this to the mcpServers section:
"playwright-smart": {
"command": "node",
"args": [
"/path/to/your/playwright-smart-mcp/build/index.js"
]
}
Example:
{
"mcpServers": {
"playwright-smart": {
"command": "node",
"args": [
"/Users/yourname/playwright-smart-mcp/build/index.js"
]
}
}
}
3. Restart Claude Code
Quit Claude Code completely (not just close the window) and restart it.
4. Verify it's working
The new server should load automatically. You'll now have access to 3 smart tools instead of 22:
- browser_screenshot
- browser_extract
- browser_interact
+++++++++++++++++++++++++++++++++++
Let me know what you think!
🏴☠️ Note - anything written like the below👇 was done by AI. I'm the captain of this AI ship and don't spend much time in the scuppers.
+++++++++++++++++++++++++++++++++++
If you're using Claude Code with Playwright MCP for browser automation, you're probably burning ~5,000 tokens before you even do anything.
Why? The standard Playwright MCP loads 22 tool definitions into your context window at startup. That's tokens you're paying for just to have the option to click a button.
The Fix
I built a wrapper that consolidates everything into 3 smart tools:
| Tool | What It Does |
|--------------------|---------------------------------------------------|
| browser_screenshot | Navigate to URL + capture |
| browser_extract | Navigate + get page content |
| browser_interact | Click, type, fill forms, scroll - all in one call |
Result: ~700 tokens instead of ~5,000 (85% reduction)
Real Example
Before (6 tool calls):
browser_navigate → login page
browser_type → email
browser_type → password
browser_click → submit
browser_wait → dashboard
browser_screenshot → capture
After (1 tool call):
{
"actions": [
{"type": "fill", "selector": "#password", "value": "secret"},
{"type": "click", "selector": "button[type=submit]"},
{"type": "wait", "selector": ".dashboard"}
],
"returnScreenshot": true
}
One call. Done.
Why This Matters
- Longer context for actual work - not wasted on tool definitions
- Faster execution - fewer round-trips between Claude and the browser
- Lower costs - less token usage per session
- Simpler prompts - "screenshot this page" just works
Get It
cd playwright-smart-mcp
npm install
Then add to your Claude Code settings and restart.
Based on Anthropic's own guidance about progressive tool disclosure - give the model high-level tools and let them handle the complexity internally.
Happy to answer questions if you try it out.
1
0 comments
🏴☠️ BOL - Can I Reduce Playwright's Token Use by 98%? Probably Not, lol
powered by
skool.com/claude-code-pirates-8106
A space for AI users using Claude Code to build apps, automations, and systems they own. No hype.
Suggested communities
Powered by