Using Playwright MCP with Claude Code for browser automation

Simon Willison’s TIL introduced me to using Playwright MCP with Claude Code. The setup is simple:

claude mcp add playwright npx '@playwright/mcp@latest'

This gives Claude Code 25+ browser automation tools: navigation, clicking, typing, screenshots, and more. The killer feature is that the browser window is visible, so you can manually authenticate while Claude watches and continues working with your session cookies.

Prompting#

When prompting, explicitly mention “playwright mcp” to ensure Claude uses these tools instead of attempting bash-based browser automation.

Use playwright mcp to verify the UI changes.

Auto-approve all Playwright tools#

By default, Claude Code asks permission for each Playwright tool invocation. To auto-approve all of them, add this to your project’s .claude/settings.local.json:

{
  "permissions": {
    "allow": [
      "mcp__playwright__*"
    ]
  }
}

The * wildcard matches all Playwright MCP tools (browser_navigate, browser_click, browser_snapshot, etc.), making the workflow much smoother for browser-heavy tasks.

Key tools#