BrowserTools

Provides local browser auditing and data extraction tools via MCP to empower AI clients with page insights.

javascript

0

GitHub Stars

javascript

Language

7 months ago

First Indexed

3 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "sugatraj-cursor-browser-tools-mcp": {
      "command": "npx",
      "args": [
        "@agentdeskai/browser-tools-server@1.2.0"
      ]
    }
  }
}

BrowserTools MCP enables local, private browser monitoring and interaction for AI tools via MCP. It connects a Chrome extension, a local Node server, and any MCP client so you can capture logs, screenshots, DOM interactions, and audits without sending data to external services. This makes it easy to analyze browser behavior securely on your machine and drive AI-powered workflows inside your editor or IDE.

How to use

You run a local BrowserTools MCP server and connect it to an MCP client like Cursor or other compatible editors. Start the local server, ensure the Chrome extension is enabled, and then issue MCP commands from your client to run audits, capture logs, screenshots, and element data. The server stores logs locally and exposes standardized MCP tools your client can invoke, so you can audit accessibility, performance, SEO, and best practices for the current page.

How to install

npm -v
node -v

Ensure you have Node.js and npm installed. Verify with the commands above.
Start the MCP server locally with the provided runtime command.
Obtain and install the Chrome extension version 1.2.0 for BrowserTools MCP. Follow the extension install flow in your browser to enable it for your current browser profile.
Open the local server in a terminal and run the startup command shown below to begin listening for MCP clients.
Connect your MCP client and start issuing tool requests (audits, logs, screenshots) against the current browser page.

## Additional notes

The system is comprised of three core components: the Chrome extension that captures logs and browser data, the Node server that mediates between the extension and the MCP server, and the MCP server itself that exposes standardized tools to your AI clients. All logs are stored locally on your machine. The Node server truncates long strings and removes sensitive headers to protect your data when interacting with MCP clients.

## Tool overview

BrowserTools MCP provides a suite of audits and modes to analyze pages and assist debugging and optimization tasks.

## Security and privacy

All data processing happens locally. Logs, screenshots, and DOM information are stored on your machine and are not sent to external services unless you explicitly configure a remote MCP endpoint. Review the extension and server settings to customize token limits, screenshot paths, and data retention policies.

## Available tools

### Accessibility Audit

WCAG-compliant checks for color contrast, missing alt text, keyboard navigation traps, ARIA attributes, and more.

### Performance Audit

Lighthouse-driven analysis of render-blocking resources, excessive DOM size, unoptimized images, and other factors affecting page speed.

### SEO Audit

Evaluates on-page SEO factors like metadata, headings, and link structure and suggests improvements for better search visibility.

### Best Practices Audit

Checks for general web development best practices.

### NextJS Audit

Injects a prompt to perform a NextJS-focused audit to improve SEO and practices.

### Audit Mode

Runs all auditing tools in a predefined sequence.

### NextJS Audits

Checks for NextJS-specific issues and optimizations for SEO.

### Debugger Mode

Runs all debugging tools in a predefined sequence to assist reasoning and troubleshooting.