Playwright MCP

Browser automation MCP server built on Playwright.

Give your AI agent real browser superpowers — navigate pages, click, type, take screenshots, and extract content through a standard MCP interface. One npx command, then your agent can drive a real browser.

Install Playwright MCP from https://github.com/microsoft/playwright-mcp using npx @playwright/mcp@latest. After installation, configure the MCP server in your AI agent's settings, then verify the setup by asking your agent to open a web page and summarize it.

Choose Your Environment

Start with the default prompt. Use the environment options below if your AI agent needs a specific MCP config format.

Choose Your Environment

Pick the MCP configuration that matches your AI agent. Each tab shows a ready-to-paste config.

Claude Code MCP config

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

Add this to your Claude Code MCP configuration, then ask Claude to navigate to any URL.

Codex MCP config

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

Add this to your Codex MCP settings. Restart Codex and ask it to use Playwright to open a web page.

Cursor / VS Code MCP config

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

Place this in your Cursor or VS Code MCP settings file. The Playwright tools will appear in the agent's tool palette.

Claude Desktop MCP config

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

Add this to your Claude Desktop MCP configuration, restart Claude Desktop, and the browser tools will be available.

Windsurf MCP config

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

Add this to your Windsurf MCP configuration. The agent will pick up the Playwright tools on next session.

Generic MCP config

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

Most MCP-compatible agents use this standard JSON format. Adjust the server name or args if your agent expects a different structure.

Verify Your Setup

After adding the MCP config, run one simple page-read task to confirm everything works.

Short check

Use Playwright to navigate to https://web-access.pro and summarize what the page helps users do.

Show full prompt

Please use the Playwright MCP tools for this setup check. Open https://web-access.pro, read the page content, and summarize what the site helps users install, verify, and do next. If the page cannot be read, explain which step failed.

A working setup should return a short summary of the page content. If it fails, check that Node.js 18+ is installed and the MCP config path is correct.

Try a Real Task

Once the setup works, try a small browser automation task.

Automation prompt

Use Playwright to search for "browser automation MCP tools" on Google, open the first two results, and return a short summary with source links.

You should get a source-backed summary with clickable links, proving your agent can navigate, read, and report on real web pages.

Requirements

What you need before installing Playwright MCP.

Node.js 18+ — the MCP server runs on Node. Check with node -v.
npx — comes with Node.js. Used to run the MCP server without a global install.
An MCP-compatible AI agent — Claude Code, Codex, Cursor, Windsurf, VS Code, or Claude Desktop.
Internet access — the first run downloads Playwright browser binaries (~150–400 MB depending on browsers).

FAQ

Playwright MCP is a Model Context Protocol server that wraps Playwright browser automation into structured tools AI agents can call. It lets agents navigate pages, click elements, fill forms, take screenshots, and extract content through a standard MCP interface.

Run npx @playwright/mcp@latest. You need Node.js 18+ on your machine. After installation, add the MCP server configuration to your AI agent's MCP settings file so the agent can discover and use the browser tools.

Any agent that supports the Model Context Protocol can use Playwright MCP. This includes Claude Code, Codex, Cursor, Windsurf, VS Code with Copilot, and Claude Desktop. Each has its own MCP configuration format — check the environment tabs on this page.

No. npx @playwright/mcp@latest bundles Playwright and its browser binaries automatically. The first run may download Chromium, Firefox, or WebKit binaries depending on your configuration.

You can navigate to any URL, click buttons, fill and submit forms, take screenshots, extract page text, run JavaScript in the page context, and handle multiple browser tabs — all through natural language prompts to your AI agent.

No. This is an independent setup and usage guide for Playwright MCP users. The official project is maintained by Microsoft on GitHub at github.com/microsoft/playwright-mcp.

Source and Scope

This is an independent setup and usage guide for Playwright MCP users.

The official project is maintained by Microsoft on GitHub. Review the repository before installing or adapting the skill in your own environment.

View Source on GitHub