Transcription
Hello, I'm Mike, and in this video, we're going deeper down the rabbit hole with MCP. Imagine connecting your AI coding assistant cursor to anything like databases, GitHub, and even enabling it to see browser errors and fix them on the fly. That's the power of MCP. Stick around to the end, where I'm also going to try and build my own MCP server and see how easy or potentially hard it is. Don't miss that.
But first off, I want to answer a question I've been asked a lot in my community over the last week or so: The difference between MCP and API. Hasn't API been around for ages and allowed AI to connect with all kinds of different things across the internet? Why do we need MCP?
Well, think of it like this. Imagine you're trying to hang a picture on a wall, right? And you've got nails and screws sitting in front of you. The AI using MCP would think exactly like a human. Say, "Yeah, nails and screws. I think I'll use nails because that's really easy to do." But then imagine you take the nails away, and the AI looks again using MCP and says, "Well, there aren't nails, but no worries, there are screws. I think I can put some rule plugs in. It's fine. I'll sort it." Easy with an API, a traditional API, it's a little bit more rigid and a little different. Basically, it's programmed to expect exactly the tools that you specify. So when it goes, "I need nails to hang this picture," if you suddenly take those nails away, they're not there. So the AI goes, "I don't know what to do," and errors out. Game over.
By the way, thank you to Zapier for partnering with me for this video and helping me to bring these amazing tools to you. And by the way, if you've not seen the first video I did on MCP, go and watch that one. First, it dives deep into MCP. This one is all about AI coding, and you're really going to like it.
Okay, I'll start by going to the model context protocol GitHub, which, of course, I'll link down below with everything else I mentioned in this video. So check the description. And here you will see a bunch of servers they've made. I'm going to use a database server first called PostgreSQL. It's a very popular database. I'm actually using it on one of my apps, so I'll show you how it works.
Let's go into this, and all you really need to start with is the name of the database. This is listed under the MPC's instructions. So I'm going to make sure to copy that. And then I'll head to cursor. Okay. Over in cursor, I'm going to go to the settings in the top right. And I'm going to look for MCP. Then I'm going to click "add new MCP server." And this will give me the opportunity to type in different details. So I'm going to call this one "database" to keep it nice and simple. And then the command to run will be "npx -y." And then the name that we copied earlier. So far we've got this, but it's very important to put the database name here at the end of the command. So make sure you've got an up and running Postgres database. Now, luckily I have, I've got it running locally. Here's all of my config for the local version of Comment Genie. That's my AI-powered YouTube comment helper app, and I've got the database URL here. As you can see, with a super safe username and password there. But it's all local, so it's not exposed to the internet, so I'm just copying that URL. Get that out of the way, and I'll paste that URL to my database at the end. Click "add," and boom, we're green. Now we've got a tool to query the database.
Now it's very important to note that here it says "run a read-only SQL query." The official PostgreSQL database integration from model context protocol only supports read-only. I suppose that so that we don't mess everything up if we're just experimenting and write a load of data to our database. But I'm sure there are other versions that will allow you to write. And this, of course, will be really powerful when you're coding an app. So here I'm just going to go in, and I'm going to say to my AI agent in cursor, "Check the comments I've got in my database." Okay. You can see it says, "I'll help you check the comments in your database." It already knows it's calling an MCP tool, and it's running an SQL query, which is way above my head. I'm so glad it can do that for me. And so I simply say "run tool," and it's going to do that. It's already pulled down all those comments. Look at that. It's all there from my database. And soon the AI will come back to me inside cursor and summarize everything it can see. I can see 19 comments. All comments have a March 2025 date. None of the comments have been replied to yet. It's giving me all kinds of details. Even summarizes some of technical questions about Premiere Pro and Audacity, feedback on tutorials. This, by the way, is my other channel about audio that it's pulling from, general appreciation comments and questions about audio editing and voice acting. I'm pretty happy with that as a starting query to my database.
I'm on a roll, so I'm going to go again with this. And I'm going to ask another question. "Query my database and find the seven most recent comment authors, please." Okay. There you go. You can see it's been done. I'm not even going to look this time. I'm just going to run the tool. And look at that. It made an error in its first query. Now this is where, as I said, MCP allows the AI to adapt to the tools it has. It's now saying, "Well, it was an error," at an API, would have just stopped and said, "There's an error. Nothing I can do here." It's trying to adapt. So let's run it again. It's now trying to figure out where it can find the authors of comments. Okay. It's come back now. I can see the author column is named "author." Let me modify the query. This is awesome. Oh, and it's noticed it needs to include the timestamp. This is modifying on the fly, something that would not get done with an API is getting done with MCP. There you go, it's given the correct query. Finally. And look at that. It's pulled in my latest comments on my YouTube channel like that. That is absolutely stunning. That is MCP superpowers for AI in action right there.
Okay, seeing as we're on a roll, let's go to the GitHub integration. This is a GitHub MCP. And this will be really good because GitHub is great for saving your code and version controlling it. So if you're making a big app and you don't want to mess things up, keep uploading the code to GitHub. That's essentially how you use GitHub, but MCP will make it even easier. Let's have a look. So here we've got an overview, a tutorial. You've got loads of superpowers. Read and write to GitHub, which is really cool. That looks overly complex, but all you need is this: Just this one line here, and that again is the name of it from the MPC's commands. Oh, and you'll also need a GitHub personal access token. So I'll make sure to set that up too.
To be able to set up your fine-grained token, you'll go to GitHub. You'll go to your settings over here. You'll scroll all the way down until you find "developer settings." And then here you'll see you've got "personal access tokens," and you'll want "fine-grained tokens." Then you'll want to generate a new token. You'll want to give it a name. So let's call it "MCP." You give it an expiration date. So I'm going to give it minimum seven. You can give a description if you want. I'm going to give it access to all repositories. Now this is really important. Permissions. We have to be very careful on the permissions we give, as this could have devastating consequences on your code and your GitHub account if you give too much access. So I'll just give read, write access to everything. That done, you should have a command that looks something like this. First of all, you've got to put the GitHub access token at the start. Then "y," and then, of course, the address to access the GitHub MCP server.
Now we'll go ahead and add a new MCP server. This time I'm going to call it "GitHub." And then we'll use that command where I've actually included my real personal access token to GitHub. Let's add it. Here we go. Added, green. Look at all these rights we've got. We've got so many rights to do things on GitHub. My mind is blowing. But how can we practically use this? I'm talking to you. If you've never used GitHub before and you want to get a feel for how to use it, but now have I do all the hard work for you? Let's try that. "Make me a readme file saying hello with loads of pretty emojis and nonsensical stuff. And then I want you to make it into a git repo that's on my GitHub, publicly, please." Okay, first of all, it's creating that amazing nonsensical Readme file: "The most amazing repository ever. I love clothes, creativity. Welcome to the party." And now we have that. It needs to call the MCP tool to create a repository. Now again, this is where MCP is powerful. It made an error that there was something bad. That's because we didn't initialize the git locally. And it noticed that. So let's initialize it. It's doing it. It's making it into a repo. Okay. And the tool told me it's done. So did it work? Let's refresh my GitHub profile here at all. Look, we've got. Yes. "MCP cursor," which I've spelt incorrectly, but inside it, I've got "The most amazing repository ever. Welcome to the party." Oh my goodness. Anyone who's seen this will think I've gone completely bonkers, but you can see just two minutes ago it was committed. So that's all done using a brilliant MCP tool. And I didn't even need to know how to use git there. It's, it's done it and backed up my code for me. That's cool.
Oh, by the way, if you're struggling with MCP, I've got a great tutorial in the premium section of my community. Link down below from icon. Install it on Mac or PC to, I'm getting server transport error or other problems connecting an MCP server. All that and more answered in my community, linked up down below.
Okay. We'll get a little more advanced now with this next and final MCP tool for AI coding tools such as Cursor, and that is browser tools. Have you ever created an app and then struggled when something doesn't quite work the way you want it to? Well, the browser tools MCP can fix that. Let me show you how.
Okay, here I am with my AI comment assistant, Comment Genie. It goes through all the comments on my YouTube channels and generates helpful AI replies that I can adapt and post. So there you go. It's got some great comments suggestions here. All is looking good. I've been using this a while. It works really well now. Usually when you get a problem with something you're creating, you'll find it in the console. So how do you find that in your web browser? This comes up in most chromium-based web browsers such as Chrome. That's what I'm using. Right-click, click "inspect," and then make sure you click over to "console." Okay. You'll see. Good. There's absolutely nothing here, meaning no errors. With my app, it all seems to be working, but I am having an error with something. When I try to regenerate a comment with AI, when I click "regenerate," I get this pesky little error there, and the more times I click "regenerate," the more times you can see that I get an error appearing. So this is obviously clearly a problem that I need to fix. And in the old days, I would open my app, test it in the browser, copy all the console errors, paste them into Cursor, and try and get them to fix. Well, browser tools MCP fixes and automates all that.
Now you're going to see over here, these are the install instructions. So a little more complex than the previous MCP servers we were using, but it's pretty easy to get started. And you'll see the requirements are just having Node. I've talked about that in my previous video. Google Chrome or equivalent chromium browser and an MCP app like cursor. Okay, brilliant. We've got all that. So now I'm going to need to clone the repo for it to work. So we'll just open the terminal over here in Cursor. And then in the terminal, we'll paste in that command which should clone that repo for us. And it's done it. It's actually cloned it into Comment Genie, but that doesn't matter. We're doing this temporarily, okay. Now we need to install the Chrome extension, which will be located here. So if I actually look in the browser tools MCP that we just cloned, you'll actually see "Chrome extension" is listed there. So let's get that into Chrome. Now over here in Chrome, you're going to go and need to manage your extensions here. Make sure "developer mode" is on. Then you'll click "Load Unpacked," and you'll go through to wherever it is. "Comment Genie browser tools MCP," yes. "Chrome extension," select, boom. It's as simple as that. Browser tools MCP is now installed inside your Chrome browser, ready for action.
Oh, and one last thing we're going to need to do to make sure this tool is working is run this command from anywhere on our computer. And essentially, it will install everything that's needed to communicate with our web browser. Now I'm going to copy this MacOS command, which is listed quite conveniently down here. But they have Windows and other things supported there. So I'm going to copy that. I'm then going to go into the settings of cursor up here. Close my terminal so I can see things, go to MCP, and then add new MCP server. And we'll call this one "browser tools." And the command to run will be that one we just copied from the install instructions. Give it a moment to come up. It's yellow at the moment. Yes. It's green. Woo! And when we look at what this one can do, it's got quite some stuff; it can get the console logs. That's what I was just showing you. Network errors, take screenshots, WIP logs. It can run SEO audits. It can debug; it can do so much. So any problems from speed to SEO to errors with your app, browser tools should be able to fix it. So let's try it. "Every time I try to regenerate a comment reply in the dashboard, I'm getting a console error. Can you check it and fix it, please?" Okay, look at that. "I'll help you investigate and fix," and it's using the MCP tool. "Get console errors." Let's run the tool and see what happens. Okay, look at this. I see the issue now. It's actually going through, and it's actually regenerated and changed a part of the code. It thinks it needs to change in order for my app to work. Now it did all of this without me needing to hit a web browser or test my app myself. You can see the power of browser tools MCP for coding tools like cursor. Let's see if it fixed the issue. Okay, over here in my troubled Comment Genie app, browser tools MCP is debugging with me live. You can see I've got comments here that need responding to and an empty console, but the question is, if I try to regenerate this comment, does it work? Regenerating reply, it regenerated the reply. And look at that, absolutely no console error. That was debugged in one shot using the browser tools MCP. I highly suggest you test that one and the others, such as interacting with a git repo and also looking at your database. All the links to all those MCPs will be down below.
Okay, onto the big challenge of the video: Can I create my own MCP server? How easy is it? I'm going to leave it pretty much unedited and show you my process. I've initialized a new host, a project called "MCP Zapier." Essentially, what I want to do is I want to be able to get my MCP server to trigger a zap via a webhook. This will be really cool if it works, because Zapier has over 8000 integrations, meaning I can integrate MCP with pretty much anything that works in Zapier, and it doesn't have to be one thing like clone something on GitHub. It could be a multi-step process, as I can do multiple steps inside Zapier. Another reason why it's a good idea to do something like this is because if you're using an MCP server, it's kind of untrusted. You don't know who made it, who owns it, what the credentials are. With Zapier, you know that all your credentials are nice and safe. And what's more, it can do complex stuff like, oh, auth, that's a headache. I had like a three-day pain trying to figure out, oh, well, they've done all that for you. So you can connect apps like Gmail, your calendar, and really anything that requires advanced authorization in one or two clicks. Let's get started.
Okay. So I'm going to vibe code. "This, make me a basic MCP server, value simplicity. It should expose Zapier webhook as a tool that can be called one way, MCP to Zapier. Use this example code and adapt it for Zapier." Okay. This is really cool. You can see it thought everything through, and now it's getting started to create the directory to make this wonderful integrate. It's creating all the package files and really everything that's needed to make this work. Okay. With that all done, it seems to have done a readme file, and it's just checking the necessary files, and it says, "Great. I've done it. Your Zapier webhook MCP server is ready to go." Look at this. How incredible. Well, let's accept all and see if we can get it working. So I guess I'll start by popping open a new terminal window down here. And then I'm going to run the commands that it tells me to run one by one. So let's go ahead and do that. We'll run these install commands and the build commands as well. Hopefully everything goes without an error. And so far, it is going without an error. This is great. Okay. So to run the server, we need to export the webhook URL and use this node command. Okay, that sounds pretty straightforward. Let's create a webhook in Zapier first. Okay. So over here in Zapier, I'm going to go ahead and create a new zap. And in this app, we'll start off with a webhook that's really easy to get set up. And we need to choose the trigger event. And in this case, it's going to be "catch hook" because we want to catch whatever our MCP server sends. So let's click that, and that's done. Then we go to "continue" and "continue" again. And then we'll be able to test in just a moment. This is the webhook I'm going to be testing with. Before I do anything else, let's select one Zapier action to integrate here. So we're going to choose one action from one of the many actions available. And I think I'll go and choose a Gmail action. Now I've already connected it to my Gmail account. It's really easy to do that. You just simply click and authorize your account. Well, let's choose to, yes, send an email. Let's do that. Okay. And it's coming from me. Let's go to "configure," and we'll say to "boss@creatormagic.ai," and we won't do anything in these fields, which is called the subject. Say "I am working," and then for the body will say, "I am doing work. Smiley face." Okay, pretty simple stuff. But as I said earlier, the best thing about Zapier is I can combine multiple actions from one trigger from my MCP server. Okay, so let's go back to the webhook, and let's copy that webhook because we're going to need it. Okay. So back over here, a lot of complex stuff. Let's close everything down and let's get into our settings and MCP here. And we'll see if just in one shot "zap.webhook." Let's then put in that command. I'm really hoping this works on the first shot. No. And now you're getting me. So I've put the environment variable. That's the Zapier webhook URL, which is the one that I just made in my zap. And then I'm running the node command to run my local MCP server. And if this was published on the web, it would be an MCP command. But this is basically, I can't believe it. In one shot, working, it's got a green light and it's got a tool available. "Triggers a Zapier webhook with the provided data." This is insane. I was really expecting to encounter more errors, but it seems to have worked in one shot. Let's go and test it in the code to chat. "Trigger my Zapier webhook." Let's see if this can actually work in practice. So it's saying, "I'll help you." It's calling the MCP tool. This is a really good sign. Okay. You can see. Great. "The webhook was triggered successfully." This confirms that Zapier webhook URL is valid. Refresh, and yes, success. "One task was successfully run and triggered from cursor using my makeshift MCP server for Zapier." I'm sure you could probably improve on that, and do let me know in the comments or in my community, which is linked down below, if you managed to build something a little bit better. And yes, all is good. "I am working," and I've emailed the boss to say that "I am doing work." So there you go. Just a brief introduction to what is possible with MCP and a no-code tool like cursor. Pretty insane stuff, isn't it?
Thank you so much to Zapier for sponsoring this video, letting me show you some cool tools and try and create my own Zapier Webhooks integration. I think it went okay, but we're discussing it even further in the community linked up down below. Come and join me there, and let's create the ultimate Zapier webhook triggering MCP server out there. I'd love to discuss that further with you. In the meantime, YouTube is showing a video up on your screen right now that you should watch next.