today I'm going to show you how to get the most out of cursor by highlighting some

of the key features as well as certain ways to actually use it that help me get the
most out of it to demonstrate all of this I'm going to be building a customer
support chat window that you could embed on your website I'm going to be using
JavaScript full stack here and react and this is actually my first tip is to use a
Common Language or framework when you're working with cursor because the AI models
that it's using will have a lot of training data on these different languages like
JavaScript and python are probably the most common so the results that you get from
the code that it generates are just going to perform a lot better and I would
suggest using popular Frameworks such as react or D Jango which are also just going
to have a lot of code examples that the AI models will have been trained on cursor
can absolutely work with other languages and Frameworks I've just seen the best
results using really common ones okay so I've initialized my react project and now
we just have a blank slate to work with I'm going to start the project by using
cursor compose which you can access by clicking control or command I and it's going
to be able to modify multiple files so this is why I like to get started with it
because it's going to be able to create a bunch of files for me that I'll then be
able to modify so let's go ahead and give it a description of our project okay so I
gave it the description I'm building a new support chat application which will
allow users to talk to a chatbot I need you to create some basic components
components in a nodejs Express server in index.js okay Enter I also recommend using
the composer if you're trying to refactor something into multiple different
components okay now we can go file by file here and apply the changes and review
what changes cursor made so we can control enter to accept that looking at index
that looks good as well okay so it didn't make multiple files but that's fine
because we're just getting started okay so right now the UI looks pretty clunky I
sent a message it I don't know why this header is so big let me show you another
powerful feature that cursor has which is image to code Generations so right now I
found this free chat interface on figma and we're just going to take a picture of
this and ask cursor to generate a UI that is going to be similar to this I'm going
to switch to using the sidebar chat here and we'll just paste the image in and say
please implement the necessary code to make the component reflect the design in the
image okay so it's written a bunch of code for us let's see what that looks like
okay now it's it's also made some changes to the CSS I can actually just click on
the file names here so the sidebar is pretty similar to compose you just have to
click on the names of the files but I do kind of like how it's in the side so it
makes it easier for me to coordinate between code and the generated changes all
right so we'll apply all of these now let's see what it looks like okay well it
definitely looks a lot better but it's not perfect right so what we can do is
iterate and we're going to just respond in that chat and continue the back and
forth so we'll give it this list of changes and this is an effective way to quickly
iterate on things because if you do one at a time you're going to have a lot of
time where it's generating the code so I like to just think of multiple changes put
it all in one message send we'll go through and apply these changes all right now
when we flip over to the chat things are looking a lot better we got these nice
icons and things are coming together so this design looks pretty nice but it
doesn't look just like the figma so what happens if I just keep iterating okay with
that iteration we are a little bit closer but there's still issues and now we have
this this has become rounded for some reason we don't have an x button and this
button looks a little smaller this text is too big here's the thing and this is a
big tip you need to know when to stop using Ai and when to actually get in there
yourself and start coding so you got to learn the limits of these models and right
now for example I've seen styling to be a big limitation like if I need to get
something Pixel Perfect it really saves me time if I just go in there myself and
start modifying these things because I could go back and forth with the AI for an
hour trying to get it you know just Pixel Perfect but it'll just get stuck in a
loop and so keep that in mind as you're coding with cursor it's really easy to get
caught up in that game of going back and forth but sometimes it's easier to just
pause and go and change the code yourself this is also one of the reasons it really
helps to have an engineering background and experience with code so if you're brand
new to this you might not know exactly what to write so you might have to go and
chat with the AI to try to figure out how this actually works and have it explain
it for you but that's a whole other subject so for now let's just move forward with
this UI let's go ahead and turn this into a real chat bot by hooking it up to the
open AI assistance API which does a really good job of managing State and
remembering all the messages in the thread which is why I want to use that solution
so we'll flip over back here and we'll go to our server now here's the thing cursor
is using these models which are trained on a bunch of data but the newer assistance
API wasn't part of that data so how can we use it well there's a number of ways
that you can import documentation into cursor cursor actually allows you to search
the web so if I type into the chat at web then I can ask questions that it's going
to actually go and look up information for and then be able to use in its response
so we could potentially go to this open AI documentation page paste it in and ask
it to make some changes but there's another way which is a little bit more
formalized and that is the docs ability so you can if you type in at docs it has a
bunch of official documentation already built in that it can go and pull from so in
this case I'm going to look for open Ai and we actually have it there so I'm going
to say let's build an assistance API powered chatbot here you can create an
endpoint to create a thread and then a message endpoint which will include the
thread ID in the request it's going to go ahead and go through the open aai
documentation and figure out how we can use the assistance API okay now I realized
that I created these points but we never modified the UI to actually use them so
let's go ahead and make a request to do that and this brings me to another tip
which is using the right amount of context in your request so when I go to the chat
on the right by default it's going to use the file that you have open as the
context and you will see over here it's using index.js as the current file we want
to modify the UI which is going to be an appjs over here now what we can do is we
can actually tag files so I can actually tag This Server file and then use it as
context for making the changes in the UI which is by the way why I highly recommend
that you put all of your code front end and backend in the same repository because
it really helps you make these full stack changes where you might need to change
the UI the API maybe some database interactions all in one go like if you pass all
these files in then it's going to be able to make the changes across all of those
files so definitely put all your code in one repository so you can tag the files in
this way and then reference only the files that you need don't run the chat across
your whole repository because it's just going to get confused by other random files
and it'll reduce the quality of the code that it outputs so give it just enough
context but not too much so here we basically asked it to use those new endpoints
and create the ability to create new chats we'll apply those changes okay we send a
message let's see if we get anything back oh looks like I missed actually creating
an assistant so I'll have to go to open Ai and make that okay let's send a message
waiting for a response all right we got a response now let's see if it remembers
the message because we're using the assistance API all right take a look at that it
knows that my first message was hey there so that's the really cool thing about
assistance API is that you get these features out of the box and I could continue
building this out you know add an ability to add files and then I could actually
upload those to the assistant and we could have a nice little widget that we could
embed on our site that we built you know in half an hour uh using cursor hopefully
those tips help speed you up but take a look at this video if you want a deeper
look into what's possible with cursor and all of the various features that it has
thanks for watching and I'll see you in the next one take care.