How To Use Cursor AI For Beginners
Let's learn how to use Cursor AI📅 2024-08-27
Transcript
[00:00] that's it submit and proceed I'm going to show you everything you need to know about cursor the new AI code editor as fast as possible by the end of this video you're going to have a complete understanding of how to leverage cursor as a code editing software in addition which is probably bigger here is I'm actually going to show you how to take code like this and put it into a development environment that allows us to see the actual outputs of what the code would look like this is super cool is I was able to create this little dinosaur game if you're familiar with Google Chrome very fast watch this using
[00:32] cursor like very fast it took me to do one or two sentences of layman terms to build out a game like this so let me show you how from start to finish everything you need to know about cursor AI to start off here go ahead and just download it it's completely free to start pricing wise there is a free tier $20 a month $40 a month but the best part is that there's a free tier so you can go to see if you even like this once you download it you're going to go ahead and launch in it's going to require you to create an account with cursor for free and on top of that ask some prerequisite questions but once you're
[01:02] launched in this is going to be your first project let me outline a couple things here as if you've never seen a single line of code I'm make this as simple as possible first major thing you need to identify what project are we in right now we are in the project of cursor tutor you can see that in the search bar here and you can see that over here in the side tab as a side note as well I'm probably going to do a ton more videos on cursor cuz this was actually a lot of fun second major thing you need to identify is what the heck's going on over here with this beginning project here we are given a couple a couple of things so if you can move over to projects JavaScript this is your
[01:33] index.js here is where we're going to build out our environment that's going to showcase on a web browser that you'll see later in this video but here's all you really need to know in the way this code is currently structured it's very much so where the rendering of the app the CSS the j6 everything's kind of just jumbled up into one file when you're actually coding out real software you definitely don't want to do it like this for the purpose of this video we're going to go ahead and leverage this file to Showcase from start to finish to even render this as a side note package-lock Json this is where we install
[02:04] dependencies as an example here this is very much react based but just to give you like more context of what a dependency is imagine that we wanted to integrate a payment system like stripe that would be a dependency our package.json is where we give relevant script commands in order to run this and also a bunch of other stuff when it comes to just the underlying application itself don't worry that do make a lot of sense you'll learn more as we go here and actually let me show you the first major feature you need to know about cursor AI which is your ability to conversate with your code so for example here let's say I'm looking at this code and I'm like what the heck is going on I
[02:35] can simply highlight all this and hit command l or control L what this allows us to do is actually conversate with the underlying file so for example I could say what does copy mean and for me asking that question what you'll see is that we can scroll down here and it give us idea of what this even means it helps you find bug earlier in development process It prepares your app for future react features Etc so this is very specific to the strick mode and what does strick mode even mean I mean you can go as far as actually asking a question on the
[03:06] underlying file itself as well and for anyone that's been coding for a while here let me show you a really really cool feature here so I can suit new chat they're making some type of chat interface here and we can actually chat with multiple files within a project so I hit this little add button here I could also add you know the package.json maybe we have a CSS file another JS file so for example if I add the readme just to gut check this to show you what it could do here we only have the index.js but we also have the readme this is all that's in the readme so just to show you that this works in the context of that it's actually able to read multiple
[03:37] files here I can simply say output what is said in the read me and what is the header text so we're looking for an output of you know the MPI start and then also hello world which we can see both in the index.js and the readme if you're like Corbin I've been developing for 10 years this is too simple chill out I'll do more advanced tutorials later on on this channel for now this is just to give you an idea if you've never coded how to approach this that's the chat situation there's
[04:08] definitely more we can leverage there especially in the context of larger projects for now though let's move to one of its bigger features here which is code generation but before we do that and to be honest with you this is probably going to be the most watched part of this video let me show you how to actually run this so we can see Hello World in a browser first things first do the command line of npmi npmi next we're going to go into the specific directory of where all this code is even located what you'll notice is that that is why I referenced earlier in this video cursor tutor this is the
[04:38] name of where our code is found in but more specifically what we care about here is the package.json this is what's going to allow us to build said react app as you'll see from these scripts here start build test eject therefore we need to find this directory within our computer first major thing you need to do PDW this is going to give you the first half of the path for what is relevant to us all right went ahead and enlarge this a little I already know some of y'all we're about to put something in the comments like Corin this is this is too small no don't worry your next in strength might be okay well if that means that's my path I'm going
[05:09] to go ahead and add cursor tutor to get me to the file of where all this code exists not so much to actually access the path that we'll have our package.json here is going to be the structuring I'll make sure to leave this in my description of this video or maybe it will be a comment simply put in your path that we found earlier also put incursor tutor projects JavaScript to clarify this what's incurring here is that we're going to cursor tutor projects JavaScript and then package.json once we have that when we put in these terminal
[05:40] commands we're speaking directly to that part of our computer obviously you create a new project You' have to rename this part Etc next we need to make sure we install the react dependencies here so we're going to do npm install react scripts don't worry when it does that little load bar it's not going crazy I'm not downloading a virus maybe I am I'm just joking but I'm going to go ahead and not do this cuz I already did it and let me show you how to actually launch it now now that we have installed everything we're in the correct directory if you're like got to this part of this video you're hitting erors are you in the correct directory does it say whatever you have plus JavaScript
[06:11] does it say that no you're not in the correct area let's go and launch this so what we're doing here is we're running this script right here react scripts start when I do this your browser is going to open up a new tab called Local Host hit enter this is what a successful message is going to look like boom boom hello world let me give you some one ones of what's even curring here so first thing you need to understand this is Local Host 3000 what this means is that go ahead and search Local Host 3000 on your computer right now it's going to show nothing it's going to be caput that's because this is only existing within our environment our local environment therefore no one in the
[06:42] internet can access this only you and your computer can access this and this is dope and the reason this is dope is because that means any type of edits we do in the code will automatically reflect here instantly instantly Corbin Das Dash chicken command save Das D chicken boom got it so now that you understand how this type of environment works I'm going do a very simple give me some code and then I'm going to show you how I made that dinosaur game or just like a block game in the beginning of this video major thing you probably seen in all your videos this is probably why you click this video is what you're
[07:12] about to see right now so if I go ahead and highlight all this I hit command K I can ask it very specific directions here let me go ahead and make this so you can see it better better so as a very simple starter here I'm simply going to put this when they say lame IND dictation they mean lame IND dictation Center hello world could we also add a button under it in column format saying that was easy that was easy make it around rectangle when I click it shows a text saying subscribe maybe hit submit here and you know this is where the money's at here this is why people are starting
[07:43] to use cursor a done go and accept here if you're familiar with gits get commits this looks very familiar shows the old code that's getting burned deleted the green code which is coming in hit accept here you're like Corbin why didn't reflect because I have to hit command save and boom if I click this button subscribe maybe super cool right let's go and show you I made that dinosaur game my name command Z here Comm man Z again save let's go ahead and highlight all the code again so when I was first testing out cursor AI I wanted to go as Layman as possible with the way I was
[08:15] speaking to it I didn't want to use developing terms I just wanted to be like hey creade me a game and this is basically what I asked I said okay do you know when you can't connect to the internet on Google Chrome it does a dinosaur game where you jump over jump off the cactus jump over me add that like a s scroller game with a high score make all the designs in a bit that's it submit and proceed as someone that's developing a artificial intelligence software what I can tell you this isn't changing the game in the sense of full-blown application development but
[08:45] it's definitely changing the game in sense of you could really educate yourself fast when it comes to coding except command save and here we go right now on the comments what score do you think I'm about to get right now let me make this bigger what score what score let's go it it's a little slow it's a little slow but that just means I'm gonna get high let me give you high score here I messed up regardless though that was all done in like 10 seconds will I have to do more videos on this topic I think I'm inclined to make sure to leave a like is completely free let me know what you want to see me build with cursor AI I'm currently building
[09:16] out an entire artificial intelligence software through just coding not using this but if you want to learn how to code using chat gbt check out that video right there I'm actually going to leave a playlist at the end here that shows you how to develop an entire website like actually develop entire website that will cost you $0 a month so if you're interested in that check it out at the end here I do a ton of other stuff on this channel cuz I'm going to be honest if you already know this video is going to get a lot of views so you want to check me out on other stuff check it out type in Corin Brown AI see what's up I'll see you in the next video these videos are based off everything you've done up to YouTube this point
[09:47] I'll leave that playlist right there for the website that'll be a random video doesn't look that bad I'll see you in the next video