Skip to main content
Glama
playwright-slim-mcp

playwright-slim-mcp

by jsdf

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: SlimAtlas AI

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

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

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/

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

Available Tools

25 tools
browser_clickB
Destructive

Perform click on a web page

Inputs: target (required), button, element, modifiers, +1 more.

browser_closeB
Destructive

Close the page

Inputs: no named parameters.

browser_console_messagesB
Read-only

Returns all console messages

Inputs: level (required), all, filename.

browser_dragA
Destructive

Perform drag and drop between two elements

Inputs: endTarget (required), startTarget (required), endElement, startElement.

browser_dropA
Destructive

Drop files or MIME-typed data onto an element, as if dragged from outside the page. At least one of "paths" or "data" must be provided.

Inputs: target (required), data, paths, element.

browser_evaluateB
Destructive

Evaluate JavaScript expression on page or element

Inputs: function (required), target, element, filename.

browser_file_uploadB
Destructive

Upload one or multiple files

Inputs: paths.

browser_fill_formB
Destructive

Fill multiple form fields

Inputs: fields (required).

browser_findA
Read-only

Search the accessibility snapshot of the current page for text or a regular expression. Returns matching snapshot nodes with a few lines of surrounding context (like search snippets), each shown under its path from the root of the tree, which is cheaper than capturing the whole snapshot when you only need to locate an element and its ref.

Inputs: text, regex.

browser_handle_dialogC
Destructive

Handle a dialog

Inputs: accept (required), promptText.

browser_hoverA
Destructive

Hover over element on page

Inputs: target (required), element.

browser_navigateC
Destructive

Navigate to a URL

Inputs: url (required).

browser_navigate_backA
Destructive

Go back to the previous page in the history

Inputs: no named parameters.

browser_network_requestA
Read-only

Returns full details (headers and body) of a single network request, or a single part if part is set. Use the number from browser_network_requests.

Inputs: index (required), part, filename.

browser_network_requestsA
Read-only

Returns a numbered list of network requests since loading the page. Use browser_network_request with the number to get full details.

Inputs: static (required), filter, filename.

browser_press_keyB
Destructive

Press a key on the keyboard

Inputs: key (required).

browser_resizeB
Destructive

Resize the browser window

Inputs: width (required), height (required).

browser_run_code_unsafeA
Destructive

Run a Playwright code snippet. Unsafe: executes arbitrary JavaScript in the Playwright server process and is RCE-equivalent.

Inputs: code, filename.

browser_select_optionB
Destructive

Select an option in a dropdown

Inputs: target (required), values (required), element.

browser_snapshotB
Read-only

Capture accessibility snapshot of the current page, this is better than screenshot

Inputs: boxes, depth, target, filename.

browser_snapshot_fullB
Read-only

Capture full accessibility snapshot without summarization

Inputs: boxes, depth, target, filename.

browser_tabsA
Destructive

List, create, close, or select a browser tab.

Inputs: action (required), url, index.

browser_take_screenshotA
Read-only

Take a screenshot of the current page. You can't perform actions based on the screenshot, use browser_snapshot for actions.

Inputs: scale (required), type, target, element, +2 more.

browser_typeB
Destructive

Type text into editable element

Inputs: text (required), target (required), slowly, submit, +1 more.

browser_wait_forA
Read-only

Wait for text to appear or disappear or a specified time to pass

Inputs: text, time, textGone.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    TDQS

    B3.3/5.0

    Scored across 25 tools

    Disambiguation4/5

    Most tools have clearly distinct purposes, but browser_snapshot vs browser_snapshot_full, browser_evaluate vs browser_run_code_unsafe, and browser_close vs browser_tabs (closing page vs tab) create some overlap. Descriptions help but an agent must read carefully to pick correctly.

    Naming Consistency5/5

    All tools use the browser_ prefix with snake_case and clear verb_noun or noun patterns (e.g., browser_click, browser_navigate, browser_take_screenshot). The convention is consistent throughout with no deviations.

    Tool Count3/5

    25 tools is at the high end for a single server; while many are necessary for full browser control, some could be consolidated (e.g., snapshot variants, separate network request tools). The count feels heavy and borderline for the 'slim' name.

    Completeness4/5

    The surface covers navigation, interaction, forms, keyboard, mouse, tabs, network, console, dialogs, file upload, drag/drop, screenshots, and snapshots. Minor gaps include no explicit forward navigation (only back) or page reload, but these are workaroundable.

    Related MCP Connectors

    Related MCP Servers