playwright-slim-mcp

A proxy MCP server for Playwright that summarizes accessibility snapshots using Claude Haiku to reduce context usage.

Quickstart

Add to your Claude Code MCP config (~/.claude.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.

Related MCP server: Cloudflare Playwright MCP

Problem

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.

Solution

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

Installation

Via npx (recommended)

No installation needed - just add to your MCP config as shown in Quickstart.

Global install

npm install -g playwright-slim-mcp

Then use in your MCP config:

{
  "mcpServers": {
    "playwright-slim": {
      "command": "playwright-slim-mcp",
      "env": {
        "ANTHROPIC_API_KEY": "sk-ant-..."
      }
    }
  }
}

From source

git clone https://github.com/jsdf/playwright-slim-mcp.git
cd playwright-slim-mcp
npm install
npm run build

Requirements

• ANTHROPIC_API_KEY environment variable

• Node.js 18+

Environment Variables

Configuration

The proxy summarizes snapshots for these tools:

• browser_click

• browser_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.

Unsummarized Snapshots

Use browser_snapshot_full to get the raw accessibility tree without summarization. This tool is automatically added as an alias.

Testing

# Create .env file with your API key
echo "ANTHROPIC_API_KEY=sk-ant-..." > .env

# Run tests (includes real API calls and browser tests)
npm test

Example

Before (2KB+):

- 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]

License

MIT