Browser Tools MCP server

The BrowserTools MCP server enables AI tools to monitor and interact with your browser through a Chrome extension, making them more aware of your browsing context and capable of providing relevant assistance.

Installation

Prerequisites

1. A Chrome browser
2. An MCP-compatible client like Cursor, Claude Desktop, Cline, or Zed

Step 1: Install the Chrome Extension

Download the latest version of the Chrome extension:

https://github.com/AgentDeskAI/browser-tools-mcp/releases/download/v1.2.0/BrowserTools-1.2.0-extension.zip

After downloading:

1. Unzip the file
2. Go to Chrome's extension page (chrome://extensions/)
3. Enable "Developer mode" in the top right corner
4. Click "Load unpacked" and select the unzipped extension folder

Step 2: Install and Run the Node Server

Run the following command to install and start the Node server:

npx @agentdeskai/[email protected]

Step 3: Install and Run the MCP Server

In your IDE or terminal, run:

npx @agentdeskai/[email protected]

Step 4: Verify Connection

1. Open Chrome DevTools in your browser
2. You should see logs being sent to your server
3. Your MCP client should now recognize the BrowserTools capabilities

Usage

Basic Functions

With BrowserTools MCP, your AI tools can:

• Monitor browser console output
• Capture network traffic
• Take screenshots
• Analyze selected DOM elements
• Run various audits

Enabling Auto-Paste in Cursor

You can enable "Allow Auto-Paste into Cursor" within the DevTools panel to automatically paste screenshots into Cursor:

1. Open Chrome DevTools
2. Navigate to the BrowserTools panel
3. Enable the "Allow Auto-Paste into Cursor" option
4. Make sure to focus/click in the Agent input field in Cursor for this to work

Running Audits

BrowserTools MCP offers several audit tools that can analyze the current page:

Accessibility Audit

To check if a page meets accessibility standards:

Are there any accessibility issues on this page?

Performance Audit

To identify performance bottlenecks:

Why is this page loading slowly?

SEO Audit

To improve search engine optimization:

How can I improve SEO for this page?

Best Practices Audit

To verify adherence to web development best practices:

Run a best practices audit.

NextJS Audit

For NextJS-specific improvements:

Run a NextJS audit.

or

Run a NextJS audit, I'm using app router.

Using Audit and Debugger Modes

Audit Mode

This runs all audits in sequence:

Run audit mode.

Debugger Mode

This runs all debugging tools in sequence:

Enter debugger mode.

Troubleshooting

If you're experiencing issues:

1. Connection problems: Ensure both the Node server and MCP server are running
2. Extension not working: Verify the extension is properly installed and enabled
3. Auto-reconnect: The system should automatically reconnect if a connection is lost
4. Version issues: Make sure you're using the latest versions of all components

You can gracefully exit the Browser Tools server with Ctrl+C when needed.

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "browser-tools" '{"command":"npx","args":["@agentdeskai/[email protected]"]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "browser-tools": {
            "command": "npx",
            "args": [
                "@agentdeskai/[email protected]"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "browser-tools": {
            "command": "npx",
            "args": [
                "@agentdeskai/[email protected]"
            ]
        }
    }
}

3. Restart Claude Desktop for the changes to take effect