Cursor Vibe Coding Tutorial - For COMPLETE Beginners (No Experience Needed)

Key Takeaways

This video is going to cover absolutely everything you need to start vibe coding successfully today. Now, I'm going to be going through everything extremely slowly, assuming you have no prior experience and explaining everything as step by step as I possibly can. The goal here is not to get you to become a professional software engineer, but it's to give you all of those little bits of information that will make your life significantly easier coming from someone who's been coding for 10 plus years. The people that can vibe code successfully have a little bit of experience at least working in an editor, understanding what the different models are and when to use which one, how to accept completions, what these various tools are. If that means nothing to you, don't worry. I'm going to explain it in this video, but there is a little bit that you should learn in order to do this at a level significantly better than most of the rest of the population. So, with that said, let's get into the video here and let me give you this guide on how to vibe code for absolute beginners. So, let me start by breaking down here what I actually mean by vibe coding. Now, really all I mean by this is that you're really heavily relying on AI models or LLMs. So things like GPT or Claude, these popular large language models which can write and generate code. That's really all I mean when I say vibe coding. Rather than you actually being in the editor writing a bunch of code and needing to know all of the syntax, which is pretty much the words and the tools that make up a language, you can just ask in normal English language this LLM or this AI model to generate the code for you. So, for this specific video, I'm going to assume that you don't know how to code. So, I'm not going to be explaining to you all of the lines that these AI models generate, essentially the code that they write. I'm more going to focus on the tools. So, how do you utilize a code editor? How do you utilize this AI model? And how do you get something that's a usable application? That's really the goal here. Okay. So, first things first, we need a place to write our code. Now, just like you would write an essay in something like Microsoft Word or Google Docs, we have these specific tools called IDEES or code editors. An IDE means integrated development environment that allow us to write code. And recently, we've had these AI code editors, which means they're integrated with these AI models built by people much smarter than all of us. These AI models are capable of handling really complex tasks and can generate code for us. So, what we want to start with here is we want to download an AI code editor to our computer. Now, it doesn't matter if you're on Mac, Linux, or Windows. You can use a bunch of these different tools, and there are so many AI code editors out there, but for this video, I'm going to recommend that you download one called Cursor. Okay? I'm going to leave a link to this in the description. It is free. You do not need to pay for it. However, if you do decide to pay the $20 per month, as you can see on my screen right now, you're going to have a significantly better experience. Now, what I personally recommend is that you start just with the free version, see if this is something you even want to continue with, and if it interests you, and if you're working a lot in this particular editor, then you can upgrade to the pro version for a much better experience. Now, just to be clear, this is not sponsored. Cursor has never sponsored me. I don't get anything if you buy this Pro subscription. I don't really care if you do. And there's all kinds of other code editors you could use here. So, for example, there's one called Windsurf, which is another very popular option. It also has a free and paid version. There's one called Trey AI, which is also very good and is kind of more free in a sense. Gives you access to some more models. So, you can pick anything that you want, but I'm going to use this one because this editor is the most popular right now, and it's the one that most people are kind of showing on YouTube. Okay, so with that said, you're going to need to download this. Now, I'm going to assume that you can probably figure that out, but you're just going to press the download button, and you're going to run through the installer. So, you can just doubleclick it from wherever you downloaded it to, and you can install the application. Now, when you install this, it's going to give you some kind of popup, very likely that asks you if you want to import settings from another code editor. If that means nothing to you, ignore it. You can just go ahead and go with, you know, start fresh or start new or whatever the option is. Unfortunately, I can't simulate that because I already have this downloaded. But the point is, if you have VS Code, if you know what that is, you can import your settings from that. If you don't know what that is, don't worry about it and just start fresh. Okay. Now, what's going to happen is when you open the code editor, it's going to look something like this. And in fact, yours might look a little bit different. The first step, and what I want you to do right now, just so that we're on the same page, is I want you to go to this file menu in the top lefthand corner. You should be able to see this. And I want you to go to open folder. Okay? So find open folder. There might be a button in the middle of the screen or it might be from this file menu. And all we're going to do is we're going to make a new folder in a location that we remember. Okay. So I recommend you go to your desktop, but you can go any location where you're going to be able to find this folder later on. You're going to press new folder, however it is for your operating system, Mac, Windows, or Linux. And for the folder, give it a name. So I'm going to call this cursor tutorial. You can put, you know, tech with Tim tutorial or something like that if you want so that you remember it. And then you're going to just press enter, make the folder, and just select it. Okay? So, you should see the folder selected and press on select folder. When you do that, you're going to kind of be in a new project. Now, your window should look something like this. If it doesn't, don't worry. I'm going to show you how to fix it. And now, we can start actually utilizing this tool. Now, what I typically like to do here is I like to set up my windows so that I have this window right here, which is my code editor. It's where we're actually going to do the development. And then to the side of that, I like to open up something like chat GPT. So, I'm going to go to chatgpt and I'm just going to open this up. Same thing. You can buy a subscription here. You can use this for free. And I'll talk about why I use this in a second, but I like to have kind of two different AI models that I can use for different tasks. So, usually on the right hand side of my screen, I kind of think of this as like my research AI or my consultant AI where I can ask random questions and it doesn't have anything to do with my code. And then on the left hand side, this is what I'm actually coding. Now, speaking of that, if you're going to use chat GPT, here's a guide that I found very relevant. Now, this is a free resource from HubSpot called Code with Chat GPT. Now, I recommend this guide because it provides practical value that's worth checking out. Now, I put a link in the description. You can check it out completely for free. And this resource covers the essential of using Chat GBT for programming tasks, including useful prompt templates for different languages, how to debug, and different methods for building more complex applications. Now, what I found most useful is the section on utilizing Chad GPT as a coding tutor, which helps you learn at a rapid pace and ask questions you may never have been able to find the answers to online. Now, this guide includes workflow recommendations, coding specific prompts, best practices for code review, and examples showing you how to improve your existing code with AI assistance. Again, it's completely free, and it comes from HubSpot, who has sponsored today's video. So, a big thank you to them for making this resource free, and make sure to check it out from the link below. Now, with that said, let's continue here. Again, it's not going to harm you if you already do know how to code. Obviously, that's going to be helpful. If you don't, no problem. And as you kind of do this, you'll probably pick up a few pieces. All right, so now that we have this set up, we have kind of our consultant AI in the right hand side of our screen and we have the code editor on the lefth hand side. Let me go through this code editor and I want to start explaining to you the different windows. I know this is going to be slow. Just bear with me. I promise it's worth the watch. Okay, so we're inside of what is known as a VS Code fork. Now, VS Code is a very popular coding editor that was used before the era of AI. I actually worked directly on features that you may have used within extensions for the VS Code editor at the time that I was working at Microsoft. So, I'm very familiar with the editor. Now, cursor is what's known as a fork. What that means is they just straight up copied VS Code because this is software that's copyable. There's no issue in doing that. It's what's known as open- source and they've added some new features to it. Now, the feature that they've added that's the most important is on the right hand side here. And this is your AI chat window. Okay? If you don't see this window, if you look at this kind of button at the very top of the screen, it says toggle the pane. You can press to open it and you'll be able to see it. And you can move the windows around by kind of dragging the uh the gutter or the the sidebar here. Okay. Now, from here, this is where you can actually talk with the AI and you can start building your project. Now, you're going to notice here that there's a bunch of different settings. So I'm going to go through them and we're also going to go through some other settings in the code editor. Now first you have this mode. Okay, so where it says agent and this is the thing that a lot of people are going to focus on. Now keep in mind cursor keeps changing this user interface. So it might be slightly different what you're looking at right now but overall the concepts I'm going over are the same. So we have an agent mode, we have an ask mode and we have a manual mode. Now for right now I'm going to suggest you just use the ask and the agent mode. Now, the ask mode right here doesn't allow the AI model to modify anything that's inside of your project. So, at some point here in a second, we're going to have a bunch of code. And if we use this ask mode, we're kind of safe. It's not going to actually touch any of our files. It's not going to mess with our project. It can write code for us, but it's not going to actually put it inside of the project. Okay? So, if you want to just ask a question like, what is this code doing? Why did you do this? What is this file? If you're confused about something, you use this ask mode. Okay. Then you have this agent mode. Now, this agent mode is much more powerful and much more kind of wild mode. I'm going to say this allows the AI to actually create new files, run commands, which I'm going to talk to you about in a second. Adjust different code, delete code. Okay, so if you have this agent mode enabled, it's a lot riskier. I'm going to say it's also much more powerful because it can actually change what you have in your current project. Now, the next thing that we're going to look at is the model. Okay? And of course, I'm going to show you how to use these, but there is some just context that we need to understand. So, here where it says Claude 3.7 sonnet, this is where you can select the AI model that you're going to use. Now, you'll notice here that there's a bunch of models. We have Claude 3.5, Gemini 2.5 Pro, GPT 4.1, 40. If you're not sure what to use, just use Claude 3.5 Sonnet. Okay? These might change later on as newer models come out, but for right now, the best model that I found is Claude 3.5. And then if you have the pro subscription or you have enough requests, you can use the Claude 3.7 model, which is kind of a level up from Claude 3.5. Okay, so these two models are typically the best for coding tasks. These other ones can do it as well. And you'll see that it shows you um kind of a description on what these models are capable of doing. Okay. Now, you also have this max mode. For right now, you don't need to enable this. If you do, what this is going to do is it's going to add more context to the AI. Now, all that means is that it's capable of reading more files, more code. And this is only important if you have a really big project. So, when you're starting out, you don't need to enable this. And this is going to cost you more money. You're going to be build when you use this on top of your subscription. Okay. You also have auto mode. If you really are like, I don't want to pick a model. I have no idea what I'm doing. You can just enable this and then cursor is automatically going to select the correct model for you based on what the task is that you're asking. Okay, so for right now let's go back and let's just switch it to clot 3.5. Now at this point you may be tempted to just go here into this window and just start typing a bunch of stuff and getting the model to start writing you some code. While you can do that, I don't suggest that you do at this point. What you really want to do before you even touch anything inside of this editor is you want to come up with a plan on what it is that you actually want to make. Now, what I'm going to attempt to do in this video is I'm going to attempt to make kind of like a Super Mario's Bro type game that we can play in our browser. Now, I've never really done this before. I've never built like a game in your browser. I've only ever built stuff with other technology tools and and frameworks that I'm familiar with. So, I'm intentionally picking something that I don't already understand so that you can see how you deal with various problems when you don't actually know how to code or use the specific language. Okay. So, what we're going to do is we're going to go over to our consultant AI. Now, you can do this in the ask mode if you want, but I would suggest that you just do it in a separate tool so you don't confuse the AI model. From here, I want to start planning what I want to do. So, I'm going to say, hey, I want to build a super, okay, a Super Mario Bros. type game that I can play in my browser. Okay. Now, the more detail you add here, the better. So, if you know exactly what you want, you want certain types of levels, you want advanced mechanics, whatever, you can put that here. But the important thing is that you instruct chat GPT or whatever model you're using that you don't know how to code. So say I don't know how to code. I want to use a code editor like cursor to help me do this. But someone, this is me, told me to make a plan. Can you help me come up with a plan and teach me the basics of what I need to know before I continue. Okay, so kind of a slow targeted approach here. Now, let's just go ahead and type this in and let's see what chat GPT is even going to say about this. I actually don't know what its response is going to be. So, let's see what it says. Okay, so absolutely let's break down and make sure that you understand what you're trying to do. It says you can use cursor, you can use rapid, codium, there's all these different tools, right? Step one, understand what you're trying to build. Okay, just like I said. So, we're aiming for a 2D sidescrolling platform game playable in a web browser. That's already a much better description of the game than we came up with. What we're going to need is a character that can walk, jump, and maybe collect things, scrolling map, etc. Step two, and this is the important part that I wanted to focus on, decide the text stack or the tools that we're going to be using. So when it comes to programming, there's all these different tools that you can use. Okay? Now, we typically refer to them as languages and frameworks. All right? Now, languages are like English. Okay? It's the actual code that you're writing. Now, there are hundreds of different programming languages that you can use. We can use something like Python. You may have heard of that before. Something like JavaScript, HTML, even though some people say this isn't a language. Don't worry about that. PHP, things like that. Okay? There's all these different tools. So, we need to decide, we do, not the AI model. We need to pick what tools do we actually want to use because if I just go to the model and I tell it make this game, it might pick something ridiculous that just makes no sense for what we actually want it to do. So, we need to do that preliminary research. So, that's why I've gone to this consultant AI and I'm asking it, you know, help me come up with this tool stack. Help me come up with this plan. So, you can see that it's giving me the tools that I need. We're going to use HTML, CSS, JavaScript, and then this is where it gets interesting. It says if you hear people say things like game engine, they're often referring to frameworks that do the hard work. So, as well as programming languages, you have these frameworks. Now, the frameworks kind of sit on top of the programming languages and they offer additional tools. So if you want to make a game for example, you don't need to do all of the hard work of writing all of the physics and the advanced mathematics. Some other person much smarter than all of us has already done that and they've just provided this framework that we can kind of just pull in and use and kind of take care of all of that complex stuff. So for example, when you see someone go build like a 3D game, they didn't code out all of the lighting and the cameras and the graphics. All they did is they used this existing kind of tool set. they plugged into it and they adjusted a few things. That's essentially what we want to do and that's what we're going to do here. So, it says we can use this phaser.js or we can use kaboom.js. Now, it doesn't really matter which one we pick, but I would suggest that we ask the model, you know, which one is better, right? So, I'm going to copy those, but I'm going to keep reading through the rest of the steps. So, your learning plan, no coding background. Uh, here's what you should understand before you dive in. What is a sprite? What is a collision? Okay, we're going to skip some of this stuff because I don't want it to take us too long to do this. And then it gives us kind of a development plan on what we should do. Okay, so that's great. However, I want to start kind of more baby steps. So I'm going to say what library out of these two and actually let's change it to framework. Okay, what framework out of these two is the easiest for a beginner who is AI coding. Okay, and let's ask it and see what it says. All right, so it says kaboom.js is just the winner. It's the easiest to use. So let's go ahead with that. And what it actually did here is it gave me a prompt that I can copy directly into cursor that can start creating this game. So I want to uh view this prompt. So what I'm going to do is I'm just going to make a new file inside of cursor here. Now inside of cursor you can make a new file by pressing this button right here kind of where the project is. So on the left hand side you'll see a button that says new file. You also see new folder. Now you can also go to file and then go new and text file like this. But I suggest you just press new file. Okay. Okay, so from here I'm going to go prompt txt. I'm just going to make a text file. This txt here is the extension of the file. And when I use .txt, I'm just saying this is a text file. That's it. Okay. So, I'm going to paste this in just so that I can read it inside of this editor. And let's make this a little bit larger. Let's just put these on some new lines so I can kind of read what's going on. Okay. So, let's just move this out. Create an HTML plus JavaScript game using Kaboom.js JS where a player can move left and right and jump on platforms. Use a simple square shape instead of sprites. Show me the full code for index html. Okay, so I'm going to get rid of this last line. Now, you could include that if you want, but I just know that's going to steer us wrong from my experience. And I'm going to copy this prompt, and we're going to put our first kind of uh what do you call it? Prompt here into the AI model. Now, I want the AI here to be able to actually generate the code for me. So I'm going to switch the mode to agent so that it can start doing what it needs to do. So I'm just going to paste in the code. Now notice that if you paste it from the file here, you'll see that sometimes it doesn't actually get added into this kind of text window. The reason for that is that you're copying like code essentially because you're copying it from your project. So it's referencing that as a file. So you'll see it says prompt.txt here when I paste that in. Now this is fine. What I'm going to say is I'm just going to say do what this file says. Okay? Because we're referencing the code that's inside of this file. This is something you can do in cursor. You can add context where you're referring to certain parts of your project. So that's what we did accidentally here when we paste it in this this file. Okay? Or you could just copy it directly from here into the chat window. So we're going to go ahead and press enter and we're just going to wait a second and we're going to see what this can actually do. Okay. So it's going to start generating some stuff for us. And of course, I'm going to go through there's a lot more things that we can cover in this video. We will I'm going to make this as long as I can uh before I gas out here. Okay, so it started generating our index.html. We also have this game.js file it's making. And during this stage, you can do whatever you want. Can go on your phone, you can watch a YouTube video, you can watch all the code be generated, but sometimes this takes a really long time. You might be sitting here for four or five minutes because the model is able to do a lot of stuff. Especially if you use these larger models like the Claude 3.7 where it's able to really think through complex problems. You can have, you know, 50 files be generated by the AI agent. Now, when you're starting out, I recommend that you try to do things in the smallest pieces possible. That's why we kind of started with this smaller prompt where rather than typing in this really complex thing, we're saying, "Okay, let's start really small. Let's just get something, you know, kind of resembles a platformer game and then we can add to it. It's a lot easier to start smaller than it is to try to do all this stuff at once. Okay. Now, you're going to notice that a few files have been created here. Let me just make this full screen for right now so that we can see it a little bit easier. Now, if we open up our AI uh kind of editor, I do recommend that you read through what this has said. Uh, and you're going to see that if we press down here, it shows us three files. The green thing here is the number of lines that were written and the red is the number of lines that were deleted. Okay, so we have three files and what we need to do now is we need to look at these files and we need to either accept them or reject them. Okay, this is essentially a stage the cursor gives us where it says, okay, we've written this, but let me know if you actually like it or not. Do you want to accept these changes or do you want to reject them? So, we're going to look at this index.html file. Now, we don't even know what we're doing, right? So, we're just going to press on accept down here. We can press on review next file or we can just click on the files from down here. And there's multiple ways to accept this, right? So, you can accept it from this button down here, or you can reject it, or you can do it from here. So, you can press this little kind of gray check mark, or you can press on accept all. And if you press accept all, it's going to accept all of the changes. So, we have some stuff here. Again, I don't really know what's going on because I'm a complete beginner in programming. At least that's what I'm kind of pretending for this video. So, we'll just press accept. And then it gives us this readme.py file. And I'm going to press accept. Now, you're going to notice that the way that it creates files here is it gives me these different extensions. So, HTML stands for hypertext markup language. And this is something that you can actually view inside of your browser. Now, you're not going to know that. We're we're going to ask the model that in a second to explain that to us. Uh, but I'm just kind of giving you some context. Then, we have this.js file.js stands for JavaScript. So when you see these different extensions, it just means it's different type of code. Then you see this readme.md file. This is very common. The models a lot of time will generate this markdown file. That's what MD stands for. And markdown is meant to be a human readable format that kind of explains what's going on inside of your project. So don't worry if you see these markdown files being created. Typically, the LLM will just generate these so it can kind of explain to you how to start the project, what the code is, what's going on. It's just some additional information stored in a file. And by the way, I'm going to show you a trick here. If you hit the keyboard shortcut control shift and then P or commandshiftp, okay, so on your keyboard, control shift P or command shift P depending on your operating system. This is going to open up the command pallet. Now the command pallet allows you to run some more complex commands. One of the commands you can do inside of cursor is you can type markdown and then open preview. Now when you have a markdown file in your current view. So we're viewing a markdown file right now. When we press this it will actually open the markdown file in this kind of human readable preview format where we can read it to see what's going on. So it said how do we run our file? Well to run this we're going to open index.html HTML in a modern web browser and the game will start automatically. Tells us how to play and the features. So, let's do that. So, there's a few kind of tricks here to open this file. In order to open this, you can just go to wherever you created this project, so on your desktop, and open it or you can rightclick on it and you can click on, let me find it here, reveal in file explorer, or I believe if you're on Mac, it'll be reveal in Finder. Okay, so we're going to click on that and it's going to open this up. So you can see now we have our project. I'm now going to go to index.html and I'm going to double click it. Now when I double click it, it's going to open up and boom, we got our first error. Okay, this is going to happen. You're going to get errors. So what we're going to do is we're going to tell cursor that we got an error. So we're going to say hey. Well, we don't even need to say hey because I'm always used to greeting the LMS, which you're not supposed to do. I'm going to say when I open the uh let's call it the HTML file in my browser I get an error saying script what was the error let's look at it again says error script error saying script error okay so I'm just going to tell as much information as I can about what's going wrong and let's see if it can fix the problem for us so the issue might be related to this so let's just wait Wait a sec and see if it can fix the problem. Okay, so it said that it's made some changes here. And this is where people are going to get a little bit confused. Okay, so notice it still shows me three files down here that I need to review. Now, this readme.markdown file, if I press it, opens up here, but you see there weren't actually any changes made to readme.md. So what happens is when you're working in this chat window, I'm going to show you how to make a new one in one second. any changes that happen during the whole conversation are going to be kind of marked here. Now, for me, I find this a little bit confusing because what I just asked the model to do, well, it didn't change readme.markdown, but it's still showing it to me in the window. So, I'm just trying to kind of clear this up for you. You're going to have multiple changes being applied to the files, and they're all going to be kind of tracked down here. So you can see the exact changes that were made in the kind of conversation and then you'll be able to see if there's a recent change that you need to accept or not. If you hover over the files down here and you see this check mark, you see this kind of reapply thing or this X. Okay. So I'm going to go to index. And now notice that it's showing me kind of smaller areas of the code where I can accept or reject the changes. Now you can accept or reject like smaller portions. So you don't need to accept all of the changes that it makes at once, especially if you know what you're doing. But most of the time you're just going to press on accept for the file. Okay. Now let's go to game.js. And here it's done something. Okay. So let's press on accept. Now another important thing that I want you to understand is that after you ask the agent to do something, even if you haven't accepted the changes, your code has still been modified. So the agent goes and it changes stuff, right? adds files, writes code, and you think, okay, when I press accept, it applies the changes. That's not really the way that it works here. When you press accept, you're just saying, leave the changes as they are. When you press reject, you're saying get rid of the changes that you've already made. So, as soon as you ask the agent to do something and it starts writing any type of code, that code is already kind of saved. Like, it's already inside of the file. So, when you see those green marks, it's already there. So if you want to get rid of it, you need to press reject. If you don't do anything, it's just still there. Okay, it's kind of an important dis uh mark here. And cursor doesn't really make that clear. So now that we've done that, I'm just going to go back to my browser and I'm just going to refresh. Now, if you didn't know how to do this, then you would just ask cursor, you know, what do I do now? And notice that nothing's popping up, right? Like nothing appeared in our in our console. So already the AI is kind of failing us. So, I'm going to say, okay, nothing shows up now. And I'm just going to tell it what's happening. Now, we can ask it, you know, what information do you need from us? How can we help you? And I know a trick already that I could use to really fix this much faster, but I'm trying to emulate being a complete beginner for you guys so I can show you what to do. Okay, so it's generating some code. So, let's wait for it to finish here. And again, when you see like this canvas thing here, this code is already written. Even though we haven't pressed accept, it's already inside of this file. Okay. So, again, it's made some changes. Notice that I can see that it's modified these two files. It has the green dot on them as well. So, I'll press on them. I'm just going to press accept. And I'm going to go to this one and we'll look at what it did. And I'll just press accept as well. Okay. And then I'm going to come back here and I'm just going to refresh. Okay. And now something's appearing. I'm trying to move with my arrows. I don't see anything. So, same thing. I'm going to tell cursor. Now, at this point, what we could do is we could actually take a screenshot of this. So, to take a screenshot on Windows, you can use the snipping tool. So, you can open this up and you can just take a screenshot like this and copy it. Or if you're on Mac, I believe you can hit control shift4 and take a screen grab. You may have to look that up cuz I don't know the exact command, but I'm just going to copy this and say, now I just see this and let's see what it tells us now. All right, so it's made changes again. Let's go here to game.js. Let's just press on accept. Let's go back and let's refresh and let's see if it works now. Okay. So now I see this red dot. But again, nothing's happening. So I'm going to continue here. I'm going to take another screenshot and I'm going to give it cursor. Now at this point, I'm going to show you a trick. If you're doing something in the browser and you're getting errors, you can open what's known as the console. Okay. If you right click on your browser and you press on inspect, it's going to open up something that looks like this. From here on the right hand side, if you press on the two arrows and then you press on console, it's going to show you any errors that are occurring in your script. So cursor doesn't know this. It can't see these errors because we're not we haven't set it up to do that. So what we want to do ideally is we want to read through this error message and a lot of times the error will just tell you exactly what the problem is. So in this case it says solid is not defined. So what I can do is I can copy this error message and I can say still not working. I saw this in the console. Okay. And then I can paste it. And if I want I can give it the screenshot as well. So I can just paste the image directly inside of here. And then let's see if it can fix it now. Okay. I'm going through the debugging process because this really is what vibe coding is. It's asking an AI. It makes a mistake and then you need to get it to do something else. So that's why I picked this kind of lesser known library because a lot of people show you really common like make a website or something. If you want to do something more advanced or something that's not as common, you are going to get these errors. And we're going to go through a bunch of other things in this tool. Uh for now, what it's doing is it is adjusting the code. So let's see if it can fix this. Okay, so it says it fixed this. As soon as you see it stop writing code, usually you can just go ahead and accept it. So I'm just going to accept this file. Okay, and we're going to go back and same thing. I want to refresh again and okay now we got another error. So I'm just going to copy the error and say you know this error now please be careful when writing the code. Okay so that it maybe takes a little bit more time here. And if we notice this model is really struggling we might want to change to another model and see if this model can take over and do better for us. So let's wait and see what we get. Okay. So I'm going to accept this. I'm just going to press on accept and accept all the changes. Let's go here and refresh. And there we go. Now, it looks like we can move around. Sweet. Now, I don't know how to jump. I don't think we have that, but I'm moving. It looks like this is okay. Uh, we're still getting an error. So, I'll copy the error here, but I'll kind of give it an update on the progress. So, I'll say it is working now, but I can't jump. And here is another error I see. And then again, I'm just going to be clear. To be clear, I can see the objects and I can move left and right. Okay, more detail you give the model, the better. All right, so let's give it a second here and see what it gives us. Okay, so let's accept the changes again. Let's go here. Let's refresh. And now we get another error, right? So, let's copy this and go back to the drawing board and say, you know, now this. Okay. And I'm actually going to change this after to a different model. I'm going to start a new chat window just to see if we can get some better results because it seems like uh maybe this model is not understanding very well and it's taking a long time to create this and usually I find these perform a bit better. Okay, so we're going to go again to this file. Now, again, I would normally actually review the code as a real software engineer, but you guys are trying to vibe code, so you're probably not going to do that. So, I'm going to refresh. And now we can move. Same thing. I cannot jump. Okay. So, we go back and I'm just going to kind of repeat this process. And I'll come back in a second and let you know what's happened. Okay. So, let's accept one more time. Let's go back. Let's refresh. And there we go. We get some logging information this time. Still getting that same scene error. And we still cannot jump. Okay. So, at this point, still not working. Getting a bunch of problems. So, what I'm going to do is I'm just going to make a new chat window. Okay. And we're going to start a new chat. Now, I did that by pressing the plus button. And the reason I'm doing that is sometimes I find these models can get a little bit confused, especially when they just keep going back and forth and like removing something, reading it. So, I'm going to change the model to 3.7, which is a significantly better model. And I'm going to tell it what the problem is, and to start again. I do this all the time. Just part of programming, right? So, I'm going to say my game is not working. I cannot jump. Can you fix this? And can you add some more complexity? Okay. And let's just kind of see what it's going to do here and if it can make it a little bit nicer. So here you notice with this model, we're using a thinking model. So you can actually see the thought process that it's going through. And what it's going to start doing is reading through my directory, looking at the various files, and then attempting to make a fix. Now, also down here, since we started a new chat window, now the history is kind of cleared. It's not referencing what happened before, and we're going to be able to see the exact changes it's making in all of the different files from down here. Okay, so it seemed to add a lot of changes here. So, let's go back. Let's refresh. And there we go. We know we get another problem. So, let's dump this to the model and see. Now, we have this error. And notice that I haven't actually accepted the changes yet. The reason for that is that I'm just going to let it keep making all of these changes. And then after I test it, I'm going to see if the changes are working. If they aren't, I can reject the changes. If they are, then I can accept them. So, that's kind of the nice part of this is that you can test the code before you accept or reject. So, we'll just leave it in this mode where it's showing us the what's called a diff. This is what's known as a diff. Uh, and we'll see after if it actually works or not. Okay. So, let's go back now. Again, I have not accepted these yet. We'll refresh. And now we have solid is not defined. So same thing, copy the error and see if we can fix it. Now this. Okay. So after that prompt, this is now what we have. I still do not have the ability to jump, but I am able to move around. We have some sprites. It's looking a little bit more interesting. So at least we're kind of on our way to making some progress here. Now, at this point, you might be tempted to get very frustrated. I know that I would, and I usually do if it's not working after you keep asking the model. This is part of programming. Programming is literally just constantly solving issues and even if you're using the AI and it works really well, you're still going to have these problems. So, I'm going to tell it same thing. I still cannot jump. Okay. But the other part of the game works and then hopefully after this it's going to allow us to jump and then I want to show you some more kind of tips and tricks of using cursor and some other components that you can add into here to make this work a bit better. Okay, so I still can't jump. So, I mean, at this point, I'm going to accept the current changes and I'm going to start trying to do some manual debugging. So, I'm going to actually just start like kind of reading through this and seeing if I can figure out what's actually going wrong here and why um I'm not able to jump. So, I'm going to kind of just search in here. So, I'm going to open up CtrlF. So, if I open up Ctrl+ F, this stands for find. This allows me to search within the code. And I'm just going to search for jump. And I'm going to see kind of what's going on with the jump here. So, we have can jump is equal to true. We have some jump force. I can step through it with these arrows here. So say player.on collide platform player can jump true. Okay. If the player presses the space and they can jump, then we're going to jump with this jump force. So what I'm going to do is I'm just going to kind of go in here and I'm actually going to do an inline completion. Now for an inline completion, I can hit control K or command K because I've kind of identified here. Okay, this is what's handling me jumping. And I'm going to say, can you print something here to let me see if this is working? So, I'm going to start kind of debugging this more manually because clearly the AI model is not capable of figuring this out, at least right now, even though you would imagine it would be. And notice that it's added this line, console.log jumping. Now, a log just logs to the console. You could ask the AI model if you don't know what this does. So, I'm doing this kind of manual debugging where I'm actually reading through the code. So, I'm going to go back now. I'm going to refresh and I'm going to press my spacebar. And notice it says jumping. So, it does say I'm jumping, but I'm just not moving. So, what's going on? We can kind of tell the AI model now, hey, when I press space, it says I am jumping, but the character does not move. Can you fix this? Okay. So, we're hopefully going to target some more um you know, specific things here. And what I'm also going to do is I'm going to add some context. So, I'm going to copy this right here. Okay. And I'm going to go add to chat. So, when I go add to chat, you see it's going to reference these lines right here. So, I'm kind of giving the LLM a more targeted approach and saying, "All right, rather than looking at everything, let's look at this specific area." And hopefully by giving it this more specific kind of portion of the code, it's able to actually fix this. So, it says it's going to fix the jumping issue directly by manipulating the player's velocity instead of using the built-in jump method. So, it's likely that this jump method probably just isn't working properly. Uh, so it's going to fix this and hopefully move us up. Okay, so it's made some changes here. Same thing. Let's go back. We can refresh and test this and see now if I jump. Okay, it says jumping, but again, we aren't moving up. So, at this point, if we really can't figure this out, what I'm going to do is go to the last resort where I'm actually going to go to my browser and I'm going to start looking up some documentation that I can give to the model so that it can perform better. Now, this is kind of good and bad that this is happening so I can show you how this works. So, we're using kaboom.js, right? So, what I'm going to do is I'm going to look up kaboom.js on Google. All right? And I'm just going to add docs after this. Okay? Now, when I say docs, it should bring me to some kind of documentation website. Let's zoom in here. So, I'm going to look for kaboom.js and I'm going to find the docs which are right here. Okay. So, I'm just going to scroll down myself and I'm going to quickly look and see like okay, is there anything called jump like okay, so player.jump. All right. And we see some stuff related to jump. So, what I'm going to do is I'm going to copy this page and I'm going to add this as documentation to cursor so it can read this. To do that I'm going to go to add context. Okay. So add context allows us to add various things as context or information that the model can read. Now we can add code. Now usually it can look at the code itself but we can add specific files. We can add rules terminals llinters web or documentation. So what I'm going to do is press on docs. I'm going to go to add new doc and I'm going to paste this page in right here. Okay. And go ahead and press enter. Now, what this is going to do is it's going to load this as documentation. Okay, so it found the name of the page. And sorry, I accidentally got out of that. So, I'm going to have to do it again. So, let's go back. Docs. Add new doc. Paste this. Add docs. Okay. Enter. Let's wait a second here. I'm going to go confirm. And now it has Kaboom docs loaded. So, I'm going to add context. I'm going to go docs. And I am going to bring in Kaboom. Okay. So, we're going to bring in Kaboom. I'm going to say read this to fix the jumping issue. It is still not working. Okay. So, I'm referencing this specific documentation. So, now it can go to the web. You can see it's actually able to index this page and find different pieces of information. So, it can see how we actually jump. So, this is again kind of a last resort. I don't typically do this, but if we really can't figure it out, go to the internet, find the official documentation. The documentation is written by the people who created these tools or frameworks and then we give it to the model so it can read it and hopefully figure it out. Okay, so it says it has done something here. Who knows if it's going to work. Now we can refresh and it says origin is not a function. Okay, so let's tell it what happened. We're going to say it loaded for a second then gave me this error. Okay, and again let's see if we can fix it. We have the Kaboom documentation kind of loaded here. So, it should be able to again reference that docs and hopefully fix this problem. Okay, let's try again. Okay, this is just what it's going to be. Says game over. Space to try again. Okay, so now it looks like it is working. It's just unfortunately we're kind of falling down right away at the beginning of the game. You can kind of see this for a split second. So, we're hitting the enemy. So, because of that, we're dying right away. But, the game is actually functioning. So, I'm going to go ahead and press on accept. And I'm going to try to do some manual changes here. So you can see it says like player.on collide. What I want to look for is kind of where the player starts. So we should have some location for the player. So let's see if we can find it. It says player width over two, height minus 100. So rather than that, let's move the player to maybe 100. This is the location that the uh player is going to be in. And rather than height minus 100, let's do height minus 50 or something. Okay. to move the player. I'm just manually changing it to show you that yes, you can indeed actually manually change the code. Now, from here, I'm going to refresh. And now, notice that we're able to move and we can jump finally. So, we referenced the documentation. We made a manual change. And this is working. And actually, it looks like I can hit my head, which is kind of cool. Okay, so now I just need to make it so I can jump higher so that I can get on these platforms. So, let's fix that. To make myself jump higher, we can search for jump. Okay, so I'm hitting Crl+ F and looking for jump. We have this jump force variable. So I'm just going to click on this variable and I'm going to click on go to definition. Okay, so right click, go to definition. I'm just showing you some more tools you can use here in cursor. If you want to see where the variable was created, this is a variable by the way. Can right click it, click on go to definition. Brings me here. So if the jump force is too low, I can make it larger, right? I can make it 700. So, let's go back now and let's refresh. And now, if I jump, I can jump higher. So, let's see if we can get on this platform. And boom, we can. And then we die because we hit the enemy. But we've just successfully created a platformer game. Yes, it took us longer than expected. But it is working. Okay. And I don't know how I win this. I think I need to get a certain score or something. But we can try to play it and see if the win condition works. Okay. So, that I mean that's good enough for right now. All right. So, we have a platformer game. Now, that was pretty painful. I'm not going to lie to you that took much longer than I was expecting. But honestly, I think that's kind of good for this tutorial because the point is this happens when you're coding. You always are going to run into problems and sometimes it does require going outside of the editor to figure out the issue. In this case, we had to add the documentation. Now, if you don't have documentation, you can reference other things. So, for example, you can just reference the web. Like you can put web in here and then you can type something and it can actually search for the docs. So, for example, if I make a new chat window here. So, let's try this. and I go to maybe ask mode. I'm going to remove this my current file as context and I'm going to add web. I'm going to say search for the kaboom docs. Okay. And then since we've had web here, it should be able to actually go and search the internet. So let's see if it does that. Okay. So it is searching. Now you're going to notice sometimes that it asks us to confirm something. So when you use something like the web search or use some of the other tools that are built into cursor here, uh you need to be a you need to press continue to prompt it to do this or you need to uh tick on auto search and kind of allow it to go and do