agentdeskai/browser-tools-mcp

★ 7,213JavaScriptAudience · developerComplexity · 3/5Setup · hard

Mindmap

mindmap
  root((browser-tools-mcp))
    What it does
      Browser to AI bridge
      Console log capture
      Screenshot sharing
    Components
      Chrome extension
      Local middleware server
      MCP IDE plugin
    Features
      Lighthouse audits
      Debugger mode
      Audit mode
    Status
      Deprecated
      Reference only

mindmap root((browser-tools-mcp)) What it does Browser to AI bridge Console log capture Screenshot sharing Components Chrome extension Local middleware server MCP IDE plugin Features Lighthouse audits Debugger mode Audit mode Status Deprecated Reference only

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Study a working reference architecture for connecting browser DevTools data to an AI coding assistant via MCP.

USE CASE 2

Learn how a Chrome extension can capture console logs and screenshots and pass them to an IDE AI plugin through a local server.

Tech stack

JavaScriptChrome ExtensionMCP

Getting it running

Difficulty · hard Time to first run · 1h+

Requires three components running simultaneously: a Chrome extension, a local middleware server, and an MCP plugin inside Cursor. Project is no longer maintained.

License not stated in the explanation.

In plain English

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).

Copy-paste prompts

Prompt 1

How does BrowserTools MCP capture Chrome console errors and send them to Cursor AI so the AI can suggest a fix automatically?

Prompt 2

Show me how to build a Chrome extension that collects browser console logs and forwards them to a local MCP server for an AI assistant.

Prompt 3

Using the BrowserTools MCP design as a reference, how would I connect browser network request data to an AI IDE plugin?

Prompt 4

What is the Model Context Protocol and how did BrowserTools MCP use it to pass structured browser data to Cursor?

Prompt 5

How would I replicate the BrowserTools MCP Lighthouse audit integration so an AI in my IDE can check page performance and accessibility?

Open on GitHub → Explain another repo

← agentdeskai on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.