MCP Servers Create Better Code in Cursor AI
Let's learn how to use Cursor AI📅 2025-04-12
Transcript
[00:00] Let me show you how we can start improving our cursor AI outputs with Zapier MCP. Welcome back, y'all. In today's video, I'm going to show you how to set up a very specific action in order to ensure that when we do more complex workflows with Cursor, such as setting up an API endpoint to subscribe a user to our mailing list, we get accurate code that actually works. The steps and processes I'm about to show you though, could be applied to anything when it comes to coding and leveraging this very specific action that I'm about to show you right now. So on a service level, you're going to learn programmatically how to subscribe a user
[00:31] to a mailing list like Mailchimp or Mail Bluster. But deeper than that, you're going to get better code outputs when it comes to cursor AI. So let's go and do this video. Today's video is sponsored by Zapier. As you already know, me and Zapier have partnered up and we've been doing a ton of different videos when it comes to automation AI and everything we'd want to do with it. This is going to be another video on Zapier MCP. If you want to learn how to actually set this up, you're like, Corbin, you jumped too fast. Like what even is all this? Check out the description down below. Click that video. In 7 minutes, I show you how to set this all up. But now, in this video, I actually want to show you
[01:02] a realworld use case that's going to help you out. So, real quickly, I'll go ahead and leave a link to MCP as well. So, you can just go ahead and click, you know, create your MCP server to integrative cursor. It's very simple. Simply clicking cursor here, scrolling down, hit copy here. And I'm going to obviously rotate my MCP server. So, you can try the link if you want to. It's not going to work. Obviously, you hit edit here, paste that, and you're good to go. So, you get access to this page. Command shiftJ or simply just go to your cursor settings, and it's going to be
[01:32] the MCP tab. Although, in this video, let's go ahead and set up that very specific action that's going to improve your code. To do so, we're going to do edit MCP actions. Once here, this is where we're going to set up all of our actions that gives our ability to do cool stuff within cursor, cloud, windsurf, anything like that. This is an action we did in our previous tutorial that showed you how to create an email automatically. For now though, we're going to add new action. Now, the action we're creating today is going to give cursor the ability to actually search the internet, but more specifically search the internet for API documentation. Now, obviously, this
[02:03] logic can be applied elsewhere, but the idea is this. When coding with AI, sometimes the AI is trained on old data, which in most cases isn't that big of a deal. But with API documentation and our ability to integrate external APIs in our web apps or software, it is a big deal. Therefore, let's give Cursor the ability to search the internet, but more specifically search the internet for API documentation and do all the heavy lifting when it comes to integrating thirdparty apps within our web apps or softwares. So, to keep it simple, we're
[02:33] going to do web parser. Web parser by Zapier. What this is going to do is going to give cursor the ability to parse very specific pages. We're going to say URL to parse. We're going to have AI guess that because depending on whatever API documentation you're working with, it's going to change. Whether that is Mailchimp, Mail Buster, we have other options here, but for the most part, we don't have to care. I'm going to rename this to API helper. Why? Because this is going to be my API helper. Enable action. Once we enable action, you'll see it is checked right there with that little bull. If I come back over here and I reload, there we
[03:05] go. We've officially added our new little tool. Let's actually use it. Coming over to my app.js, JS. I have a nice little React application here. Right now, we are rendering this. So, actually to render it, all we got to do is do npm start. So, I'm going to come over to my terminal. I'll jump over here and we're going to put in npm start. If you want to learn more about this whole situation, like how to create a React app, make sure to check out this channel, npm start. Once we do that, it's going to render our nice little UI. And I just made it very simple, right? So, tech stack newsletter, get your latest updates on modern technology trends directly into your inbox. Enter
[03:37] email. So, this is just all this code right here. And then obviously the CSS is what makes it look very pretty. We like it pretty. And from here we're going to add the functionality of handle submit because right now when we do the email here, nothing happens, right? We're not connecting to anything external. Therefore, let's leverage our new little Zapier MCP tool of API helper. The next question is what API are you even trying to integrate? Right? In this context, this is going to be a newsletter CRM. Let's collect some emails. Let's send out information through that means. The idea here is
[04:08] that are you using Mailchimp, Mail Bluster, everything above the board here, I personally use Mailbluster. So that's what I'm going to show in this example. But don't worry, the steps and processes you learn here. Just change Mail Bluster to whatever API documentation you care about. Just change the name and you'll be good to go. Let's proceed though. So the idea is this. First off, make sure it's enabled, which we did earlier in the settings. Next, let's prompt it. So for this app, I want to add my email service to create a new lead. Here I use mail bluster and I was wondering if you could help write the code to do this call correctly. I
[04:40] have the API key and let's use the action of API helper in MCP. Typically this kind of dictation make sure to include so it doesn't go down a rabbit hole and identifies to actually use that MCP action. Now the next thing you want to do is provide the relevant code that you need to add this API call to. In this context it's just the handle submit, right? So this is just going to be the button. I'm going to simply just copy this and then paste it. And then the way cursor shows you pasting code now is like this 10 to 15. 10 15 being the lines of code right here. So let's
[05:11] hit enter and see what happens. When using MCP tools, it's going to identify. Okay, we're using API helper. I like it. Run tool. And here we go. So what this action did is essentially went to the API documentation from Mail Bluster, found specifically the create lead documentation, took that information, contextualized it, and then gave me the relevant code that is going to work in this application. So instead of me having to search through the internet and just go through a bunch of different links, it went to this page automatically, it found all this information here for creating that new
[05:42] lead and put it back in my cursor chat. As a side note, if something happens and there's an error in this process, always just reference the underlying API docs, right? Like actually go to them and see if there maybe is a nuance or a slight change in the code than what cursor provided. I mean, this is just troubleshooting 101. For now, though, this is good. Let's hit accept file. Let's actually look at the code here. So, we have first off, is it using the correct endpoint? We got API/ leads. There we go. API/s. Correct. It is a
[06:13] post. That is correct. The authorization is bearer and you as you'll notice that it requests an API key just to make sure they even have access to the account. That's simple. We'll set that up together. Following this, it's going to send relevant data, right? So, we're going to need the email and whether or not that individual is going to be subscribed or not. Obviously, if they're putting in their email, they're probably going to be subscribed. So, we're going to put true. Just for context, when looking at API documentation, what you need to put in that payload is only what's required. So in theory, if you just accept an email, email yes and then
[06:45] subscribed yes. Everything else is optional and you don't have to send them the payload. If you want to proceed, eg in that little react app, if I had a first name and last name box right there, then you know we can send them the payload as data as well. First things first though, let's see if this even works, right? We just got AI code. We use our little API helper from MCP Zapier. Let's check it out. What you'll notice is a EMV file. If you don't even know what that is, this is a secure way to have very high-risk variables within front-end code. This is also used in the
[07:15] back end as well, but we're going to use. And in order to do that, just going to hit new file here. EMV. You'll be good to go. I've already created one, but that's what you got to do. Very, very important. Make sure the is outside your source. It's not going to work if it's inside your source folder. Go to EMV. What you'll notice here is that cursor is very nice. They've already said, do you want to add it? I'm like, yes. And let's add our API key. This is very standard. Simply go to whatever software/web app you're using, type in the software's name, API keys, and then
[07:46] it will show you like a little tutorial like how to access API key. I'm going to say create new API key and we'll name it test. Here we go. I'm going to copy. I'm going to delete this anyways so you can see it. But simply I'm going to paste it here. I'm going save and let's go back to the app.js. So this is referencing the env.react app mailb bluster key which is this variable we set here. In addition, it's very important for you to understand for reactbased apps, you need this first two words here. You don't add that and you just do mailb bluster API key, it's not going to work. And one thing we got to do because we just set all this new information and
[08:17] specifically because we set that EMV file with that variable is we're going to rerun our npm start. So to stop running the emulator, it's control C and then just simply the same command. If you run into errors here, let's say you submit your email and it's giving you an error obviously for Google Chrome. Hit inspect and then go to console and here is the magic of debugging. Simply open up console like this and then ask cursor here for console logs. It's very simple and it would add different console logs depending on the type of error you
[08:48] receive. For now though, let's just see if this works. So I can't show my actual leads obviously for privacy reasons. But what I'm going to do is I'm showing you right now that when I search contact at webcafeai.com, no leads are found. So let's create that lead through API. So, coming over here, I'm going to simply enter in the email and hit subscribe. Before I do that, make sure to subscribe to this channel as well if you found value so far and leave a like. Let's check it out. And boom. Coming back over to Mail Bluster here. We've successfully added a new lead through this method. So, there we go. While leveraging Zapier
[09:18] MCP within cursor, we are now getting better code outputs and more specifically when it comes to API documentation because as you probably already know, having the most up-to-date information when it comes to API is fundamentally very important. I'll see you in the next video. API helper. Two random videos. That's my face.