Cursor AI Tutorial for Beginners [2025 Edition]

cursor is a code editor similar to VSS code that helps you code much faster with the help of AI now even if you don't have any coding experience it can still help you build basic programs and

help you learn how to code along the way and if you have a lot of experience like me it can dramatically boost the speed at which you're at your code and it can work on large code bases as well I made

a similar tutorial about 6 months ago so in AI time scales that's about 10 years so it was time to create another one because a lot of things have changed and there's a completely new workflow that

you should use to get the most out of the tool today so let's start with the basics first you're going to want to go to cursor. comom and you can download

to cursor. comom and you can download the tool cursor is a desktop application so it's going to run on your computer and it's going to work on the files on your computer it doesn't run in the

browser like some other tools you can get started for free and the free plan does include a two- week long Pro trial so I suggest you start with that and then see if it's worth your time for me personally it saves me an absolute ton

of time so it's an easy investment once you have cursor downloaded and installed you can open it up and you'll see a window similar to this cursor is based on VSS code so if you're already familiar with that feel free to skip

along but for those who are just starting out I'm going to go through the various panels and what they're responsible for first you're going to want to open a project and this is just going to be a folder on your computer

where you want the code to be you can feel free to just create an empty folder then you will see something like this and the first thing I'm going to do is open a terminal which I'll explain in a

moment so this is what the full layout looks like now I'll switch over to a project where I already have some code so let's go through these panels first up at the top you have various menus and these are going to allow you to do lots

of different stuff the most important one I would say is under file preferences and cursor settings and vs code settings these are going to allow you to configure how cursor actually

works now on the left we have the file explorer and this is basically just looking at the folder on your computer and allowing you to quickly navigate across different files you can add files

you can add folders and you can see which editors you have open but I'm just going to close all of those and here we go now we just have one open speaking of which this middle panel is going to show

you the contents of the file that you're viewing and right now I'm viewing this app. TSX file you can see all of the

app. TSX file you can see all of the different code and when I make changes here you'll see various things things like autoc complete and suggestions and

you'll also be able to use some of the AI features that cursor has in here by being able to select some code and pressing contrl K I'll cover that as well as all the other coding features

once we get through all these panels so in the bottom here which I opened using terminal new terminal I have the terminal which is allowing me to execute

commands on my computer and you can actually also use AI in here by pressing contr K and describing the sort of command you want to run this is going to be helpful for you to actually run the

code that you write there are some other tabs here but honestly I don't really use them I just use the terminal sometimes you'll want a new one so I just like to press this button over here

to add a new terminal and then you can run multiple things at the same time and finally over here on the right we have the AI chat panel and this is essentially like Chad GPT but baked into

the code editor so it's going to be a aware of all of the files that you have and it'll be able to make changes across all of them this is what I think makes cursor much better for coding than tools

like Chad GPT because it's going to be able to automatically find the right files and make updates inside of them instead of requiring you to kind of piece together every change that it

makes and this is the most important panel because this is where the majority of your interactions with the cursor AI will actually happen in fact let's take a closer look at this panel and see what's going on here so first of course

you have the input box which allows you to write prompts to get the AI to either answer questions or write some code up here you have the ability to add additional context that the AI will

consider when processing your request down here in the bottom left you have a drop down for the mode now up until recently it was actually quite a bit more confusing what you should do because there was a composer menu and

you could choose between normal and agent but now everything is handled through this mode dropdown so now things are a lot more simplified and essentially you just want to use agent whenever you're trying to make changes

to your code and you want to use ask whenever you're trying to design something or just asking questions about your code now to the right of that you have the model dropdown and the thing to

keep in mind is that cursor is a tool sitting on top of the AI models they do have some models of their own that they use for things like autocomplete but the majority of the code is actually

generated using state-of-the-art AI models from company like open Ai and anthropic personally I found the best model for coding is Claude 35 Sonet and I know a lot of professional developers

share that opinion anthropic recently came out with a new model called Claude 37 Sonet but my initial impression is that this model likes to over engineer and write too much unnecessary code so I

found myself still gravitating towards 35 Sonet instead time will tell and maybe things will improve with 37 but for now I like to use 35 you also have

the ability to add images here to use as a reference and of course you have your chat history and the ability to create a new chat now let's go ahead and actually write some code using cursor I have an

empty project open over here I'm going to go over here to the chat panel and if this isn't open all you have to do is press control or command L and it's going to open up the panel so I'm actually going to use my voice to type

my prompt and you can do this without any specialized software on a Mac just press the function key twice and on a Windows press Windows 8 please create a basic landing page using

react and Tailwind I'll just specify that I want to use V here and we're going to switch it over to agent mode and go ahead and send that request okay so here we're seeing the

first capability of the cursor agent which is the ability for it to run commands this is a command that we would typically run in the terminal to initialize this project and I'm going to go ahead and just click run command

