00:00:00
so in terms of AI development cursor AI
00:00:03
still holds the crown for me I've tried
00:00:05
the new version of vs code I've been
00:00:07
using wind surf bolt DIY replate these
00:00:11
are all great tools but I just find
00:00:13
cursor has the best of everything
00:00:16
wrapped into one at the moment and I'm
00:00:18
going to cover it more in this uh
00:00:19
tutorial today but the good news is
00:00:21
everything that you learn through
00:00:23
developing a web app or a mobile app or
00:00:25
anything else with cursor AI the same
00:00:28
principles work AC Ross these other
00:00:30
tools and all of these tools the user
00:00:33
interface is really styled based on VSS
00:00:36
code which is probably the most popular
00:00:37
editor out there so every time you move
00:00:40
between each one there's a lot of
00:00:41
familiar familiarity in terms of how
00:00:44
they're designed so the great thing
00:00:46
about cursor is it'll help you build any
00:00:48
kind of application whether it's a web
00:00:49
app a mobile app uh you can even build
00:00:52
games by plugging into Unity or GTO or
00:00:56
even you know plugging into Ros to
00:00:58
develop robots or Python and working
00:01:01
with blender you can pretty much do
00:01:02
anything with cursor AI it's really
00:01:05
versatile so in this tutorial we're
00:01:07
going to step through an install I'm
00:01:09
going to take you through the setup and
00:01:10
settings we're going to talk about the
00:01:12
agent and the composer when to use
00:01:14
either one we're going to talk about Tab
00:01:17
and control k for individual file
00:01:19
editing and I'm going to talk about AI
00:01:21
Dev best practices all the kind of tips
00:01:24
and tricks that I've learned over the
00:01:25
last 100 plus hours of developing with
00:01:28
cursor uh and how to make it go a hell
00:01:30
of a lot faster typically I'll start any
00:01:32
development project by going to Cloud
00:01:34
opening a project and using Sonet 3.5 to
00:01:38
input my high level idea of what it is I
00:01:40
want to build I'm always careful not to
00:01:42
be too prescriptive in terms of the
00:01:45
Technologies I want to use it's really
00:01:47
interesting to see what CLA is going to
00:01:50
suggest and what approach to take so if
00:01:52
you're interested in building things
00:01:54
with AI I highly recommend you check out
00:01:56
switch Dimension where I'm giving
00:01:58
courses on how to build apps agencies
00:02:01
businesses all based around Ai and one
00:02:04
course that's particularly interesting
00:02:05
is the build anything with cursor AI
00:02:08
course you can join the wait list here
00:02:10
and get preferred pricing it's going to
00:02:12
be launching in the new year and if you
00:02:14
get onto the wait list here just hit get
00:02:16
in touch and uh we'll get you on the
00:02:19
preferred pricing list for the
00:02:21
pre-launch before it goes live okay back
00:02:23
to the
00:02:26
tutorial okay so this is the cursor AI
00:02:30
editor so in the left hand panel we have
00:02:33
first of all our file structure so this
00:02:35
is all the different files that we have
00:02:37
in the current directory that we're
00:02:39
working from you can search through all
00:02:41
your files through the entire project or
00:02:43
just an individual page we've got Source
00:02:46
control here which basically means using
00:02:49
git or it can be attached to GitHub what
00:02:52
that means is every time you make some
00:02:54
changes you stage those changes and then
00:02:57
when you're happy you commit those
00:02:58
changes that that indicates basically a
00:03:01
point in time that you've saved the
00:03:03
document and you can then decide to go
00:03:05
back in time to previous versions of
00:03:08
your code setup and that's very powerful
00:03:11
and really important when you're working
00:03:13
with um pair programming with AI it can
00:03:16
make big changes particularly if you're
00:03:18
using composer or the composer agent and
00:03:22
you want to be able to step back in time
00:03:24
if it gets out of control or makes too
00:03:27
many edits that you didn't exactly want
00:03:29
so I advise that you're constantly
00:03:32
committing uh staging I I advise that
00:03:35
you constantly stage changes and commit
00:03:37
as you run through a project also useful
00:03:41
is the extensions so basically you can
00:03:43
install new extensions based on what
00:03:45
kind of code base you're working with
00:03:47
often times you'll get recommendations
00:03:49
from those as you start using them and
00:03:51
of course Docker then if you want to
00:03:53
containerize your local host development
00:03:55
or put it up into the cloud but that's
00:03:57
kind of a bit out of the scope of this
00:03:58
so a cursor is mostly known for is its
00:04:01
tab ability so if I hit return I can
00:04:04
actually I'll see a suggestion is given
00:04:06
to me here and if I hit the tab button
00:04:08
it completes that out I can also select
00:04:11
a line and I can hit control K and then
00:04:15
I can write new instructions for code
00:04:17
that I want to enter here or I can have
00:04:22
or I can highlight a line I can hit
00:04:24
contrl K and I can say explain this and
00:04:29
and instead of generating I can just go
00:04:31
to quick question to help me understand
00:04:33
what's going on so it's telling me it's
00:04:35
an asnc function this is just really
00:04:37
good when you're making your way through
00:04:38
the code and you don't exactly know what
00:04:40
something is doing you can use the asked
00:04:42
question to help explain what's going on
00:04:45
you can also do things like highlight
00:04:48
and then add that to the chat so it'll
00:04:50
add this to the chat window on the left
00:04:52
hand side and we'll cover that in a
00:04:54
second so another great feature of
00:04:56
cursor is in the terminal if I hit contr
00:05:00
K it can give me a list of command
00:05:02
instructions so you don't need to be a
00:05:04
terminal wizard anymore any problems
00:05:06
that you have that show up in the
00:05:08
workspace so let's say I've misnamed
00:05:12
this here you can actually click on this
00:05:15
little button here and then it's
00:05:18
actually giving me the suggestion to fix
00:05:19
this change this spelling to handle
00:05:22
converts and then or I can actually
00:05:24
decide to fix with AI so sometimes if
00:05:26
it's very obvious you'll get the fix
00:05:29
will come here straight away and if not
00:05:32
you can work with the AI to figure it
00:05:34
out or you can just highlight this here
00:05:37
now what's cool with issues is also
00:05:39
you'll see on your file menu here that
00:05:42
you'll get a hierarchy of the error down
00:05:45
to the actual problem itself so you'll
00:05:48
see all the pages so it's the page
00:05:50
within poster within app within source
00:05:52
so even if this was all closed you'd
00:05:54
know exactly where that error was coming
00:05:57
from so that's really useful to know the
00:05:59
color schemes here are important so on
00:06:02
to the good stuff so you can toggle this
00:06:06
panel open here by this little button
00:06:08
here or you can hit Control Alt B so
00:06:11
think about chat as basically your way
00:06:12
to have a conversation with the AI but
00:06:15
it doesn't necessarily go and Implement
00:06:17
any kind of changes that you want made
00:06:19
so you might make a suggestion and ask
00:06:22
hey I'm thinking about adding super base
00:06:24
to the project how would I go about do
00:06:26
that I'm having problem saving to get
00:06:29
how would I do that and it has the
00:06:30
context for your project and it can save
00:06:32
it in what's important to do though
00:06:35
what's different from chat compos and
00:06:37
composer is where you can and where you
00:06:39
know it is add the context of the file
00:06:42
that you're working on so if you think
00:06:44
about agents they work on context they
00:06:46
have a certain amount of memory you
00:06:48
don't want to give them the entire
00:06:50
codebase every single time to search
00:06:52
through although they're getting better
00:06:53
at that you want to give the exact file
00:06:55
that you think the problem is in or that
00:06:57
you're asking about so I might add in
00:06:59
the root file the utility file here and
00:07:02
then ask a question so I could just go
00:07:04
like this I can also do things like hit
00:07:07
at here and then I can decide to add to
00:07:11
ask it to search the web for current
00:07:13
information so if I want to add a Shad
00:07:15
CN component and it's out of date maybe
00:07:17
I add at web so that it'll search to get
00:07:20
the most upto-date version I can add the
00:07:22
entire codebase sometimes I'll do that
00:07:25
when I'm not having a lot of success by
00:07:27
adding individual files it'll scan the
00:07:29
whole code base notepads then are
00:07:32
basically these little scratch pads so I
00:07:35
can add in custom instructions or um
00:07:38
thoughts that I have about how the
00:07:40
project should work it might be always
00:07:42
use radx UI components and this might be
00:07:45
specific to this particular project it
00:07:47
might not be something I want to have in
00:07:49
the cursor settings files or the cursor
00:07:52
rules files that's what the notepad is
00:07:54
for I can also add in docs so there's a
00:07:57
lot of docs that that are all already um
00:08:00
added as standard but there's new ones
00:08:02
like uh super base Chad Cen aity that
00:08:06
I've been using and I will just have
00:08:08
those index so you just say add a new
00:08:10
Doc you type in the name of where those
00:08:12
docs are stored and it'll go ahead and
00:08:14
index those give you the most current
00:08:17
version um you can also select what
00:08:20
model you're using here currently I work
00:08:22
off 3.5 Sonet it's my favorite it's just
00:08:24
doing the best so far that changes on a
00:08:27
daily basis and you can also drop in
00:08:29
images so if you've got a screenshot of
00:08:32
your app output and there's something
00:08:34
broken um and or you want to actually
00:08:37
upload a design that you'd like to copy
00:08:40
you can add the image in here now over
00:08:42
here you've got two different options
00:08:44
you've got submit and you've got
00:08:46
codebase so basically when you're
00:08:48
hitting codebase it goes and does a
00:08:50
quick index of the codebase to see what
00:08:53
context and what information it needs to
00:08:55
pull through if I'm not having a lot of
00:08:57
Joy with the individual f file I'll use
00:09:00
the codebase button which is control
00:09:02
return so that's basically the chat
00:09:04
window often times it'll make
00:09:06
suggestions and then when you have those
00:09:09
suggestions you just hit apply to page
00:09:12
so it might say it might make a
00:09:14
suggestion about a file and then I could
00:09:15
just go and apply to the particular page
00:09:18
and you'll see the changes are actually
00:09:20
made here and sometimes it'll give me a
00:09:23
terminal command that it wants to run
00:09:25
and I'll see the Run button here what it
00:09:27
does is it opens up its own terminal and
00:09:29
then run runs that command so that's
00:09:30
really handy so moving over to the
00:09:33
composer so the composer is probably the
00:09:35
most powerful feature of cursor so
00:09:38
what's different about the chat window
00:09:40
and the composer window is composer
00:09:43
actually once you give it some
00:09:44
instructions it goes to work and it
00:09:46
doesn't just go to work on one file it
00:09:48
goes across your entire codebase so
00:09:51
often times when you're adding a new
00:09:52
feature it's not just on one page so you
00:09:55
might have a subcomponent that you need
00:09:57
to create that's part of a larger parent
00:10:01
component and that might be part of a
00:10:03
page and then I also might need to
00:10:05
upload the global. CSS or something else
00:10:07
like that there's a lot of work in doing
00:10:09
that the great thing about composer is
00:10:11
has all the context and it will make all
00:10:13
those changes so when whenever you run
00:10:16
composer it goes through everything and
00:10:18
all you have to do is hit the accept all
00:10:20
button at the bottom and you'll see all
00:10:22
the files that it has made changes to so
00:10:25
let's take a recent one here it goes
00:10:28
through and makes all these changes es
00:10:29
and then I can hit accept and then if I
00:10:32
when I hit accept it basically saves and
00:10:34
if I look at uh my running application I
00:10:38
can actually see the full finished
00:10:40
version so composer has two different
00:10:42
options available you have the normal
00:10:45
setting and then you have the agent
00:10:47
setting so the agent setting is kind of
00:10:49
one that you might want to start off
00:10:51
using see how you go and then when you
00:10:53
need more controls switch over to normal
00:10:56
it normally kind of works in that
00:10:57
hierarchy you start using the agent it
00:11:00
makes big sweeping changes it fixes bugs
00:11:03
does all that kind of thing it's kind of
00:11:04
like very hands-off it's my favorite but
00:11:08
you know when you run into errors switch
00:11:10
over to normal and then you've more
00:11:12
control over each one of the iterations
00:11:14
that it steps through and then down from
00:11:17
that then again you're just working with
00:11:19
chat and asking individual questions of
00:11:22
the code and then a step down from that
00:11:24
then is actually using the tab or
00:11:27
actually using control k and asking it
00:11:30
to make specific change to functions so
00:11:32
that's the hierarchy really you're
00:11:34
starting with the agent then composer
00:11:36
then the chat window then contrl K and
00:11:39
then just tab down as far as writing
00:11:41
code and to be honest I don't write code
00:11:44
I'm pretty much past that at the moment
00:11:46
I'm just basically prompting things into
00:11:48
existence error checking and then
00:11:50
working on the architecture and things
00:11:52
like that so there's also this new
00:11:54
feature called uh bug finder and
00:11:57
basically it's an experimental feature
00:11:59
and the costs are really quite high at
00:12:01
the moment essentially it Compares your
00:12:04
uncommitted changes or your current
00:12:05
Branch to the default or main branch so
00:12:08
if you're working on a feature Branch
00:12:10
it'll check everything for errors there
00:12:12
before you commit so that's really quite
00:12:15
powerful so your cursor rules file if
00:12:18
you choose to set one up you can also
00:12:20
set your cursor rules in settings but
00:12:22
typically if you've got different
00:12:24
projects it can be good to have cursor
00:12:25
rules file you can basically get that
00:12:28
from a website called cursor directory
00:12:31
you can download um a a set cursor rules
00:12:34
files based on whatever you're working
00:12:37
with in this case it's nextjs so as
00:12:39
you're developing you might notice a
00:12:41
quirk in how it works you would just add
00:12:43
in a new line to say oh you know in
00:12:44
Future Let's be less ver both or I might
00:12:47
say you know when I'm writing commit
00:12:49
messages let's be less ver both there I
00:12:51
don't need as many lines and add in
00:12:54
whatever extra detail that you might
00:12:55
want to have so the cursor rules is very
00:12:58
handy you can go to the settings here
00:13:01
just to make sure that it's um uh set up
00:13:04
to be engaged you can also write in your
00:13:06
own settings here so if these are to be
00:13:08
applied across all your projects you can
00:13:11
add in your rules here in the model
00:13:14
section you can decide on what models
00:13:17
that are available you can actually put
00:13:18
in your own open AI key or your an
00:13:20
Tropic key I actually pay for cursor I'm
00:13:23
paying $20 um a month I think it's
00:13:26
really 100% worth it I don't tell them
00:13:30
I'd happily pay a lot more for the
00:13:32
amount of productivity I get from it so
00:13:35
one of the things that cursor is doing
00:13:36
that's really nailing how well it works
00:13:39
is the indexing of your codebase this
00:13:41
should happen automatically but in the
00:13:43
case that it doesn't you can come here
00:13:45
to settings and hit your codebase
00:13:49
indexing Okay cool so for example here
00:13:52
I'm going
00:13:54
to add in the context of a page I'm
00:13:56
working on I'm going to set it to
00:13:59
agent let's add in options for X
00:14:05
LinkedIn Tik Tok and
00:14:09
threads on the poster
00:14:11
page I've agents selected here and then
00:14:15
I'm going to hit
00:14:18
submit so it's helping me step through
00:14:21
it started to do some
00:14:22
generation I can see here the pages that
00:14:25
it's working on here
00:14:30
and now you can see in the actual page
00:14:33
it's starting to apply all the changes
00:14:37
so what we see here in green is any
00:14:40
change that's been made in red are the
00:14:44
changes that it wants to remove and then
00:14:48
by hitting control shift and Y here or
00:14:50
just clicking this it accepts whatever
00:14:52
that change is
00:14:55
so I don't actually have to individually
00:14:58
go through each one of of those changes
00:14:59
when I'm using the agent it's actually
00:15:02
just going to make those for me if I hit
00:15:04
accept but what I want you to do is
00:15:07
basically read down through the changes
00:15:09
to understand what's going on at a high
00:15:12
level one thing that's also important to
00:15:14
note when it is making changes is these
00:15:17
little checkpoints here so if you don't
00:15:20
like exactly what it's done you can
00:15:22
actually hit the restore button here and
00:15:25
it will take you back to that point in
00:15:26
time so I can go right back to here
00:15:28
before I decided to ask it to make any
00:15:31
changes so that's really powerful the
00:15:32
other thing that you need to be doing
00:15:34
all the time is staging your changes so
00:15:37
that's basically collecting all the
00:15:39
changes that you've made together and
00:15:41
then committing and that actually
00:15:43
commits and saves to your git Hub to
00:15:47
your git repository so at any given
00:15:49
point in time you can use the checkpoint
00:15:52
system here to go back in time or you
00:15:54
can use one of these commit points to go
00:15:57
back to if you want to go back even
00:15:59
further so when working with AI it's
00:16:01
really important to constantly be using
00:16:05
checkpoints and also to be staging
00:16:07
changes because the power of how fast it
00:16:09
moves it can make big changes quickly
00:16:12
but it can actually do it in a way that
00:16:14
you know disrupts or breaks your code so
00:16:16
you want to be able to step back in time
00:16:18
and then step through carefully what
00:16:20
exactly those changes
00:16:24
were another tip I would have is to use
00:16:28
popular Frameworks and languages in your
00:16:31
development and the reason for that is
00:16:33
if you think about how large language
00:16:35
models work they work on crawling and
00:16:38
pulling in all the information and
00:16:39
knowledge from the internet the more
00:16:42
examples it has the More Corpus the more
00:16:44
stack Overflow answers it has the better
00:16:46
it's going to be so for front-end web
00:16:49
development I typically default to
00:16:50
nextjs it's really huge Community it's
00:16:53
well supported and there's a ton of um
00:16:56
support for it in terms of the language
00:16:57
models Chad Nui is a great component
00:17:00
library and it's really well supported
00:17:02
and components are basically all these
00:17:04
little widgets and tools that you have
00:17:06
on your website like a drop down an
00:17:08
input box uh they've already been
00:17:10
pre-created and allows you to move very
00:17:12
quickly in terms of scaffolding and the
00:17:14
tools like VZ and others use Shad CN in
00:17:18
creating their interfaces so there's a
00:17:20
lot of compatibility there Tailwind is
00:17:23
also really well supported now in the
00:17:25
last couple of years it's just a really
00:17:27
useful and easy way for a developer to
00:17:30
design and style a website and often
00:17:33
times a lot of these Frameworks will
00:17:34
default to using that so I recommend
00:17:37
Tailwind then in terms of a database um
00:17:40
anything really is well supported by
00:17:43
cursor you can use superbase Firebase
00:17:46
mongod DB any kind of postgres database
00:17:50
that you can think
00:17:52
of so hopefully you found that useful it
00:17:55
was really a brain dump of all my
00:17:57
learning over the last 100 hours or so
00:18:00
of using cursor AI I'm building a course
00:18:03
around AI development where I'm
00:18:05
basically teaching you how to build AI
00:18:08
by using AI tools like vzer cursor uh
00:18:13
wind surf everything that you could
00:18:15
possibly use to speed yourself along in
00:18:17
the process of building a business an
00:18:20
agent a web app anything that you could
00:18:23
possibly think of so if you're into that
00:18:25
kind of thing please jump over to switch
00:18:28
dimension. can't wait to see you guys in
00:18:30
the new year and if I don't see you
00:18:32
before that have a great holiday
