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.
Basic information
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
We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.
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).
More Browser Automation MCP servers
Playwright MCP Server 🎭
executeautomationPlaywright Model Context Protocol Server - Tool to automate Browsers and APIs in Claude Desktop, Cline, Cursor IDE and More 🔌
Apify Model Context Protocol (MCP) Server
apifyThe Apify MCP server enables your AI agents to extract data from social media, search engines, maps, e-commerce sites, or any other website using thousands of ready-made scrapers, crawlers, and automation tools available on the Apify Store.
Scrapling Fetch MCP
cyberchittaHelps AI assistants access text content from bot-protected websites. MCP server that fetches HTML/markdown from sites with anti-automation measures using Scrapling.
mcp-browser-use: MCP server for browser-use
vinayak-mehtaMCP server for browser-use
browser-use-mcp-server
co-browserBrowse the web, directly from Cursor etc.
Comments