In this guide, we’ll cover:

• What Browser Tools MCP is and why it’s useful
• Key features and benefits
• How to install and set it up
• A step-by-step demo of its auditing tools

What is Browser Tools MCP?

Browser Tools MCP is an MCP server integrated into Cursor. It enables developers to analyze and optimize web pages without switching applications, making the development process faster and more efficient.

Key Benefits

• ✅ Seamless IDE Integration – No need to leave Cursor to audit your website.
• ✅ Voice Mode Support – On Mac and Windows, this makes workflow hands-free.
• ✅ Advanced Auditing Tools – Run accessibility, SEO, and performance audits effortlessly.
• ✅ Automated Fixes – Cursor agents apply suggested improvements automatically.
• ✅ Screenshot Tool – Helps track changes and debug UI issues efficiently.

Features of Browser Tools MCP

1. Auditing Tools

These tools evaluate your entire webpage for issues related to:

• ✔ Accessibility – Checks color contrast, keyboard navigation, and more for WCAG compliance.
• ✔ Performance – Identifies bottlenecks slowing down your site.
• ✔ SEO Optimization – Analyzes metadata, headings, and link structures to improve rankings.

2. Console & Network Tools

• ✔ Console Logs & Errors Tool – Captures browser console messages.
• ✔ Network Errors & Logs Tool – Tracks API requests and responses.

3. Screenshot Tool

• ✔ Takes automated screenshots and inserts them into Cursor.
• ✔ Saves them in custom folders instead of the default downloads location.

4. Select Element Tool

• ✔ Selects any element in the browser and imports it into Cursor.
• ✔ Makes modifying frontend components much easier.

How to Install Browser Tools MCP

Step 1: Install the MCP Server in Cursor

1. Open Cursor and go to the MCP settings.
2. Copy the installation command from the GitHub repo.
3. Paste it into the MCP dojo file.
4. Cursor will automatically format the command and add the MCP server.

Step 2: Install the Browser Extension

1. Download the Browser Tools MCP extension (for Chrome-based browsers).
2. Open Chrome Extensions → Load Unpacked.
3. Select the extension folder and install it.

Step 3: Link Browser to MCP Server

1. Copy the connection command from the documentation.
2. Open a terminal and paste the command.
3. The server will install necessary packages and start running.

Once installed, open Chrome Developer Tools, go to the Browser Tools MCP tab, and you’ll see all the tools available.

Demo: Running an Accessibility Audit

Step 1: Identify Issues

We tested a Family Manager App and found contrast issues in the UI.

Step 2: Run an Audit

Used Cursor to run an accessibility audit. The tool analyzed color contrast and identified the main problem.

Step 3: Apply Fixes Automatically

Cursor made adjustments to the frontend based on audit recommendations. Another audit confirmed the contrast issue was resolved.

Step 4: Validate Fixes with Screenshots

Took before-and-after screenshots using the MCP Screenshot Tool. Cursor automatically inserted screenshots for better visibility.

Final Result: The UI was improved, and the accessibility issues were fixed efficiently.

Configuring the Screenshot Tool

1. Create a custom folder for screenshots.
2. Open Browser Tools MCP settings in DevTools.
3. Set the new folder path.
4. Enable “Auto-insert screenshots” so they appear inside Cursor.

Using the Select Element Tool

1. Select an element in the browser (e.g., a button or div).
2. Use Cursor’s “Get Selected Element” command.
3. Cursor retrieves the React component or HTML structure for modification.
4. You can now edit the element directly in your code.

Final Thoughts

Browser Tools MCP revolutionizes web development by eliminating context switching and automating tedious tasks. Whether you’re auditing your website, debugging issues, or optimizing UI components, this tool makes the process faster and more efficient.

🚀 Ready to try it? Install Browser Tools MCP today and transform your workflow!