To use a browser MCP server in Visual Studio Code, install or configure a server such as Playwright MCP, trust and start it, then enable its tools in Agent chat. The simplest documented setup uses Node.js 20 or newer and runs Playwright MCP through npx. Choose a user or workspace configuration according to who needs the server, and review it before allowing it to run: local MCP servers can execute code on your machine.
What a browser MCP server does in VS Code
MCP connects an AI client to tools and related server capabilities. In VS Code, an MCP server can expose browser actions to Agent chat, allowing an agent to navigate pages and interact with them through selected tools. Playwright MCP is one documented option, not the only browser server available.
Playwright MCP can provide navigation, clicking, typing, form filling, dropdown selection, dialog handling, tab management, and screenshots. It returns structured accessibility snapshots containing element roles and text, which help the agent identify page controls. A human may still need to confirm some tool calls, depending on the action and VS Code’s confirmation settings.
What you need before setup
- Visual Studio Code with its chat and MCP server support.
- Node.js 20 or newer, as specified by the Playwright MCP guide.
- An MCP browser server. The steps below use Playwright MCP as the documented example.
- A decision about where the server should be configured and where it should run: locally, in a workspace, or on a remote machine.
For the basic local setup, the server runs as a local process using standard input/output (stdio). You do not need to configure a separate HTTP server for that path.
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 match#1 Best Overall
Choose where to configure the server
The configuration location controls who can use the server and, in remote development, where it runs. VS Code documents user-profile, workspace, remote, and Dev Container options in its MCP server guide.
| Scope | Use it when | Configuration detail |
|---|---|---|
| User profile | You want the server available across your workspaces. | Open the Command Palette and run MCP: Open User Configuration. A user-profile server runs locally. |
| Workspace | The server is specific to a project or should be shared with that project’s configuration. | Use .vscode/mcp.json with a top-level servers object for VS Code-specific configuration, or .mcp.json with a top-level mcpServers object for a portable workspace file compatible with other tools. |
| Remote | The browser server needs to run on the remote machine used for development. | Configure a remote user or workspace server in that environment. A user-profile server configured locally does not move itself to the remote host. |
| Dev Container | The server should be included in a containerized development environment. | Configure it under customizations.vscode.mcp.servers in devcontainer.json. |
Do not place API keys or other secrets directly in a configuration file that may be shared. VS Code recommends input variables or environment files for sensitive values.
Install Playwright MCP in VS Code
You can add Playwright MCP from the MCP gallery or configure it directly. Both approaches set up the server; use one rather than duplicating the same server in multiple scopes.
Rank #2
Option 1: Install from the MCP gallery
- Open the Extensions view in VS Code.
- Search for
@mcp playwright. - Choose the Playwright server and install it in your user profile, or choose workspace installation if the project should carry its own configuration.
- Review the trust prompt and confirm only if you trust the server and its configuration.
- Open Agent chat and select the server’s discovered tools as described in the next section.
The gallery can also install a workspace server, writing its configuration to .vscode/mcp.json.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Option 2: Add the server with JSON configuration
For a user configuration, open MCP: Open User Configuration from the Command Palette and add the Playwright server entry to the configuration. Playwright documents this form:
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}For workspace-specific VS Code configuration, put the server under the top-level servers object in .vscode/mcp.json, using the configuration format VS Code documents. For a portable workspace file, use the top-level mcpServers form in .mcp.json. Check the format appropriate to the selected file rather than copying a top-level object into a different file format.
Option 3: Add it with the VS Code CLI
Playwright documents this CLI command for adding the server:
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'Run it in a terminal where the VS Code code command is available. If it is not recognized, use the gallery or open the relevant MCP configuration file and add the entry manually.
Enable browser tools and run a first task
- Open the Chat view in VS Code and choose Agent.
- Open Configure Tools.
- Find the Playwright MCP tools and enable the tools you want the agent to use.
- Ask for a specific browser task. For example: “Open the TodoMVC demo, add two sample tasks, and report the resulting task count.”
- Review any confirmation prompts, then check the page and the agent’s report to verify the outcome.
A bounded request is a better first test than an open-ended instruction: identify the page, describe the interaction, and say what result to report. Playwright’s guide uses TodoMVC as a first-interaction example and documents navigation and common input actions. If the agent needs to work with a specific element, refer to its visible label or role where possible.
Adapt browser mode, engine, or transport
The local stdio configuration is a straightforward starting point. If your environment requires a different browser mode, engine, or connection method, Playwright documents options in its MCP configuration reference.
| Choice | Documented behavior | When it may fit |
|---|---|---|
| Headed or headless | Headed mode is the default; --headless selects headless operation. |
Use headed mode when you want to see the browser window; use headless mode when a visible window is unsuitable. |
| Browser engine | Documented choices include Chrome (default), Firefox, WebKit, and Microsoft Edge. | Select an engine when your task or environment calls for a particular browser. Do not assume every engine is installed or configured identically on every machine. |
| Local stdio or standalone HTTP | The standard setup launches the server with npx. For a headed browser on a machine without a display or from an IDE worker, Playwright documents a standalone HTTP server example using npx @playwright/mcp@latest --port 8931 and a client connection to http://localhost:8931/mcp. |
Use the HTTP approach only when that environment needs a separately running server and a client connection. It is an alternative, not a requirement for local setup. |
For the standalone HTTP example, keep the server and client connection settings consistent. A server bound to a port the client cannot reach will not make tools usable; check the process output and connection address if startup succeeds but the client cannot connect.
Secure the server and its browser actions
VS Code warns: “Local MCP servers can run arbitrary code on your machine.” Review the server publisher and configuration before starting it. A workspace MCP server inherits Workspace Trust, so inspect a repository’s MCP configuration before trusting the workspace. See Microsoft’s guidance on extending agents with MCP servers.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Playwright marks browser_run_code_unsafe as arbitrary JavaScript execution in the Playwright server process and says it is RCE-equivalent; it should only be enabled for trusted MCP clients. This capability is intended for interactions beyond normal individual browser tool calls. Basic navigation, clicking, and form interaction do not require it. Leave it disabled unless you have a specific need and have assessed the client and server trust.
- Treat page content and tool schemas returned by websites as untrusted input; a page should not be allowed to override your instructions or solicit secrets.
- Review requested permissions and tool calls rather than approving them automatically.
- Keep secrets out of shared workspace configuration; use VS Code’s recommended input-variable or environment-file approach.
- For local stdio servers on macOS and Linux, VS Code supports sandboxing to restrict filesystem and network access. The cited VS Code documentation says MCP sandboxing is not available on Windows. Sandboxing is optional and platform-dependent.
Troubleshoot missing tools and failed connections
The Playwright tools do not appear in chat
- Check that the server is installed or present in the intended configuration file.
- In Agent chat, reopen Configure Tools and enable the Playwright tools you need.
- Confirm you are editing the intended scope: user profile, workspace, remote environment, or Dev Container.
- Use the server controls, status, or logs available through the Extensions view, the
mcp.jsoneditor, or the Command Palette to inspect whether it started.
The server fails to start
- Verify that Node.js 20 or newer is available in the environment where the server process runs.
- Check the command and arguments for typos, including the package name
@playwright/mcp@latest. - If you are developing remotely, verify that the server is configured in the remote environment when it needs to run there; a local user-profile process does not automatically run remotely.
- Inspect the MCP server logs and configuration editor for startup errors before changing unrelated settings.
The client cannot connect to a standalone HTTP server
Confirm that the standalone process is running with the expected port and that the client is configured to connect to http://localhost:8931/mcp when using the documented example. If you changed the port, update the client address to match. This HTTP setup is not necessary for the default local stdio configuration.
The agent does not perform the requested interaction
- Check that the relevant browser tools are enabled rather than merely installed.
- Make the task concrete: name the page, action, and expected report.
- Respond to any confirmation prompt and inspect whether the browser reached the intended page.
- Do not enable
browser_run_code_unsafeas a general fix; ordinary browser interactions use the standard tools.
Or skip the browser setup
If you only need a page screenshot rather than an agent controlling an interactive browser, ScreenshotNeo offers a website screenshot API and MCP server. One GET request can return a PNG, JPEG, WebP, or PDF. For example, request a screenshot of the TodoMVC page with cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://todomvc.com -o shot.webpSee the ScreenshotNeo API documentation for setup and options. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for free.
Recommended Free Tools
Frequently Asked Questions
Can I use a browser MCP server in VS Code without Playwright?
Yes. Playwright MCP is a documented example, not the only MCP browser server. VS Code’s MCP gallery and configuration support other servers as well.
Does the basic Playwright MCP setup require a separate HTTP server?
No. The documented npx configuration is the basic setup; the standalone HTTP server is an alternative for particular environments.
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.
