1. Home
  2. Playwright MCP
  3. Playwright MCP for VS Code: Setup & Config

Data as of

Playwright MCP for VS Code: Setup & Config

Playwright MCP lets VS Code operate browsers using structured accessibility data.

Playwright MCP VS Code configuration

  1. Choose VS Code configuration scope

    For Playwright MCP, open Workspace: .vscode/mcp.json. Merge into servers; preserve existing inputs.

  2. Add Playwright MCP to VS Code

    Use the playwright-mcp entry below in servers. Keep Playwright MCP's documented stdio connection fields and your other VS Code entries.

  3. Check Playwright MCP in VS Code

    Playwright MCP: Start in VS Code’s MCP controls; inspect output and trust prompts.

Config file · Workspace: .vscode/mcp.json

JSON
{
  "servers": {
    "playwright-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ],
      "env": {}
    }
  }
}

Playwright in VS Code: stdio checks

  • Make npx @playwright/mcp@latest (Node.js/npm) available in the workspace, container, or remote environment hosting Playwright MCP. Start through VS Code's MCP controls; inspect output and trust prompts.
  • Playwright MCP uses stdio here: VS Code must keep the configured process running; protocol output belongs on stdout and diagnostics on stderr.
Tools
browser_close, browser_resize, browser_console_messages

Playwright MCP — details. VS Code guide

Frequently asked questions

For Playwright MCP, edit workspace .vscode/mcp.json. VS Code requires servers rather than mcpServers; preserve the displayed type on each entry.

VS Code's playwright-mcp example uses stdio.

Playwright MCP's VS Code configuration invokes npx @playwright/mcp@latest (Node.js/npm).

Playwright MCP's stored list contains 25 tools, including browser_close, browser_resize, browser_console_messages. Compare those names with VS Code's connected tool list; the stored list is not a live check.