MCP Hub
Back to servers

Playwright MCP Server

A Playwright-based MCP server that enables AI agents to programmatically automate and inspect web pages using structured data rather than just screenshots.

Updated
Jun 19, 2025

Playwright MCP Configuration

This repository contains everything needed to launch and connect to a working Playwright MCP (Model Context Protocol) server.

✅ Overview

This setup allows you to automate and inspect web pages using structured data instead of screenshots — ideal for LLM-powered tools like Claude, Cursor, and VS Code AI agents.


🛠️ Prerequisites

  • Node.js v18 or newer

  • One of the following MCP-compatible clients:

    • VS Code or VS Code Insiders
    • Cursor
    • Claude Desktop

📁 Repository Contents

  • .vscode/settings.json — VS Code configuration to launch Playwright MCP
  • package.json — Includes required MCP dependencies
  • README.md — This file
  • .gitignore — Basic Node project ignore rules

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/faruklmu17/playwright_mcp.git 
cd playwright-mcp-config

2. Install Dependencies

npm install

This installs all required packages, including @playwright/mcp.


3. Start the MCP Server

npx playwright-mcp --port 3550

You should see output like:

MCP Server started
Web server started

You can change the port if needed, e.g. --port=4000


4. VS Code MCP Client Configuration

Add this to your .vscode/settings.json:

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

This tells VS Code (or Cursor) how to launch and connect to the MCP server.


5. Optional: Use Persistent or Isolated Sessions

Persistent (default)

The browser state is preserved across sessions.

Isolated Example

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--isolated",
        "--storage-state=storage/state.json"
      ]
    }
  }
}

6. Additional Flags

You can enhance your MCP server using optional flags:

FlagDescription
--port <port>Custom port (default is random/OS-assigned)
--headlessRun without browser UI
--deviceEmulate a device (e.g., "iPhone 15")
--visionEnable screenshot-based vision (if supported)

Check available flags with:

npx playwright-mcp --help

📅 Note About Browsers

You do not need to install playwright or run npx playwright install separately. The MCP package handles everything required for browser automation.


📄 .gitignore

node_modules/
.DS_Store

🤝 Contributing

Pull requests and suggestions are welcome!


📄 License

MIT

Reviews

No reviews yet

Sign in to write a review