there's actually a setting called YOLO mode which you can get by going to to file preferences cursor settings and under features you'll see it here and

YOLO mode actually will allow cursor to automatically run these commands instead of you having to approve it every time although I think in most cases you do still want to see what the command is before you run it we'll go ahead and

accept this one as well okay looks like it ran into an error and you can see that it actually automatically recovered itself this is another strength of the cursor agents they can identify when

they have a problem and then they try a different approach since we ran this command up here to create a project using V we actually see a bunch of files automatically created so this is the

majority of our starter react project and now what we're seeing is the cursor agent actually creating additional files and automatically populating them with some code so this file right here

Tailwind config.js was just written by cursor now we see that it went ahead and actually modified our app TSX file and when we go to the the file you'll see

these red areas which are lines of code that it removed and these greenish yellow lines which are code that it has added now if we wanted to we could go through and we could actually approve

this one by one but usually you're best off just accepting the whole file and then iterating from there in case there are further changes that you want to make all right so it looks like it's kind of done writing code and it's

saying that we should just do npm runev which is the command to actually start this react application I'm going to run it over here in the terminal just so that it's running outside of this chat

I'll just go ahead and copy this command and then we'll run it here all right now we have this application running and I'll open it and here's what it looks like now obviously

it's a little bit of a mess I don't know why these icons are so huge but this actually gives us a good opportunity to ask the AI agent to make further changes to the code and we're going to do that

in the same chat because that will allow it to see the context of what done so far and it will know what we are talking about I ran the command directly in the terminal and the application is up and

running however there are some issues like the icons are really huge I think it might be a problem having to do with tailwind and the Styles not being

properly applied can you please troubleshoot and figure out why the icons might be so large and then I'll just go ahead and submit that so now the cursor agent has removed a bunch of the

CSS responsible for for The Styling and now it's reading this CSS file and asking us to delete that sure let's go ahead all right so we've deleted the file and it's made some style changes to

the app TSX okay let's flip back over here well that actually looks kind of worse so what I'm going to do is show you another feature which is the ability

to go back to a previous version of your code you can always go back to a previous message that you had and click this restore checkpoint button which is going to undo the changes and basically

take you back to the version of the code that you had when you sent that message so now when I go back to the UI you see it's that previous version one thing that I noticed is that this is underlined in yellow and it says unknown

rule at Tailwind I'm actually going to try this right here which is fix and chat and we're going to see if it can actually figure out why the error happens and it looks like it figured out

that we need this post CSS file let's restart the server and see if that makes a difference now when I refresh okay it gives me another error I'm actually just going to go ahead and paste this directly back

into the chat and you don't even really need to add any context cursor will tend to just figure it out okay we got another package that we need to install after going back and forth a few more

times with the AI agent I was able to figure out the issue and install the proper packages now the landing page looks like this now let's go ahead and add a little game to our application I'm

going to actually open a new chat and you want to do this any anytime you're working on a new feature think of it like this every time you send a message in a chat that already has messages in it that is additional context that is

going to the AI model and that can be useful if you're trying to iterate on something that is relevant but if you're building something new it's actually going to distract the model and you'll

end up with worse performance overall so generally speaking when you have a new feature you want to start a new chat the nice thing is if you do have something that you've been working on for a while and you need a new chat to kind of

refresh the context cursor has also added a new feature that allows you to start a new chat with a summary of a previous chat I found this helps when you're working on a really big feature

and you kind of want a fresh start but you still want a lot of the context from that previous conversation but in this case I'm just going to start a brand new

chat and we're going to ask the AI to add a game of snake to our landing page use a separate file to Ain that logic

I'll submit that request and what we'll see now is that cursor is going to create a new file for us that has the snake game and it will automatically update this app TSX file so that the

snake game is included in there this is the beautiful thing about AI agents nowadays you don't even really need to tag all of the relevant context and you don't need to have all of the files

created the AI agents will just go and create the necessary files and find an update and any other files that they need to change so in this case we see that cursor is importing the snake game

in the app file and we can see the snake game over here this is a brand new file now if I go and refresh the

page we can scroll down and start the game okay well it looks like the snake game is working but whenever I press up

and down it is moving my window so let me go ahead and ask cursor to change that the snake game is working well but whenever I press up or down the scroll

bar on the main window seems to shift as well can you make sure that we are preventing that from happening and this is the sort of workflow that you'll generally use you'll make an initial request cursor will write some code and

then you'll see some problems with it what you want to do is tell cursor what it did correctly and what changes it still needs to make that way it's not going to rewrite and modify a bunch of stuff that's already working and it'll

focus its energy on just the changes that you still need okay let's refresh this we'll try it again there we go and now when I press up and down it's no longer moving the screen now the other

