BrowserTools v1.2.0 : Windows + Cursor Installation Brute Force Guide 😅

[sarvesh-astrophile]

Introduction

This step-by-step guide will help you set up BrowserTools MCP on your Windows system, allowing Cursor IDE to interact with your browser. With this setup, your AI coding assistant can access browser information like console logs, network requests, and even take screenshots.

This guide is based on the excellent contribution by SDJINC from this GitHub discussion. Thank you for creating and sharing this helpful resource with the community.

Special thanks to the Agent Desk AI Team for creating this powerful tool.

What is BrowserTools MCP?

BrowserTools MCP creates a connection between your browser and Cursor IDE, giving your AI assistant the ability to:

• View console logs and errors
• Monitor network requests and responses
• Capture screenshots of your browser
• Inspect DOM elements

Prerequisites

Before starting, ensure you have:

• Windows 10 or 11
• Google Chrome browser
• Node.js installed
• Cursor IDE (version 0.47.5 or newer)

Installation Guide

Step 1: Download the Repository

1. Open Command Prompt
2. Run these commands:

   git clone https://github.com/AgentDeskAI/browser-tools-mcp.git
   cd browser-tools-mcp
   

Step 2: Build the Components

We need to build both server components:

First, build the MCP server:

1. Navigate to the browser-tools-server folder in File Explorer
2. In the address bar, type "cmd" and press Enter to open Command Prompt in this location
3. Run these commands:

   npm install
   npm run build
   

Next, build the middleware server:

1. Navigate to the browser-tools-mcp folder in File Explorer
2. In the address bar, type "cmd" and press Enter
3. Run these commands:

   npm install
   npm run build
   

Step 3: Install the Chrome Extension

1. Download the extension from here
2. Extract the ZIP file
3. Open Chrome and navigate to chrome://extensions/
4. Enable "Developer mode" using the toggle in the top-right corner
5. Click "Load unpacked"
6. Browse to the extracted extension folder
7. Select the folder and click "Open"

Step 4: Configure Cursor

1. Open Cursor IDE

2. Go to Settings (gear icon)

3. Navigate to Features

4. Scroll down to MCP

5. Click "Add new Global MCP server" with these settings:

   {
     "mcpServers": {
       "browser-tools": {
         "command": "node",
         "args": "C:\\path\\to\\browser-tools-mcp\\dist\\mcp-server.js",
         "enabled": true
       }
     }
   }

   Note: Replace C:\\path\\to with the actual path to your repository location (e.g., C:\\Users\\YourName\\Documents\\browser-tools-mcp). Make sure to use double backslashes in the path.

Running BrowserTools MCP

Step 1: Start the MCP Server

1. Open a new Command Prompt window
2. Run:

   npx C:\path\to\browser-tools-mcp\browser-tools-server
   

   Replace C:\path\to with your actual path.

Step 2: Start the Middleware Server

1. Open another Command Prompt window
2. Run:

   node C:\path\to\browser-tools-mcp\dist\mcp-server.js
   

   Replace C:\path\to with your actual path and use node not npx

Step 3: Set Up Chrome DevTools

1. Open Chrome and navigate to any website
2. Open Chrome DevTools by:
   • Pressing F12, or
   • Right-clicking on the page and selecting "Inspect"
3. Look for the "BrowserTools" tab in DevTools

Step 4: Activate in Cursor

1. Open Cursor IDE
2. Go to Settings (gear icon)
3. Navigate to Features
4. Scroll down to MCP
5. Find "browser-tools" and click the "refresh" button next to the "enabled" toggle

Testing Your Setup

To verify everything is working:

1. In Chrome DevTools Console tab, type and run:

   console.log("Test message");

2. In Cursor, ask your AI assistant:

   Can you check the browser console logs?
   

   The assistant should respond with your test message.

3. Try a screenshot command by asking:

   Take a screenshot of the current browser tab
   

Troubleshooting

Path Issues

Windows paths can cause configuration problems. Make sure to:

• Use full, absolute paths in your Cursor MCP configuration
• Use double backslashes (\\) in JSON configuration paths
• Consider using forward slashes (/) as an alternative
• If still having issues, try putting the path in quotes

Connection Issues

If Cursor can't connect to the browser:

• Make sure both servers are running
• Confirm the Chrome extension is installed and active
• Try refreshing the MCP connection in Cursor settings
• Restart Chrome and Cursor

Conclusion

Special thanks to @sarvsh_twt for contributing to this beginner-friendly guide and adding some humor to make the installation process more enjoyable!

[ZelunZhang]

thanks man, but i think it is broken for mac cursor 0.47 as well. do you have any guide for this?

[sarvesh-astrophile]

Sorry but I don't have mac machine, ask in community

[QLi007]

the chrome extension shows the BrowserTools MCP 1.2.0 error, Error validating server identity: TypeError: Failed to fetch

[sarvesh-astrophile]

see if you are using updated extension