BrowserTools MCP

What does this agent do, and when should you use it?

BrowserTools MCP is a two-part tool: an MCP server launched with npx (@agentdeskai/browser-tools-mcp) and a Chrome extension you load unpacked. Instead of driving a fresh automated browser, it attaches to the Chrome session you are already logged into via a DevTools extension, capturing console logs, XHR/fetch activity, the selected element, page info, screenshots and browser storage. It exposes these through 16 tools plus three bundled prompts (debuggerMode, auditMode, nextjsSeoAudit) and a set of MCP resources to clients such as Cursor, Claude Code, Windsurf, Cline, Zed and Gemini CLI. Version 2.0 collapses three processes into one, binds only to 127.0.0.1, requires a per-run token, and scrubs Authorization/Cookie headers, JWTs, cloud keys and vendor tokens before data leaves the browser. It also runs Lighthouse accessibility, performance, SEO and best-practices audits from a separate browser process that is blocked from internal networks and cloud metadata endpoints by default. Node.js 22.19 or newer is required, and the project is MIT licensed.

Capture begins on any tab where DevTools is open; the extension forwards telemetry to a local connector, and the MCP server exposes getConsoleLogs, getConsoleErrors, getNetworkLogs, getNetworkErrors, getSelectedElement, getPageInfo, getConnectionStatus, listBrowserTabs, takeScreenshot, refreshBrowser, getBrowserStorage, wipeLogs, plus runAccessibilityAudit, runPerformanceAudit, runSEOAudit and runBestPracticesAudit. Each DevTools tab is tracked and retained separately; tools act on the current tab (the most recent one to open DevTools) unless you pass a tabId or allTabs, and every result reports its tabId, url and otherTabs. Whole-history payloads are served as MCP resources — browser-tools://console/{tabId|all}, browser-tools://network/{tabId|all}, browser-tools://har/{tabId|all}, browser-tools://screenshot/{name} and browser-tools://audit/{reportId} — and tools link to them with resource_link instead of inlining. Log reads accept limit, offset and keyword filters and return newest-first with both total and returned. Audits launch a separate Chromium browser and keep the last 20 full Lighthouse reports under audits/ in the screenshot directory.

1. A frontend developer asks the agent in Cursor to read console errors from the page they are already looking at, instead of copy-pasting stack traces.
2. Debugging an authenticated dashboard where recreating login state in a throwaway Playwright or Chrome DevTools MCP profile would be painful.
3. Chasing failing or slow API calls with getNetworkLogs and getNetworkErrors filtered by URL or body keywords, then pulling the HAR resource for full analysis.
4. Running runAccessibilityAudit or runPerformanceAudit with Core Web Vitals before shipping a release.
5. Checking a Next.js site's SEO by combining the bundled nextjsSeoAudit prompt with runSEOAudit.
6. Working with several open tabs and using listBrowserTabs to pick the right tabId so screenshots and logs come from the intended page.

How do you install or deploy this agent?

You need Node.js 22.19 or newer; verify first:

node --version

Add the server to your MCP client configuration:

{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": ["-y", "@agentdeskai/browser-tools-mcp@latest"]
    }
  }
}

On Windows, if the client cannot find npx, use:

{
  "mcpServers": {
    "browser-tools": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@agentdeskai/browser-tools-mcp@latest"]
    }
  }
}

Then clone the repository, open chrome://extensions, enable Developer mode, choose Load unpacked and select the chrome-extension directory. There is no second server to start. Verify the setup with:

npx @agentdeskai/browser-tools-mcp --doctor

How do you use this agent?

Open Chrome DevTools (F12) on the page you want to inspect — capture starts immediately; the BrowserTools panel is only for settings and status — then ask your agent things like "check the console for errors" or "run an accessibility audit on this page". To watch capture happen live during a fresh install:

npx @agentdeskai/browser-tools-server --verbose

Common flags cover port, screenshot directory, tool allow/deny lists and audit origin allowlisting:

npx @agentdeskai/browser-tools-mcp --port 3025 --screenshot-dir ./shots --only getConsoleErrors,getNetworkLogs --audit-allow-origin http://localhost:3000

To share one browser session across several MCP clients, start the connector once and let clients attach:

npx @agentdeskai/browser-tools-server

For working on the project itself:

npm install
npm run build
npm test
npx playwright install chromium
npm run test:e2e

What are this agent's strengths and limitations?

How does this agent compare with similar options?

Key facts side by side with the most closely related agents.

How does FollowAgents rate this agent?

FAQ