Let's build a backend for Cursor AI (zapier, chatgpt, claude ai)
Let's learn how to use Cursor AI📅 2024-11-25
Transcript
[00:00] I want to do something very simple in today's video I'm going to show you the simplest way you can build out a backend for any type of cursor AI app you're currently developing to do this we're going to leverage zapier it's going to give us access to over 7,000 apps that we can integrate into a cursor AI application to best showcase this let me show you something really cool we can do I'm going to recreate chat gbt using cursor Ai and zap here what do you mean Corbin I mean just just keep watching trust me let's jump in welcome back y'all today's video is sponsored by zapier they're like hey that other video we did together showing how to use zapier cursor AI did pretty well let's
[00:31] do another one I'm like okay another one let's do it if you don't know what I'm talking about earlier this week we used cursor AI to create a form like this using this code right here and then we store the relevant data into a zapier table using a zapier web hook in that video I showed you how to leverage zap your web hooks to send data outside of cursor AI which also leads to the idea that we could integrate this with any type of app that zap your integrates with now here's what I'm going to do I'm going to leave that video in the description down below I'm going to tag it right there watch that video if you want to know how to set up a
[01:01] react based app and get to the point that you're about to see right now which is all this code set up we have a fully functional web application that can send data to a backend this video though is we're going to take the same web app here we're going to make it into chat gbt therefore you run into any issues when it comes to setting up your react based application or getting to this point in cursor AI don't worry there's a whole video down there down below it has Google Docs it has specific chats that are meant to help you with this process today though I want to show you a very specific way we can really leverage this Tech pretty cool stuff here so so we're going to break this down into three simple steps here first step let's
[01:32] create a new front end that's going to be a chat gbt type of UI an input box a submission and an output Second Step here is we're going to create around two different zapier automations that's going to allow us to interact with this web application and then the third step is going to be creating a zapier table that's going to store the data of conversations that have incurred in this type of web application that make a lot of sense don't worry I'm here to guide you I'm wearing the Colorado Aspen sweater here as it's getting a little chilly but we're going to be good as we keep going down this route let's jump in first things first let's go ahead and create a front end and as we know of cursor AI we can go ahead and command a
[02:03] or just hit command l or control L depending on whether your Windows and Mac and we're going to get our nice little chat here so I can see the code here reflected into our user interface here which is a local host 3000 a development environment let's go ahead and run a simple command I'm going to shrink down we're going to click this and then we're going to come up to our terminal once you're in terminal here all we need to do is hit npm start is going to run the code that we see in this app.js into a live environment pretty good so far from here let's go ahead and just minimize this we'll come back to terminal we need to use terminal pretty soon here we're going to go back to our app.js now that we have the chat
[02:34] open here let's go ahead and change everything let's also make sure we add the CSS file as that's the way styling looks on our application here's what we're going to say okay let's change how this looks in a front end for app.js and CSS make sure we have both files selected here make it so it has a Chad gbt style UI where we can see an input box ask a question to submit a button in addition we have another box that's for the output e the answers that are being said and the button says the answer like e let's get an answer for the inquiry and then I just took it one step further as let's make it a little bit fun here like a genie in the bottle and we're
[03:05] going to say let's actually make this like a fate teller in the sense of questions like what does the future hold for me Etc the Style app therefore should be funny name other than Chad gbt we're going to hit enter here and we're going to keep messing around so we get a good output we like hit enter right now this is going to be connected to no backend due to the fact that we haven't set up our zap your automations and zap your table but we're just trying to get a UI here that looks good and we like I'm going to hit apply here to our app.js hit save then let's see what CSS looks like we're going to hit apply as well let's see what we have so far it's actually not that bad at all okay we ask your questions here cool oh I see what
[03:37] they did here Mystic AI Oracle okay consult with the Oracle I like it I like it I like it for the input I'm going to do 90% so it's not completely off here there we go we'll do 95 actually nice looking pretty good let's go ahead and actually connect this now I'm going to zoom out a little bit so it's not so zoomed in let's go to app.js here and we need to connect some Dots here it looks like cursor AI took the initiative and assumed that zpp your web hook right there is the one we're going to use in this application that's actually not the correct one but don't worry what we're going to do here is let's go ahead and set up our two zappy automations to make
[04:08] this all work coming over to zap you here let's do it come up here to create new zap and if you're like what is all this right here we've been doing a ton of zapier I have like over 150 videos on zapier so if you ever have like a zapier itch check me out here new zap let's come down here to trigger and we love these because these allow us to connect data throughout different applications we're going to do a web Hook by zapier so our first web hook here the purpose of this web Hook is going to be like talking to the Oracle and we're going to be like send prompt message to Oracle
[04:39] anytime I think of Oracle I think of like Aladdin that really really classic Disney movie in the genie there uh let's go ahead and do catch hook with the zap your web hook now this is where the data can be sent to so the next step here is going to be setting up the Chad jbt block to internalize the data and give us a nice looking output so let's first off send over some dummy data so I'm going to copy this and I'm going to replace the current zap your we hook with this one nice as you'll notice is that already knows the correct method here which is post I'll get out of the way y'all my bad it it knows essentially
[05:09] what we're receiving here and what it's doing for now is it's giving pseudo answers such as the stars of line in your favor great fortunes are weight Etc we're obviously going to replace those with real type of outputs here but first off let's send some dummy data and to do that we're going to go to our react application here and then let's just confirm if it works it might not work you know how AI is we're going to say what does the future hold for me consult of Oracle then obviously these are our one of our pre-filled fix text ones this isn't the real thing please try again later so there was a little bit of an error but don't worry we're just using
[05:40] this as dummy data so it looks like with the received payload here we got an empty cury string let's first off just change the naming of how the data comes in so instead of Cur string I went ahead and just simply put when I hit handle submit we get an empty cury string I want to see that we get this in the payload which is my example data what does the future hold for me and then let's just change the payload name accidentally just messed up there but the point is is that from that output I got the answer of user questions form data question therefore when we see this next payload here we're going to use your question in addition the ER we ran into was an ER we ran into in our
[06:10] previous tutorial which has to do with chors policy what chors policy is is like a little security thing that happens in our browser don't worry this doesn't happen in production this only happens in local environments to circumnavigate around this we're going to go and click our little plugin from the first episode if you don't know what this plugin is simply go to the Google Chrome Store type in cores it's that little bug right there click that once it's enabled here we come back to our react application and we shouldn't get this air anymore and we should actually see some data consult Oracle there we go coming back over here we're going to say find new record modify B There we go so
[06:41] now we have the users input from our react based front 10 built-in cursor AI let's go ahead and analyze it with chat gbt with the chat gbt block selected here we're going to do an action event of conversation and as you can probably already assume what is happening here can happen with any type of app EG that data that we received in that web there I can send as a slack message if you wanted to from here though let's create a prompt to internalize these messages coming in and give Oracle like outputs here's what I got context you're an oracle give an answer to the person's
[07:11] question Corbin you have a answer I know all right grammar wasn't my strong suit person's question what does the future hold for me so we're going to put the data that we received from our web hook into semicolon parenthesis there as we're identifying that the person's questions is the person's question if that makes sense format be sarcastic Max to three sentences and go in depth memory key for consist outputs so that we if we like the output we see it locks it in continue and let's test this step and here we go a the future it's like a delightful Mystery Box filled with well more mystery lined with the certainty of paying taxes and the excitement of never
[07:42] ending emails so far the Oracle is pretty on point here uh let's continue with this tutorial I'm going to go ahead and save this to our database which can be found in zaper tables therefore we need to create a zaper table that will function as our database for our web application over to zeut tables we're going to create we're going do blank table and this is huge let me zoom out the table here we're going to do cursor database and what is cool and what you're learning here is that we can use zapier like our backend and it's a very UI friendly backend that allows us to store data in any context so we're going say create table now typically when people hear the word database and
[08:14] backend it's like whoa this must be some very confusing and complex stuff but in reality it really isn't what a backend is when it comes to a database is simply just where we store certain data in an application and the weights typically stored is through paths and referencing it right so in this cont context we really can have a fully functional database here built on tables by zapier for example our field here could be prompt input or user question second column here could be Oracle answer we can add more Fields if we choose to do so but for now I'm going to delete this
[08:45] field we're looking good so far here and we've created a functional database now let's leverage it coming back to zier animation here we're going to create a new Step here that's going to be for tables with tables here we're going to create a new row based off of this information so we're to say create record continue table ID for us it is the cursor database here and then we simply put in the information that we care about so the user question is obviously going to come from that initial web hook here and we're getting a co-pilot suggestion thank you co-pilot thank you there we go Oracle answer is going to be the Chad gbt answer here
[09:15] that we see so we should see it from the suggestion here reply there we go continue test this step and what you'll notice is that automatically we're going to store this to our database here boom it's been stored let's go and set up the second half of this tutorial here we're going to grab this information and ref reflect it in our web application so coming back over here you'll notice that we have the initial part of the tutorial done EG when we handle a submission we talk to the Oracle we're going to store the data into our back end the next part of this tutorial is going to require another zap your web hook to communicate with this backend and grab data that is relevant to us so before we code it out
[09:46] with cursor AI here let's create a new zap your automation with the purpose of retrieving the oracle's answer so far looking good here I like it publish let's go back up here to create news app and we'll name this one Oracle answer with that named here we're going to do another zapier web hook here so we do web hook and what's great is that with zap your web hooks we can push data we can get data and we can delete data so what that means in this context is now we need to get data here so we're going to do a catch hook again continue we're going to have no information here it's going to be a dummy web hook right now
[10:17] we're going to grab this web hook here and let's use it in the code we're about to generate but before we start leveraging this web hook here we need to actually add a unique identifier to our app here therefore allowing us to know which record belongs to who so I'm going to go and delete this I'm going to add a field here and we're going to do a field here of just text the text here being user create now in theory we could go the extra step here create a specific uid with authentication and everything about the board there I've done other videos on this topic so if you want to check that out go ahead but for now we're simply going to provide this user unique identifier through the front end
[10:47] so right here we're going to go ahead and add a little name spot here this will act as our uid for our platform same deal here with the front end we're going see add in the front end a place to put my name and also add this name variable in the payload we're going to hit submit and with that code added you'll notice it shows up right here so we can enter our name and ask a question to the Oracle therefore let's gohe and change our zapier first zapier animation a little bit to compensate for this so come in over here to our zapier animation that's currently on we're going to click it let's go ahead and say edit zap with the edit zap here let's get a new data point record here so
[11:19] we're come to our react app put in brown and we'll say what does the future hold consult with Oracle so far so good we should see a new record come in here find new record record record C there we go username Brown and user question so far so good now what we want to do is that the chbt conversation stays the same or alternatively we could have the name actually be said in the output as well if we chose to do so adding that to the promp here you do person's name semicolon parenthesis add the name here from here then in the actual zapier record table let's actually test this
[11:50] real quick as well retest step we should see brown oh Brown prepare for a whirlwind future that's predictable as a cat's mood fair enough is it an orange cat those are those those can go in some crazy moods zier tables here configure and then you'll notice that we have this new little data point here we can add from our Z hooks we're catch hook come the username Brown so far so good test this record retest step once we've retested the step here let's go to the table and here we go we got the user Brown question and the answer from Chad gbt looking good let's hit publish with this published let's go back to our
[12:21] other zap which is the Oracle answer so we have our dummy web hook set up here that we haven't put in our code yet we need to know how our data is formatted so we know how to grab it from our code therefore we're going to go to tables again and in tables we're going to do an action event of find record table ID is going to be cursor database and for a lookup field we'll do user and we'll just put Brown continue test this step and we're good to go so that is how the data is formatted and structured therefore let's go ahead and grab it from the front end to do this we're going to come back to cursa AI here we're going to command L control L talk to for app.js we're going to go ahead
[12:51] and say this we want to add a 10sec delay after we send the post request which is the first zap automation which we're then leading into our second zap automation which is the get request we're going to get the data from the zapier table here provide the zapier web hook URL and then say from there display the relevant Oracle answer I'm going to hit enter here and proceed from that cursor AI output here we got our original zapier wh hook sending and then in addition to this we're going to add a not a 10 second delay I wanted to increase this to 20 seconds just to give some latency between the chat gbt AI analyzing the question and giving an output and then from there we're going
[13:22] to get our response from this zapier fetch which is a get request once we get that we're going to parse the data for Oracle answer and showed on the front end so coming back to our second zap automation here I went ahead and added a final web hook here that's going to send the data back as a response message here obviously we got our first zapier web hook then we got our ability to grab the underlying data that we have identified here and then the final zapier web Hook is going to be a custom request which we're then going to configure and send as a post to the original URL and then from here we're going to send the data that we care about hit no on the unflatten and proceed once this is on
[13:54] which it is right now we can go to test this live and see it work and here we go coming over to our cursor app here with a zappier backend we're going to Simply put in the two things it's requesting I'm going simply put in my name and then say what does my future hold what does it hold Mr gayi what does it hold consult with Oracle there's going to be that 20 second delay of latency so we can find the data relevant to this question and then we should see it show up right here and here we go from our sarcastic Oracle dear Brown the future is a magical place where you'll finally use the gym membership you've been dutifully paying for it's a realm where
[14:26] every brilliant idea strikes just as you're about to fall sleep and when you're awake they vanish faster than your socks in a dryer from that response we have it set up here in our zap your table I encourage you to check out that other video which shows you how to integrate cursor Ai and zapier with all 7,000 apps I'll leave it at the end here as well but if you feel like you learned something today's video make sure you leave a like is completely free and I'll see you in the next video Mystic AI Mystic AI two random videos that's my face I'll see you in the next video