🚀 Add to Chrome – It’s Free - YouTube Summarizer
Category: Coding Tutorial
Tags: AIcodingprogrammingtutorialvibecoding
Entities: ChatGPTClaudeCursorGitGPTHubSpotKaboom.jsPhaser.jsVS Code
00:00
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
00:17
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
00:32
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
00:48
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,
01:06
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
01:22
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
01:38
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?
01:54
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
02:10
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
02:27
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
02:44
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
03:00
$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
03:15
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
03:31
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,
03:47
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
04:03
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
04:18
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
04:34
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
04:50
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
05:06
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
05:22
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
05:38
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
05:55
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
06:12
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
06:28
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,
06:46
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
07:02
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
07:17
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.
07:32
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
07:48
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
08:03
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
08:20
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
08:35
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
08:50
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
09:07
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
09:25
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
09:41
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
09:57
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
10:12
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
10:28
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,
10:45
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
11:00
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.
11:15
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
11:31
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
11:47
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
12:05
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
12:20
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
12:36
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
12:52
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.
13:08
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
13:25
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
13:43
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
13:58
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
14:14
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
14:30
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
14:46
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
15:02
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
15:17
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
15:33
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
15:49
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
16:04
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,
16:20
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.
16:35
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
16:50
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
17:09
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
17:25
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
17:41
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
17:57
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
18:14
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
18:29
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.
18:45
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
19:01
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
19:16
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
19:32
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
19:47
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,
20:03
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
20:20
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
20:36
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
20:51
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
21:08
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,
21:24
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
21:39
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.
21:56
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
22:12
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,
22:28
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
22:43
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
22:59
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
23:15
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
23:32
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?
23:48
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
24:03
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
24:19
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
24:36
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
24:53
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
25:08
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
25:25
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
25:41
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.
25:57
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
26:12
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
26:29
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
26:45
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,
27:01
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
27:17
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
27:32
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
27:49
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?
28:05
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
28:20
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.
28:36
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
28:52
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
29:08
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
29:24
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
29:39
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
29:56
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
30:11
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.
30:27
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
30:42
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
30:59
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
31:17
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
31:32
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
31:51
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.
32:06
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
32:22
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
32:37
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
32:54
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.
33:10
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
33:26
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
33:44
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
33:59
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,
34:15
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
34:32
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
34:48
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
35:05
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
35:21
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
35:37
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
35:53
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
36:09
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
36:26
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
36:42
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
36:58
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
37:15
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
37:32
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
37:49
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
38:06
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
38:21
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
38:37
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
38:53
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
39:09
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
39:26
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
39:41
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
39:56
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
40:11
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
40:28
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
40:44
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
40:59
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
41:16
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
41:32
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,
41:47
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
42:03
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
42:19
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
42:36
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
42:52
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
43:08
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
43:23
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
43:38
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
43:54
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
44:10
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
44:25
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
44:40
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
44:57
tick on auto search and kind of allow it to go and do this thing on its own. So I'm going to press continue and tick auto search so that I don't need to keep pressing continue.
But sometimes the model is going to kind of ask for your permission to do something. And I'll show you some more examples of that in a second.
Okay. So you can see anyways it
45:12
was able to look this up. I'm just trying to show you that we have these various other tools, right?
All right. And if we go here, we can disable web, we can enable it, and we can add kind of all these other things.
So we could add one of our past chats, for example, inside of here. So we can see what was happening.
And obviously, the more context that you provide, the better this is going to perform. Okay.
Now, at
45:29
this point, I want to share with you something that most other tutorials never go over, and that's version control. Now, we have a game that's functioning, right?
And this is a good point to kind of save our work. Now, the work is already saved, right?
like these files have been saved automatically.
45:46
Like there's no changes made. And by the way, if you want to see if a file is saved or not, if I start like writing a bunch of stuff, you'll notice at the top here, it shows us this kind of white little dot in the file that we have open.
Now, this white dot, if you see that, it means there's unsaved changes in the file. So, to save it, you can hit
46:03
control S, which is what I just do instinctively because I've been doing this for 10 plus years. Or you can go up to the file menu.
So, you can go file and you can go save. Now, you might notice sometimes my file menu goes away.
What I'm doing is I'm pressing the F11 key on my keyboard because I'm on
46:19
Windows, which makes this go in full screen mode just cuz it looks better for the tutorial. So, if you see my file menu disappearing, that's cuz I'm pressing F11 and I'm kind of toggling it to full screen mode uh and making it go away.
So, when you see this white dot means you got to hit control S or go to save. So, the save the file is saved.
If
46:36
you try to close it, so let's do like this. You're going to see it says like, hey, you have unsaved changes.
So, I'm going to go save. Okay.
All right. So, now what I was saying is like we want to kind of save and checkpoint this code because at this point if I ask the model to start making more changes and maybe
46:52
look make the game look better, you know, have side scrolling, etc., it can mess up what we currently have. And I don't want the model to start making all these changes and I get to a point where I've kind of lost the good stage of my project.
So, I'm going to show you something called version control. Now,
47:09
in order to open this, you should see this kind of like weird branchy looking thing like this icon. I don't really know how to describe it that has these three dots.
Now, this stands for source control or version control. Okay.
Now, there's this beautiful tool called git. Git is something that allows you to
47:26
track the changes of your coding project. It can be very complicated.
It can also be very simple. And if you really want to learn the fundamentals of it, I'll put a video on screen right now where I break down exactly how it works.
Now, git is something that you can use to just kind of checkpoint the project.
47:43
Again, can do a lot of advanced things with it. I want to just kind of pre preface that before I get into this because I'm going to show you a very simple usage of it, but it will allow us to kind of save everything that we're doing and then get back to that saved state if something goes wrong.
So, let
47:58
me show you how git works. What I need to do is I need to press this button that says initialize repository.
Now, everything that I'm showing you here, you can do this using a terminal command. And the terminal, by the way, you can bring that up by kind of dragging from the bottom of the screen.
48:13
And for a lot of projects, you'll need to use the terminal to run various commands. So, this terminal, you can do all kinds of stuff in it.
If you don't know how to code, it might be a little bit confusing, but you can create new terminals, and you can have multiple of them on the sidebar here. Like, you can run a git command, for example, which
48:29
will allow you to do all the things I'm going to show you how to do visually from git. Now, at this point, I'm actually going to recommend that you install Git.
So, just search Git on Google, find Git, and just install it for your operating system. The reason why is I don't know if VS Code comes
48:45
with Git installed uh by default or if Cursor comes installed with Git by default. Uh so, we're just going to install that to make sure it works.
Now, what we're going to do is press on initialize repository. And a repo is essentially just all of our code.
Okay? It's just a codebase.
That's really what it means. Now the point of us using git
49:01
here again is to protect oursel in case the LLM makes a change that we don't want so that we can get back to it. Now the first thing that you need to do after you initialize your git repository assuming that you have something in your code is you need to add the changes that you've currently made into something
49:16
called the staging area. So there's kind of multiple stages of git.
You have the first stage where you've just initialized the repository. That is what you have to do at the beginning.
Then if you want to actually save what you've done, you need to stage your changes. And then once the changes are staged,
49:32
you need to commit them. Now a commit, I'm explaining this very simply, is essentially a bundle or a checkpoint of everything that you've done up until this point.
Once you make a commit, that whole kind of status of your project is saved. And then anything that comes
49:47
after that commit, you can bundle into another commit. And you can have all these different commits kind of checkpointing the different features and what you've done in the project.
So in order to add these to the staging area, we're just going to press this big plus button here that says stage all changes.
50:03
Okay, it's going to add this to stage changes. And then we need to make what's known as a commit.
The reason for this is we can select the files that we want to put in this particular commit because we may want to save maybe five out of 10 of the files that we have so far. Maybe we don't want to save everything, but we
50:19
just want to save part of them. I'm trying to give you a really simple usage, but you can do really advanced stuff with git.
So maybe I don't care about prompt.txt, so I leave it in the changes area. I don't put it into staged.
Then you see it says message here in source control. So what I can do is say game is working with jump.
Okay.
50:38
And I can kind of just write what the current status of my project is to save what's going on. Now, this is not the software engineering convention on how you do this.
If you know about Git, you know this is not exactly what you're supposed to do, but I'm just trying to show you a little bit about how it works. So, I'm going to go to commit.
50:55
And what this is going to do is it's going to save this. Now, notice that down here, it's now giving me this kind of little bubble here.
So, in source control, and it shows me that I have this kind of commit that was made. And if I press into this commit, I can see what's going on.
I can see the changes
51:10
that I made in all of these different files because I now have this checkpoint. So now what I'm going to do is I'm going to go back to my file tree.
So if you go to where it says files here and I'm just going to make a change in index. Okay.
I'm going to go here to the title and I'm just going to say platform game, you know, tech with Tim. Okay.
Now
51:28
you'll notice that this file um what is it kind of highlights in orange and this indicates to me that a change has been made. And if I go back to git, it shows me there's currently changes that I have not yet staged that are inside of this
51:43
file. And if I press on it, it shows me the change from this commit to the last commit.
So I can view this change. And if I want, I can now save this in a new commit.
So I can add this to the staging area and I can say change title of game.
52:01
I'm just documenting what I did in this change. what is this actual change so I can come back to it later on and then I can press commit and now you see this source tree starts to get larger and we now have change title of game where I made this change and we have game is working with jump where I had all of
52:18
this now where this gets really powerful is let's say I accidentally delete everything inside of index.html HTML and I can't get back to it, right? Like I can't find all of this code, the LLM messed something up.
Well, because I have uh kind of saved all of these previous changes, I can revert the
52:34
changes that I made to this file. So, if I go to index.html in my source control here in Git, you'll notice that it shows me this diff and it says this is what was changed.
You deleted all of this. That's why it's in red.
Now, I can revert that by pressing this arrow. So, where it says discard changes, I can
52:51
press discard changes. Okay, it's going to confirm, do you really want to do this?
Yes. And now we go back and we have, if we look at our index.html, all of this code still available.
That's the power of Git. When we checkpoint this, now we can always go back to that last commit or really actually any commit
53:08
that we want and restore that state of the project so that we never kind of lose a working state or a working portion of our code. Now, Git obviously is much more advanced.
I'm not going to cover the whole kind of thing of Git in this video. Again, I'll leave one on screen that shows you how it works, but
53:24
I would really recommend using it for your projects to save yourself from accidentally making a really big mistake and not being able to go back again. If we accidentally deleted everything or we made some changes that messed everything up, I now I don't need to stress.
I can go back to this window and I can go to
53:40
where it says changes. And if I just want to revert everything, I can go discard all changes or I can do it for individual files.
So, if I go discard all, I'm going to discard the tracked files. And boom, our code comes back.
Okay, so that is tip number one. Use source control.
Now, the next thing that
53:57
I want to show you is something called the cursor rules. Okay, so how do we going to open this?
Let's open our AI window up here. And you see that we have the ability to uh let's make a new chat.
And actually, this is not where I want to go. I want to go to settings.
So, we're going to go to the settings gear
54:13
up here. You can also open it.
Uh there's many ways to open it, but this is probably the easiest way. And I want to start showing you a few things that you can set up here to make the codebase work a little bit better.
All right. So I want to go here to rules.
All right. Now these are rules.
Actually I didn't
54:29
even remember that I already had these written in my uh cursor. But let's go through some of the rules that I have.
So essentially what are rules? These are things that you can uh put in cursor whether globally.
So like for any code that you write or for a specific project
54:44
that tell the LLM models what they should be doing every single time. So rather than constantly copying and pasting the same thing, you can have these set rules that the model should typically follow.
So you have these user rules and these are for every single kind of code completion that you do and
55:01
this again is global. So like any project that you work on and you can see in my user rules I have a bunch of them.
So ensure the generated code is well written, organized, and modular. Use descriptive variable function and class names.
These are just good coding practices overall. And if you're wondering like, how do I get these
55:17
rules? You can go over to something like chat GPT.
Uh let me see if I can open up this window. Where do I have it here?
And say generate me a cursor rules file for
55:33
best coding practices. Right?
and then it will give one to you. Now, I'm not going to copy that right now, but you can.
Okay? So, you can put that there or you can have specific project rules.
Now, if you have things that you want to use for a particular project, you can go
55:49
here and say add new rule and you can actually make these different files that all contain different rules. So, in my case, I could say framework uh like this.
Okay? And just hit enter.
And now I can describe the rules that I need. Now, I can specify the rule type.
So if I do manual that means I need to tag the
56:06
rule. So that means it will only be applied when I uh specify the rule in the chat window.
If I go agent requested if the agent asks for this particular rule it can read it. If I go autoattached it means it's always going to be attached to a particular file.
So in this case I can put these file
56:23
pattern matches. I don't want to get into this in too much detail but if I did something like star.js js.
This means any JavaScript file this rule should be attached to or I can just go always, right? So this means for every single command that I run, I want to
56:39
have this particular rule. So a simple rule is we can say always use kaboom.js for game generation, right?
So we make sure that the model's not going to change or try to use some other framework that we didn't decide on. Or
56:54
if you wanted your code to always be accessible or something, right? Like maybe you want someone with a screen reader to be able to use it.
Specify that in the rules. For this particular project, every bit of code that we write needs to be accessible.
All the features need to be accessible because I'm designing this app for people that are,
57:10
you know, limited in vision or hearing or whatever, right? Like you can add that in these rules file.
Now, when you do that, it's going to create for you this new directory called doc cursor. It's going to put rules in here and then you'll have these different rules that will start kind of accumulating as the project gets larger.
Now, this is not
57:26
super important when you're just starting out, but later you're going to have things that you want the LLM to do and specifically not to do. And you can put them in these files and start kind of building this book of rules that allows the LLM to really understand what it should be doing.
And like I showed you here, you can tag the rules, you can
57:42
always attach them, auto requested, etc. Okay.
Uh, we have a bunch of other stuff you can do in here. For example, you can enable and disable other models.
So if you want to add the DeepSeek models or the O4 mini or whatever all these different models you want to add your own model you can do that and you can
57:59
specify your own API keys here. So you get build directly from those model providers rather than from cursor.
All right. Now a few more things to mention.
First of all MCP. Now MCP stands for model context protocol.
And this
58:14
essentially gives your AI agent superpowers and allows it to connect to all kinds of tools and services that aren't natively available inside of cursor. Think of it like an extension for your AI model.
Now, I'm not going to show you MCP in this video because most of you honestly just don't need it and
58:30
it's a little bit overkill, but I have a video I will put on screen that covers MCP, what it is, and how you set it up in cursor. So, if there's something that you need to connect to like Figma or Google Drive or I don't know, I'm trying to think of some other tools you might want to use like a specific web browser,
58:46
web scraper or something, then you can kind of add these tools into cursor and give the Asian ability to use these tools and it can go out and kind of make these various tool calls. Okay, so that's one thing.
Um, next, let's talk about extensions. So, if you go here to
59:02
this kind of side, I don't know, arrow drop-own bar. Sometimes it's on the lefth hand side of your screen, sometimes it's up here.
Should see something that says extensions. Okay.
Now, I suggest you open this up. And if you're just getting started in these editors, you can install various extensions for the different tools and
59:19
frameworks that you're using. So, you'll see I have 26 installed extensions because obviously I code a lot and I work with a lot of different frameworks.
But if you're working in something like JavaScript, then you can search here, you know, JavaScript and you can install the JavaScript extension. Now, let's
59:35
wait for this to load. So, you can see it says JavaScript snippets or something, right?
And we could install this. You can see this one has 19 million downloads.
Now, if you're wondering like, okay, I don't even know what does the extension do? What's the point?
Well, these extensions add extra capability to the code editor itself.
59:50
It's not necessarily an AI related feature, but it can allow you to just have a better experience when you're writing specific code. Now, this uh Python extension, for example, this is actually the one that I worked on when I worked at Microsoft.
Uh let's look at it here. Just Python can see 170 million
00:08
downloads and it has all kinds of different features for all kinds of different stuff. It has better autocomplete for example.
It has this thing called Jupyter notebooks which is another kind of development environment for testing things out. It has some data science related features.
Point is you
00:24
want to get the relevant extensions that you need. Uh another one that I have is like this spell checker.
So, this gives me spell check inside of the editor because I really suck at spelling and I always make mistakes. So, I installed this extension.
Now, if you're wondering like, okay, what extensions should I
00:39
get? I mean, again, go over here to ask mode and say, what extensions do you think I need in I'm going to say VS Code rather than cursor because this is a fork on VS Code and these extensions work for VS Code uh not just for cursor
00:56
for this project. Okay.
And then it can give you some suggestions. Now, you don't need to use all of these different extensions obviously, but the point is when you add them, um, things just become a little bit easier to work with.
So, you can add a kaboom one, add a productivity one, it
01:12
gives you a few, uh, ideas here. Live server debugging, eslint, prettier.
So, prettier is a really popular one. If we install prettier, this allows us to auto format our code.
So, you can see I already have this installed. But what I can do if I have an extension like this, just giving you an example.
So if I go
01:28
here, I can hit control shiftp and it's already showing up for me, but I can just hit format document. Okay, so I'm open my command pallet.
Command shift P or control shiftP to open this on the screen. I search format document and I press format.
And now it kind of takes
01:43
all the code and fixes all the indentation levels so it's a little bit cleaner and easier to read. And then I've got to save this now because it has this kind of white dot.
Okay, so I'm just showing you like there's all these kind of tools within the editor that you can use that make your life as a developer easier. Now, as a vibe coder,
01:59
you're mostly going to be focusing on this tab right here, right? You're going to be asking the agent a lot of stuff, switching between the different modes, adding pieces of context, um you know, sharing error messages and stuff that's going on.
But don't be afraid to kind of jump in and actually see what's going on. Like a lot of times the code that's
02:15
being written, you can understand it. Things like changing the jump force, like that's easy enough.
You can make this number bigger. You don't need to be a genius to do that, right?
And if you want to just search for something, boom, you pop up command F and you say jump. And you can start scrolling through here and see, okay, where does it mention
02:31
jump? I'm going to kind of look and see what's going on.
Um, another thing, there's a general search or a codebased search. So, if you look up here where this little magnifying glass is, uh, you can actually search in a more advanced way across all of the files that you have.
So, in our case, we've just got two files. We're keeping things really
02:47
simple. But if we had, you know, 100 files in our project and we're getting really large here, then I want to use not just an individual file search, but a codewide search.
So I could do, I don't know, game or something. And now it's going to show me every reference of game within all these different files.
03:03
So I can look in index. I can look at my JavaScript file.
I can look at my readme file. And I can change like, do I want to match the capitalization?
Do I want to match the spacing? Am I looking for some kind of advanced pattern match?
I'm not going to show that right now. or do I want to replace this with like hello?
03:19
And then you can actually just replace all of these instances by pressing this refactor button. Okay, so there's all kinds of stuff in here.
And the better you get at using this editor and learning this tool, the easier your life is going to be. I think the main thing to take away from this video is that this is maybe not as easy as you may
03:36
have seen online, right? You just see people, oh, I vibe coded.
VI code. Sure, you can just do these really big prompts and get great results, but I do really recommend that you take things slower.
You go step by step and you try to get the AI to generate kind of smaller
03:52
targeted pieces of code at once because that's going to allow you to understand what errors are popping up and to fix them more easily. Had I just told the AI, you know, generate this Super Mario game with this, this this this feature, maybe it's going to work.
But if it makes a mistake now there's so much code
04:08
and it's a lot more difficult for me to figure out what that error is and to get the model to work. Even in this relatively small program that we wrote that's let's call it you know 250 lines of code.
There was all kinds of mistakes that kept popping up. We needed to reference the documentation.
We needed to kind of change the props around. We
04:25
needed to open up the console which you would have had to find on your own and copy in the error messages. This requires problem solving even if you are using these AI models and understanding the tools that you have available to you.
We changed to the cloud 3.7 model rather than using 3.5 and then we
04:40
immediately got some better results. So mess around with this, learn how it works, try to really understand this tool and that was the point of this video to kind of give you a highlevel overview of what you can do inside of here and start to kind of condition your brain on what it's like to do this vibe
04:57
coding. If you think that you're just going to be able to purely talk to the LLM and get, you know, amazing results, it's unlikely.
Maybe in the future that will be the case, this does still require some critical thinking and problem solving. And I would still suggest learning some basic coding.
Like if you understand what HTML is, you
05:13
know, this is going to be a lot easier to understand. If you understand JavaScript like I do, you can actually go in here and write some lines of code yourself.
you can read what's happening and you can solve the problem oftent times a lot faster than the LLM because you have that prior experience. So, I would suggest doing that.
You can check
05:29
out that guide that I mentioned earlier. And I think with that said, guys, I'm going to wrap up the video here.
Let me know if you enjoyed this style, if you like this video, if you want more on this type of topic. I always value your feedback.
So, please leave that down below and I will see you guys in another video.
05:45
[Music]