Playwright MCP (Microsoft)

Playwright MCP is an official Model Context Protocol server from Microsoft built on Playwright. It exposes browser automation to the model using structured accessibility snapshots rather than relying on screenshots, so the agent can open URLs, inspect the page tree, click, type, and similar actions, useful for smoke-testing a UI, reproducing a bug in the browser, or verifying a deploy without hand-driving every step.

Package: @playwright/mcp. If tool names or flags change, check /mcp in your client after connecting or read the upstream README.

Prerequisites

• Node.js 18+ on the machine that runs the MCP server.
• Claude Code, Cursor, VS Code (Copilot MCP), or another MCP host that supports stdio servers.
• Network + local execution: the server can launch a browser on your computer, treat prompts like "open this site and log in" with the same care you would give a human at your keyboard (permissions, secrets, untrusted pages).

Option A, Claude Code CLI

Personal (user scope):

claude mcp add --scope user playwright -- npx -y @playwright/mcp@latest

This repo only (writes .mcp.json at the project root, good for workshops):

claude mcp add --scope project playwright -- npx -y @playwright/mcp@latest

Restart or reload the session, then run /mcp and confirm playwright is connected. Using -y on npx avoids an interactive download prompt in some environments. (Shorter claude mcp add playwright npx @playwright/mcp@latest also works, that uses the default local scope; see claude mcp add --help.)

Option B, .mcp.json (project root)

Merge with any existing mcpServers entries:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

Reload the session and check /mcp.

Cursor and VS Code

• Cursor: Settings → MCP → Add new MCP server, use a command-style server: npx with args @playwright/mcp@latest (and -y in the args if you want non-interactive npx). One-click install from the Playwright MCP repo may also list a Cursor deeplink.
• VS Code: follow MCP servers in VS Code and use the same command / args shape as above.

Using it in chat

You do not need exact tool names: describe the goal and let the agent map it to navigate, snapshot, click, fill, etc.

Smoke test (read-only):

Using Playwright MCP: open https://example.com, take an accessibility snapshot, and tell me the main heading text.

Interaction:

Using Playwright MCP: open my local dev server at http://localhost:3000, snapshot the page, then describe whether a "Sign in" control is present and what role it has.

Workshop checklist