MCP proxy for Playwright that summarizes accessibility snapshots using Claude
npm install playwright-slim-mcpA proxy MCP server for Playwright that summarizes accessibility snapshots using Claude Haiku to reduce context usage.
Add to your Claude Code MCP config (~/.claude.json):
``json`
{
"mcpServers": {
"playwright-slim": {
"command": "npx",
"args": ["playwright-slim-mcp"],
"env": {
"ANTHROPIC_API_KEY": "sk-ant-..."
}
}
}
}
That's it! The proxy will automatically download and run.
The official @playwright/mcp returns full accessibility tree snapshots after every action (click, type, navigate, etc.). These snapshots can be 2-10KB+ each, quickly consuming context window.
This proxy:
1. Forwards all requests to the real Playwright MCP
2. Intercepts responses containing page snapshots
3. Uses Anthropic API (Claude Haiku) to summarize snapshots to ~10 lines
4. Preserves [ref=XXX] values for interactive elements so you can still click/type
No installation needed - just add to your MCP config as shown in Quickstart.
`bash`
npm install -g playwright-slim-mcp
Then use in your MCP config:
`json`
{
"mcpServers": {
"playwright-slim": {
"command": "playwright-slim-mcp",
"env": {
"ANTHROPIC_API_KEY": "sk-ant-..."
}
}
}
}
`bash`
git clone https://github.com/jsdf/playwright-slim-mcp.git
cd playwright-slim-mcp
npm install
npm run build
- ANTHROPIC_API_KEY environment variable
- Node.js 18+
| Variable | Required | Description |
|----------|----------|-------------|
| ANTHROPIC_API_KEY | Yes | Your Anthropic API key |PLAYWRIGHT_SLIM_MODEL
| | No | Model for summarization (default: claude-3-5-haiku-latest) |DEBUG
| or PLAYWRIGHT_SLIM_DEBUG | No | Set to 1 to enable file logging to logs/ |
The proxy summarizes snapshots for these tools:
- browser_clickbrowser_type
- browser_press_key
- browser_select_option
- browser_hover
- browser_drag
- browser_navigate
- browser_navigate_back
- browser_handle_dialog
- browser_file_upload
- browser_fill_form
- browser_snapshot
-
Small snapshots (<500 chars) are passed through unchanged.
Use browser_snapshot_full to get the raw accessibility tree without summarization. This tool is automatically added as an alias.
`bashCreate .env file with your API key
echo "ANTHROPIC_API_KEY=sk-ant-..." > .env
Example
Before (2KB+):
`yaml
- generic [ref=e327]:
- generic [ref=e328]:
- heading "Go back James's Workspace" [level=4] [ref=e329]:
- button "Go back" [ref=e330] [cursor=pointer]:
- img [ref=e331]
- text: James's Workspace
# ... 100+ more lines
`After (~200 bytes):
`
Admin settings for "James's Workspace"
Tabs: Overview [e343], Feature flags [e348, selected], Members [e353], Tables [e358]
Actions: Go back [e330], Impersonate [e334]
``MIT