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

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 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

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

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.

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

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

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

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

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

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

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.

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

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.

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

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

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

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

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

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

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.

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

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.

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.

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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

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.

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?

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

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

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

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

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

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

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

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

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.

[Music]