Browser Devtools MCP

@serkan-ozal

About Browser Devtools MCP

A Playwright-based MCP server that exposes a live browser as a traceable, inspectable, debuggable and controllable execution environment for AI agents.

#browser #ai #mcp #tracing #debug #ai-agents #opentelemetry #playwright

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "browser-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "browser-devtools-mcp"
      ]
    }
  }
}

Tools

No tools detected

Fetch the live tool list by running this server in a temporary sandbox using the button above.

Overview

What is Browser Devtools MCP?

Browser Devtools MCP is a Model Context Protocol server that provides AI coding assistants with browser automation and debugging capabilities using Playwright, supporting both execution-level debugging (logs, network requests) and visual debugging (screenshots, ARIA snapshots).

How to use Browser Devtools MCP?

Run the server directly with npx -y browser-devtools-mcp without manual installation. Configure your MCP client (VS Code, Claude, Cursor, etc.) with the command npx -y browser-devtools-mcp. Supports both stdio and streamable-http transports, configurable via CLI arguments --transport and --port.

Key features of Browser Devtools MCP

Visual inspection via screenshots, ARIA snapshots, HTML extraction
DOM and code-level debugging with element inspection
Browser automation: navigation, clicking, form filling, scrolling
Execution monitoring with console messages and HTTP request tracking
Figma design comparison with similarity scoring
OpenTelemetry integration for distributed tracing

Use cases of Browser Devtools MCP

AI-assisted debugging of web application issues
Automated testing with browser interaction and screenshot validation
Accessibility auditing using ARIA and AX tree snapshots
Performance monitoring with web vitals and network tracking
Visual comparison of live pages against Figma designs

FAQ from Browser Devtools MCP

What are the prerequisites for using Browser Devtools MCP?

You need Node.js 18+ and an AI assistant with an MCP client (e.g., Cursor, Claude Desktop/Code, VS Code, Windsurf).

How do I install Browser Devtools MCP?

No manual installation is required. Run npx -y browser-devtools-mcp to automatically download and start the server.

What transport modes does Browser Devtools MCP support?

It supports both stdio (default) and streamable-http transports, configurable via --transport CLI argument.

How can I use the React tools?

React tools work best with persistent browser context enabled (BROWSER_PERSISTENT_ENABLE=true). Manually install the "React Developer Tools" Chrome extension for optimal reliability; without it, tools fall back to less reliable DOM scanning.

Can I run Browser Devtools MCP as a remote server?

Yes, start it with --transport=streamable-http --port=3000 and configure your MCP client to connect to the server URL (e.g., http://localhost:3000/mcp).

Frequently asked questions

What are the prerequisites for using Browser Devtools MCP?

You need Node.js 18+ and an AI assistant with an MCP client (e.g., Cursor, Claude Desktop/Code, VS Code, Windsurf).

How do I install Browser Devtools MCP?

No manual installation is required. Run `npx -y browser-devtools-mcp` to automatically download and start the server.

What transport modes does Browser Devtools MCP support?

It supports both stdio (default) and streamable-http transports, configurable via `--transport` CLI argument.

How can I use the React tools?

React tools work best with persistent browser context enabled (`BROWSER_PERSISTENT_ENABLE=true`). Manually install the "React Developer Tools" Chrome extension for optimal reliability; without it, tools fall back to less reliable DOM scanning.

Can I run Browser Devtools MCP as a remote server?

Yes, start it with `--transport=streamable-http --port=3000` and configure your MCP client to connect to the server URL (e.g., `http://localhost:3000/mcp`).