Browser DevTools

Browser DevTools MCP is a Playwright-powered MCP server that gives AI coding assistants rich browser automation, debugging, and observability capabilities. It supports visual inspection, DOM and code-level debugging, page interaction, and OpenTelemetry tracing, all accessible through HTTP or STDIO transports. You can debug live pages, automate actions, capture screenshots, and correlate frontend and backend traces to streamline AI-driven diagnosis and automation workflows.

How to use

You connect your MCP client to the Browser DevTools MCP server to control a real browser session from your AI assistant. Start by running the HTTP transport server, then point your MCP client at the provided endpoint. Use the server to navigate pages, inspect the DOM, capture screenshots, monitor network requests, and collect accessibility data. Leverage the OpenTelemetry integration to correlate frontend and backend traces and enable end-to-end debugging.

Typical practical workflows include: navigating to a page, waiting for network activity to settle, taking screenshots for visual validation, inspecting console output and network requests, generating ARIA/AX snapshots for accessibility checks, and using Figma comparisons to verify UI parity with designs. You can also run JavaScript inside the page context or inside a server-side VM sandbox to validate runtime behavior.

How to install

Prerequisites: Node.js 18 or newer. You also need an MCP client (such as Claude Desktop, Cursor, Windsurf, or a compatible tool) to connect to the MCP server.

Install and run the HTTP transport server with a single command. This starts the MCP server and exposes the MCP protocol over HTTP.

npx -y browser-devtools-mcp --transport=streamable-http --port=3000

Additional setup and notes

Configuration is exposed through environment variables. You can tune session timeouts, buffering, browser behavior, OpenTelemetry, and Figma integration. Important options include enabling a persistent browser context for React tooling, and configuring the OpenTelemetry exporter to send traces to your collector or console.

For React tooling, enable persistent context with BROWSER_PERSISTENT_ENABLE=true and manually install the React DevTools extension in the browser profile for best reliability. Without the extension, React tooling can still work but with less reliable component discovery.

The server supports multiple browser engines (Chromium by default, plus Firefox and WebKit). You can run in headless mode by default and opt to disable headless if you want to see the browser window.

Configuration and endpoints

If you run the HTTP transport, you expose the MCP protocol at a URL like the following when running locally.

GET http://localhost:3000/health
GET http://localhost:3000/ping
GET http://localhost:3000/mcp
POST http://localhost:3000/mcp
DELETE http://localhost:3000/mcp

Troubleshooting and tips

If you encounter issues, check the buffered console messages and HTTP requests to identify failing interactions. Ensure your transport is started with the expected port, and verify that your MCP client is pointed at the correct /mcp endpoint. Use the inspector tool to test the MCP protocol interaction locally.

Available tools

content_take-screenshot

Takes a screenshot of the current page or a specified element with options for full-page capture and image type.

navigation_go-to

Navigate the browser to a specified URL with configurable timeout and wait strategy.

interaction_click

Click an element identified by a CSS selector to trigger actions on the page.

content_get-as-html

Retrieve the HTML content of the page or a selected element with options to clean and minify.

content_get-as-text

Retrieve the visible text content of the page or a selected element.

o11y_get-console-messages

Retrieve browser console messages with filtering by level, text, and time.

o11y_get-http-requests

Retrieve detailed browser HTTP requests with filters for type, status, and timing.

a11y_take-aria-snapshot

Capture an ARIA snapshot of the page or an element in YAML format.

accessibility_take-ax-tree-snapshot

Capture a combined AX tree and runtime visual snapshot with optional styling and occlusion checks.

compare-page-with-design

Compare the current page UI against a Figma design snapshot and return a combined similarity score.