chrome-devtools-mcp: Empowering AI Agents with Chrome DevTools Capabilities

Introduction

chrome-devtools-mcp is a cutting-edge project from ChromeDevTools designed to empower AI coding agents with the full capabilities of the Chrome browser. Acting as a Model-Context-Protocol (MCP) server, it allows AI assistants like Antigravity, Claude, Cursor, and Copilot to control and inspect a live Chrome instance. This integration provides unparalleled access to Chrome DevTools, enabling reliable automation, in-depth debugging, and comprehensive performance analysis directly from your AI agent.

Key features include:

• Get performance insights: Record traces and extract actionable performance insights using Chrome DevTools.
• Advanced browser debugging: Analyze network requests, take screenshots, and check browser console messages with source-mapped stack traces.
• Reliable automation: Utilize Puppeteer to automate actions in Chrome and automatically wait for action results.

Installation

To get started with chrome-devtools-mcp, ensure you have the following prerequisites:

• Node.js LTS version
• Chrome current stable version or newer
• npm

Once the requirements are met, you can add chrome-devtools-mcp to your MCP client configuration. A typical setup involves using npx to run the latest version of the server:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

For basic browser tasks, a --slim mode is available, exposing a reduced set of tools for navigation, script execution, and screenshots:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

Examples

After configuring your MCP client, you can test the setup with a simple prompt. For instance, to check the performance of a website, you can instruct your AI agent as follows:

Check the performance of https://developers.chrome.com

Your MCP client should then initiate the Chrome browser, record a performance trace, and provide the results. The MCP server will automatically start the browser when a tool requiring it is invoked by the client.

Why Use It

chrome-devtools-mcp offers significant advantages for developers and AI engineers looking to enhance their coding agents:

• Deep Browser Interaction: Provides AI agents with the ability to interact with web pages at a granular level, far beyond simple API calls.
• Comprehensive Web Analysis: Leverage Chrome DevTools for detailed performance metrics, network analysis, and console debugging, crucial for understanding and optimizing web applications.
• Seamless Automation: Built on Puppeteer, it offers robust and reliable browser automation, handling complex scenarios and ensuring actions are completed successfully.
• Broad Client Compatibility: Integrates with a wide array of popular AI clients and IDEs, including Antigravity, Claude Code, Copilot, Cursor, Gemini, and many more, making it a versatile choice for various development environments.
• Flexible Configuration: Supports various configuration options, such as running in headless mode, connecting to existing Chrome instances, and enabling experimental features for vision, memory, and screencasting.
• Concurrent Sessions: With --experimentalPageIdRouting, it supports concurrent agent sessions, allowing multiple agents or subagents to work on different tabs simultaneously without interference.

Links

For more detailed information, documentation, and to contribute to the project, visit the official GitHub repository:

• GitHub Repository
• Tool Reference
• Troubleshooting Guide