Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
Microsoft’s Browser MCP Server is the open-source Playwright MCP package, installed as @playwright/mcp. It connects an MCP-capable assistant to a Playwright-controlled browser, where the assistant reads structured accessibility snapshots and then navigates, clicks, types, fills forms, switches tabs, handles dialogs and captures screenshots. For a new local installation, use Node.js 20 or newer and start the server with npx @playwright/mcp@latest.
What the Playwright MCP server does
Microsoft describes the server as providing browser automation through the Model Context Protocol (MCP), enabling language models to interact with pages through structured accessibility snapshots. Instead of asking an agent to guess coordinates from a bitmap, the server exposes roles, text and element references such as a textbox, checkbox or button. The agent can use those references in subsequent tool calls.
- Navigation: open URLs, reload pages and move between tabs.
- Interaction: click controls, fill or type into fields, select options and send keyboard or mouse input.
- Observation: inspect accessibility snapshots and take screenshots for visual confirmation.
- Debugging: inspect network requests and, when necessary, mock routes.
- Sessions: run with a persistent profile, an isolated profile, or attach through an extension, CDP or a Playwright endpoint.
The snapshot-first approach is generally more robust than pixel-only automation, but it does not guarantee that every site is automatable. Authentication flows, bot defenses, unusual controls and pages that render only after complex client-side work can still require configuration or manual intervention.
Prerequisites and version notes
- An MCP client that can launch or connect to a server. Microsoft’s examples cover VS Code, Cursor, Claude Code, Claude Desktop and other clients.
- Node.js 20 or newer for the current general Playwright MCP getting-started guide.
- A browser environment that Playwright can launch, unless you connect to an existing browser through the extension, CDP or another documented endpoint.
Microsoft’s repository overview and a Power Platform sample still state Node.js 18 or later. Treat Node.js 20 as the requirement for a fresh setup; if an existing environment uses Node 18, verify the version guidance for the exact package and client combination before troubleshooting the workflow.
#1 Best Overall
Install and connect the local server
1. Verify Node.js
node --versionUse a current Node.js 20-or-later release for the current guide. Upgrade Node before investigating MCP errors that are actually runtime incompatibilities.
2. Add the server to your MCP client
The standard configuration is:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}Place this object in the client’s current MCP configuration location. The path and reload procedure differ by client, so use the client’s own MCP instructions rather than copying a location from another application. The @latest tag obtains the current package when the client starts; pin a tested package version in a controlled deployment if your client supports that policy.
3. Confirm the connection
Restart or reload the MCP client, then check that a Playwright server appears among its available tools. If it does not, run the same npx @playwright/mcp@latest command in a terminal to expose a missing Node, npm, permission or network error. Keep the client’s server log open while connecting.
Your first browser task
Start with a small, observable sequence instead of a multi-page business process:
- Ask the assistant to navigate to a simple page that you are allowed to access.
- Ask it to return the page’s accessibility snapshot and identify a named heading, textbox or button.
- Ask it to perform one interaction, such as filling a field or clicking the named control.
- Ask for a screenshot and a short description of the resulting state.
This sequence shows the references exposed by the snapshot, the tool call used for the interaction and the visual result. For a form, specify the field label and the exact test value. For a destructive action, require a confirmation step and use a test account.
Choose the right browser and session mode
| Decision | Use it when | Important consequence |
|---|---|---|
| Headless browser | Running unattended jobs or CI | No visible window; rely on snapshots, logs and screenshots. |
| Headed browser | Developing or diagnosing a workflow | You can watch navigation, consent dialogs and failed interactions. |
| Persistent profile | You need browser state to survive restarts | Cookies and local storage can remain; protect the profile directory. |
| Isolated profile | You need clean, repeatable runs | In-memory storage is lost when the browser closes, so sign-in state does not carry over automatically. |
| Extension connection | You want the assistant to operate existing tabs and sessions | The extension can reuse the logged-in browser context; it also gives the agent access to that session. |
| CDP or Playwright endpoint | An existing managed browser exposes a supported connection | Endpoint security and browser compatibility become your responsibility. |
Select the profile mode before designing authentication. A persistent profile is convenient for a personal workflow but can expose saved accounts to every task using that profile. An isolated profile is safer for repeatable automation, but you must provide a supported login mechanism each run. Do not assume that a site’s authentication, MFA or bot check will work unattended.
Useful capabilities and their limits
Accessibility snapshots and screenshots
Use snapshots to locate semantic controls and screenshots to verify layout, overlays and visual state. A screenshot should confirm an action, not replace a well-defined locator or accessible name.
Network inspection and route mocking
When a page is blank or data never appears, inspect requests to distinguish an application error from a locator problem. Route mocking is useful in a test environment, but never redirect production traffic accidentally.
Unsafe JavaScript execution
browser_run_code_unsafe executes arbitrary JavaScript in the server process. Microsoft characterizes this capability as equivalent to remote code execution. Enable it only when the MCP client and every prompt reaching it are trusted. Keep it disabled for untrusted users, shared agents and ordinary navigation tasks; prefer the structured browser tools.
Automate a reliable workflow
- Define an allowed scope. List domains, accounts and actions the agent may use.
- Start with observation. Request a snapshot and identify the control by role and accessible name.
- Act in small steps. After navigation, form submission or a tab change, request a fresh snapshot because references can change.
- Verify outcomes. Check a success message, URL, expected heading or screenshot rather than assuming a click worked.
- Capture diagnostics. Save relevant screenshots, tool logs and network information without recording passwords or session cookies.
- Make retries safe. Use idempotent operations where possible and require confirmation before purchases, deletions or account changes.
Common failures and fixes
The client cannot start the server
Check Node.js first, then run npx @playwright/mcp@latest manually. A stale Node version, blocked npm access, an incorrect JSON configuration or a client that was not reloaded are common causes. Confirm that the configured command is npx and the argument is exactly @playwright/mcp@latest.
No browser window appears
The server may be running headlessly, or the client may have started an isolated browser. Choose headed mode while debugging and inspect the client’s logs. If you intended to use an existing tab, configure the extension or a supported CDP/Playwright connection instead of launching a new browser.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The assistant cannot find a control
Request a new accessibility snapshot after navigation, expansion or a frame change. Check the control’s role and accessible name, and account for an iframe, dialog or delayed rendering. A screenshot can reveal an overlay, but do not substitute fragile coordinates when a semantic control is available.
A login session disappears
Verify whether the run uses an isolated profile. Use a protected persistent profile or connect to an already authenticated tab through the extension when policy allows. MFA, device checks and bot protection may still require a human.
The page is blank or times out
Capture a screenshot, inspect network requests and test the URL in a normal browser. The cause may be a failed resource, a consent layer, a geolocation restriction or a site-side outage rather than an MCP problem. Increase waits only after identifying what event the page actually needs.
A script request is blocked
Do not enable browser_run_code_unsafe merely to bypass a locator issue. Rework the task around snapshots and supported interactions; if arbitrary code is unavoidable, restrict the client, credentials and network environment first.
Recommended Free Tools
Local Playwright MCP versus Azure Playwright Workspaces
| Factor | Local Playwright MCP | Playwright Workspaces remote MCP |
|---|---|---|
| Where the browser runs | On your machine or execution environment | In a managed Azure workspace |
| Setup | Node.js, browser environment and an MCP client | Azure account/subscription, configured workspace and a client supporting the documented remote connection |
| Connection | Local process, extension, CDP or Playwright endpoint | Streamable HTTP endpoint built from workspace region and ID |
| Credential model | Your local browser profiles and credentials | Microsoft recommends Entra ID; access tokens are secrets and are less secure |
| Status | Open-source package | Preview, with no SLA and not recommended by Microsoft for production workloads |
The remote service is useful when the agent environment cannot install or reach a local browser. It is a separate Azure service, not a hosted version of the npm process. The remote quickstart demonstrates an x-api-key access-token route, but Microsoft says Entra ID is the recommended authentication method and that token access is disabled by default. Never place a token in source control, prompts or logs. In Foundry, connections can be shared by project members, so use a dedicated least-privilege token and restrict project access. Preview availability and connection details can change; check the current Microsoft Learn instructions before deployment.
Or skip the browser setup
If your goal is a dependable image or PDF of a web page rather than interactive browser control, ScreenshotNeo provides a one-request screenshot API and MCP server. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each step can be disabled. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing result.
Use the API documentation at https://screenshotneo.com/docs/ for all options. A cURL request is:
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}`);ScreenshotNeo also offers an MCP server with take_screenshot, get_page_info and capture_pdf, so an AI agent can request captures without installing Playwright locally. It supports full-page and element captures, device presets and custom viewports, retina scale, dark mode, PDF controls, custom CSS and JavaScript, clicks, waits, blocking rules, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, selectable cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data and an OpenAPI specification. Every plan includes the features; 1,000 screenshots per month are free with no card, and paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →FAQ
Is this the same as Microsoft’s Azure browser service?
No. Playwright MCP is the local open-source package. Playwright Workspaces remote MCP is a separate Azure-managed, preview service.
Can I reuse my normal browser login?
Use the extension connection to attach to existing tabs when supported and permitted. Otherwise, profile persistence and authentication must be configured deliberately.
Best Value
Should I enable unsafe code for normal tasks?
No. It is an arbitrary-code capability with RCE-equivalent risk and should be reserved for trusted clients and tightly controlled environments.
Which Node.js version should a new installation use?
Use Node.js 20 or newer for the current general getting-started guide; older Microsoft samples mention Node.js 18 or later.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated 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 matchFrequently Asked Questions
Is this the same as Microsoft’s Azure browser service?
No. Playwright MCP is the local open-source package. Playwright Workspaces remote MCP is a separate Azure-managed, preview service.
Can I reuse my normal browser login?
Use the extension connection to attach to existing tabs when supported and permitted. Otherwise, profile persistence and authentication must be configured deliberately.
Should I enable unsafe code for normal tasks?
No. It is an arbitrary-code capability with RCE-equivalent risk and should be reserved for trusted clients and tightly controlled environments.
Which Node.js version should a new installation use?
Use Node.js 20 or newer for the current general getting-started guide; older Microsoft samples mention Node.js 18 or later.
Free tools Windows power users keep installed
One-click scans. No signup required.
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.
