Browser Devtools MCP
@serkan-ozal
A Playwright-based MCP server that exposes a live browser as a traceable, inspectable, debuggable and controllable execution environment for AI agents.
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).
