All right, folks, so welcome to this second tutorial on how to use MCP a lot of you actually asked to see practical use cases of MCP. Does this sound familiar? You know, you are busy, vibe coding, think everything is going well so far, cursor says it's done, and so you load up the page, and you are greeted with something like this.
Something doesn't look right, so what do you do? You open up your console, and you're greeted with this. Even more logs.
No problem, you say to yourself, I'll just go over the cursor, and copy and paste all of this stuff, paste it here, and say, fix this piece. And then you hope that it ends up fixing it for you. Well, that might work for you, but that's pretty manual, right?
But worse still, what happens if you do this? You're like, uh oh nothing's showing up in the logs. So what do you do?
You scratch your head and you try to figure out what are the hotkeys to take a screenshot and you find your favorite hotkey take a screenshot like this. Switch over back to cursor, paste it there, and you say, fix this please. What if I told you there was a way to actually automate all of that checking the logs, and taking screenshots, and popping it into Cursor such that it fixes the issues without you having to do it manually.
Well, that's what today's tutorial is about. So browser tools is a free and open source server, and it allows you to do several things, like check the consoles and locks to see what went wrong, or something doesn't look right, take a screenshot. I'll be showing you how to get it up and running in cursor this will allow you to pretty much 10X your workflow.
You don't have to do manual copying around anymore, you'll be able to allow Cursor to handle all of this for you. So let's get started. You just have to this github page here clone the entire project.
Git clone here then change and go into the folder. Once you're in the folder, and we're actually going to open this up in cursor. You will see that there are three directories.
If you haven't seen my previous tutorial, uh, do check it out because it helps you understand the building blocks of what an MCP server is. But I'm going to go straight into what you're going to have to do. so the first thing that you need to do is that you need to go to your Chrome browser and go to Manage Extensions.
In this top right hand corner here. You're going to have to click Developer Mode. And this will allow you to load unpack.
Navigate to the BrowserTools MCP repository that you just cloned. And within that, click on Chrome extension and click select. You will now have a BrowserTools MCP server, Chrome extension.
Now that's step one done. The next thing you want to do is that you want to run the browser tool server, not the MCP server, but the browser tool servers. And I'll show you just how.
Just run this following command, it will ask you whether you want to install the following packages. You can click yes to proceed. This will actually run a server on your local machine that will connect to the Chrome extension.
If you switch back to your browser now. And you open up the console, you will now see that there's a browser tools MCP server. You can actually do things like capture screenshot and you can verify that this is working if you go back to cursor as well.
You can see it is saying, receive screenshot request and saving the screenshot to this location. And you can actually just open it up so it's actually taking a screenshot for you. Now that you know that the functionality is working, so now you've got a Chrome extension running and step two is done.
The third thing is to integrate it with your IDE. Like Cursor. this is where the MCP server comes in.
What you want to do is that you go to, you go to cursor, within cursor, you do command shift p and go to cursor settings. Scroll down to mcp, and then you do add a new mcp server. And the way you want to do it, you can call it anything you want.
You can call it browser, tools, mcp. Make sure that this is command. You want to use the following command which is effectively just npx agent ai browser tools mcp, and that's just the version.
And if you add it in, just wait for a few seconds, and then you will see this turn green, and you will see that it has all of the following tools. Including getting console logs, getting errors, and taking a screenshot. I'll show you how you can actually use Cursor, uh, to be able to do this.
let's switch to, uh, the tutorial project. You can, uh, get a copy of this project if you go on to my GitHub. All the source code is there and you can replicate this as well.
You can follow along with this code, but you don't have to. First thing I'm going to do is I'm going to open up my console, and I'm going to do chaos log here, so it's just going to throw a bunch of error logs into, the console, And what you can do in within Cursor now Is that you can open up Composer So, Command I close this on the side And you can say gather error logs and fix them. You can see, it's actually going to call the MCP tool, get console errors.
It will run it and it's actually been able to get all the errors that are appearing on Chrome Into cursor and it's going to try to get some network error logs right now, which we don't really need and now it's going to get the console logs and it's getting the debug logs and the non error logs as well And now it's going to take a screenshot of the application for you. And it says screenshot has been successfully saved. Now it's going to look at all the errors, and look at all the screenshots.
And it's going to fix it for you, all automatically, without you having to do anything by yourself. You can see why an MCP server is so useful because without it, you wouldn't have been able to ask the AI to do all this for you because it would have no access to your browser and you have no access to your logs and you won't have any to take screenshots as well. So hopefully as this has been a useful and a whirlwind of a practical use case of an MCP and, why you can help 10 x your workflow as a vibe coder, and hopefully this helps you understand a little bit about the hype of why MCP servers are useful.
One of the bonus things that you can do as well is you can actually put this as one of your cursor rules. So you create a new folder and call it cursor, and then create a folder within that. And you call it rules.
And just name this debugcommands. mdc and this will actually pull up project rules in cursor and you can give a description, this tool, performs debugging steps for applications and so what you can do is that you can do star star dot. ts.
Right. So this, this applies to everything. And what you can say here is that when I say debug,, gather console logs and take a screenshot of the app to help it.
Fix issues All right, Now that you have this you can actually rather than specifying a long command You can actually just say slash debug and it will automatically know that it needs to debug your application and now it knows that there's a custom command called debug commands and now it will automatically also use the MCP's tool to take a screenshot. So he's taking a screenshot. So he's taking a screenshot right, and then now it's getting the console logs It's basically doing everything that we did just now but with one single command.
So this is today's bonus tip as well to save you the trouble of having to prompt the LLM to do it you can do the same thing in Windsurf using . windsurfrules, but Cursor's rule system is actually pretty powerful, and allows you to automate this. Now this is some extra material.
If you're on Mac or Ubuntu, this is actually pretty smooth. But if you're on Windows, this becomes quite complicated. Uh, this becomes quite complicated if you're using Windows subsystem for Linux or WSL on Windows, this actually doesn't work.
If you go into Cursor, and you try to put in this command, npx, it will actually not work. So I'm going to show you how to get this to work. So open up a terminal, right?
So what you're going to do is that you're going to be compiling the server yourself. Go to browser tools server Okay, and then just do npm install And then you do npm run build you will see that there's a new dist folder. And you can do node dist slash browser connector dot js.
And now this will be running. And so you don't need to use npx for this. That's the aggregator server.
And now you want to add the mcp server. So now you open up another terminal, go to your browser tools mcp folder, and do npm install, same thing, npm install, and then you do npm run build, after you run npm run build, you will see the same thing. There is a, dist folder and within the, this folder there's an mcp-server.
Js. You just type PWD to get the path. Copy the path and then add a new mcp server and call it browser tools mcp local using a local build rather than using npx Make sure that this is command and now you type node put in the path and type mcpserver.
js, which is the file in now you have the mcpserver loading locally, and you will be able to do exactly the same things that we saw earlier. So let's just give this a shot again, right? I'm just going to refresh this and, um, take this off.
And I'm just going to do a bunch of logs and I'm going to do exactly what I did just now. But because we now have our command, I'm just going to say debug. And exactly as before, it's going to look into your commands and know that you have an MCP server.
And then it's going to then use the MCP server, and it does exactly the same thing earlier, but you can avoid npx entirely. So this is the actually the workflow you can do to run everything on your machine without using NPX and this will allow you to get it to work on Windows. It's exactly the same workflow, but you just use the paths in Windows.
To get it to work with WSL, you have to do everything outside of Ubuntu because the browser and cursor and everything else has paths that are relative to your, Main windows installation. As of this version The cursor theme hasn't actually fixed this yet as far as I know. Hopefully this has been a useful tutorial if you enjoyed today's video do give it a like subscribe to my channel for more tips on using AI tools, game development, and MCP servers.
I'll be putting out a lot more content, so let me know if there's anything about MCP servers that still confuse you, and I'll try to create something that will solve that. Alright, see you next time. Thanks very much.
