AI Tool Atlas
MCP server Official

Playwright MCP

Microsoft's MCP server for browser automation through Playwright accessibility snapshots, no vision model needed.

Author
Microsoft
Works with
Any MCP client, Claude Code, Cursor, OpenAI Codex, Windsurf
Documented
Oct 2, 2026
Repository ↗

What Playwright MCP is

Lets LLMs interact with web pages using structured accessibility snapshots instead of screenshots. The README also points coding agents to the Playwright CLI with skills as a more token-efficient alternative.

What it does

How Playwright MCP plugs in: which agents run it and what it addsRUNS INYour agentAny MCP clientClaude CodeOpenAI CodexCursor4 hosts documentedMCP SERVER · OFFICIALPlaywright MCPConnect the agent to tools, data…5 install steps1 permission noteWHAT IT ADDSWhat it doesDrive a browser via the accessibi…Deterministic tool calls without…Persistent profile, isolated cont…Headless or headed modeagent → extension → new capability · from the official repository or docs
Where Playwright MCP runs and what it adds, from its documentation
  • Drive a browser via the accessibility tree
  • Deterministic tool calls without pixel-based input
  • Persistent profile, isolated contexts, or connect to an existing browser via extension
  • Headless or headed mode
  • Restrict origins with allowed/blocked origin options

When to use it

Good fit

  • Exploratory automation and self-healing tests
  • Long-running agent loops that need persistent browser state

Not for

  • High-throughput coding agents with tight context: README suggests Playwright CLI with skills
  • Using origin lists as a security boundary: README says they are not one

How to install Playwright MCP

You need: Node.js 18 or newer; An MCP client such as VS Code, Cursor, Windsurf, Claude Desktop

  1. Install Node.js 18 or newer
  2. Claude Code: claude mcp add playwright npx @playwright/mcp@latest
  3. Codex: codex mcp add playwright npx "@playwright/mcp@latest"
  4. Cursor: Settings > MCP > Add new MCP Server with command npx @playwright/mcp@latest
  5. Other clients: use the standard config
Configuration example (from the official docs)
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Permissions and security

What it can access

  • Launches and controls a browser, loads arbitrary web pages

Security notes from the maintainers

  • README: --allowed-origins / --blocked-origins do not serve as a security boundary and do not affect redirects

Review the source before granting an agent access to credentials or production systems. We document what the maintainers state; we do not audit code.

Limitations

  • Accessibility trees and tool schemas cost context tokens compared with CLI

Tools it extends

Coding Free plan
No user reviews yet

AI coding IDE, formerly Windsurf, now Devin Desktop: manage local and cloud coding agents inside a full IDE.

Free stops at: Light quota for agent usage, resets daily and weekly, Limited model availability

Listed Not yet reviewed

Verified windsurf.com (opens Devin Desktop (formerly Windsurf) website in a new tab)

Free · paid from $20/mo US · checked Sep 29

CompareAdded Devin Desktop (formerly Windsurf) Details about Devin Desktop (formerly Windsurf)

Frequently asked questions

How do I add Playwright MCP to Claude Code?

Run claude mcp add playwright npx @playwright/mcp@latest. source

Does Playwright MCP need screenshots or a vision model?

No, it works on accessibility snapshots. source

Are the origin allow/block lists a security boundary?

No, the README says they are not and do not affect redirects. source

Related guides

Sources and gaps

Not stated by the maintainers: License not stated in the README; last_release date not visible in the checked README.

More extensions to look at