StackMCP

Set up Playwright MCP in VS Code

Automate browser interactions, take screenshots, fill forms, and test web applications using Microsoft Playwright from your AI editor.

1

Locate the config file

VS Code reads MCP server configuration from the following file:

.vscode/settings.json → mcp section

Create this file if it does not already exist. For VS Code, this is inside your workspace .vscode/settings.json file under the mcp section.

2

Add the configuration

Add the following to your VS Code config file:

json
{
  "servers": {
    "playwright-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp"
      ]
    }
  }
}
3

Set up environment variables

No environment variables needed. Playwright MCP works out of the box without any API keys or tokens.

4

Verify it works

Restart VS Code. Playwright MCP should appear in your MCP server list with 20 tools available.

This server adds approximately 10,300 tokens to your context window for tool definitions.

Set up Playwright MCP in other editors

Claude CodeCursorWindsurfClaude DesktopContinue
← Back to Playwright MCP