Transcripts
1. Introduction: Hi, my name is Peter. I'm a software
engineer, currently working in AI, research
and development. So in this particular class, I'm going to teach
you how we can build applications using AI. So if you are an
abstract beginner and want to build applications
completely using AI, this is the best place
for you to start off. And in this particular class, we'll be using Cursor to
build an application. And through all this
particular class, I'm going to teach you how
we can set up Cursor rules, how we can manage your context, how to utilize the Lego
Prompting strategy to effectively build
an application. So if this is your very
first time building an AI application
and you want to get a really good
fundamental idea regarding how things work, this is the best place to start. So get ready to build
your application, and there won't be
any coding involved, and I'll be walking
you guys step by step on how we can build a project by the end of
this particular class. So I hope to see you
guys in the next video.
2. Intro to AI & Cursor: Hi guys, welcome to the class. So today, in this class, we'll be learning about Cursor. Before getting our hands dirty
and working on a project, let us basically understand
what Cursor are along with some basic AI related
terminologies so that we can set up a base
for our upcoming classes. So let's move on. First of all, let us
understand what a model is. Even if you're saying that
you are using Cursor, what you are
internally interacting with is basically a model. In other terms, it is called us LLM, large language model. So you can basically consider
a model as an assistant, a highly intelligent
and skilled assistant, which has a wide
variety of knowledge. It has a broad knowledge across multiple
different domains, whether it can be literature, software development,
anything you name it, it has a lot of knowledge. The reason is that these models, these LAMs are trained over billions of data that
is available publicly. So it has a knowledge about various different
things in the Internet. So, in simple terms, uh, you will be interacting with these AI models or
large language models. Internally, these are
extremely complex, neural networks,
transformers, et cetera. But for us, they are basically assistants that
you can interact with. So there are different
model providers. As you know, we have ha GBT. So ha GBT comes under Open AI, and they have their
own models like uh, GPT four, GBT 40, GPT five, et cetera, and then we
have anthropic with the Cloud sonit 4.5, 4.6, opus 4.6, et cetera. Just like that, we
have Google and Meta. And what applications
or software, software like Cursor, copilot, windsurf lovable offers
is that they provide an ID like environment or
in the case of copilot, you can integrate
it with VS code, and what they enable us to do is to switch between these
different model providers. You can use anthropic, you can use opening eyes, GPD models, et cetera. So there is a flexibility that these software like SR
et cetera provides. And you might have a question that what's the difference
between these models. See, these models can be considered as
different variations. For example, one model can
be extremely good at coding, another model can
be extremely good at multimedia, ex etcetera. Each model differs
and each of them have their own speciality and there are general
purpose model as well. So you need not
worry about picking the right model because Cursor by default
provides an auto mode. So based on the task
that you're doing, Cursor automatically selects
a mode on the background. This is not something that you want to worry
about right now, but, it is a good thing to know that there are model providers
and each provider has their own different
models and Cursor. And as you know, Cursor is
just one of the applications that you can use to build
applications using AI, and almost all of these software in this ecosystem provides a similar
kind of features. We have tab completions, which means that whenever you are trying to
code on your own, Cursor automatically
predicts what you're doing. So for example, if you are going to write a function
that adds to number, just as you ender function ad, Cursor automatically
predicts that you want to create a function
to add numbers and it automatically
suggests that you can simply press the tab
key to complete that. That is one feature that Cursor
offers, not just Cursor. As I said, all of
the applications in the ecosystem offices. Then we have obviously the chat interface,
we have the composer. Composor is nothing, but
it can be considered as a multi agent feature where you can perform multiple
tasks at the same time. So these are some of the core features that Cursor offers, and we will be exploring
this in the upcoming videos. And yeah, that's it. This is a very quick, high level overview
of Cursor and AI industry and AI
terminologies in general. And what we are going to do next is that we will be building an application from scratch and what you're going to build, we will be building a
symbol to the application, and we'll be doing it completely with AI without even writing a
single line of code. So it is a pretty
interesting video, and I'll see you in the next.
3. Download Cursor: Guys, there is a prerequisite
for this particular video. So if you haven't set
up Cursor until now, this is the time that you
go and download Cursor, you can simply go to
cursor.com slash OM. And this is the official
homepage of Cursor, and just take a bit of time
to understand what cursory. You can simply
scroll through and read the different features
that Cursor office. And once that is done,
you can directly click on download for Macice
button right over here, or else you can click on the
pricing button right here on the NAR board and this gives us the different plans
that Cursor offer. And in this particular video, we will be sticking
with the hobby plan, which is completely free, and it requires no credit card, but has limited agent requests and limited tab completions, you can directly go ahead and click on the
download button, and you can also just read through the different features
that other plans offer. And in the future, if
you want any sort of additional features in
this particular list, you can upgrade your
plan accordingly. And once you download this
particular free plan, just install Cursor, and once you open up Cursor
for the first time, they will prompt you to sign in. And once that is done, let us continue from
the next class on.
4. Setting Cursor Rules and Project Setup: All right. I hope
that you guys have successfully installed
Cursor on your system, and now it is time to
get our hands dirty and write some code using AI. So the first thing that
I'm going to do is that I'm going to create
a new project. So I'm going to create a new
folder on my desktop called todo app, Cursor. All right. And once that is
done, I'm going to open a Cursor on my system. And here, I'm going to
click on Open Project. And I'm going to go to Desk job, and I will be selecting
my newly created folder, which is Studo App Cursor, and I click on Open. And just like that, we have got Cursor opened up on
our new project. And let me give you guys a quick user interface
view of Cursor. And on the left side, this is where you can see
all of your files. So currently, I am in
the file explorer tab, which means that as Cursor
AI creates new files, I can see them right over here. In the second section, I can search for files. And in the third file,
this is where I can see my git, changes. So once I set up git for
this particular project, I can see all of the files
that I have changed. Then I can directly
come in and push files to Github or any sort of
remote repository from here. And on the center, this is
where you can edit code. And on the right side,
this is the AI interface. This is where you
chat. This is where you interact with AI. So here we have a
couple of features. We have the agent
mode right over here. We have Agent mode, we
have planning mode, debug ask and different modes. We will be sticking
with the agent mode. And here we have the
model switching section. So here you can see that
I have enabled autobote. So it automatically selects the model based on the
task that I'm doing. So if I turn it off, then I'll be having my own, um diligence to choose a model. I can go with Opus 4.6. This is the most powerful
model that Anthropic offers. We have Son at 4.6.
We have GPT 5.2, we have Gemini flash and all these different
models available to us. But we will be sticking with the autobot right now because
we are in a free plan, and that is it. And this is the basic stuff
that you need to know. Here we have got the plus
icon to create a new chat. We have an option to see the chat history and
other stuff here as well. So this is a quick overview. Before moving on, we
need to do some setup. Uh, so here you can see that. The first thing that we are
going to do is that we are going to set up a
Cursor rule file. So what do you mean by rule? So in very simple terms, rule file is a file or it can be called as
an instruction file. And in that particular file, we define what we are building
in very simple terms. So in our case, we will be
building a two do application. So what we are
going to do is that we'll be creating
a Cursor folder. And inside that
we'll be creating a rules folder. So
let us do that. So I'm going to click on the new folder icon dt over here, and I want to end dot Cursor. And inside that,
I'll be creating another folder cool rules. And in this particular
rules folder I'm going to create another file cools instruction dot D. So this instruction
file is basically a context for the LLM or the model to always keep in
mind what it is building. So the reason for doing
something like this is that as you chat with the model, the context becomes filled up. So what is a context? It is the memory of a
particular model. When you continuously
chat with a model, the context, the
memory gets filled up. And as you know that,
a chat can be long. So the model also needs to remember what you said
in the beginning, right? But as the context
get filled up, what the model internally
does is that it removes contexts that it has
already stored from the top. And the issue that can arise
due to this is that it can forget some of this stuff that is
said in the beginning. So to avoid that, we are creating an
Instruction dot Empty file, and this file will be passed as a context with every
single request that you make to the model. So each time that you chat, this instruction file will be
also in the models context. So it never forgets
what is your vision, what is the thing
that you're building, and what is the basic stuff that you have mentioned in this particular
instruction file. So the model will be always
moving towards your vision. So that is the main purpose
of creating a file like this. Here, I have already created
an instruction file. So this is my project vision that is a simple
to do application. And the idea is I'm
building a clean, distraction free
to do application, and the goal is to help us stay organized without any fluff
or complicated settings. This is my core features
task, maan, remo task, stay saved, and I have a couple of simple
instruction here as well. So this is the instruction file, and I'm going to copy it and I am going to paste
it right over here. So each time Cursor makes a request that is each time that you chat
with Cursor or the model, it will have the idea regarding
this particular file. So this is the first thing
that you need to do. And I hope that you understand
the core purpose of creating a Cursor rule file.
And here you can see that. When I chat, I can
simply press the at key, and here you can see that
the instruction file automatically pop
up right over here. So I can simply give that to the context and the
query that I want. So this file will be in the
context every single time. I hope that you guys are
following along with me and you have created a dot
Cursor slash Rules folder, and your instruction file
has also been created. And from the next onwards, let us get started with
building out to do application.
5. Building using AI: Right, guys, the
time has come where we are going to build
our todo application. And before that, I have
a quick thing to say. So there are two different
ways to prompt an LLM. The first thing or
the first method is a one short prompt where you put everything that you want
into a single prompt and then instruct the AI
to build that for you. This is actually possible
for very small use cases. If you want to do
something very simple, then it is okay. But for building a software, it is always suggested to follow a Lego
prompting technique. A Lego Prompting
technique is nothing but you have an idea, and then you break
down this idea into multiple actionable
steps or you can say that multiple chunks of prompt. You have a big prompt
or a big idea, then you break down them into
multiple different prompts that you can provide to the model to build the
application for you. This lego prompt technique
is considered way more effective than a one
shot prompt attempt. Here you'll be
instructing AI step by step onto building
what you want. And this is very effective because you'll be
doing one thing at a time. And even if there is an issue, you can fix it at the
granular level rather than doing it in the end where the air has already completed building
in their application, and it might struggle
with fixing bugs. And also, if you follow the
Lego Prompting technique, you'll be also saving a lot of context because you'll be
doing one thing at a time, fixing one thing at a time, and the entire context
will be a lot more smaller because there would be less thing to worry about
in that particular stage. This is very important if you're building a very
large application. So we'll be following that and let us start off
the first phase. So here I'll be saying that I want to build a basic look
of my tudo application, create a clean sended web
page with a white background, put a box in the middle with a title that says,
My daily goals. Inside that box, I
want a place to type a new task and a button
that says a task. For now, just add
three fake tasks so that I can see
what they look like. This is how you
provide a prompt. You need to be
specific. You need to explicitly say
that what you want, where you want to place things, and this is how you get optimal
performance in one shot. Otherwise, you might
need to iterate again and again to get things done. That is perfectly okay. But if you have the patience
to write a detailed prompt, that is how you can maximize
the efficiency of AI. I'm going to copy this
particular prompt and I'm going to paste
it right over here, and I also have my Instruction dot MD file right over here. I'm going to give this
particular prompt and let us see what
cursory is going to do. So guys, one thing
to notice here that I haven't really specified
any sort of extracts. I'm letting AI choose
a etat for me. And in cases like these, it basically defaults to the Vanida setup
that is vanilla, HTML, CSS, and
JavaScript technique. And this is perfectly okay for us because we are building
a very simple application, but, uh, if you're building
a complex applications, which requires
database connections, more rendering logic,
et cetera, et cetera, then you can explicitly prompt Cursor or the AI to use a
specific textgF example, next Jas reactive
view angular you can specify that and
accordingly build it. But in my case, I want a
very simple application using HTR CSS and JavaScript, and that is what AI
does by default, because it actually went through the instruction
file and the prompt, and it basically came to the conclusion that this is
a very simple application, so it need not use a
framework like next or a library like react because there is too much complex for a simple
application like this. I actually went with
the vanilla set. Here you can see that,
creating a single page to do layout for your instruction,
clean sended, yeah. And we have the code changes, and here is a summary
of what Cursor did. It basically created an index
of HTML file, sended page, main box, added an area, three place or a task.
Styling is minimal. And here I can
click on review to see the code change
that Cursor made. Here you can see
that it basically wrote all the styles in line. Um, that is one thing
that I don't really like. Let us actually ask
it to change it into a different CSS file
in the next prompt. But in the center, we
have the basic details. So I'm going to ask it
to abstract the CSS code from index dot HTML to
a separate CSS file. So here, I'm going to
add instruction file. Also, I'm going to specify my, uh, index HTML file as well, and I'm going to press Ender. Now what Cursor is
going to do is that it is going to create a
separate CSS file, move all the CSS file to that file and link this
Htable and CSS file together. And let's see what
it is going to do. Yeah. I created a CSS file, add all the CSS right over here, and let's see what else
it is going to do. So Cursor is done
with other task. So it created the CSS file, moved all the styles
to the CSS file, and then line block was removed and replaced
with the link. So if I click on Review, here you can see all the CSS
file is right over here. I'm going to click on keypall and right here on the
index or digit file, here you can see the
link to the CSS file. And this is exactly what
I expected it to do. Okay, so now let us see how the application
currently looks. So here, what you can do is
that you can directly go to extensions and install an extension called
as Live Server. So live server is
basically an extension that can help us to view the application directly without opening the index dot
HTML file manually. So that is install it. All right. So I guess
that is installed. And after installing that, let us link go to the
next do get file, right click on it, and click
on Open with Live server. And just like that, here you
can see that we have got our very basic todo application right here on the
web. All right. So we are done with the
first task that is to build a symbol UI,
a white background, a place to another task, a button to add the task, and a couple of dummy tasks so that we can see
how the UUI looks. We are done with
the first phase, that is the visual skeleton. Now it is time for us
to make it functional. What I'm going to do is that
I'm going to make it work. What I'm going to do is that
when I type something in the box and click on at task, it actually appears in the list. Also, add a little
X button next to every task so that I can
remove it if I change my mind. This is what I'm
going to do next, so I'm going to copy it and I'm going to paste it
on the chat window. Also, I'm going to attach my
instruction file as context, and I'm going to tell
Cursor to do this for me. So is done with the task. So here is what implemented. It implemented the
art task feature, the remote task feature, and it has modified the
index or digital file, and you can see a couple
of features that it added. So it creates a new AI tag. Each uses a small SK gt will help us with the type
test is shown as plain text, et cetera, et cetera, and tilt cs file has
also been modified. Let's click on Review, and here you can see the
changes that it made. So here you can see
that it created the script tag in line and
did all these changes. Again, I'm not really a big fan of writing everything
in one page, so I'm going to ask Cursor to create a new file for storing
the script tag content, which is nothing but it
is Vanila JavaScript. Can you abstract
abstract the script tag? And create a new file for it. So, guys, the reason for doing this is to
make it modular. So we should never really
write code in a single page. Uh, we should basically divide code into different
different segments. So in this case, you
can see that we have all styles stored in CSS file, the entry point is
in Index or HTML, and then we have
the app dot JS file where we basically
write all our logic. So this is how you should
structure your application, especially a vanilla
application like this. So here you can see that I'm basically having a vision and I'm basically guiding the
AI to achieve my vision. That is how you should basically work when you're using AI. You should already have a basic idea regarding
what you want, how you want the
structure to look, how you want the
application to behave. Then you want to
basically provide very clear detailed prompt to the AI so that it can
work towards your vision. That's how you basically
do it. So here, it basically created
the Abdo Js file, and in the indext of HTML file, it basically linked
to the Abdo js. So I'm going to click on Keypod. And if I go to my application, I should be able
to add a new task. So I'm going to basically say Wh Clothes. And if
you clicon add it should come to the list
and just like that, you can see that washes spelling is wrong, so
I'm going to delete it. Wash clothes at dusk. And we have another feature, and we are able to add a task and even remove a task as well. Alright, we are done
with phase two. Now it is time for phase three. That is to check off feature. So we need to add a
feature where we can check of strike off a task
once week are completed. So I'm going to say that's
add a way to finish task. When I click on the
text of a task, I want it to turn gray and
have a line through it, so to show that it's done. So if I click it on again,
it should go back to normal. So let's copy it and instruct
Cursor to do this for us. And just like that, Cursor
isn't done with the task, so it had a style and
updated app dot js. Let's see what it did. So it created a function
called stogal done, a query selector and
an emir listener. Yeah. So each time
I click on it, this particular function
gets activated. And a strike through would get actually
added to the text. So I'm going to
click on Key pale. So if I go to the application, you can see if I
click on any text, it gets striken off and
if I click on it again, it basically comes back
to its previous date, and that's exactly
what I wanted. So what I'm going to do is that I'm going to
remove all of these, and I'm going to say, write a letter to Dad
click on Add task. And what if I refresh the page? You can see that it
defaults back to the hard coded to dos that we added. So whatever we add is
not getting persisted, so we need to add
that feature as well. That is the memory feature. So right now when I
refresh my browser, all the tasks disappear. Can you make it so that
the app remembers my list? I want my tasks to be there
exactly how I left them. So if I close them the tab, close the tab and come
back, it should be there. So I'm going to copy
this particular task and I'm going to add
right over here. And also, I'm going
to say one thing, remove the hard coed task. And here I'm going to
attach my instruction file. So Cursor is basically want to make use of the
local storage of a browser. So each time you enter a task, it is also going to get stored into the local storage
of the browser. So even if you come back, that will be persister
right over there, and that should be the approach that Cursor
should be following. Let's see what it is
going to come up with. So cursory is done
with the task. So here you can see that the
hard coder task was removed, and in the Ado JA
storage task is stored in the local storage
just as we anticipated. So we have the getTask
function, save task function, create task function,
render task, a task, and all these
different functions. What it does is that it actually refactored into
different functions. Each time you load
the application, it renders the task by
calling the G task function. So the get task function basically gets the data from the local storage
if there is any, or else it basically
provides a clean state. And every time you
basically add a task, it also gets saved into
the local storage as well. So that's how it works.
So let's save it. And if I refresh, you can see that no task
is right now present. So I'm going to sing a
song, write a letter. Wash dishes. And I'm going to say that I
already wash dishes and yeah. So I'm going to
click on refresh. And as you can see,
when if I refresh, this data is getting persisted, but you can see that checkbox
is not getting checked as I basically strike these tasks. So I'm going to say
when I strike a task, also show a check. There's already check button, so you're going to say also fill the check box with a check icon. Alright, so it basically did it. So I'm going to accept it so you can see
each time I strike off, you can also see the
check button getting activated with a green checkbox. So that's it. This
is how basically you can prompt an AI to build an
application of your vision. So just going through what we have done in this
particular class, the first thing
that we did is we created an instruction
dot empty file. This is not really relevant in this particular
application because it is a very small one and
we don't really have a lot of conversation
happening right up here. But imagine that you're building a very large Ecommerce
application. Then you'll be constantly interacting with AI
to make changes, add changes, refractor
things and all. And in that particular case, the context becomes larger, and the AI would tend to forget what is said
in the beginning. So in that case, you can create
an instruction file like this to add the basic vision of your application
so that it always move towards that vision
without halucinating. So that is one thing. And second most important thing is the
Lego Prompting strategy. Make sure you break down
your entire vision or idea into multiple different
executable small little proms that you can instruct AI to do, and that can yield you
much better result than a one shot strategy. So that's it for this
particular video, and I really hope
that you have learned something that would be useful in your journey of using a Cursor or any
sort of AI agents. And one thing that I want
to also point out is that this where you have learned in this particular class
is completely generic. It is not tied to Cursor. Now in the future,
if you switch to copilot or Windsor for lovable, all of them uses this
particular same technique like the instruction file,
the prompting strategy. Everything is
basically applicable to all the other application or any sort of AI agents in
this particular space. And one thing that
I want to also tell you guys is to read the dogs Cursor provides
a lot of features, like agents, MCPs, et cetera. Just spend some
time and go through this particular docs
to understand what are the different features
that Cursor offers. And, uh, it turns out
there would be a lot of features that can help
you in your daily workflow. So Tas you guys, thanks
a lot for watching.
6. Conclusion: Thanks a lot for watching. And it is really great that
you guys made till the end. It actually shows your
passion and interest for building application using AI and which is extremely
appreciable. And I really, really wanted to know what
you guys think about this particular
class and you can leave that in the
command session. And also, if you guys have
got any sort of queries, I'm always available in
the discussion session. You can pause a query,
and I'll be more than happy to help you.
And that's it. Thanks a lot for
watching, and I'll be making a lot more
videos regarding AI and how you can use that
to build an application, how we can convert an idea
into a real life product. Stay tue for that until then there is Peter
Johnson signing off.
Peter Johnson, Software Engineer
