BrowserTools MCP Guide 2026: Let AI Debug Your Chrome Tabs
BrowserTools MCP by AgentDeskAI gives your AI client eyes inside Chrome: console logs, network requests, screenshots, and Lighthouse audits, all kept local. Full setup and how it differs from Playwright and Puppeteer MCPs.
TL;DR — BrowserTools MCP by AgentDeskAI, Explained
BrowserTools MCP is an MCP server that gives your AI client eyes inside Chrome. Through a Chrome extension plus a local Node.js middleware, it captures console logs, network requests, screenshots, and DOM elements, and runs Lighthouse audits for accessibility, performance, SEO, best practices, and Next.js. Unlike Playwright or Puppeteer MCPs that drive a browser, BrowserTools observes the tab you are already debugging — and keeps every log local to your machine. It works in Cursor, Claude Desktop, Cline, Zed, and Windsurf.
Curated from every browser MCP indexed on Skiln · Updated daily
Table of Contents
- What Is BrowserTools MCP?
- How BrowserTools MCP Works
- What BrowserTools MCP Can Do
- Lighthouse Audits and Special Modes
- BrowserTools vs Browser Automation MCPs
- Comparison Table
- Setup: Installing BrowserTools MCP
- Privacy: Where Your Logs Go
- Real Debugging Workflows
- Frequently Asked Questions
What Is BrowserTools MCP?
BrowserTools MCP is a Model Context Protocol server built by AgentDeskAI that lets AI clients monitor and interact with a real Chrome browser. Instead of pasting console errors or screenshots into your chat, you let the AI read them directly: the console output, the failed network request, the rendered DOM, the current screenshot.
It is one of the most useful MCPs for front-end and full-stack developers precisely because web debugging is so context-heavy. The bug lives in the browser — in a 404 on a fetch, a null reference in the console, a layout that only breaks at a certain viewport. BrowserTools MCP pipes all of that into the AI so it can reason about the actual failure, not a secondhand description.
How BrowserTools MCP Works
BrowserTools MCP has three cooperating pieces, all running locally:
- A Chrome extension — captures data from the browser: console logs, network requests, screenshots, and the currently selected DOM element.
- browser-tools-server — a local Node.js middleware that gathers and holds the logs the extension sends.
- browser-tools-mcp — the MCP server you install into your IDE, which speaks the Model Context Protocol to your AI client and pulls data from the middleware.
Your AI client asks browser-tools-mcp for, say, the latest console errors. That request flows to the local server, which returns what the Chrome extension has captured. Because every hop is on your machine, nothing leaves localhost.
What BrowserTools MCP Can Do
The server exposes a focused set of diagnostic tools:
- Read console logs — grab the console output of the active tab, including errors and warnings, so the AI can pinpoint a runtime failure.
- Capture network activity — inspect network request details, status codes, and payloads to debug a failing API call or a slow endpoint.
- Take screenshots — capture what the page actually looks like right now, useful for visual bugs and layout issues.
- Extract DOM elements — pull the currently selected element so the AI can reason about structure, classes, and attributes.
- Wipe logs — clear captured logs to start a clean debugging session.
Pair those with a strong coding client and you get a fast loop: the AI reads the console error, opens the relevant component, proposes a fix, and you re-run to check the console again.
Lighthouse Audits and Special Modes
Beyond raw logs, BrowserTools MCP runs five Lighthouse-based audits on demand: accessibility, performance, SEO, best practices, and a Next.js-specific audit. That turns the AI into a quality reviewer that can quantify problems, not just spot them.
Two convenience modes bundle the tools into sequences:
- Audit Mode runs all the auditing tools in a set order, giving you a full accessibility-through-SEO sweep in one command.
- Debugger Mode runs the debugging tools in sequence along with a prompt crafted to improve the AI's reasoning, so it works through a bug methodically instead of guessing.
BrowserTools vs Browser Automation MCPs
This is the distinction that trips people up. There are two families of browser MCP:
- Automation MCPs — the Playwright MCP and Puppeteer MCP drive a browser: navigate, click, type, submit. They operate a fresh automated session.
- Diagnostic MCPs — BrowserTools observes the browser you are already using. It does not click for you; it tells the AI what is happening inside your tab.
They are complementary. Use an automation MCP to reproduce a flow, and BrowserTools to see what broke while it ran. For the closely related tooling that Chrome ships itself, see the Chrome DevTools MCP and our Chrome DevTools MCP guide. If you are weighing the two automation drivers, our Playwright vs Puppeteer MCP comparison breaks it down.
Comparison Table
Setup: Installing BrowserTools MCP
Because there are three parts, setup has a few more steps than a typical MCP. The general flow:
- Install the Chrome extension from the AgentDeskAI project — this is what captures browser data.
- Run the middleware server locally:
npx @agentdeskai/browser-tools-server@latest. Keep it running while you debug. - Add the MCP server to your client. For Claude Code:
claude mcp add browser-tools -- npx -y @agentdeskai/browser-tools-mcp@latest. For Cursor or Claude Desktop, add the equivalent entry to your MCP config.
{ "mcpServers": { "browser-tools": { "command": "npx", "args": ["-y", "@agentdeskai/browser-tools-mcp@latest"] } } }- Restart the client, open the Chrome tab you want to debug, and ask the AI to "read the console logs from the current tab." Always check each component's README for the current version pin — the project iterates quickly.
Privacy: Where Your Logs Go
A recurring worry with browser tooling is data leaving your machine. BrowserTools MCP is explicit here: all logs are stored locally and are never sent to any third-party service or API. The Chrome extension talks to a server on localhost, and that server talks to your IDE. Nothing is uploaded.
That local-first posture makes it a reasonable choice even for debugging apps with sensitive data on screen — though, as always, treat screenshots and captured network payloads with the same care you would any debugging artifact.
Real Debugging Workflows
- Kill a console error fast. "Read the console, find the error, and fix the component that's throwing it." The AI sees the exact stack trace and edits the right file.
- Debug a failing API call. Capture the network request, inspect the 401 or 500 and its payload, and let the AI trace it back to the wrong header or endpoint.
- Run an accessibility pass. Trigger Audit Mode and get a prioritized list of a11y issues with fixes, straight from Lighthouse.
- Catch a layout regression. Screenshot the broken viewport, compare against the intended design, and let the AI propose the CSS fix.
- Profile a slow page. Use the performance audit to quantify the bottleneck before touching code.
Debugging in the browser? Browse every browser MCP on Skiln — diagnostic probes, automation drivers, and DevTools bridges, ranked by trust score.
Browse Now →Frequently Asked Questions
What is BrowserTools MCP?
BrowserTools MCP is a Model Context Protocol server from AgentDeskAI that lets AI clients like Cursor, Claude Desktop, Cline, and Zed monitor and interact with a Chrome browser. Through a companion Chrome extension and a local Node.js middleware server, it captures console logs, network requests, screenshots, and selected DOM elements, and can run Lighthouse audits. It is the tool that lets your AI assistant actually see what is happening inside the browser tab you are debugging.
How is BrowserTools MCP different from Playwright or Puppeteer MCP?
Playwright and Puppeteer MCPs drive a browser — they navigate, click, and fill forms in an automated session. BrowserTools MCP instead observes your existing browser: it reads the console and network logs of the tab you already have open, captures screenshots, and runs audits. Think of automation MCPs as robots that operate the browser, and BrowserTools as a diagnostic probe attached to the browser you are using.
Do I need to install a Chrome extension for BrowserTools MCP?
Yes. BrowserTools MCP has three parts: the Chrome extension (captures data from the browser), the browser-tools-server (a local Node.js middleware that gathers logs), and the browser-tools-mcp server (which your IDE connects to). All three run locally on your machine. The extension is what gives the system access to console output, network traffic, and the DOM.
Does BrowserTools MCP send my data to the cloud?
No. According to AgentDeskAI, all logs are stored locally on your machine and are never sent to any third-party service or API. The middleware server runs on localhost, and the data flows between the Chrome extension, the local server, and your IDE. This local-first design is one of the main reasons developers pick it for debugging sensitive apps.
Which IDEs and AI clients support BrowserTools MCP?
Any MCP-compatible client works, including Cursor, Claude Desktop, Cline, Zed, and Windsurf. The project was originally built with Cursor in mind but implements the standard Model Context Protocol, so the same setup applies across clients. You install the MCP server into your IDE and pair it with the Chrome extension.
What are Audit Mode and Debugger Mode?
They are convenience tools that run several underlying tools in a fixed sequence. Debugger Mode executes the debugging tools in order, together with a prompt designed to improve the AI's reasoning about the problem. Audit Mode runs all the auditing tools — accessibility, performance, SEO, best practices, and a Next.js-specific audit — in sequence. Both save you from calling each tool by hand.
Where can I find more browser MCP servers on Skiln?
Skiln indexes every browser-related MCP — automation drivers, DevTools bridges, scraping tools, and diagnostic probes like BrowserTools. Read our best browser automation MCP servers roundup, or filter the /mcps directory by the browser category to compare current options ranked by trust score.
Last updated: July 01, 2026 · Skiln tracks new MCP releases daily across 13 source registries including PulseMCP, Smithery, Glama, LobeHub, and mcp.directory.