Set up Playwright MCP in Claude Code

Automate browser interactions, take screenshots, fill forms, and test web applications using Microsoft Playwright from your AI editor.

Locate the config file

Claude Code reads MCP server configuration from the following file:

~/.claude.json

Create this file if it does not already exist.

You can configure Playwright MCP using the CLI command or by editing the config file directly.

Option A: CLI command

bash

claude mcp add playwright-mcp -- npx -y @playwright/mcp

Option B: Config file

json

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

No environment variables needed. Playwright MCP works out of the box without any API keys or tokens.

Restart Claude Code. Playwright MCP should appear in your MCP server list with 20 tools available.

This server adds approximately 10,300 tokens to your context window for tool definitions.