browser-tools-mcp

BrowserTools MCP is a tool that connects your web browser to AI-powered coding environments like Cursor, so the AI assistant can see what is happening inside your browser while you build a website or web application. It works through three pieces that run together: a Chrome extension, a local server running on your computer, and an MCP server that plugs into your IDE. MCP stands for Model Context Protocol, an open standard that lets AI tools receive structured data from external sources.

The README notes at the top that this project is no longer actively maintained and the authors recommend using a different solution.

While it was active, the tool let an AI assistant in your IDE read your browser console logs, take screenshots, and monitor network activity, all without you needing to copy and paste error messages manually. This meant the AI could see the same errors a developer would see in Chrome DevTools and respond to them directly. A later version added integration with Lighthouse, a web auditing tool built into Chrome, so the AI could run checks for accessibility issues, page load performance, search engine optimization, and general best practices, then report the findings inside the IDE.

The project also included a debugger mode that ran all debugging tools in sequence and an audit mode that ran all the audit tools in order, making it faster to get a full picture of a page health in one step. Screenshot output could be automatically pasted into the Cursor chat input.

The architecture required three components running at the same time, which the README acknowledges led to setup confusion, particularly around the distinction between the browser-tools-server (a local middleware) and the browser-tools-mcp (the IDE plugin).