Boost Your Web Development Productivity with Cursor and Browser Tools mCP
In this article, I'm going to be talking about an amazing way to connect Cursor to your browser. If you do web development, this is going to significantly increase your productivity. The tool I'm referring to is the browser tools mCP, and it offers a suite of really incredible tools. It is actually an mCP server integrated into Cursor. In this article, I'm going to show you how to install it and also demo some of the tools in the mCP server.
Features of the mCP Server
The main advantage is that everything is done without leaving your IDE. It's fully integrated, so there's no need to switch between applications; everything happens while you're interacting with the Cursor agent. I highly encourage you to use voice mode if you're on Mac or Windows; it completely transforms your workflow.
So what does it do? * It evaluates pages for WCAG compliance. * It also checks for SEO issues, which is incredibly useful. * It identifies performance bottlenecks. * You'll also get insight into best practices.
Feel free to check out the GitHub repo for more details.
Exploring the Tools
It conducts audits, meaning it checks your entire landing page, website, or whatever you've built. There are different types of auditing tools available.
- Accessibility Audit: Checks for WCAG compliance, including color contrast, keyboard navigation traps, and more.
- Performance & SEO Audits: Analyzes performance, SEO factors like metadata, headings, and link structure, and even suggests improvements.
These recommendations are sent directly to the Cursor agent, which implements the changes for you. No need to manually adjust anything; it's a completely integrated experience.
Aside from these tools, once you've added it to Cursor, you'll get access to tools like the console logs tool, console errors tool, network errors tool, and network logs tool. However, these tools aren't as necessary anymore because the Cursor agent has improved to the point where it automatically captures logs from the terminal and integrates them for you.
But the screenshot tool is still very useful, and I'll show you how to use it. There's a bit of complexity involved, but overall the integration is pretty great.
Installation Guide
This is the GitHub repo for the browser tools mCP server. They've actually given pretty great documentation. However, in the installation section, they specify that the installation details can be found in their own dedicated documentation. If we open it up, we'll come across a page where they've provided a pretty good overview of how to install it.
1. Add the mCP Server to Cursor
First, get this command right here from their documentation. Now, this isn't updated for the latest version of Cursor, where you now have to insert it into the mcp.json file.
What you're going to do is copy it, then head over to Cursor. When adding a new mCP server in your mcp.json file, you'll just go to a new line and paste the command.
Cursor will format it according to the rest of the file format in the suggestions, meaning it'll structure the mCP server entry properly. If you go back into the mCP section in Cursor's settings, you'll see that our mCP has been installed, all the tools are available, and everything is working correctly.
2. Install the Browser Extension
Now, to allow the browser to communicate with the mCP server, head back to the browser tools documentation. In the installation section, you'll need to download their extension.
After downloading it, open your extensions for whichever browser you use. If you're using a Chrome-based browser, the interface will look like this. 1. Click on "Load unpacked." 2. Navigate to your extension folder. 3. Select the extension, and it will automatically be added.
3. Connect the Browser to the Server
After you've installed the Chrome extension, copy this command to connect the browser to the server:
npx @browser-tools/cli connect
Open your terminal and paste the command there. If you're running it for the first time, it will install the necessary packages and then start the server, linking the Chrome extension to your mCP server.
Once everything is set up, open your Chrome developer console. For example, I've opened a web page, and if I go into the "Inspect" tab and then into the "Browser Tools mCP" tab, I can see that all the tools and settings are now available for me to use.
How Audits Work: A Practical Example
What do the audits do? They return a JSON file back to the mCP. It provides results, and based on that, the agents in those mCP clients perform actionable steps for improvement.
For instance, right now we have this "Our Family Manager" app that has some contrast issues. Let's go ahead and fix it using Cursor and this mCP server.
To fix the contrast issue, this is the prompt I gave to Cursor:
Run an accessibility audit and then take a screenshot.
Based on that, the Cursor agent should fix the front end.
First, it runs the accessibility audit test. Then, it takes the screenshot. After analyzing the code, it identified the accessibility issues and correctly determined that the main issue was insufficient color contrast. The test evaluates the front end based on certain parameters, and since it fell short in the contrast parameter, Cursor recognized that this was the issue that needed fixing.
After making those changes, as you can see, it reran the test and took another screenshot. Here's where the screenshot tool really works its magic. This mCP tool automatically pastes the image into Cursor and provides a prompt stating, "Here is the screenshot." Based on that, Cursor continues the process.
Looking at the audit report, it found that there were still some accessibility issues, this time with the calendar's selected dates. The screenshot provided further context, so Cursor kept fixing and iterating. Another screenshot was taken, and when it was returned, Cursor verified that the test had passed. Finally, when the last screenshot was taken, it confirmed that there were no further issues.
Now, if we go into the app, you can see that all the contrast issues have been fixed. The calendar at least looks normal. The UI isn't great right now, but it definitely doesn't look as bad as it did before.
The Screenshot Tool Explained
This right here is the screenshots folder I created, and this is where I want the screenshots to be saved. Let me show you why. If you open inspect element and go into the "Browser Tools mCP" section, you'll find the screenshot settings. The reason I created my own screenshot folder is that if you don't specify where to save the screenshots, they are automatically saved in the default location, which is your downloads folder.
You saw how screenshots are automatically pasted inside the Cursor agent. This is the toggle that enables it. Turning this on allows Cursor to automatically insert the screenshot into the agent and provide the necessary prompt to use it, just like you saw in the previous section.
Another Cool Tool: Select Element
Another cool tool is the "select element" tool. Using your built-in browser tool, select any element you want. Once it's selected, go into Cursor and ask it to "get selected element." This sends a request to the mCP tool. Using that tool, it identifies the selected element, in this case, the React calendar component.
From there, you can modify it or request any changes. The best part is that you don't have to waste time asking it to iterate over the same element repeatedly. This makes the process much more efficient and helps you get your front end ready even faster. Windmill's "wind surf" also has this feature, but it's not available in cursor yet. Until it's added, this is the best option.
Conclusion
That's a wrap. Hopefully, this helped you see just how powerful the mCP server can be when paired with Cursor. It takes a lot of the manual work out of the process and makes everything way more efficient.
