MCP Directory

How to add Playwright MCP Server to Windsurf

Microsoft's official browser-automation MCP using Playwright's accessibility tree (no vision model). Paste the config into ~/.codeium/windsurf/mcp_config.json and restart Windsurf.

Last updated June 15, 2026 · 24k★ · stdio · no auth · official

Windsurf config for Playwright MCP Server

npx -y @playwright/mcp@latest
{
  "mcpServers": {
    "playwright-mcp-server": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

Setup steps

  1. 1Open Windsurf → Cascade → the hammer/MCP icon → Configure (or edit ~/.codeium/windsurf/mcp_config.json).
  2. 2Paste the Playwright MCP Server config below.
  3. 3Fill in placeholder secrets, then save.
  4. 4Click Refresh in the MCP panel.
  5. 5Playwright MCP Server's tools become available to Cascade.

Before you start

  • Node.js 18 or newer
  • An MCP-capable client (VS Code, Cursor, Windsurf, Claude Desktop, Claude Code, Goose, LM Studio, Codex, Gemini CLI, and many more)
  • Playwright browsers are downloaded on demand; for containerized use, the mcr.microsoft.com/playwright/mcp Docker image runs headless Chromium
  • No credential or auth required for the server itself

What Playwright MCP Server can do in Windsurf

browser_navigate

Navigate to a URL (with browser_navigate_back to go back).

browser_snapshot

Capture the page's accessibility tree snapshot used for deterministic, vision-free interaction.

browser_click

Click an element identified from the snapshot (plus browser_hover for hover).

browser_type

Type text into a focused element; browser_press_key sends individual keys.

browser_fill_form

Fill multiple form fields in one call (with browser_select_option for dropdowns).

browser_take_screenshot

Capture a screenshot of the page or an element.

browser_evaluate

Run JavaScript in the page context and return the result.

browser_tabs

List, create, select, and close browser tabs.

Security

The server can drive a real browser to any URL and submit forms, so it can reach internal sites and act with whatever session state the browser has; run it against trusted targets and consider an isolated browser profile.

Playwright MCP Server + Windsurf FAQ

Where is the Windsurf config file?

Windsurf reads MCP servers from ~/.codeium/windsurf/mcp_config.json. Paste the Playwright MCP Server config there under the "mcpServers" key and restart the client.

Is Playwright MCP Server safe to use with Windsurf?

The server can drive a real browser to any URL and submit forms, so it can reach internal sites and act with whatever session state the browser has; run it against trusted targets and consider an isolated browser profile.

Does it use screenshots and a vision model?

No, by default it drives the browser from the page's accessibility tree (browser_snapshot), which is faster and deterministic. Coordinate/vision tools exist but are opt-in via --caps=vision.

Headed or headless by default?

Headed (a visible browser window) by default; pass --headless to run without a window, which is required for the Docker image.

How are logins/sessions handled?

By default a persistent profile stores login state between sessions; use --isolated for in-memory profiles or --user-data-dir to control the location.

View repo Full Playwright MCP Server page