What is BrowserTools MCP?
BrowserTools MCP is a system that bridges your browser and AI-powered applications or editors. By leveraging a Chrome extension, local NodeJS server, and an MCP server, it gives language models and coding agents the capability to access browser logs, DOM details, screenshots, network requests, and to run automated audits for accessibility, performance, SEO, and best practices. It operates fully on your machine to preserve privacy.
How to Configure
- Install the Chrome Extension: Download and add the BrowserTools MCP Chrome extension to your browser from the release page.
- Set Up the MCP Server: In your IDE or MCP-compatible client, run:
npx @agentdeskai/browser-tools-mcp@latest - Run the Local Node Server: Open a separate terminal and execute:
npx @agentdeskai/browser-tools-server@latest - Enable the Extension Panel: Open Chrome DevTools, navigate to the BrowserToolsMCP panel, and ensure it is active.
- Check Connectivity: Make sure only one instance of the DevTools panel is open, and restart both the browser and servers if necessary for troubleshooting.
- Configure Options: Use the extension's options to set screenshot folders, token/truncation limits, and privacy preferences if desired.
How to Use
- With your configuration complete and all components running, use your MCP-compatible editor or agent (like Cursor) to trigger audits, capture logs, screenshots, or interact with page elements.
- Common uses include asking AI agents to audit for accessibility, analyze performance, review SEO, or debug code—directly against the current open web page in your browser.
- Results are displayed inside your IDE or agent environment, sourced in real-time from your browser session, and can be prompted using natural language or function calls.
Key Features
- Seamless real-time access to browser logs, network activity, and screenshots for AI tools.
- Automated audits for Accessibility (WCAG), Performance, SEO, Best Practices, and NextJS specifics using Lighthouse integration.
- Local-first: All browser data is processed and stored on your own machine—no information is sent to third parties.
- Debugger and Audit modes that orchestrate sequences of in-depth checks in one command.
- Structured JSON results suitable for agent workflows.
- Flexible configuration and robust cross-platform connectivity.
- One-click log and screenshot management via extension panel.
Use Cases
- Automated Accessibility Verification: Ensure every page your team builds meets accessibility standards by running audits programmatically during development.
- Performance Tuning: Detect bottlenecks and unoptimized resources before shipping code, with actionable suggestions surfaced in your IDE.
- SEO and Best Practice Analysis: Instantly review on-page SEO and code best practices to maximize search visibility and web health.
- Browser Debugging: Capture logs, network traces, and screenshots during test cases or bug reproduction and share context-rich reports.
- Continuous Code Quality: Integrate audits into CI/CD processes by scripting automatic checks through your MCP-compatible tools.
FAQ
Q: Does BrowserTools MCP send any browser data to external servers?
No. All logs, screenshots, and diagnostic data are stored locally and never transmitted to third-party services. Privacy and security are strictly maintained.
Q: What AI editors or agents can I use with BrowserTools MCP?
Any editor or tool that supports the Model Context Protocol (MCP), such as Cursor, Claude Desktop, Zed, or Cline, can leverage BrowserTools MCP's capabilities.
Q: I'm having connectivity issues—what should I check?
First, make sure both the NodeJS server and MCP server are running, and only one instance of the Chrome DevTools panel is active. If problems persist, fully close and restart Chrome and both servers, then reopen DevTools.