Monitor browser logs directly from Cursor and other MCP compatible IDEs.
Make your AI tools 10x more aware and capable of interacting with your browser
This application is a powerful browser monitoring and interaction tool that enables AI-powered applications via Anthropic's Model Context Protocol (MCP) to capture and analyze browser data through a Chrome extension.
Read our docs for the full installation, quickstart and contribution guides.
Check out our project roadmap here: Github Roadmap / Project Board
v1.2.0 is out! Here's a quick breakdown of the update:
Please make sure to update the version in your IDE / MCP client as so:
npx @agentdeskai/[email protected]
Also make sure to download the latest version of the chrome extension here: v1.2.0 BrowserToolsMCP Chrome Extension
From there you can run the local node server like so:
npx @agentdeskai/[email protected]
Make sure to specify version 1.2.0 since NPX caching may prevent you from getting the latest version! You should only have to do this once for every update. After you do it once, you should be on the latest version.
And once you've opened your chrome dev tools, logs should be getting sent to your server 🦾
If you have any questions or issues, feel free to open an issue ticket! And if you have any ideas to make this better, feel free to reach out or open an issue ticket with an enhancement tag or reach out to me at @tedx_ai on x
Coding agents like Cursor can run these audits against the current page seamlessly. By leveraging Puppeteer and the Lighthouse npm library, BrowserTools MCP can now:
...all without leaving your IDE 🎉
| Audit Type | Description |
|---|---|
| Accessibility | WCAG-compliant checks for color contrast, missing alt text, keyboard navigation traps, ARIA attributes, and more. |
| Performance | Lighthouse-driven analysis of render-blocking resources, excessive DOM size, unoptimized images, and other factors affecting page speed. |
| SEO | Evaluates on-page SEO factors (like metadata, headings, and link structure) and suggests improvements for better search visibility. |
| Best Practices | Checks for general best practices in web development. |
| NextJS Audit | Injects a prompt used to perform a NextJS audit. |
| Audit Mode | Runs all auditing tools in a sequence. |
| Debugger Mode | Runs all debugging tools in a sequence. |
Ensure you have:
Headless Browser Automation:
Puppeteer automates a headless Chrome instance to load the page and collect audit data, ensuring accurate results even for SPAs or content loaded via JavaScript.
The headless browser instance remains active for 60 seconds after the last audit call to efficiently handle consecutive audit requests.
Structured Results:
Each audit returns results in a structured JSON format, including overall scores and detailed issue lists. This makes it easy for MCP-compatible clients to interpret the findings and present actionable insights.
The MCP server provides tools to run audits on the current page. Here are example queries you can use to trigger them:
runAccessibilityAudit)Ensures the page meets accessibility standards like WCAG.
Example Queries:
- "Are there any accessibility issues on this page?"
- "Run an accessibility audit."
- "Check if this page meets WCAG standards."
runPerformanceAudit)Identifies performance bottlenecks and loading issues.
Example Queries:
- "Why is this page loading so slowly?"
- "Check the performance of this page."
- "Run a performance audit."
runSEOAudit)Evaluates how well the page is optimized for search engines.
Example Queries:
- "How can I improve SEO for this page?"
- "Run an SEO audit."
- "Check SEO on this page."
runBestPracticesAudit)Checks for general best practices in web development.
Example Queries:
- "Run a best practices audit."
- "Check best practices on this page."
- "Are there any best practices issues on this page?"
runAuditMode)Runs all audits in a particular sequence. Will run a NextJS audit if the framework is detected.
Example Queries:
- "Run audit mode."
- "Enter audit mode."
runNextJSAudit)Checks for best practices and SEO improvements for NextJS applications
Example Queries:
- "Run a NextJS audit."
- "Run a NextJS audit, I'm using app router."
- "Run a NextJS audit, I'm using page router."
runDebuggerMode)Runs all debugging tools in a particular sequence
Example Queries:
- "Enter debugger mode."
There are three core components all used to capture and analyze browser data:
┌─────────────┐ ┌──────────────┐ ┌───────────────┐ ┌─────────────┐
│ MCP Client │ ──► │ MCP Server │ ──► │ Node Server │ ──► │ Chrome │
│ (e.g. │ ◄── │ (Protocol │ ◄── │ (Middleware) │ ◄── │ Extension │
│ Cursor) │ │ Handler) │ │ │ │ │
└─────────────┘ └──────────────┘ └───────────────┘ └─────────────┘
Model Context Protocol (MCP) is a capability supported by Anthropic AI models that allow you to create custom tools for any compatible client. MCP clients like Claude Desktop, Cursor, Cline or Zed can run an MCP server which "teaches" these clients about a new tool that they can use.
These tools can call out to external APIs but in our case, all logs are stored locally on your machine and NEVER sent out to any third-party service or API. BrowserTools MCP runs a local instance of a NodeJS API server which communicates with the BrowserTools Chrome Extension.
All consumers of the BrowserTools MCP Server interface with the same NodeJS API and Chrome extension.
Installation steps can be found in our documentation:
Once installed and configured, the system allows any compatible MCP client to: