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:

Flag	Description
--port <port>	Custom port (default is random/OS-assigned)
--headless	Run without browser UI
--device	Emulate a device (e.g., "iPhone 15")
--vision	Enable 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