Usage

How it works

After setup, Playwright MCP exposes browser tools to your AI agent over the MCP protocol. The agent calls tools like browser_navigate, browser_click, and browser_snapshot through MCP. The server translates each call into a Playwright action and returns an accessibility snapshot (structured text, not a screenshot) that the LLM can reason about.

Minimal example -- Claude Code

With the server added via claude mcp add playwright npx @playwright/mcp@latest, ask Claude:

Navigate to https://demo.playwright.dev/todomvc and add three todo items: "Buy groceries", "Walk the dog", "Write tests". Then tell me how many items are in the list.

Claude will call the MCP tools in sequence:

1. browser_navigate -- opens the URL
2. browser_snapshot -- reads the page accessibility tree
3. browser_click + browser_type -- interacts with the input
4. browser_snapshot -- reads the updated list

No screenshots or vision models are required.

Minimal example -- MCP tool calls (raw)

If you are calling the server directly from code:

{ "method": "tools/call", "params": { "name": "browser_navigate", "arguments": { "url": "https://example.com" } } }

{ "method": "tools/call", "params": { "name": "browser_snapshot", "arguments": {} } }

{ "method": "tools/call", "params": { "name": "browser_click", "arguments": { "element": "More information...", "ref": "e12" } } }

The ref value comes from the snapshot response and identifies a specific element in the accessibility tree.

Taking a screenshot

Take a screenshot of https://playwright.dev and save it.

This calls browser_navigate then browser_take_screenshot. The image is returned as a base64 data URI.

Opt-in tool groups

Some tool sets are disabled by default. Enable them in the config or via flags:

Group	Enable flag	What it adds
screen	--caps screen	Coordinate-based mouse (pixel positions)
pdf	--caps pdf	browser_pdf_save
history	(default on)	browser_navigate_back, browser_navigate_forward
wait	(default on)	browser_wait_for_text, browser_wait_for_load_state

No template/starter available

There is no official boilerplate repo. The entry point is always the npx @playwright/mcp@latest command with your MCP client config. Refer to github.com/microsoft/playwright-mcp for the full tool reference and config schema.