What is Mcp Playwright Cdp

mcp-playwright-cdp is a Model Context Protocol server that provides browser automation capabilities using Playwright with support for Chrome DevTools Protocol (CDP). It allows LLMs to interact with web pages, capture screenshots, and execute JavaScript in a real browser environment, connecting to existing Chrome instances via CDP.

Use cases

Use cases for mcp-playwright-cdp include automating web testing processes, capturing screenshots for documentation, executing JavaScript for dynamic content manipulation, and monitoring console logs for debugging purposes.

How to use

To use mcp-playwright-cdp, you can install it via Smithery with the command: npx -y @smithery/cli install @lars-hagen/mcp-playwright-cdp --client claude. Alternatively, you can manually install it using npm with npm install. Configuration involves adding specific settings to your Claude Desktop configuration file.

Key features

Key features include connecting to existing Chrome instances via CDP, full browser automation capabilities, screenshot capture of entire pages or specific elements, comprehensive web interactions (navigation, clicking, form filling), console log monitoring, JavaScript execution in the browser context, and HTTP API testing support.

Where to use

mcp-playwright-cdp can be used in various fields such as web automation, testing, and development, particularly where interaction with web pages and browser environments is required.

MCP Playwright CDP

A Model Context Protocol server that provides browser automation capabilities using Playwright with Chrome DevTools Protocol (CDP) support. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment, with the ability to connect to existing Chrome instances via CDP.

This is a fork of executeautomation/mcp-playwright v0.2.7, enhanced with CDP support for connecting to running Chrome instances.

Key Features

• 🔗 Connect to existing Chrome instances via CDP
• 🌐 Full browser automation capabilities
• 📸 Screenshot capture of entire pages or specific elements
• 🖱️ Comprehensive web interactions (navigation, clicking, form filling)
• 📊 Console log monitoring
• 🔧 JavaScript execution in browser context
• 🌍 HTTP API testing support

Installation

You can install the package using either npm or Smithery:

Installing via Smithery

To install MCP Playwright CDP for Claude Desktop automatically via Smithery:

npx -y @smithery/cli install @lars-hagen/mcp-playwright-cdp --client claude

Manual Installation

Using npm:

npm install

Configuration

Add this to your Claude Desktop configuration file:

{
  "mcpServers": {
    "playwright": {
      "command": "node",
      "args": [
        "/path/to/mcp-playwright/dist/index.js"
      ]
    }
  }
}

Replace /path/to/mcp-playwright with your actual path to the repository.

CDP Connection

This fork adds the ability to connect to an existing Chrome instance via CDP. To use this feature:

1. Launch Chrome with remote debugging enabled:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

2. The server will automatically attempt to connect to the running Chrome instance first, before launching a new browser.

Credits

This project is a fork of executeautomation/mcp-playwright, enhanced with CDP support for connecting to running Chrome instances.

License

This project is licensed under the MIT License - see the LICENSE file for details.