How To Connect Cursor AI with 7,000+ Apps Using Zapier
Let's learn how to use Cursor AI📅 2024-11-13
Transcript
[00:00] therefore for your cursor AI project you now have the ability to connect to all thousands of apps found on zapier by doing the steps I outlined here with the code setting up this type of Automation and boom boom boom we get our data stored in today's video let me show you how to leverage cursor AI to access external services like Gmail YouTube Instagram whatever it may be we're going to be able to connect it now therefore a really easy way to do this is we'll leverage zapier there's over 7,000 different Integrations we can start putting in our cursor AI projects sound good let's jump in welcome back y'all today's video was a special one a lot of people been requesting this I'm going to
[00:31] show you how to basically access any external API you would want easily in your web application or whatever you're developing with cursor Ai and as you can tell from that bottom right corner right there yes zapier called me up again they're like hey we got to do something with cursor I'm like all right I got you so today's video is sponsored by zapier to show you how to do it here's the name of the game we're going to do today first off we're going to be setting up a cursor AI project together this is going to build out a front end in that front end we're going to build out a form in that form's data we're going to send it to a back end like zap you're here on tables you'll be able to see the entire
[01:01] process from Step Zero to step done let's do it let's go ahead and begin come down here to the bottom left click this go to terminal now if you already have a project don't worry we'll jump into how to do everything I'm about to show you later in this video for now this is for people that are starting fresh okay let's do it mkdir this is going to create a directory where we're going to reference all of her code but take a step back I'm going to leave a Google doc in the description down below that goes through every single type of terminal command if you're on Windows Linux or Mac I made this Google doc so I can help everyone one out check it out down below that's going to help you with
[01:32] this first phase of this video if you need help or you run into errors this one we're going to call zap zap enter I spelled that wrong it's m KD i r zap zap enter there we go next to navigate to it we're going to put CD zap zap okay so far so good this will be different commands in Windows so Linux so make sure to check out that Google doc let's do the next step here the next line I'm personally going to do is npx create react app this going to allow us to create a front end or basically a website with code if you run into an air here it is a extremely high probability
[02:02] high probability high probability you don't have no JS installed check out that doc again install no JS hit enter we are creating a react app top 10 reactions once you get that little message there that says happy hacking I've successfully hacked your computer no I'm just joking we're going to go ahead and open up the folder here we're going to hit open folder simply navigate to the folder that you just created so mine was called zap zap so far so good okay let's go ahead and open the source here this is going to be app.js we're going to go ahead and just run this in our Local Host this going to allow us to
[02:33] visually see this on how it'll look on a web browser to do so we'll go ahead and open up our command line again down here terminal and in order to do so all we need to put is mpm start mpm start so with that launched and loaded we get this right here and just for reference of what this even is watch this notice how this says edit source app.js and save and reload if we come to the code here and just simply delete that and say nah I'm good and save that that it will automatically show up here instantly this is the perks of Local Host
[03:03] development this is all run on your laptop here or desktop or your phone I don't know about that but let's keep going here the name of the game of what we're doing here today though is I want to show you how to give data on a front end like this and put it to zapier therefore creating a really nice backend type of relationship so the first thing we need to do is let's go and create a form command a command l contr l command a we're going to use cursor Ai and it's going to code it for us so as context what we want to do is we're going to do the Js file but we're also going to put in the CSS file the CSS file is what makes it look pretty so we want to make
[03:35] it look pretty the appjs is the structuring so I'm going to say okay for this code make a form requesting an email name business name make this UI modern and dark theme obviously you can request whatever you want in this context I'm just here to show you how to connect the data here so I'm going to hit enter so far so good so we got a JS file here I'm going to hit copy let's go and paste it over this is what it looks like without the CSS styling so obviously I mean this was like 2001 this would pass this would pass it's not 2001 though so we're going to come over here to CSS we're then going to come over to CSS here and then paste over and there
[04:06] we go looking pretty good so far step one of this tutorial is done let's go and connect this to zapier now what's super cool about what you're about to learn right now is this can be applied to anything that zapier can connect to and they have a lot you can connect to over 7,000 reasons why this is cool let's create zap create zap and the way we're going to do this the way we're going to communicate between the application here and Z here is we're going to use a web hook with this web hook here we're going to say catch hook no this is not boxing we're not throwing right Hooks and left hooks we're going test this trigger here and this is going to basically find nothing because we haven't set it up yet but now we have our nice little web hook URL this is
[04:37] going to allow us to pass data from our web application to zapier therefore now that we have this let's set it up so we have some test data to play around with I'm going to copy this coming back to our application here really simple stuff here we're going to go and chat with app.js all logic EG the stuff the application will actually do will incur in the JS files everything to make it look good and nice being the Cs files let's make our lives easy we have a zap your web hook here provide the web hook URL have the form data sent on submit EG when the user hit submit on button hit
[05:08] enter all this looks good here I'm going to hit apply it'll show me the changes that all looks good to me I'm going to hit accept so here's what's going on right here basically on handle submit it's going to reference that web hook we just created in zapier and then it's going to provide the data that was found in the form EG form data and then as you can see we're setting the form data from full name email and business name what the user puts in now there's a bunch more I can jump into here but I'm just trying to make you understand the fundamentals of how to connect data to zapier and do really cool stuff now with this done and I hit save let's submit
[05:40] some form data I'm going to go ahead and put some dummy data here I know really impressive right brown brown at gmail Brown L hit submit or I guess get started in this context get started so we did receive an error there but don't worry this has to do with the fact that we're in Local Host this is a local environment so let me show you a workaround this is a chors policy air when you launch your app application to a live website you won't hit this air but because of the fact that we're dealing with local development this air shows up this is basically a security thing but don't worry about it let's go ahead and do a workaround so we can
[06:10] still play around in Local Host we're going to do ches here we're going to come down to this one that has a little bug go and click it add it I've already personally added it and then go ahead and pin it to your task bar here click it and then when you see that orange little C it's live this is important this allows us to test around in a development environment get started form submitted successfully now what I encourage you to do is don't leave this on only leave this on when doing tests like this so right when I'm done I'm going turn it back off don't leave that perpetually on and there we go from our cursor application here we were able to
[06:42] grab that exact data from that form now that logic right there you can apply to anything now in theory we could apply any block here what I want to show you in today's video is let's take this data and put it into a table and zapier so we're going to do an action here we'll choose tables and before we go any further here let's go and create a table in our table dashboard here we're going to come up here to create we'll do blank table table name we'll say I'm just going to put cursor AI data whatever you want create table and here we go we're going to set up our email do our name and we'll do business with all this added here let's go back to that zap I'll see about having this zap your
[07:13] Automation in the description down below but from here we're simply going to do zap your tables create a record configure choose that table so for us it's curs your AI data and then simply put in the relevant data that we received from that form hit Plus for email we'll put in email for name put in the name and for business we'll put in the business name continue test step and there we go it shows up right in our table of all the data Associated from our web application therefore for your cursor AI project you now have the ability to connect to all thousands of apps found on zapier by doing the steps I outlined here with the code setting up
[07:43] this type of Automation and boom boom boom we get our data stored if you feel like you learned something make sure you leave a like it's completely free helps me out here I'm going to leave some videos at the end here that may interest you and I'll see you in the next video we can connect to anything now any application those are two random videos that's my face I'll see you in the next video