Playwright Browser Automation MCP server for AI agents

The Playwright MCP server provides browser automation capabilities using structured accessibility snapshots rather than screenshots, making it ideal for LLMs to interact with web pages.

Installation

To install the Playwright MCP server, you'll need:

Node.js 18 or newer
A compatible MCP client (VS Code, Cursor, Claude Desktop, etc.)

You can install the server with your MCP client using the standard configuration:

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

Installation Methods by Client

Most MCP clients offer multiple ways to add the Playwright MCP server:

VS Code: Use the "Install Server" button or add it manually in settings
Cursor: Use the "Install in Cursor" button or add manually in Settings → MCP → Add new MCP Server
Claude Desktop: Follow the MCP install guide using the standard config
Goose: Use the "Install in Goose" button or add manually in Advanced settings → Extensions

Configuration

The Playwright MCP server accepts various command-line arguments to customize its behavior:

Common Configuration Options

# Run with custom viewport size
npx @playwright/mcp@latest --viewport-size=1280x720

# Run in headless mode
npx @playwright/mcp@latest --headless

# Specify browser type
npx @playwright/mcp@latest --browser firefox

# Enable additional capabilities
npx @playwright/mcp@latest --caps vision,pdf

User Profiles

The server supports three profile modes:

Persistent profile (default): Stores browser state between sessions

# Default behavior, no special flags needed
npx @playwright/mcp@latest

Isolated profile: Creates a temporary profile for each session
```
npx @playwright/mcp@latest --isolated
```
Browser Extension: Connects to existing browser tabs
```
npx @playwright/mcp@latest --extension
```

Initial State Configuration

Set up the browser state before automation:

# Load cookies and storage from a file
npx @playwright/mcp@latest --storage-state=auth.json

# Run initialization script before automation
npx @playwright/mcp@latest --init-script=setup.js

# Initialize page with custom TypeScript code
npx @playwright/mcp@latest --init-page=init-page.ts

Using a Configuration File

Instead of command-line arguments, you can use a JSON configuration file:

npx @playwright/mcp@latest --config playwright-mcp-config.json

Example configuration file:

{
  "browser": {
    "browserName": "chromium",
    "launchOptions": {
      "headless": false
    },
    "contextOptions": {
      "viewport": {
        "width": 1280,
        "height": 720
      }
    }
  },
  "capabilities": ["core", "pdf"],
  "testIdAttribute": "data-testid"
}

Running as a Standalone Server

To run as a standalone server (useful for environments without displays):

npx @playwright/mcp@latest --port 8931

Then configure your MCP client:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

Available Tools

The Playwright MCP server provides several tool categories:

Core automation: Click, type, navigate, take screenshots, etc.
Tab management: List, create, close, or switch between browser tabs
Browser installation: Install required browsers
Coordinate-based interactions: Mouse operations at specific coordinates (requires --caps=vision)
PDF generation: Save pages as PDF (requires --caps=pdf)
Test assertions: Generate locators and verify page elements (requires --caps=testing)
Tracing: Record browser sessions for debugging (requires --caps=tracing)

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "playwright" '{"command":"npx","args":["@playwright/mcp@latest"]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

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

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

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

3. Restart Claude Desktop for the changes to take effect