Playwright MCP server in VS Code with Copilot.
Copilot's agent mode plus a real browser: add playwright-mcp to .vscode/mcp.json and Copilot can open, click through, and verify the pages it writes.
VS Code's native MCP support feeds tools into Copilot's agent mode, and playwright-mcp is the natural first server to add — Microsoft builds both, and together they let Copilot fix a component, open it in Chromium, and confirm the fix rendered. The server (33.7k stars) drives the browser through accessibility snapshots, so interactions are addressed structurally, not by guessing at coordinates.
One format detail saves you ten minutes of confusion: VS Code's mcp.json uses a servers key, not the mcpServers key every other JSON-based client uses. Configs pasted from Cursor or Claude Desktop will be silently useless until renamed.
Two ways in
Command Palette route: run "MCP: Add Server", choose the npm package option or command entry, and VS Code writes the config for you — into user settings for a global server, or .vscode/mcp.json for the workspace.
File route: create .vscode/mcp.json yourself. Workspace scope is worth preferring for playwright-mcp on frontend repos, because committing it gives every contributor's Copilot the same verification loop.
The mcp.json entry
Note the top-level key:
{
"servers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}Start the server, switch to agent mode
When mcp.json is open in the editor, VS Code overlays a Start link above each server entry — click it and the status inline changes to running with a tool count. "MCP: List Servers" from the Command Palette shows the same state anytime.
MCP tools only reach Copilot in agent mode: open Copilot Chat, switch the mode dropdown to Agent, and check the tools icon — the browser_* tools should be listed and toggleable. Then ask for something verifiable: "run the dev server, open the settings page, and screenshot the dark-mode toggle." Copilot will request confirmation before each browser action at first; you can allow tools for the session once you've seen the pattern it follows.
The default browser is headed, which is fine inside an editor session. For background verification runs, append "--headless" to the args so no window steals focus while you keep typing.
Troubleshooting in VS Code
Server won't start: click the server's status in "MCP: List Servers" and pick Show Output — the dedicated output channel carries the real error. npx failing to resolve means VS Code launched without your shell PATH; start it from a terminal with code ., or put the absolute npx path in command.
Tools absent in chat: confirm you're in agent mode (ask mode doesn't execute tools) and that MCP is enabled — the chat.mcp.enabled setting must be on, and on managed machines policy can disable it.
Pasted config does nothing: you probably have mcpServers as the top-level key. VS Code wants servers; rename and restart the server entry.
First run stalls: package and browser download. Run npx playwright install chromium in the integrated terminal, then Start again.
The marketplace listing
playwright-mcp is indexed live on Loomal at https://loomal.ai/marketplace/playwright-mcp — package, category, and the tool list as probed from the running server. It anchors the Browser Automation category, where you can compare it against neighboring servers before committing one to your team's mcp.json.
FAQ
How do I install Playwright MCP for Copilot in VS Code?
Add a playwright entry under the servers key in .vscode/mcp.json (command npx, args ["@playwright/mcp@latest"]), or run "MCP: Add Server" from the Command Palette. Click Start on the server, switch Copilot Chat to agent mode, and the browser tools appear under the tools icon.
Why is my config ignored when it works in Cursor?
Key name. VS Code's mcp.json schema uses servers at the top level, while Cursor, Claude Desktop, and Windsurf use mcpServers. The inner command/args structure is identical, so renaming the key is the whole migration.
Where are the logs when the server errors?
Each MCP server gets its own output channel. Run "MCP: List Servers", select playwright, and choose Show Output. Spawn-time problems (npx not found, network failures fetching the package) and runtime crashes both land there.
Do the browser tools work in regular Copilot chat?
No — MCP tools execute only in agent mode. Ask mode can discuss your code but won't drive the browser. Switch modes in the Copilot Chat input; if the tools still don't show, verify chat.mcp.enabled isn't turned off by user or workspace settings.
Browse more MCP servers for VS Code.
Compare servers by category and tool list on the Loomal index.