Free tools Windows power users keep installed
One-click scans. No signup required.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Playwright MCP connects an MCP-capable AI client to a real browser. The client calls tools, Playwright performs navigation and interaction, and page state is returned as structured accessibility information rather than requiring a vision model. This guide covers setup for Claude, Cursor, and VS Code, a first task, security controls, troubleshooting, and a screenshot alternative.
How Playwright MCP browser agents work
Playwright MCP is an MCP server built on Playwright. An AI client sends structured tool calls such as navigation, clicks, form entry, and page inspection. Playwright controls the browser and returns structured accessibility snapshots describing the current page. That representation lets an agent reason about roles, names, values, and relationships without treating every task as an image-understanding problem.
The server is separate from the client. You install or invoke the server, then register it in the client’s MCP configuration. The client remains the conversation and planning interface; Playwright supplies browser capabilities.
Requirements and first launch
- Node.js 20 or newer. Check with
node --version. - An MCP client such as VS Code, Cursor, Claude Desktop, or Claude Code.
- Permission to let the server download its browser. The official installation documentation says the browser downloads automatically on first use.
The standard server command is:
npx @playwright/mcp@latestUsing npx fetches the current package when the client starts it. For controlled deployments, review package updates and your organization’s Node.js policy before allowing automatic upgrades.
#1 Best Overall
Configure VS Code
Playwright documents a CLI route for adding its MCP server. In a VS Code environment with the relevant command available, run:
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'VS Code also manages servers through its MCP interface. Open the Command Palette, choose the MCP server configuration command, and add a server whose command is npx and whose argument is @playwright/mcp@latest. The exact menu labels can vary by VS Code release; use VS Code’s current MCP server documentation if a label differs.
After saving, open an agent chat, confirm that the Playwright tools are listed, and ask for a harmless navigation task before granting access to authenticated sites.
Configure Cursor
- Open Cursor Settings.
- Select MCP.
- Choose Add new MCP Server.
- Choose a command-type server.
- Set the command to
npx @playwright/mcp@latest, following Cursor’s field format if it separates the executable and arguments. - Save, then verify that the Playwright server appears as enabled and its tools are available in chat.
Cursor’s settings UI can change. If the server is shown but tools are unavailable, restart Cursor and inspect its MCP log for the exact command and Node.js executable being used.
Configure Claude
Claude Code
Claude Code’s documented command is:
claude mcp add playwright npx @playwright/mcp@latestRun it in the project or user scope you intend to use. Then start Claude Code, check the configured MCP servers, and approve the Playwright server when prompted.
Claude Desktop
Claude Desktop uses its standard MCP configuration. Add a server entry that invokes npx with @playwright/mcp@latest as the argument, using Claude’s current MCP installation instructions for the configuration-file location and JSON shape. Restart Claude Desktop after editing the file; MCP servers are normally discovered during startup.
Your first browser-agent task
Use the official TodoMVC demonstration site for a low-risk smoke test:
Navigate to https://demo.playwright.dev/todomvc and add a few todo items.A well-behaved agent should navigate, inspect the accessibility snapshot, identify the new-item input, enter each item, and verify that the resulting list contains them. Ask it to report what it observed rather than assuming success from a click alone.
Make tasks deterministic
- Give the exact URL and the desired end state.
- Name the data to enter and whether existing data may be changed.
- Ask the agent to verify visible text, counts, or selected states.
- Separate read-only discovery from state-changing actions.
- Use a test account and test data for login, checkout, deletion, or publishing workflows.
Security: treat browser tools as privileged automation
Playwright’s documentation gives a specific warning about browser_run_code: it executes arbitrary JavaScript in the Playwright server process and is “RCE-equivalent.” Enable that tool only for trusted MCP clients. A client that can call it may run code with the permissions of the server process, so do not expose it to untrusted prompts, shared workspaces, or unknown extensions.
Practical safeguards
- Run the server under a least-privileged OS account.
- Keep secrets out of prompts and source files; use the client’s supported environment-variable or secret mechanism.
- Use a separate browser profile for automation rather than your personal profile.
- Restrict network access where possible, especially for production credentials.
- Review tool approvals before allowing navigation to internal systems or file-upload controls.
- Disable arbitrary-code capability when your workflow needs only normal browser tools.
What differs between clients
| Client | Documented setup path | Operational note |
|---|---|---|
| VS Code | CLI add-MCP command or VS Code MCP server management | Use the current VS Code guide for changing command labels. |
| Cursor | Settings → MCP → Add new MCP Server; command-type server | Restart and inspect MCP logs if tools do not appear. |
| Claude Code | claude mcp add playwright npx @playwright/mcp@latest |
Choose the intended project or user scope. |
| Claude Desktop | Standard Claude MCP configuration | Restart after editing the configuration. |
The standard configuration is intended to work with other MCP clients too, but their configuration fields and approval flows may differ.
Troubleshooting
“npx” or Node.js is not found
Install Node.js 20 or newer, reopen the client so it inherits the updated PATH, and run node --version and npx --version in the same environment used to launch the client. GUI applications can inherit a different PATH from your terminal.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The browser does not start
Allow the first-use browser download to finish, check outbound network and proxy rules, and inspect the client’s MCP log. A restricted corporate environment may require proxy configuration or an approved preinstallation process.
The server starts but no tools appear
Confirm that the command is split correctly into executable and arguments where the client requires separate fields. Restart the client, verify the server is enabled, and remove duplicate entries that use conflicting names.
The agent cannot find a button or field
Ask it to inspect the page snapshot and report the accessible role and name. A custom control may expose an unexpected name, be inside an iframe, or appear only after a wait. Provide a stable, user-visible description and ask the agent to verify the resulting state.
A page is blank or timing out
Check the URL outside the agent, wait for the site’s required network activity, and test without VPN or proxy restrictions. Treat bot checks, consent dialogs, and authentication redirects as separate states rather than repeatedly clicking.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchbrowser_run_code is denied
That restriction is intentional in a hardened setup. Use normal Playwright MCP tools when they are sufficient. If JavaScript execution is genuinely required, enable it only for a trusted client and review the code before execution.
Performance, reliability, and operating costs
The supplied Playwright documentation establishes the installation model and interaction format, not a benchmark comparing speed, accuracy, cost, or reliability with other automation systems. Plan for ordinary browser costs: startup time, page load time, application waits, browser memory, and the network conditions of the target site. Keep smoke tests short, reuse a controlled environment where your client supports it, and make verification assertions explicit so failures are visible.
For repeatable CI work, pin your Node.js runtime and define how package updates are reviewed. For exploratory work, the latest package command is convenient but can change as Playwright releases updates. Never treat an agent’s natural-language confirmation as proof that a destructive action succeeded; verify the page state or an application-side record.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
If you only need a clean image or PDF of a URL rather than interactive browser control, ScreenshotNeo provides a one-request website screenshot API and an MCP server for AI agents. Its cleanup step accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers.
Example request (see the ScreenshotNeo documentation):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The MCP server exposes take_screenshot, get_page_info, and capture_pdf to Claude, Cursor, and other MCP clients. Plans include 1,000 screenshots a month free with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
Frequently Asked Questions
Can I use Playwright MCP with an MCP client not listed in the setup guide?
The standard configuration is documented as compatible with other MCP clients, but each client may use different server fields, approval steps, and configuration locations.
Does Playwright MCP require a vision model?
Its documented interaction model returns structured accessibility information, so browser tasks can be driven from page structure rather than requiring visual screenshots.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsWhen does the Playwright browser download happen?
The official installation documentation says it downloads automatically on first use.
Should I enable browser_run_code for a shared team client?
No. Playwright describes it as arbitrary JavaScript execution in the server process and RCE-equivalent; enable it only for trusted MCP clients.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
