This content is a comprehensive guide to using Cursor, an AI-powered IDE, for "vibe coding" (building applications with AI). It aims to equip viewers with the knowledge and skills to build and deploy various applications, from simple landing pages to full-stack projects, leveraging AI assistance throughout the process.
Mind Map
클릭해서 펼치기
클릭해서 인터랙티브 마인드맵 전체 보기
Welcome to the complete cursor guide
with Kihan Zang. He is the best
developer I've ever met and he's used
Cursor every single day since it came
out. In this video, he's going to give
us the most comprehensive course on how
to use Cursor on the entire internet.
And by the end of this course, you'll be
able to confidently use Cursor to vibe
Code landing pages, desktop apps, or
anything you can imagine. If you've been
looking for a comprehensive, easy to
follow, wellorganized, and practical
course that takes you from zero to hero,
this is the right cursor course for you.
You don't need any prior knowledge of
programming. All you need is a computer.
If you already have a foundation, the
whole video is timestamped, so you can
switch to any chapter that you want. And
in the second half of the video, we're
actually going to be covering the most
advanced features inside Cursor. We are
truly covering everything. And so if
you're new here, make sure to subscribe
as I upload new videos all the time
about vibe coding and building with AI.
This is going to be a very long video.
Let's dive in. Khan, welcome.
>> Hello. What are we talking about today?
Today we're going to be going through in
detail what cursor is, everything it can
do, and we're going to be building an
MVP, upgrading it into something that's
full stack and scalable and deployable,
and we're going to be comparing it with
other vibe coding tools. Amazing. So,
we're going to talk about why it's the
best tool out there. Um, and we're also
going to go over like all the features,
right? Like basically every single
feature within Cursor.
>> Yeah. We're going to be running through
all their new features. They just
dropped Cursor 2.0 with a ton of amazing
features. We're going to be going
through all of that. And we're also
going to go through Cursor 1. We're
going to use all of its features as well.
well.
>> And Composer.
>> And Composer, their new model. Yes.
We'll be talking about that today
>> and then we'll see how it stacks up
against, you know, Replet, Lovable,
Bolt, etc.
>> Yeah. And we're going to be starting
from the basics. We're going to be going
through things like, you know, what a
file is, what a directory is, all the
way up into building and deploying an app.
app.
>> Yeah. And we'll talk about databases.
We're going to get to that later today.
>> Oh, that's going to be covered once we
start scaling up our app. Yeah.
>> Hell yeah. Okay. Well, let's not waste
any time. Uh for those of you who are
watching right now, I will put the
sections and the timestamps on the
screen right here. You feel free to skip
ahead. If you are a seasoned developer,
you may want to skip to like cursor 2.0.
0 the the third section if you want, but
if you are brand new to coding, you do
not even need to know what a file is or
a variable.
>> You just need your computer. That's it.
>> You literally just need a computer. You
are going to be able to build an app by
the end of this video and not just an
basic app like an app with a database.
And we're going to talk about everything
in this video. So strap in. It's going
to be a fun one. All right. So tell me
what is cursor?
>> Thanks for asking. So, cursor is an IDE,
which is basically VS Code's cousin. If
that isn't making a lot of sense, an IDE
is an integrated development
environment. And Cursor is probably the
only real true IDE out of most vibe
coding tools. And that's kind of lays
the groundwork for why Cursor and VS
Code is the previous generation, the
most popular IDE.
>> And so, I guess shouldn't we go over the
reasons like why we should be using
cursor or like why use cursor over other
tools and such?
>> Yeah, of course. So, as I mentioned
before, cursor being an IDE gives you a
very solid foundation for kind of
beginning your journey as a vibe coder.
And this matters because you're not
necessarily writing code, but you should
know how all the fundamentals piece
together and give you the product that
you want. And having a more traditional
IDE framework kind of around this is
very beneficial. It's something that you
can grow into and cursor is an amazing
platform for you to just learn. So I
think the first part about it is that it
allows you to build a really solid
foundation for vibe coding in general.
You can grow into it and the ceiling for
it is very high. There's a lot of
technicalities that you can jump into
it. Real programmers actually use it. So
definitely one of the best tools to
build a strong foundation when you begin.
begin.
>> Amazing. And yeah, I think I think a lot
of people sometimes start their project
on other vibe coding tools like replet
um v 0ero lovable and then they move to
cursor when they want to expand it when
in reality if you just actually take two
to three hours to learn cursor you can
just stay in cursor because switching
from one platform to another it's kind
of annoying and cursor has it legit has
everything you need that's how I view it
>> and you know it also works the other way
around if you know cursor you can switch
to you know replet lovable super easily.
So, the skill is very transferable, but
it isn't necessarily the other way
around because of the IDE nature that
cursor has.
>> It just has all of the tools that you
might need.
>> Yeah. It's like, you know, if you know
how to use Photoshop, obviously you know
how to use Canva, right?
>> Sure. Yeah.
>> 100%. What's the next reason?
>> Yeah. So, the next point is that it's
not a website. And this kind of bleeds
into what we were talking about. A lot
of the other competitors in the space
are web- based and that's actually more
limiting than you might think as in they
kind of only really optimize to allow
you to build websites and that's kind of
a very interesting caveat. Although
websites are the most common, you know,
form of software, Cursor actually allows
you to build basically whatever you want
because it's an application that lives
on your laptop, which means you could
use it to build mobile apps. You could
use it to build indie games. You could
use it to build landing pages, websites,
anything else that everyone else lets
you build. But it also gives you the
control to build anything else. Like you
could build your own embedded systems,
which means you could program your own
keyboard if you wanted to. Like it goes
like all it covers the full range of
what code can do.
>> Yeah. And the way that I the way that I
understand it, right, if you look at a
popular tool like Replet, Replet is a
website, right? As you said, it it is a
a website that you go to and the code is
stored on Replet's server, right? It is
on their servers. Whereas cursor, right,
with cursor, your code is on your
computer. Um, you can basically create
literally anything with cursor.
>> Yeah. Whatever exists as code, cursor
can help you with. That is something
unique only to cursor actually. And
obviously you can use VS Code and
actually learn how to code but this is a
V coding tutorial. Did you know that the
next generation spends about 90% of
their mobile internet time using mobile
apps, not websites? That's why you
should learn how to build mobile apps
without writing a single line of code.
Well, the most powerful tool in the
world to build mobile apps is the Vibe
Code app. And you can use it directly on
your phone and ship it to the app store.
No coding required. Just describe what
you want to build in plain English and
watch the Vibe Code app generate a fully
functional app in minutes. Vibe Code
even uses Claude Code as its default
model. Whether you want to build a
custom productivity app, a social
platform, a habit tracker, your idea
becomes a reality faster than you ever
thought possible. And you don't even
need a computer. You can test it
instantly on your phone and refine it
with simple prompts. And when you're
ready, you can literally send your app
to the App Store. Download Vibe Code
today and turn your app idea into
reality in minutes, not months. And
Riley briefly touched on this, but point
number three is that it is local. It's
an app that exists on your computer. And
this changes a lot of things. You know,
you don't need to ask Repid or lovable
for the code. It exists on your
computer. And similarly, you can drag
and drop files. You can interact it
with, you know, your desktop view. It's
definitely more in your control. and
everything just exists locally, which
makes developing and streamlining things
like down the line amazing.
>> Mhm. Yeah. They just don't baby you in
the same way that um tools that aren't
local do. But like again, that's why
we're taking this course. If you just
learn those few things, you don't need
to be babyed. You can create a GitHub
repo and and save your code and then you
can easily transfer it to any other uh coding.
coding.
>> Exact. That's exactly why, you know, if
you learn cursor, you can learn anything
else and pick it up super easily. like
this is the Photoshop of you know code writing
writing >> 100%.
>> 100%.
>> Yeah. So number four obviously is that
cursor is the most established player in
the Vive coding space. They've been
around. I've been using it for like
years now and you can't really say that
about a lot of other Vive coding tools
and this means they have a large
community and I previously touched on
this before. A lot of engineers such as
myself actually use it to write code.
They're fully professional and it
exposes you to all the you know
extensions that you can get with VS
Code. the community that you find
general community that you find like
regarding any code snippets you can
technically take and apply to using with
cursor meanwhile you know if you're
stuck in like replet's ecosystem for
example you might have to ask some
replet specific questions and go through
their forums like I could just use
Google and I could take what I learned
from there and put it into like
>> and on top of this a lot of the
professional developers are using
extensions for cloud code for codeex and
Gemini CLI which are like known as being
the best coding models in the world and
will probably continue to be the best
coding models in the world. You can just
plug them into cursor.
>> Yeah. Yeah. Of course. And definitely
like the VS Code extensions that as I
mentioned earlier, cursor is kind of VS
Code's cousin. It can use all of the
benefits that you get from VS Code which
is absolutely huge. I don't want to
downplay this at all. >> Amazing.
>> Amazing.
>> And so number five is obviously very
recently cursor released agent 2.0 I
know and it is a very big game changer
especially for vibe coders and I think
for people getting started especially it
takes a large chunk and kind of
inspiration from chat GPT's chatbased
interface and cursor has always had kind
of like a chatbased element to it but
this new UI kind of is built for people
to begin with and kind of get their feet
wet and start building immediately. So
it's they're taking a step into the
direction of babying you, but also still
exposing to you all of the like powerful
features behind it. And I think at this
point in time, Cursor 2.0 is actually
probably the most heavyweight like AI like
like
>> coding agent
>> coding platform. Like it can use agents
multiple concurrently. That is, you
know, just so powerful.
>> 100%. You still have everything that we
just talked about like all of the power
of cursor but it has this nice little
layer on top that makes it almost feel a
little bit like chat GBT which is nice
which is with the VS code uh with the
extensions that we'll talk about later
they're going in the same direction
where it's clawed code but it no longer
looks messy it's nice and easy to use.
>> Yeah. Yeah. So it is kind of like you
know with code you get really down to
the low levels things get scary you're
looking at like squiggly lines and small
text you know VS Code does a great job
of oh V code and cursor do a great job
of packaging it in a friendly way and
cursor takes it one step further adding
a bunch of AI capabilities
>> amazing all right well I now know what
cursor is I know why I want to use it
well let's let's use it
>> yeah let's hop right in so this wouldn't
be a full in detailed guide without me
showing you guys the basics of how to
download cursor. So, I think you can
just go straight to cursor.com. And
here, you know, it automatically tells
me that I'm on Mac. I'll just download
for Mac OS.
>> You can also download it for Windows.
>> Yep. I am installing this right now live
for, you know, the sake of the video.
And I will be opening the cursor download.
download.
>> It's probably been a while since you've
downloaded Cursor.
>> Yeah. Well, as soon as I can. There we
go. So, now, you know, drag it into the
applications. And we should be able to
just open Cursor. There you go. Simple
as that. We now have cursor. This is
probably what your cursor will look
like. I've used VS Code, so it probably
pulled some things over, but this is uh
you know, if you download it for the
first time, you open it, this is
probably something what you look like. I
have some projects that I've been
working on. You might not, but that
should be the only difference.
>> This right here is kind of the biggest
difference between other vibe coding
tools and cursor. It's like cursor
doesn't have a text input field that
says, "What do you want to build?" >> Yeah.
>> Yeah.
>> Right. Which makes it scary.
>> Yeah. I I think first of all they should
probably just add that but second of all
um yeah talk us through what these
things mean and like what it means to
create a project.
>> Yeah, of course. So to kind of break it
down a little bit further, a project is
basically just where the code lives and
the code lives obviously in a file and
the files live in a folder. And so think
about this as something very similar to
like navigating your finders, right?
Like you have desktops and then you can
have folders here, right? For example, I
can just open this folder right now in
cursor. I could call this, you know,
rename this as like uh let's see, cursor
video. And I can go ahead and open this
folder. And for this video sake, it will
serve as a project. So I can just go
straight into desktop, find cursor
video, and open it. And so this brings
you to project view. We're currently in
editor, which I like to call cursor 1.0
because this is cursor 2.0. But, you
know, this is what I meant by you get to
build the foundations really, really
solid from the bottom up.
>> I think I think it's important to note
notice how he created an empty folder,
right? He created an empty folder and
that's basically how most cursor
projects start if you don't if you start
from blank is it's an empty folder. And
you can tell because on the left side
there there's no files, right? We're in
a folder, which people call a directory
in coding language, I guess.
>> Yeah, folders and directory
interchangeable. Often times you'll hear
one or the other. uh they mean the same
thing and this is what I meant by like
this is by the books the same way as all
code projects are created. You make a
folder and you name it something and
you're like all right this folder is
going to have everything related to you
know this project.
>> Amazing. And so let's create a file.
>> Yeah, of course. There are three main
parts of cursor editor. On the left you
have where your folder kind of is broken
down into files if you have any files.
This is the middle where normally it'll
show you what's in the file. This is the
right which is where the AI kind of gets
to work. So, you know, there's two ways
to make a file. I can just go ahead, you
know, click new file. This actually will
tell you to make a new file. And I can
make this example. py. And so, you'll
notice immediately that most the files
contain a dot and then a following
section. And that normally labels what
type of file this is. So, py stands for
python file. If I click enter, it's
literally an empty file. Similarly, you
can do things like text.txt. txt
obviously stands for text extension. And
to jump a little bit into the AI, I can
tell it write me a poem and put it into poem.mmarkdown.
poem.mmarkdown.
And MD stands for markdown, which is
just, you know, a different way to
render text.
>> And if he had already created an empty
poem.md file, it would have added it to
the existing one. But since he hadn't
added it, it created a new file you see
on the left called poem. MD.
>> Yeah. And so that's one of the amazing
parts of cursor. It can go ahead and
create things for you and edit things.
So if I said like write me a shorter one
in text.txt, right? It will go ahead and
put a shorter poem into the file that
I've already created. So now it just
wrote me like a fourline poem. Perfect.
You know about coding. Makes sense. And
so this we kind of just wanted to give
you guys a view of what files are. Very
basic. You can put text in files. You
could put files in folders.
>> Amazing. What did you use over there on
the right actually?
>> Yeah. So this is their AI feature. It's
their agent. And so the agent in
technical terms kind of just means it's
the same thing as AI, but they built a
few things on top of AI to make it work
a little bit better as you would want it
to. So, you know, if you ask chat GPT,
make me a file, it's going to be like, I
can't really do that. But the agent is
given tools that allow it to create
files, edit files, and do all the things
that we really need it to do to write
code. And so I just showed a few
capabilities like creating a new file,
editing a file, and it kind of elevates
what AI can do. And so this elevated AI
we call agents. I could actually demo it
writing code right now. So we've only
just told it to wrote a few like poems
and some text. I could say, make me a
simple game in example. py where I guess
the number. And so this will probably
take it like five seconds. It's a really
short game where you're just, you know,
guessing the number, but it is it I just
want to highlight that it exists as
code. It's really simple and we'll be
working up from here, but now we have a
file. You might not exactly know what to
do with the file. So, the best part
about cursor is if you truly have a
growth mindset and you're trying to
learn how this works, I can just ask it,
how do I play the game? And it will tell
me. And so, we've been kind of skimming
over what is going on. Basically, you
know, it'll also reply to you. It said
like, I created a poem. I've been
skipping over that because it just tells
you what I It just kind of echoes back
what I asked it to do. But now it'll be
saying things like, "Okay, I'll run a
game from your terminal." This is
interesting. It's currently running the
game. And so this is interesting because
play in your terminal. It'll tell you
play in your terminal, open a terminal,
navigate to your project directory, and
run the game. So now it's giving me
instructions to use this file of code
that it just wrote for me. And so a
terminal is basically a way for you to
interact with your computer. And to
interact with a computer, it can execute
code and there's no, you know, play
button that allows you to just run this
file, which is why it is a little less
friendly than like replet or like uh
other tools, but we can learn it with
strong fundamentals on how to start from
scratch. Open your terminal. If you
don't know, there's a terminal thing up
here. You can do a terminal. There's
also a shortcut for it. Pretty nice. But
it tells me to hop in here. I'm already
in here, but we'll copy it anyways just
to show you that this AI is not lying.
And so I would just be running this.
>> So and by running this you're copying
that little string and pressing enter in
the terminal. >> Yeah.
>> Yeah.
>> Okay. And that's what it means to run.
Yeah. That's what it means to run is you
take the string. You can type things
into this terminal, right? And this
terminal here is identical to the
terminal that you you may have seen on
your computer if you were to just type
in spotlight terminal. Yeah. Open up a
terminal. For those of you who are
completely untechical, you know, two
years ago, the terminal was scary. If I
was ever reading instructions for
anything and it said to open your
terminal, I'm like, I'm out. I I'll pay
money to not have to do this. >> Yeah.
>> Yeah.
>> But after, you know, learning how to use
cursor. It's actually kind of fun to
open the terminal.
>> Yeah. You know, you feel like a hacker.
You feel like, you know, you know what
coding is, this is where strong
fundamentals truly kick in.
>> But the important thing is that is
identical to the terminal that you
opened up, right? Like it is. Yeah, it's
the same exact thing.
>> And I, you know, thanks for slowing me
down. I was going a little fast. Uh, I
can actually break this down a little
more. This tells you to navigate to the
project directory. I basically paste it
in and I click enter. And now it'll tell
me, you know, in the beginning it will
show you what directory you're in. So
this means I'm in the home. This means
I'm in the cursor video folder which you
saw me create actually. And this is how
I run the game. It says run the game.
And I'll just copy this. I'll paste it
in. And once again, as you can see,
these two are the exact same. And we can
play a number game.
>> And so now we're playing a game within
the terminal.
>> Yeah. all within like you know 3 minutes right
right
>> so obviously this game only I can
interact with text but that's why it
took so little time to like
>> guess guess a number
>> yeah you know like uh 67 too low okay we
can do some quick maths 80 too low okay
90 95 92 93 94 okay perfect so yeah that
was kind of like it does work it did
like tell me that I got it right and the
temps do increment up so you know pretty
simple little program. This is the first
thing that you can create. Not as useful
as some things that we will be building
later today, but great way to get
started and introduced a lot of things
like the terminal files, different types
of files and now we know where code
lives. So really great start to setting
a strong foundation.
>> 100%. That was super super interesting.
What do we want to hop to next? So yeah,
now that we have a very basic from the
bottom up, I'd like to also show you
guys a little bit more of a repo that I
actually was working in really recently.
And so I can go ahead and create a new
window. I can show you that this was a
project I was working on. And this is
what kind of like a project would look
like after it exists. And it looks a
little scary, but that's why I kind of
want to take the time to break it down
for you guys. As you can see here, this
is the main folder. It's glass AI chat.
Check out the last video. me and Riley
made. It gets pretty big. And all of
these are folders within a folder. So
these are folders and they have more
files in them. And these are folders
that can have folders inside of them.
And so these directories, they make a
really big nested thing. And you'll
notice that there are a lot of different
types of files, right? You know, we got
the config.js, we got thets, the CSS.
And all of these once again just mean
that you know the different coding
languages. So what exists in here is
JavaScript. In the previous example, we
were using Python. You can really
quickly tell by the ending extension and
also VS Code will go ahead and give you
a little icon to make it even easier.
And I did want to highlight a little bit
about how like common patterns you might
see when you explore larger repos,
especially since we're going to be
telling AI to write these things and
it'll probably look something similar to
this later in the video. And so you're
going to see something like backend
assets source source. I just wanted to
briefly touch on a little bit of coding
principles where normally there is a
front end and front end is in this case
source and it will contain components
and it'll be the things that you kind of
see. So if we look at cursor itself
everything that you can see and click on
it's a component. This is the front end.
It's the thing that you view and
interact with. And then the back end is
basically everything that you don't
necessarily see. So for example
obviously cursor has a bunch of data I
can use AI. These are all features. This
is just what it looks like. I can say hi
and it's saying hi back to me is using
the back end. And all that code belongs
in its own folder. And so that's kind of
the breakdown of larger folders and
directory structures. I just wanted to
really quickly talk about that a little
before we dive in deeper. So it's not
too scary once we start progressing
because we do progress really quickly
with cursor.
>> Yes. And we're going to build a really
cool app in the next section. And as
you'll see, we're going to do we're
going to be using AI to write all the
code. So, as you said, it moves fast,
but um stay patient. It'll all make
sense, especially as we get closer to
actually building and using the app that
we create.
>> Yeah. Yeah. So, I guess next we'll go
ahead and do something that a lot of
people love to use AI for. We're going
to go ahead and make a little quick
landing page. And I want to resume right
where we dropped off. I was showing you
guys this. We're going to go to cursor
2.0, which is agents. But currently,
this is working on the project that I
was just, you know, showcasing. So, I
don't want that. if you want to open a
new one. New window. I'm trying to find
new window. Oh, right here. So, this
kind of brings you back to the original
landing page that we were on. And I can
go ahead and Well, I'll put it in the
cursor video. Yeah. So, in here, I'll go
ahead and delete these files. So, so now
I want to show you guys we're in a empty
folder now. And up here on the top left
is kind of how you switch between cursor
1.0 and cursor 2 aka editor and agents.
We're going to be using cursor 2.0. And
you know, this is the old chat. I was
asking it to write a poem. I'm going to
create a new chat. And I'm going to go
ahead and say, do some research on the
company vibe code and create me a
landing page. Run this landing page
locally when you are done. So, I'm going
to go ahead. Oh, I want to introduce
these features. Composer 1 is a model
that cursor themselves have released.
And here I can pick which model I want
to use. I will go ahead and use sonnet
4.5. I like it the best and we'll
explain and break down all of these
little, you know, widgets and things in
this chat. But actually, this is what I
meant by like cursor is taking a step
towards being a lot more beginner
friendly. This is basically, you know,
asking it to build something that you
want. So, we're going to go ahead and
ask it to build this. So, let's talk
about this for a second. So, you just
entered a prompt. You said, "Do some
research on the company vibe code,"
which implies that it's going to do
research, which is pretty cool. So the
web agent has the power to use tools.
One of those tools is searching the the
internet. And if you give it a hard
question and you tell it to search the
internet for a while, it'll search like
10 pages sometimes or it can read an
entire documentation page. And you can
see here it's done research. Now it is
generating the code. >> Yep.
>> Yep.
>> And then it's going to run it locally.
You want to double tap on that a little
bit. Running it locally. What does that
fully mean?
>> Oh yeah, running it locally. Of course.
Thanks. Thanks for reminding me. So, as
I mentioned before, cursor is great
because it is local. All these files
exist on my local computer. I can after
this pull it up in Finder. And running
it in local basically means that I'm
going to execute these files on my
computer. And what this means, if you
guys want to get a little more technical
is that most of the websites that you
visit are files just like the ones being
written right now run on a server. And
the there's no difference between a
server and a computer. They're the same
thing. So somewhere out in South
California or or North California or you
know the East Coast, there's a bunch of
computers running a bunch of code and I
obviously don't like need to rent a
computer. I'm going to just run it on
mine. So that's what I mean by like I'm
going to run this locally.
>> And it speeds up development process by
a lot
>> and it's super easy to use because it'll
give you a little address that you paste
into your web browser like you know if
you use Google Chrome it'll work and
it'll just open it up right there. >> Yeah.
>> Yeah.
>> Which is nice. So, it's writing some
code. I've built a beautiful modern
landing page. And so, now it's running
the command to run it locally. Let me
run it locally for you. Excellent. What
I've created. So, running it locally.
Once again, we haven't been doing a good
job of reading it. It gives you a
rundown on what it's created and it
tells you that it is now running
locally, which means my computer has it
and I can access it here.
>> So, you copy that address, go to your browser.
browser.
>> So, let's see. I can go and paste in the
address that cursor gave me.
>> Sometimes that happens. You know, I have
a good idea why, but let's let's learn
and ask it. This doesn't show anything.
>> This is great. >> Help.
>> Help.
>> This is great. And this is one of the
one of the pros to using some of those
other tools is like it kind of just
naturally does this. But again, this
this is something that happens every
once in a while and you just ask it why
it's the case and then it will likely
just fix it. I think the best part is
actually to highlight that a lot of the
other tools will naturally make it work
for you, but when it doesn't work, you
have no community support. Asking the
website or the tool itself is going to
lead to varying results because
something broke and you don't have as
much control of it and it also doesn't
have as much control in the system
because it's not your system, it's the
company's system or whatever product
you're using system. So now that
everything's kind of in my hand, I can
truly just ask it like why and it can
tell me and I can take why and make it
work, which isn't necessarily true for a
lot of other tools, but it'll ask you
permission every once in a while to run
some things. And I see it's trying to
run the server right now on my computer
so that I can see it. It's just verified
that the web page is running. And it
once again tells me to access it at
localhost 8000. So, oh, right here. Perfect.
Perfect.
>> Amazing. And so, ooh, that nice little
like fade when you scroll.
>> Good animation. Yeah, honestly, very
cool. We like to joke that this is AI's
favorite colors theme. Like blue,
purple, like Yeah, everywhere AI makes
it. We'll actually get into this later.
We'll make a rule that says don't use
this color. I do want to point out that
it did like scroll up for a sec. Like we
just released pinch to build um which is
the new feature of the vibe code app.
And so, uh, it found that on the
internet and then included it in the
landing page. So, it makes it super easy
to create quick landing pages. Um, which
is really great.
>> Yeah, you know, I'm I'm reading these
and everything is real. So, it did pull
a lot of useful things from the internet
and it did write us code for a landing
page. Obviously, we can continue
iterating and we can deploy it later
too, but just wanted to show that, you
know, we've unlocked the box that we can
t talk to and be like, ask it to build
things. So, this was a little bit of a
sneak peek into what cursor can do, some
of the basics. We're going to go and
dive in a little bit deeper, uh, and go
and actually build an MVP of a product
that is a little more complicated than a
landing page, and we're going to
continue iterating it as I show you guys
the full feature set of Cursor 2.0. So,
I guess to reiterate, to reiterate here,
we we've talked about what Cursor is.
Then, we went over all the basics,
right? We talked about all of the things
that you need to get started. We
downloaded it. Now, we're going to build
something that you can actually put on
the internet that is an app that has
utility that you can use either for
entertainment or for work, etc. Is that right?
right?
>> Yeah. Yeah. Basically, the, you know,
landing page, I feel like it's a it's
been beaten a lot of times already. You
know, a lot of people claim that they do
it, you know, it's a it's kind of
boring. Let's build something that's,
you know, fun and useful.
>> I like it.
>> A little more complicated as well.
>> I love it. And then we're going to learn
in this process, we're going to learn
cursor 2.0, which are their like brand
new features. Yeah, amazing. So, back
here, I am going to go ahead and switch
back to the editor because I want to see
what is in the directory. These are the
files that it just wrote me. Once again,
I'm going to just clean up all these
things because I want to use this to
create a meme generator. That's what I'm
going to be working on. So, you know,
these chats closed. I don't, you know,
we're not writing poems or making a
landing page. We're going to make a meme
generator. So, first thing I want to
talk about, there are three modes. You
can actually use shift tab to switch
through them. pretty nice. All of them
are very useful. In the previous
example, I was asking it questions. If I
purely wanted it to answer and not run
the code for me and edit files, I can
use ask mode kind of for that's what I
mean by like it is a great product for
you to learn and upskill alongside of
it. Agent obviously is what we were
using. It has full control over all the
tools. It can write things. It can edit
things. It can you know run the server
on your computer.
>> But if you also ask it, if you say like
don't write any code, just tell me blah
blah blah. It'll still just answer you
and it won't actually create any code.
>> Yeah. And then plan mode also we we can
use this now actually. So we'll go ahead
and try composer 1.0 cursor's new model.
And we're going to say I want to create
a meme generator. Can you make me one? I
want there to be able to select an image
as a template and put text onto the
image. Afterwards, I should be able to
download the meme. Uh, allow users to
resize the text and the text should be
white with a black border. Pretty basic.
Clicking enter and it's going to plan.
This means it will not actually write
any code or create any files for me. And
one key thing about plan is that it will
ask you a lot of questions. So, that's
actually really good because I did skip
over a lot of these things such as
technology preference, text positioning,
and additional features. If I had no
idea what this meant, I could ask it.
Please break down options for question
one. And so, it'll go ahead and tell me.
And I could have used ask mode as well.
I think basically the point is you can
ask it questions and it will answer it
really well. So, it's recommend. It
gives me like a little bit of details
about React and Vite or Vite and vanilla
and Vue and other. It's recommending
that I use React or vanilla JavaScript.
I'm just going to say go with vanilla.
And I'm going to answer the additional
questions. Unlimited text boxes. I want
unlimited text boxes. So question two is
B. And additional features. Question
three is A and B. So perfect. It did
catch a few things that I forgot to
specify, which is really good. I
definitely winged this prompt. You might
want to do some prompt engineering, but
if you're too lazy to do that, go ahead
and try the plant mode. So perfect. Now,
I've kind of filled in all the blanks
for it, and it'll generate me a plan.
And this plan exists as a markdown file,
which we kind of briefly mentioned
earlier. It's a better way to cleanly
display text. And it actually exists as
a file. So, oh, maybe not.
>> I don't think it's added it yet. Maybe
it just created it. Or you have to hit build.
build.
>> Yeah. Well, it has a temporary file.
This is a file that kind of walks you
through its plan to create a meme
generator. And so it'll tell you things
like single page web application. And
this is great to kind of jam with
cursor. So I can go to ask and continue
asking questions about the plan being
like, oh, like tell me about like what
script.js is for and it'll answer my questions.
questions. >> Amazing.
>> Amazing.
>> Yeah. And so obviously you can go as
detailed as you want, ping pong back and
forth. And uh basically when you're
ready and you're happy with the plan and
you kind of understand what's going on,
you can go ahead and click build and it
will go ahead and start printing code.
And so one thing I really like about
Composer 1 is that it is insanely fast.
It is a lot more fast. [laughter]
>> It is so much faster than Sonnet 4.5 and
GPT's models. And that's one of the main
reasons to use it. I do think, you know,
on their internal benchmarks, it
outperforms them. I think there's a lot
of jokes being made about internal
benchmarks not meaning anything. So for
the more heavy lifting, I actually still
prefer using Sonnet 4.5 as my go-to. But
you know, for example like this done
already. Amazing. So we'll go ahead. If
you click on these three, like click on
this thing, you can kind of see the
files. Uh if you want to read over some
code and like get a grip of like what is
going on. Similarly, we can kind of see
that these three files now do exist in
the directory. And I'm going just go up
to trust cursor and keep all. So, one
thing I actually didn't realize that
plan MD file that wasn't in the
codebase. They created that as like a
little temporary file that the agent has
access to kind of.
>> Yeah. Yeah.
>> Oh, okay. Very interesting. >> Yeah,
>> Yeah,
>> that's pretty cool.
>> Yeah, this plan is fed into context when
you click build and it will operate with
this plan in mind. Also, another nice
tip and trick, you can actually edit
these things and it will be fed into the
agent. So, I could say like function to
redraw the entire canvas. Honestly, I
should have read the plan a little bit
more cuz I have no idea what this is.
But I could have said like, you know, I
want text to be I want the default I
want default color to be blue and it
will actually build it when I click
build. So, I forgot to mention that and
showcase that, but that is a really nice
feature that allows you to kind of both
view the text in a nicely displayed way,
but also modify it and feed it real
time. So, you know, while you're asking
questions about the plan, you can, you
know, find out that you don't like you
want to change something about the plan.
And it is really annoying sometimes to
regenerate the plan over and over again
cuz the AI has to spit the whole plan
out again. But you can just edit it in
line here. So, that's a really nice
feature by cursor. Continuing on though,
apparently we have a meme generator. I
really want to play with it. So, I'm
going just go and ask it, can you run
this locally for me? Going to close the
plan now. And these are the files. The
same way that you ran the landing page,
you now want this meme generator that
you created and planned with AI. You
want this to run on your computer.
>> Yes, exactly. And you know, it's asking
for permissions again. If this gets
annoying, you can go ahead and allow.
This way, next time it won't ask again.
So, that'll be good for when we continue
working and asking it to run things
locally. But now, great. We have a meme generator.
generator.
>> And look at what color it is again.
>> Oh, it's AI's favorite color. Now, I
actually did go ahead and uh collect
some memes while I was running through
this. So, meme run through. There are
some memes and public. No, wait. What?
Where am I? Yes, there we go. Uh, sure.
Great. Text. Oh, what? Enter text here.
Uh, WD. Add text. Okay. WD or arrow
keys. Amazing. So, we have our first
meme generator. Let's see. Oh, both the
text I see we found an error. WD was
rewritten. Oh, what? Hm. That was weird.
I'm not sure if I did something wrong or
the code is broken. Either way, let's
see if I can download it. Oh, well,
let's see. We do have the meme now.
>> You can download it. Um, and and it's
good. So, this is a fun thing. Like, he
created a project on cursor. He ran it
locally and now he's testing it locally.
And like while you're using it, you
should just keep track of the things you
want to change about it. Right? The
first thing that I notice is you notice
that the contrast is not very good. Like
it's white on that white background. We
should definitely be able to change the
color of the text. You know, that's one
thing that I would like to fix. >> Yeah.
>> Yeah.
>> Along with the background.
>> For sure. For sure. The background is
heinous. Absolutely. So sick of this
color. As I agree with Riley, the
bordering on the, you know, white text
is not very well. Normally on the memes
that you read, they got the thick black
border. So whatever background it's on,
you can either see the white or you can
see the black. That will be something I
asked cursor. And now that we're back to
editing it, we can actually do that. But
before that, I want to showcase a few
things. The first being there's like if
you click control shiftp, you can create
a new cursor rule. For this example, I'm
going to say styling and I'm going to
say this is going to open it. This does
exist as a file. I can show you guys how
to find it. And there are multiple ways
to make rules. This is just what I'm
most comfortable with. I'll show you
guys other ways right after this. But
there's a few options. I can apply it
intelligently, apply it to specific
files and manually apply it. I'm going
to keep this one as auto apply. Do not
use purple/blue
gradient or colors as like the primary
color. I'm just going to keep that
there. And next time I run a command, I
don't need to mention it, but it should
take this piece of feedback or this rule
and apply it. So that's really cool to
show you guys how I can add rules or see
rules later. There's a section here.
Let's just make this a little bigger.
Rules, memories, and commands. Here you
can see that uh oops project rules
always applied styling.mmp. This is
exactly what we just made. We can
similarly make rules right here as well
like add another rule. And there's two
sets of rules. User rules means they
follow you regardless of what project
you're in. you know, all the folders,
whatever folder you're in, that rule
exists. Project rules means, you know,
while I'm inside of this cursor video
folder, these rules will be applied. So,
I can actually create another rule.
Let's just say something like emoji ban,
right? Like AI also loves adding emojis
everywhere. Never add emojis anywhere,
including in your text response unless explicitly
explicitly requested.
requested.
>> I like it.
>> Yeah. So great, you know, two ways to
add rules and you can obviously always
see them here. For those who are a
little bit more technical and like to
truly get a grip of like all the rules
and stuff cuz you can actually do a lot
with rules. You can put them within
folders within folders. So you can put
them in subdirectories. If you do in
your terminal ls- a you can see that
there is now a new folder called cursor.
If you go and so ls.all means show me
everything in this folder. And so this
is the same folder as this. As you can
see, you will be seeing the same things
as let me do some space management here.
You'll be seeing the same things as like
script.js styles.css and index.html and
also this cursor with the rules. So
these are the rules that I just
specified. It only applies for this
project. What I was saying is that if I
create a new folder, I'm just going to
name this assets because I will be
putting more meme templates in here. I
can actually similarly have something
inside of the assets folder and
basically these rules will apply only
within this folder. So that's a little
cool. You can start nesting rules. This
once again uh goes back to you know if I
had different folders for front end and
backend and I wanted to have different
rules. It allows for that. So it's
really good. Cursor rules definitely use
them when you can. But I'm just going to
restore them to its original rule
settings. So, cursor rules, we have the
emoji ban and the styling that bans the
purple blue gradient thing. So, that was
a little bit of a rundown on rules. Now,
back to making it better. If I just say
anything right now, it'll probably
redesign it to get rid of the purple
colors. And let's see what what what
problems do we have? Oh, we wanted the
border to be thicker, right? >> Um
>> Um
>> for the text.
>> Border to be thicker. And then also
change the color of the text. I think
would be cool.
>> Okay. Gotcha. Please allow users to
change the color of the text.
>> I think that would just solve the
problem in full. Um cuz I could have
made it black.
>> I would like to or we can do both. Also
make the black border thicker cuz I
think the normal the standard meme is
like white text with black borders. So
I'm trying to recreate something similar
to that. So let's see. It's uh here. And
do I need to refresh this? Yes. As you
can see here, now we do have text color.
So I do think the change went through.
It is still using that color. So let me
see if that rule is applied properly.
Let's see. Rules D styling. Do not use
primary gradients or colors.
>> I think since it's already created it,
if this exists,
>> this exists already.
>> Please fix it.
>> Fix it wherever you find it.
>> Personally, I don't think this is how I
would use rules. I wouldn't make rules
on like proactively going back. I would
just create this rule. I would just tell
the agent right now to fix it now and
then yeah, then in the future it won't
happen again. You know,
>> I think I think a good part is probably
a better example would probably be if I
said redesign the app. This will refer
to the rule and never like use it.
Similarly, you can also see down here
active rules and the context used. And
the context used is actually really
important. you probably want to stay,
you know, as low as possible, which is
why a lot of people recommend you
whenever you move to a different task,
start a new chat. I'm going to go and
create a new chat because redesigning it
is kind of a different feature. So, if I
tell it now to redesign the app, I'm
pretty confident that it will not use no
purple and no blue. So, if I just say
redesign the app, it will go ahead and
start spitting out new code. And we can
see here that, yep, active rules, emoji
ban, and styling. So, I expect to see no
emojis and I expect to see something
that is not blue or purple. [laughter]
>> Hopefully, they don't choose like green
and red or something.
>> Oh, goodness. Yeah.
>> What's their second favorite? I know
their favorite color is like a purple
blue gradient. I don't know what their
second favorite color is.
>> I don't know. But, you know, normally we
just kind of give it direction for what
we want. Cool. So, it just told me that
it's done. I am going to accept the
changes and let's check it out. Oh.
>> Oh, it's nice. It's nice orange. I like
it. This is very much um kind of almost
like teenage engineering. If they if
they didn't have like rounded edges, it
would kind of look like teenage
engineering a little bit.
>> I see it. Yeah,
>> it's kind of a vibe.
>> Yeah. Yeah. And before I forget, I did
promise to continue going through all of
these features.
>> Let's do it.
>> This I wanted to showcase. The new
cursor 2.0 allows you to open a browser
inside of cursor itself. So if I click
this, I just want a browser tab. Boom.
Now I can actually just view this
localhost meme generator directly in cursor.
cursor.
>> And now this is starting to look a lot
like the other VIP coding tools where
it's all self-contained within cursor.
>> Yeah. And it has the same benefits as if
I had any errors on the website. I could
go ahead and, you know, reference to it
here in the chat. Since we haven't had
any errors yet, we'll just go along and
continue. These are, you know, similar
features that you see across the board
of a lot of vibe coding tools. We have
like select element kind of like
lovable. I can say like oh like I want
you to change this or that. And this is
the terminal. This is a terminal for the
website that's being run. So logs will
come out. Pretty cool features. This
came with cursor 2.0. I really like it.
Um I do think it streamlines a lot of
things. But let's see. Let's just play
with it. So that's another thing because
we are starting from the fundamentals.
This is the folder structure. I've
created this asset folder. We can
directly just use Finder and put the
photos that I had directly drag and drop
into the assets folder here.
>> Yeah, because it's not just markdown or
text files or JavaScript. You can also
literally put MP3s, MP4s, you can put
any type of file in your codebase
because remember this is just a folder
on your computer that all of this is in.
>> Um, and so now we're going to load it up
with some good memes.
>> So yeah, these are like some memes that
I compiled before the video, you know,
quick uh seven memes. I'm going to go
ahead and drag and drop them straight
into the assets folder. Now, we can
cursor you can also open photos, uh,
sorry, photos. So, you can see the
collection of images that I have, but
yeah, I'm going to add these as base
templates for the meme generator next.
So, you know, that's great. I'm going to
close this chat to give myself some more
space. So, this is the website we're
working on. Oh, yeah. This is the
website I'm working on. This is the
agent that I can talk to. And we have
our rules. Let's see. Let's actually go
ahead and edit a rule. So, I'm going to
go ahead just to show you guys rules in
practice. I want I want a clean
minimalist design. We'll see what it
does with that because we will be adding
more features and I don't want to spend
too much time like
>> messing with the design.
>> Messing with the design. So, I'm going
to go ahead as promised and say now that
we can see we have an assets subfolder
and it has a bunch of f photos that I
want to use as templates. So, I added uh
create a new chat for this cuz this is a
new feature. So, oh, this is a new chat.
Okay. I added a folder named assets and
it has some photos that I would like to
use as templates for memes. I would also
like to still have the ability to upload
my own image though. So, basically, I'm
just asking for a feature request. gonna
go ahead and send it and it will start
making changes. >> Amazing.
>> Amazing.
>> So yeah, let's see.
>> Dude, it is really fast. This composer one
one
>> composer is really fast. All right,
cursor just added the feature. Let's
accept these changes and then uh Oh,
give me the browser back. Where did it
go? Great. Now I can upload an image.
Okay, where's my Oh, here it is. All
right, templates. So, I just clicked the
refresh button. When files are uploaded,
sometimes they lag a little before being
rendered. Clicking refresh. Now I can go
ahead and make a meme. Add text. Let's
see. I use cursor. Add text. I use
cursor. Add text.
>> I think it it when you pressed enter the
text left.
>> Oh, wait. What?
>> I use cursor. I use cursor. I use
lovable claw codeex
and v 0ero. Okay. Well, okay. there was
something wrong. So there there there
are a few things broken, you know, with
the meme that I'm trying to make. So
obviously it replaced this text with
something else and uh it's not like
spacing it properly. So we can ask it to
fix these features. Now this is good.
This is good when you if you're if
you're not running into any errors,
you're not making something uh fun
enough. And so all you need to do is
literally express to the agent what went
wrong and it should fix it. And I think
actually I want to do showcase this as a
new like one of cursor's new features.
If I say like I use cloud code cur
codeex uh v 0 and replet and I add this
to canvas and it's just overflowing
here. I'm pretty sure I can just tell
the composer to go and look at the
website and make spacing like adjust
automatically. So look at the browser.
So this is the at feature. It allows you
to specifically point to things to look
at. So it's basically the same thing. Oh
man. So I just installed cursor so I
don't even have Chrome right now. So let
me go and use Chrome. Okay. For the
video, we'll probably
>> I like it. Okay. So in order to use the
browser, right, it sounds like you
actually have to use Google Chrome for
the browser. >> Yeah.
>> Yeah.
>> Okay. So in order to use the browser and
cursor, you need you need to use Chrome.
We are just now finding that out and
that's okay.
>> Yeah. So, what I was saying is like look
at the browser is basically the same as
typing app browser. So, no, I think I
need to restart my cursor. So, just so
we're back. I just installed Google
Chrome, but I was going to say look at
the browser is basically the same as
saying at browser. Oops, not branch. At
browser, look at the overflowing
text example. I want to be able to split
lines. Great.
>> So, yep. Let's see if it will fix this.
And so, this is it's going to go look.
Uh oh. Check the browser and it captured
a screenshot. Yep. Yep. So, oops. Sorry.
Yeah, it is looking at it. The text
rendered in a single line causing
overflow. Yep. It found that out. Adding
support for multi text line. Great.
Cool. So,
>> so you can literally tell the agent that
builds your code to go look at the
browser as you use it, which is
something that like a year ago, which
like was not possible at all or even
like three months ago.
>> Wow. It's done with the change already.
I do have to say though that when you
use this feature, it eats a lot of
context. So, I mean, I literally asked
it to do one thing and it's 20% 25%
done. Just keep that in mind when you
are using this feature. I don't actually
prefer to use ad browser for that really
reason, but I just wanted to showcase
that this is something you can do. So,
let's accept these changes or close the
browser too. Anyways, I like this
browser anyways. So, let's check this
out. Trying to make my same meme again.
Um text. Oh, so now lets me do new line.
I use claude codeex
new line lovable replet and bold add
text. Oh, amazing. Now it fits.
>> There we go. That's cool. Yeah, I can
actually finally finish this meme. Oh,
maybe let's see. Um, I use cursor. Nope,
it replaced this text again. So, that's
interesting. We're going to go and tell
it that issue specifically. So, I feel
like this issue is a little more
complicated. There must be something
wrong with the code uh on a fundamental
level. So I think it's a great
opportunity to showcase another feature
that is if I go and create this agent
and oh yeah so cursor 2 lets you run
multiple agents concurrently but it
requires a git repository. So a git
repository if you don't know is
basically how coders version control
their code. If you don't know what it is
it's not that complicated because you
can ask cursor how it works. This is I
can say like I want to set up git for
this project. it will go ahead and do it
for me. Um, if you don't know what it
is, I'll probably ask it to tell me a
little bit more about Git. You do need
to download a few things, but I already
have it downloaded. If you want a
separate video on how to get started
with Git, I'd be happy to make one with
you, Riley.
>> Let's do it. Um, basically, he's setting
up a way to save your code in
checkpoints. That's kind of how I, as a
Vive coder, I think about it. It might
not be technically, but like it's just
like basically you're creating little
saves of your project. So if you were to
completely torch your project,
especially as it gets more complex, you
can always go back to a checkpoint.
>> Yeah. No, no, you're absolutely right.
It basically is just checkpointing and
it's telling me that it's initialized my
git repository for me. So now, you know,
if I go to a new chat, I should be able
to run multiple concurrent agents. So
yeah, just a warning, you do need, you
know, cursors max plan to have this
feature available. I didn't know that so
I had to upgrade yesterday. But I can go
ahead and now select multiple agents. So
I can say I want set GPT and composer to
give this a try. Perfect. When I add the
second text to a meme, it overwrites the
first text. Please make sure this does
not happen. I want to be able to have
different text on the image. So yeah,
now as you can see this view, there are
three agents thinking concurrently how
to solve this problem.
>> That is actually insane. >> Yeah.
>> Yeah.
>> And you can see that they they
conveniently made it so composer one is
going to get done so much faster than
the other two.
>> Yeah. That's probably why they were
optimizing speed so much. Yep. Composers
one's done already. It's telling me,
let's see, here's what I've changed.
After adding the text box, it's
immediately deselected. Okay, that makes
sense. So, it's it's telling me the
issue is that when I was editing the
text, it still had it selecting, you
know, it was still selected. So, that's
that's a you know, I could believe that.
Let's try this solution. We're going to
go and try to say like I like cursor at
the canvas. I like code. Nope, it still
replaced it. So, this solution failed.
Good thing we have two more running. [laughter]
[laughter]
>> Wait. So, okay. Talk to slow down there
for a Go back to that what composer one
no the the composer one view when you
said okay let's try that one what you
were you were trying the version that
composer one tried to fix how would I
then switch like once sonnet 4.5 is done
which wow it's taking a lot longer than
composer 1 how would I switch to the
version that it does interesting they're
not doing anything but planning um but
yes to answer your question how to do
switches you can undo apply but
basically when all of them are done,
they'll, you know, prompt your fe.
>> Oh, you just select which ones you want
to apply.
>> Yeah. Okay.
>> It'll give you a warning like, oh,
you're going to overwrite the other
agents work. No, you know, normally
that's fine cuz I'm doing one feature at
a time. That's another benefit of having
new chats often. If I was like
continually prompting with multiple
agents, that would get really messy. But
that's why every time you can start a
new chat.
>> Okay. So, this one's still thinking. All
right. Or exploring. Oh, >> okay.
>> okay.
>> Okay. So, now it's writing code.
>> It's found the issue. It's writing code.
Let's see. What are you doing? Get to work.
work.
All right. Let's see. Codeex. So, I
don't know. This might be an issue on
cursors. And this feature did just come
out like I don't know this week. It does
seem like Codeex is kind of stalling.
Uh, this one it looks like it is the
same update on deselecting after adding
a new text field. This is what Riley was
saying, but like how do you switch from
each agents? I just apply all here. It's
going to ask me, oh, local, do you want
to overwrite it?
>> Wait, wait, slow down here. I I want to
I want to understand this. I want to
make sure I understand this. Let's say
you were just using one agent, right? If
you were just using one agent, you hit
apply to apply the code changes because
not only can it generate code, it can
also change the code, right? And you
when you apply, you're basically
applying all of those changes.
>> When you use three at a time, you can
apply just one of the agents changes or
you can unapply them. So you could apply
test if it doesn't work unapply them go
to sonnet 4.5 apply their changes and
and kind of sequentially test.
>> Yeah. Okay. Absolutely correct. So you
know I can undo apply here. I think the
reason I didn't undo apply was so now it
won't complain because what you just saw
was I did not un apply. So now if I try
to apply this it'll give me this warning
again. Basically it's the same thing as
what I just did. So I currently have
sonnet force changes applied. If I undo
the apply and then apply composer won't
it won't complain to me. It's kind of
just a friendly way to tell you that
like hey you're going to overwrite
everything that the other agent wrote.
And you know I don't really care. Um
stash changes and overwrite.
>> So if you press overwrite it's
equivalent to undoing the other one and
reapplying this one. >> Yep.
>> Yep. >> Okay.
>> Okay.
>> Yep. So that's a really good call. Um so
overwrite basically just does the exact
same thing. So now I have sonnets 4's
changes I believe right four overwrite
yes well I should have set four changed
currently and let's see if sonnet was
able to fix the problem so first text is
hi I like no cursor
>> still wrong
>> n still wrong yeah
>> yeah and I think the more descriptive
you are the better to do this and I
think yeah I think I know what the
problem is sort of not in code but I
think I know how I would fix it
>> oh yeah you want to give me a prompt
>> all right well just hold the whisper
flow button which is I think is
something we should talk about.
>> I don't have that.
>> Oh, but you can press the voice button.
I'm pretty sure it's down there. I think
they have it built in now.
>> Oh, you're right. They have the voice
feature. So, I'm going to start a new
agent and I'm going to let Riley go and
Oh, so currently right now when I select
a meme and add it to the canvas or
whatever you want to call it. And then I
add the first text onto the screen. And
then I move it around. And then I go to
create another text to add to it. Once I
start typing the second one, it
automatically starts typing into the
first one. What I want to have happen
instead is new text be added to the
screen as soon as I start te typing the
next one. And I want to be able to do
this for an unlimited amount of text
boxes or fields uh so that they do not
get overwritten and replace the writing
I've already done on previous text fields.
fields.
>> I think that was really descriptive.
Once again, we're going to try running
this. You can run composer multiple
times. I could run it three times with
just composer, honestly. Let's give it a
try. Four times composer. Maybe one of
them will get it right. So, since it's
so fast, we'll we'll see if it's smarter
than itself.
>> Yeah. And then this is one thing that
makes cursor so fun and vibe coding so
fun is just using voice, you know, like
being able to just like speak out your
thoughts as they're happening. And um I
just think it's super useful. I
basically just over I kind of
overexplained a little bit. You can see
here the different versions of Composer
are doing different amounts of work.
>> Yeah. Um, which is a good thing I I
think because you get a varying degree of
of
>> results. You get different results. So
you can truly test four different, you
know, approaches to solving the problem.
Yeah. So they're working. Oh, I think
composer one is done. Uh, so composer
one is done both on the fourth run and
the first run. I'll go ahead and apply
this one to test this one for now.
There's a let's see got to manually test
this. Hi. And let's try it again. Bye.
Ooh, this is promising. This one works.
Good job, number four. So, now that we
number four has immediately fixed it,
you know, just for the kicks, we can see
if this one fixed it. This one obviously
gave me 100 lines of code and deleted
three lines of code. This is what these
like colored numbers mean. So, this one
only gave me 24 extra lines of code.
This one gave me 100 lines of extra
code. So,
>> which is probably better. You probably
want to choose the one that has the
least amount of like the one that's the
most successful with the least amount of
code change. Yes, that is genuinely
probably generally probably like a good
rule of thumb. Uh because you don't want
ex that's actually a really good tip
because you don't want code bloat. Like
more code doesn't necessarily mean
better. In fact, it means worse AI
context. So that's actually a great tip. But
But
>> it's the same with like writing an
essay. Like if you can make a point in
one sentence, you should do it in one
sentence, not three paragraphs.
>> Exactly. Exactly. But just for the
kicks, we'll be applying this one. And
I'll just fully overwrite it. I still
remember that number four is the one
that's working as intended. So if I try
this now, add text. Hi. Okay. Move this
around. And then buy. Oh, okay. Well,
>> see, I actually like this one better
>> because the difference is the other one
waited until you pressed enter to add it
to the canvas. Click. Click uh text
content. Type something.
>> It adds it in real time, which is what I
asked for. So the reason there was more
code is it's actually doing something
more. If you go test the other one,
you'll realize it doesn't do that. I I
>> That's a great catch. Let's try this
now. Reapply full override.
>> Full override. This is cool.
>> Yeah. No, that's a huge catch. So now I
can say like, you know, look full overwrite.
overwrite.
>> So if you Yeah. If you put that there,
notice nothing's going to happen. >> See?
>> See?
>> Add to canvas.
>> Don't you think it's a way better
experience to have it on the screen like
it show up on the actual meme? >> Yeah.
>> Yeah.
>> Yeah. Let me finish my meme. Revert plus
apply again. All right. Yeah, full
overwrite. Basically,
applicable meme. Um, yeah, I think this
is really good. So, we're in favor of
keeping this one. >> Yep.
>> Yep.
>> Sure. Let's do
>> I mean that's what I asked for. I did
ask for I said when you start typing it
should be created on the thing.
>> Yeah. Yeah. No, that is great. So, real attention to detail and these things
attention to detail and these things matter. That is great. Um, I do think
matter. That is great. Um, I do think there's one I do think that, you know,
there's one I do think that, you know, there are quite a few things wrong with
there are quite a few things wrong with this. Obviously, I don't want this. I
this. Obviously, I don't want this. I want more of an interactive. I can tap
want more of an interactive. I can tap and then text is created there. Yeah.
and then text is created there. Yeah. >> And then I can click like an X or
>> And then I can click like an X or something up here. So, I'm going to just
something up here. So, I'm going to just give it another prompt to try and get
give it another prompt to try and get that state. So, or do you want to try?
that state. So, or do you want to try? >> Yeah, sure. I I actually know how I
>> Yeah, sure. I I actually know how I would want to set up this.
would want to set up this. >> Oh, yeah, sure.
>> Oh, yeah, sure. >> But I I don't want to interfere with
>> But I I don't want to interfere with your vision. No, dude. Videos are ours.
your vision. No, dude. Videos are ours. Let's do it.
Let's do it. >> Okay. Okay. Um, I want you to condense
>> Okay. Okay. Um, I want you to condense the meme selection thing [snorts] that
the meme selection thing [snorts] that is at the very top. I want you to put
is at the very top. I want you to put that instead in a left sidebar that goes
that instead in a left sidebar that goes vertical. If you're familiar with how
vertical. If you're familiar with how Canva works, they have this kind of
Canva works, they have this kind of utility bar on the left. I kind of want
utility bar on the left. I kind of want that to be the case. And then
that to be the case. And then immediately to the right of that, I want
immediately to the right of that, I want this to be the canvas, which is where
this to be the canvas, which is where the meme goes. And so here, once I
the meme goes. And so here, once I select a meme in the left panel, it'll
select a meme in the left panel, it'll populate there. And most of the screen
populate there. And most of the screen should be this canvas that shows the
should be this canvas that shows the meme. And then I want you to put
meme. And then I want you to put everything else in this little rounded
everything else in this little rounded rectangle bar at the bottom of the
rectangle bar at the bottom of the screen centered so that I can add things
screen centered so that I can add things in like a little utility so it's not so
in like a little utility so it's not so jarring to have all these things on the
jarring to have all these things on the screen. And I think something like TL
screen. And I think something like TL Draw has Yeah. or Excaladraw has these
Draw has Yeah. or Excaladraw has these little bars that you can select to do
little bars that you can select to do different things. I want you to take
different things. I want you to take that philosophy in kind of redesigning
that philosophy in kind of redesigning the user experience.
the user experience. >> Yeah.
>> Yeah. >> What do you think of that? Yeah.
>> What do you think of that? Yeah. >> I think you you are amazing at providing
>> I think you you are amazing at providing detail. I think it's great. I think you
detail. I think it's great. I think you know Yeah. The little like floating
know Yeah. The little like floating menu.
menu. >> A little floating menu like like uh it's
>> A little floating menu like like uh it's almost like fig jam if you've ever used
almost like fig jam if you've ever used it.
it. >> Yeah.
>> Yeah. >> Um yeah, I think I think just keeping it
>> Um yeah, I think I think just keeping it minimalistic because the focus should be
minimalistic because the focus should be on the meme. Like after you add the
on the meme. Like after you add the meme, it should just be the meme. If and
meme, it should just be the meme. If and then you look at the meme and then you
then you look at the meme and then you want to add something, you go to the
want to add something, you go to the little utility and you add it. I do
little utility and you add it. I do think this one will take longer. Khan,
think this one will take longer. Khan, it looks like it's done.
it looks like it's done. >> Oh, yeah. No, for real. Okay, four runs
>> Oh, yeah. No, for real. Okay, four runs of it. Let's see. Um, I do want to say
of it. Let's see. Um, I do want to say definitely read through the responses.
definitely read through the responses. You can skim through the code if it
You can skim through the code if it doesn't really make sense, but the core
doesn't really make sense, but the core value of learning and why I'm such a big
value of learning and why I'm such a big fan of composer is that, oh, sorry, of
fan of composer is that, oh, sorry, of cursor is that it allows you to learn
cursor is that it allows you to learn with it. And when you get more and more
with it. And when you get more and more in the hang of things technically, you
in the hang of things technically, you can kind of see if it went down the
can kind of see if it went down the wrong path or not. And for example, if I
wrong path or not. And for example, if I were to spot something that I didn't
were to spot something that I didn't like, I could just immediately abandon
like, I could just immediately abandon it and not try this. But, you know, it
it and not try this. But, you know, it look I was reading through this, it
look I was reading through this, it looked like it was like pretty good. It
looked like it was like pretty good. It promises me that it's done it. It always
promises me that it's done it. It always does. So, take the last part with a
does. So, take the last part with a grain of salt. But, normally during the
grain of salt. But, normally during the trajectory, you'll be able to see if
trajectory, you'll be able to see if they were like doing the right things or
they were like doing the right things or not. So, let's just apply this and see.
not. So, let's just apply this and see. Full overwrite. And
it now it looks even more like teenage engineering in my opinion. Yeah, I think
engineering in my opinion. Yeah, I think it did give you everything you asked
it did give you everything you asked for.
for. >> Yeah.
>> Yeah. >> Oh, okay. Okay. Very neat. Now I can
>> Oh, okay. Okay. Very neat. Now I can make the meme that I've been trying to
make the meme that I've been trying to make this whole video. I like cursor.
make this whole video. I like cursor. Okay.
Okay. >> Okay. I already know what I want to
>> Okay. I already know what I want to change.
change. >> What? This this part of like
>> What? This this part of like >> No, the text boxes little component
>> No, the text boxes little component there is heinous.
there is heinous. >> Oh yeah.
>> Oh yeah. >> Yeah.
>> Yeah. >> Yeah.
>> Yeah. >> You can do a new line. Remember?
>> You can do a new line. Remember? >> Yeah. Oh my god.
>> Yeah. Oh my god. >> There it is. Download. Hit download.
>> There it is. Download. Hit download. >> We finally made the meme that I've
>> We finally made the meme that I've >> Well, we don't know. Have we even tested
>> Well, we don't know. Have we even tested the download feature yet?
the download feature yet? >> I mean, let's see. Nah, it's here.