thing you can do with this AI panel is ask questions about your code let's try that here I'm going to actually highlight this function over here and I'm just going to add it to chat so it's

additional context that's being passed in so that cursor knows what we're asking about please explain this code line by line we'll submit that and this can

actually be a really great way to learn how to code while you're getting AI to write the code because when you're asking questions cursor is going to know the context in which you're asking them so here we see an explanation of the

code that is running here this code uses a use effect hook which runs whenever the snake's position or food position changes and if I'm a beginner learning how to code I can just ask follow-up

questions so explain use effect in more detail and what a canvas is so this is the ort of thing that you would use the ask mode for is to learn about the code and you can also use it to design things

so if I go over to app TSX you'll see that it changes the context over here as I switch between the files this is the additional context that's being sent alongside your question so in this case

we want to ask about app and I'll just do a design sort of question let's say we wanted to add a bunch of different games to the system and we wanted to add multiplayer functionality how would you

design this and in this case I actually used Sonet 37 thinking because it does a pretty good job at these highlevel designs and thinking through all of the details and in this case we can see the

core architecture how we would handle the game registry multiplayer infrastructure and so on so we see kind of an overall design let me ask it to summarize this in a more bullet point

list so here we go here's the design and the file structure that we would use so this is another powerful way to use the ask mode in cursor now let's go back to using the cursor agent to make some

further code changes but I'm actually going to switch gears and work on a different application that has a much more developed code base this way I can show you how to use cursor in a real world application and how to properly

manage context as well as some of the more advanced tools the application I'm working on is called elder run and it is basically an AI powered not taking app

so here we have our notes and groups of notes and the thing that we want to add is another tab here that has chat right now we have a chat history over here on

the right but we want to bring it over here to notes and groups and be able to put our chats into folders so going beyond the simple demos this is a feature that you would actually build in

a real world application so I'll switch over to cursor and I'm going to use 35 Sonet agent mode and in this case I'm going to type my prompt because I'm going to be tagging specific files that

I want cursor to focus on we currently have at and this is going to allow me to tag a file so in this case I'm going to say notes

panel which is this panel right here on the left and groups panel which both use the folder Tree

View now I've tagged multiple files I can actually go ahead and click on them to quickly navigate to them but what I want to ask cursor to do is follow the structure of these files to create a new

chats panel file so the full prompt is we currently have notes panel and groups spanel which both use the folder preview and we want to create a new chat spanel file we may need to modify sercom which

is a file I use for integrating with my backend and our server logic in main.ts to support this so what I'm doing here is actually asking cursor to implement a

full stack feature across all of the layers so I gave it some examples for the UI code that it needs to replicate and then I gave it a file to modify the

API integration and then I gave the file that contains my backend server so as you'll see cursor is able to take all of that context and modify the relevant files so tagging files to include them

in the context is going to be your most powerful tool for directing the cursor agent to make sure that it focuses on the relevant code okay so it's making

some changes it created a chat spanel made some changes to the integration it also modified the server but you'll see here it got two linter errors which are

essentially errors with the structure of the code and what the agent can do is actually just automatically identify these errors and then modify the file further in this case it looks like it finished the feature but it missed these

two errors so I'm just going to ask it to please check for lint errors okay we see it continuing to iterate and it can actually make changes multiple times so

in this case it modified this file three times before it worked through all of the errors okay so now it made changes to all of these files I can actually

review them using this little toolbar so in this case I can go down and see the changes that it made looks like it added a couple of different end points here

and I can go to the next file and in here it looks like we have an error so I'll kind of note that down got some types got some new Integrations okay so I noticed a couple

of errors in the code I'm going to go ahead and explain what I'm seeing so I said I think we also need to update you know a couple of other files to include the chats type and let's add this panel

to the left sidebar so as you see I'm iterating on this code through this chat I'm not just expecting it to be correct on the first go it wrote a bunch of code

that's great it's a starting point now I'm going to continue using the chat and reviewing the code to make sure that it actually works as I expect so if you start using cursor and it's running into a bunch of Errors that's perfectly

normal you just have to continue to iterate until you work through those the agent is continuing to do some work and you'll see it periodically do things like searching for additional files

reading files and these features are just built into the cursor agents now so you don't even need to tag all of the relevant files but it does help when you're working in a large code base so

after some additional iteration I finally got the feature working and now we have a fully functional chat spanel over here and as I navigate through the different chats we can see them pop up

on the right and I can create a new one with with this button I'll continue to refine the feature but you get the gist of how you can continue to iterate with the AI agent until you get it working just the way you want I'm back here in

our starter app now to talk about some of the other context options that you have inside of cursor now we've talked about adding files to the context of the chat by using the at symbol but you can

also add other types of context such as documentation cursor has a bunch of default documentation built in so we can actually type in at Doc and then you can

