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
