Playwright MCP server for AI agents

This MCP server provides browser automation capabilities using Playwright, enabling LLMs to interact with web pages, take screenshots, generate test code, scrape web content, and execute JavaScript in real browser environments.

Installation Options

Using npm

npm install -g @executeautomation/playwright-mcp-server

Using mcp-get

npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server

Using Smithery

For automatic installation with Claude Desktop:

npx @smithery/cli install @executeautomation/playwright-mcp-server --client claude

Installation in VS Code

You can install the Playwright MCP server in VS Code using the VS Code CLI:

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

Configuration

To configure Claude Desktop to use the Playwright server, add the following to your configuration:

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

Usage

Once installed, the MCP server enables your LLM tools to:

Interact with web pages
Take screenshots of websites
Generate Playwright test code
Scrape web content
Execute JavaScript in browser environments

The server exposes these capabilities through a Model Context Protocol interface that LLMs can access.

Example Commands

After configuration, you can ask your LLM assistant (like Claude) to perform web automation tasks:

"Visit example.com and take a screenshot"
"Extract all the links from the homepage of github.com"
"Generate a Playwright test that logs into my test account"
"Run JavaScript on the current page to collect information"

The Playwright MCP server will handle these requests by controlling a real browser and returning the results to your LLM assistant.

How to add this MCP server to 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 > MCP and click "Add new global MCP server".

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

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

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 explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.