select various official documentation that you want to use so if I wanted to use open AI for example I can simply tag that and then cursor would be aware of that documentation this means I don't

have to go on the web and find it on my own and copy paste things cursor is able to automatically just use that now if there is no official documentation cursor also has the ability to accept

links and it will be able to follow them and read through them so if there's a GitHub issue for example talking about how to implement a certain fix you could simply copy paste that link in here and

then ask cursor to implement that and finally you can actually just ask cursor to do the searching on its own by using the at web context this will cause

cursor to actually perform that web search and then answer our questions so I'll just say use the latest anthropic API to add a chatbot to our app and I'll tag at web so it should be able to find

the latest code here we go we see a bunch of different referen that it found and here it generated some code for us but we're in the ask mode so it didn't immediately apply to my files now one

final context option I want to talk about is the ability to use images so in this case I looked up landing page design and I like the way that this one looks so I'll just copy it we'll paste

it in here there's our image and I'll just ask please modify the application so that it appears more like the landing page in the attached image I'll make sure to use the agent mode and we'll

make that request okay it's made some changes so going over to the UI well it looks a little bit more like that image although there are some issues so I'd obviously iterate on this but you get

the idea so those are the main ways that I like to manage context tagging files docs at web URLs and images there are

other pieces of context which you can tag but those are the ones that I tend to use the most now we spent a lot of time talking about the AI agent and that's what good reason because that's what you'll be using 90% of the time but

I do want to highlight some of the other ways that AI is embedded into cursor so you can see the additional options that you have first of all you can still code directly by hand I know it's kind of

hard to believe in 2025 but if I wanted to make changes over here and let's say I wanted to add another tab you can see that cursor actually suggests code automatically for me and so in this case

I'm just going to press Tab and it's going to apply that code that it suggested now if I press enter it has another recommendation for me so I can press Tab and here we go now we have a

few additional tabs on our UI when we refresh you can see them over here in the top right this auto complete is actually very powerful and we can do some more advanced things here like

let's just create a new div we'll just call a left panel and you can see that it's making changes across a number of lines right away and here I'll just

manually type right p Channel tab tab tab and now we have these links spread across these two different divs it's a small thing but it

can be really helpful especially if you don't remember particular property names so if I wanted this to be Flex column but I don't remember what it is you can see the auto complete is just going to

figure that out for me and I'll show you one more thing which is the inline code editor I don't find myself using this very often but it's good to know if you press control or command K while

selecting some code you can ask for very specific code changes to direct that code I don't use this very often because I just find that I'm much more efficient relying on the AI agent to make changes

across a bunch of different files instead of making very small changes to just a few lines of code another great use of AI in cursor is the ability to use it to generate commands so if I

don't remember how to start a project for example I can just press command K and say something like create new V react project and it's actually going to generate the command that I can run

directly in the terminal here so this can be a really useful way to write your command if you don't remember the exact syntax now I just want to mention a couple of other cursor features I don't tend to use them very often but they are

good to know the first is that cursor listens to the dot get ignore file and will avoid adding any of the files listed here to its context window so if

you have sensitive environmental variables for example you probably want to include that in theg ignore they also listen to a file called cursor ignore

but since get ignore already exists in a lot of repositories I just use that but there's another file that is specific to cursor that cursor listens to and that

is the cursor rules file so if I go here and I create it cursor rules anything that I put in here cursor is going to listen and add to its cont context whenever it does anything so in here

I'll just say talk like you're a playful witch one thing I realized is you actually need to have this file in the root directory of your folder so let me

try asking it again what is this file doing cackles and adjust pointy hat okay so you can see it's following the cursor rules now this can be useful if you have

a very particular way of doing things or if you want the AI to follow a specific instruction every single time I personally don't use a cursor rules file because I find that every request I make

is different and there's nothing that I want to add to the context of every single request that I make but there are people who really value the cursor rules file and really customize it so it can

be good for things like if you want to do test driven development for example and you want cursor to write all of your tests first and then Implement a feature using cursor rules would make sense in

that sort of use case one other Advanced cursor feature I want to mention is mcps and this is a New Concept that anthropic created basically it's a standard

protocol for AI agents and AI tools to use so that you can hook up tools like cursor to other data sources so an mCP

server defines various endpoints that a cursor agent or another AI agent would be able to call to either retrieve or submit data to that system it's a pretty New Concept but it shows a lot of

promise and I've already seen some mcps with the ability to for example pull all of the logs in your browser and send them into cursor which makes that whole troubleshooting Loop a lot more seamless

so I think we could really start to see these mCP tools take off but right now it's a pretty new development and so there's not a lot of expertise in the area just yet now that cursor agents can

actually write most of your code for you the thing that becomes super important is knowing how to word your prompt after spending over a thousand hours coding with AI I've put all of my best in insights and tips into this video so

make sure to check it out I'll see you there thanks for watching take care