Playwright MCP server in Claude Code.
One claude mcp add command gives Claude Code a real browser: navigate, click, fill forms, and screenshot pages straight from the terminal session.
playwright-mcp (github.com/microsoft/playwright-mcp, 33.7k stars) lets an agent drive a real browser over MCP — navigating, clicking, typing, and reading pages via accessibility snapshots rather than screenshots. In Claude Code that closes the loop on web work: the agent that just edited your frontend can open it, click through the flow, and report what actually rendered.
Claude Code has the lowest-friction install of any MCP client because it has a CLI for it. You can be done in one command, or commit a .mcp.json so your whole team gets the server with the repo.
Install with one command
From any terminal, run: claude mcp add playwright -- npx @playwright/mcp@latest
That registers the server in your local scope (this project, your machine). Add --scope user to make it available in every project, or --scope project to write it into a shareable .mcp.json at the repo root. The package is @playwright/mcp on npm; npx fetches it on first launch, so there is nothing to install ahead of time beyond Node 18+.
Or check in a .mcp.json
For team projects the project scope is the better default — the config lives in version control and every contributor's Claude Code picks it up (after a one-time approval prompt). The file is plain JSON at the project root:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}Verify and take it for a spin
Run claude mcp list to confirm the server is registered, then start a session and type /mcp to see its connection status and tools — browser_navigate, browser_click, browser_snapshot, and friends should be listed.
A good first task: "open http://localhost:3000 and tell me what's on the page." By default the server launches a visible browser window; pass --headless in the args if you want it to run invisibly, which is usually what you want for CI-like checks from the terminal.
Troubleshooting in Claude Code
Server registered but not connecting: /mcp inside a session shows per-server status and errors. If you added the server mid-session, start a new session — Claude Code connects to MCP servers at startup.
npx resolution failures: Claude Code spawns the command with your shell's environment, so node and npx must be on PATH. Version managers like nvm can produce a PATH that works interactively but not in scripts; claude mcp list failing on this server while others work points there.
Browser missing: if the machine has never run Playwright, the server may need a browser binary. Ask the agent to install it (the server exposes a browser_install tool) or run npx playwright install chromium once yourself.
Wrong scope: if the server shows up in one repo but not another, you added it with local scope. Re-add with --scope user for global availability.
The listing on Loomal
playwright-mcp's live listing — package name, category, and probed tool list — is on the Loomal marketplace at https://loomal.ai/marketplace/playwright-mcp. It sits in the Browser Automation category alongside other servers agents use to drive the web; the same index is queryable by agents that want to discover and pay for tools over x402.
FAQ
How do I install Playwright MCP in Claude Code?
Run claude mcp add playwright -- npx @playwright/mcp@latest. For a team setup, add the same server to a .mcp.json in the project root instead — Claude Code reads it automatically and prompts each user to approve it once. Verify with claude mcp list or the /mcp command in a session.
Where is Claude Code's MCP config stored?
It depends on scope. Local and user scope servers are stored in Claude Code's own config (managed via the claude mcp CLI), while project scope writes a .mcp.json file at the repo root that you can commit. There is no single config file to hand-edit for all scopes — the CLI is the canonical interface.
Why don't the browser tools show up in my session?
MCP servers connect when a session starts, so a server added mid-session won't appear until you start a new one. If a fresh session still lacks the tools, run /mcp to see the connection error — typically npx not found on PATH or a network failure fetching @playwright/mcp.
Should I run it headless?
From Claude Code, usually yes — add --headless to the args so no browser window pops over your terminal work. Keep headed mode when you want to watch the agent click through a flow, which is genuinely useful when debugging why an automation step fails.
Browse more MCP servers for Claude Code.
The Loomal index lists each server's package, tools, and pricing.