Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteShort answer: install a browser MCP server such as Playwright MCP, register it in VS Code at user or workspace scope, enable its tools in Chat’s Agent mode, and give the agent a specific browser task. The setup below uses the documented Playwright configuration, then covers remote, headless, security and troubleshooting choices.
What an MCP browser server does in VS Code
Model Context Protocol (MCP) connects an AI client to tools exposed by a server. In Visual Studio Code, those tools become selectable capabilities for an agent conversation. A browser server lets the agent navigate pages, inspect accessibility information, click controls, enter text, handle dialogs and tabs, and capture screenshots.
Playwright MCP is one documented option, not the only possible MCP server. The official guides require Node.js 20 or newer and an MCP-capable client such as VS Code. See Playwright MCP and Microsoft’s VS Code MCP server guide.
Prerequisites and a safe first plan
- VS Code with Chat and Agent mode available.
- Node.js 20 or newer, with
npxon your PATH. - A test site you are allowed to access and modify.
- A decision about where the server should run: your local machine, a remote host, or a development container.
Review the publisher and configuration before starting. VS Code warns that “Local MCP servers can run arbitrary code on your machine.” A repository’s workspace configuration also inherits Workspace Trust, so inspect .vscode/mcp.json or .mcp.json before trusting a project.
#1 Best Overall
Add Playwright MCP to VS Code
Option 1: add it from the command line
Run this from a terminal where the VS Code code command is available:
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'The command registers a server named playwright. The package is fetched through npx when VS Code starts it.
Option 2: edit a JSON configuration
For a portable MCP file, use the top-level mcpServers object:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}For VS Code’s workspace-specific file, .vscode/mcp.json uses a top-level servers object instead. Keep secrets out of files committed to a repository; use input variables or environment files as recommended in the VS Code documentation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #2
Option 3: install from the MCP gallery
- Open Extensions in VS Code.
- Search for
@mcp playwright. - Install the server in your user profile, or choose the workspace installation when the project should carry its configuration in
.vscode/mcp.json. - Review the publisher and configuration, then confirm the trust prompt.
Choose the right configuration scope
| Scope | Configuration | Use it when | Where the process runs |
|---|---|---|---|
| User profile | MCP: Open User Configuration |
You want the server in multiple workspaces | Locally unless configured otherwise |
| Workspace | .vscode/mcp.json with servers |
A VS Code project should define its own server | Workspace environment |
| Portable workspace | .mcp.json with mcpServers |
The file must be usable by compatible MCP clients | Client-dependent |
| Remote user/workspace | Remote MCP configuration | The browser and dependencies belong on the remote machine | Remote host |
| Dev Container | devcontainer.json under customizations.vscode.mcp.servers |
The server should be part of a containerized environment | Container |
Do not choose a remote scope merely because the editor window is remote: the server must be configured where its browser process and Node installation actually exist.
Start the browser agent in Chat
- Open the Chat view and select Agent.
- Choose Configure Tools.
- Enable the Playwright tools you want the agent to call.
- Ask for a bounded task on a site you are authorized to use.
A useful first prompt is: “Open the TodoMVC demo, add two sample tasks, and report the resulting task count.” The agent can use Playwright’s structured accessibility snapshots—roles, names and text—to identify controls instead of relying only on fragile coordinates. Some calls may request confirmation; read the proposed action before approving it.
What the tools can handle
- Navigate to a URL and inspect the page.
- Click buttons and links, fill fields, select options and respond to dialogs.
- Work with tabs and take screenshots.
- Wait for a selector, a delay or page activity before continuing.
Keep the first request observable and reversible. Once it works, ask for one additional action at a time and require the agent to report what it found.
Adapt the browser to your environment
Headed versus headless
Playwright MCP runs headed by default, so a browser window is visible. Add --headless when a display is unavailable or you want an invisible browser process. Headed mode is often easier to debug locally; headless mode suits CI and remote workers.
Outdated 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 matchPC 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 & 11Choose a browser engine
The documented choices include Chrome (the default), Firefox, WebKit and Microsoft Edge. Select the engine appropriate to the site you are testing and install any required browser binaries in that environment.
Run a standalone HTTP server
For a headed browser on a machine without a usable display, or when the IDE worker cannot start a local window, Playwright documents a standalone server:
npx @playwright/mcp@latest --port 8931Point an MCP client at http://localhost:8931/mcp. This HTTP transport is an alternative to the basic local stdio configuration, not a prerequisite for it.
Security controls you should not skip
Review trust boundaries
Only install servers from publishers you understand. Treat web-page content and tool schemas as untrusted input: a page can contain instructions designed to influence an agent. Limit the sites and accounts used for experiments, and avoid placing production credentials in prompts or browser profiles.
Recommended Free Tools
Be careful with arbitrary JavaScript
Playwright labels browser_run_code_unsafe as arbitrary JavaScript execution in the server process and says it is RCE-equivalent—only enable it for trusted MCP clients. It is intended for interactions beyond normal individual tool calls and is unnecessary for ordinary navigation, forms and screenshots.
Use sandboxing where available
For local stdio servers on macOS and Linux, VS Code supports MCP sandboxing to restrict filesystem and network access. The cited VS Code documentation says this feature is not available on Windows, so apply other operating-system controls there.
Troubleshoot a server that does not work
The server is missing from Configure Tools
- Confirm the JSON syntax and that the command is exactly
npxwith@playwright/mcp@latest. - Check that Node.js 20 or newer and
npxare visible to the VS Code process, not only to another terminal. - Verify you installed the server in the intended user, workspace or remote scope.
- Use the Extensions view, the
mcp.jsoneditor or the Command Palette to inspect status, logs, and start/stop controls.
The browser starts but no window appears
You may be running in a headless or display-less environment. Add --headless, or run the documented HTTP server and connect to http://localhost:8931/mcp. If you expected a visible window, check the remote display and browser engine selection.
Tool calls are waiting for approval
VS Code can ask for confirmation on some calls. Read the target URL and action, approve only expected operations, and narrow the prompt if the agent proposes an unrelated click or navigation.
Pages load incorrectly
Check network access from the machine running the server, authentication state, pop-up blocking and the selected browser engine. Ask the agent to report the accessibility snapshot and current URL before attempting another action; this distinguishes a page problem from a selector problem.
Remote or container setup fails
Install Node.js and browser dependencies in the environment where the MCP process runs. Recheck that the remote or container configuration is being loaded rather than a local user-profile entry, then inspect server logs.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
For a static screenshot or PDF rather than an interactive browser-agent session, ScreenshotNeo provides a website screenshot API and MCP server. It accepts consent banners before capture and removes 60+ known consent platforms, newsletter popups and chat widgets; each step can be disabled. Only clean shots are billed: bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the result with X-Page-Verdict and X-Billed headers.
Use the API documentation at https://screenshotneo.com/docs/. Replace the example URL with the page you need.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →cURL
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 for Claude, Cursor and other MCP clients, plus full-page captures, element selection, device presets, dark mode, custom CSS and JavaScript, waits, request blocking, cookies and headers, PDFs, caching, signed links, asynchronous jobs and bulk capture. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up free for ScreenshotNeo.
Operational guidance
- Use a dedicated test account and a non-production site for early prompts.
- Prefer accessibility-driven actions and stable labels over coordinate-based instructions.
- Set explicit waits for pages that render asynchronously, then ask the agent to verify the final URL and visible result.
- Keep user-profile servers for personal workflows; commit workspace configuration only after reviewing every command and secret reference.
- For CI or remote workers, choose headless mode or the standalone HTTP transport and record server logs with the job.
Frequently Asked Questions
Can I use an MCP browser server other than Playwright in VS Code?
Yes. Playwright MCP is the documented example here; VS Code can register other MCP servers that provide compatible tools.
Should I put the server in user settings or the workspace?
Use the user profile for a personal server across projects, and a workspace file when the project’s contributors or container need the same definition.
Is the unsafe Playwright code tool required for normal browsing?
No. Basic navigation, form interaction, dialogs, tabs and screenshots use the regular browser tools; the unsafe tool is for trusted clients that specifically need arbitrary JavaScript.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →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.
