Cursor AI Tutorial For Beginners (AI Code Editor) - Latest 2025 Edition

Key Takeaways

All right, so this is going to be the last video that you'll have to watch to learn pretty much everything about Cursor AI, the AI code editor. So it is 2025 and cursor has gone through some major changes and UI revamps and a lot of new features has been added to the software and also some existing features are gone. So today in this video I will give you a complete walkthrough and even if you are a beginner and has no clue what is cursor AI and how to use it to develop cool web applications, website, mobile apps and all that. So this is the video for you. So by the end of the video you will know exactly how to use cursor to develop all these cool applications and if that sounds interesting without winging further ado let's quickly get started. All right so this right here is the official website of cursor that is cursor.com and the first thing that you got to do is to visit the first link in the description below or head over to cursor.com and you'll land on this page right here and as you can see it says the AI cord editor and obviously to download the same all you got to do is to click on this option right here and download the installer to your computer and now cursor is available for both Windows and Mac OS and even Linux. So you can go ahead and download it. And now unlike other AI coding tools like lovable, bault or data button, cursor is not a software let's say app that you can access within a web browser. So you'll have to go ahead and download and install it on a computer. And now as far as the pricing is concerned, they have a couple of these pricing plans. And the most interesting part is that cursor is generous enough to give you a free plan or the hobby plan that includes a pro twoe trial and gives you 2,000 completions and 50 slow premium request. So it is like a good opportunity for you to go ahead and download and start using cursor without paying for anything. So all you got to do is to sign up for a new account and login and you should have the free plan enabled already. And now if you feel like cursor is worth your money, you can go ahead and subscribe to it and it cost like $20 a month and it has unlimited completions, 500 fast premium requests per month, unlimited slow premium request and all that. Okay, so that's for the pricing. So once you install and open cursor for the first time, this is going to be the kind of interface that you will see. And as you can see here, I'm in the pro plan. And now to quickly get started, all you got to do is to open a folder in cursor. Okay. So you can go ahead and create a new project and start working on it. And to do so, you can either go ahead and click on this file option and click on open folder or create a new folder and drag and drop it in here. For example, I've created a sample folder called as cursor. And I'll drag and drop it in cursor. And that's pretty much all you got to do. Okay. So now we have cursor folder opened up in cursor. And this writer is the UI or the interface of cursor. And now if you are a person who has used VS code or let's say Vinsurf the UI is pretty similar because cursor is actually a software or a IDE that is actually built on top of VS code. Okay. So whatever features that you get on VS code you get exact same features in cursor as well. So towards the left side this is where you can find all these files and stuff. Towards the right side this is where all the AI magic happens. And if you want to open the terminal you can simply slide up from the bottom. And here you have the terminal. And if you want to you can also go ahead and click on this new terminal option to open it up as well. Okay. And now as I mentioned earlier, cursor is actually built on top of VS code. So you get that extension support. So if you click on this icon right here, you should be able to install all these extensions that is available within VS Code marketplace. For example, we have prettier, Prisma. Then we have Tailwind, CSS, IntelliSense and all that. So if you want to, you can go ahead and click on that one and download and install it. Okay. And now I'll quickly go ahead and start a new project. And along the way I'll explain all these cool features that cursor has to offer and also how to use it as well. And now towards the right side, this is where all the AI magic happens. Okay, so in the previous versions of cursor, this interface was a little cluttered and was too overwhelming. So we had this couple of these tabs like composer mode and all that. But now all of them is actually condensed into this one interface right here. So if you click on this agent mode right here, you'll be able to find a couple of these options like agent, ask and edit. So if you want the AI to make changes, write code, delete files, and do all that kind of stuff, all you got to do is to put it in the agent mode. And let's say if you want to brainstorm or find ideas or ask questions about your code or pretty much anything to the AI, you can put it in the ask mode. Now since we are interested in creating a new project from scratch, I'll go ahead and put it in agent mode. And first of all, we'll begin by saying let's say okay, go ahead and create a landing page for my dash application in next.js. Okay. So I can go ahead and say create a landing page for my web development agency in nextJS. Okay. So, we'll start with this one. And if you notice, we also have yet another drop-own menu right here. And this is the option where you can select which specific AI model that you want to use. So, cursor actually sits on top of these AI models. So, you have a lot of these options like CL 3.7, sonet max, cloud 3.7, then we have 3.5E, GPT 40, 01 and all that. For example, if you want to let's say use cloud 3.5E, you can click on this option and now it the cursor will use cloud 3.5 to write the code for you. And again if you want to you also have this options like cursor small which is actually completely free to use. And now next up all you got to do is to click on the send option. Now the AI will go ahead and take the request that you passed and start writing the code. And now it says I'll help you create a modern professional landing page for your web development agency using Nex.js and all that. Okay looks good. So I can go ahead and click on this run command. Now the cool thing is that cursor is able to run all these commands for you. Okay. So you don't have to lift a finger. Now when cursor asks you okay can I run a command just go ahead and click on the run button and it will be taken care of by a and now as you can see it is asking me for some inputs so I'll click yes yes I mean I'll go ahead and put yes the defaults for all the options and as you can see cursor is now installing nextjs so I'll wait till it is done so as you can see it says we have our project set up and next up let's navigate to the project directory and install some additional dependencies and in a similar fashion all I got to do is to click on this run command option and now cursor itself will go ahead and run that terminal command. So let's wait. Okay. So seems like that's done. And towards the left side you can now find a new folder called as agency landing. And if I open that up, I can find all the files or the code. Okay. So these are the code that is responsible for my next JS project. And if you click on any one of these code for example, I'll open the src folder and click on page.tsx file. You can find all the code in here. Okay. So this is where you can basically find all this code, make changes, edits and all that. And now as you can see the AI within cursor is making several changes to our codebase including adding new files, deleting existing files or adding new line of code, deleting code and doing all that kind of stuff. So as you can see here in the page.tsx file, it has added like 143 lines of new code and all these code that is highlighted within this kind of a green color is all the code that the AI has actually written. And all these code that is highlighted in red is what it has deleted. Okay. And now the cool thing about cursor is that along the way obviously the AI will make mistakes. And every time the AI realizes that it has made a mistake, it will automatically go ahead and fix all that error by itself. So you don't have to do anything. And now it is asking us to asking us permission to create a new folder called as public/portfolio. So I'll go ahead and click on run command. And now cursor is pretty much asking every time if it want to run a command. Right now if you want to you can actually go ahead and click on this option that says settings or the go icon right here. And if you go to let's say I guess features and if I scroll down. Okay. So here you have a yolo mode or auto run mode. So if you go ahead and enable this uh auto run mode the AI will go ahead and run all the commands for you. So you don't have to go ahead and click on this run option every time. But I'll prefer to keep it turned off because I want to know what exactly the AI is trying to do. But if you want to, you can go ahead and enable that option. All right. So it seems like the AI is done writing the code and it is now asking us for the permission to start the development server or to run npm rundev command. Before that as you can see I here opened up the page.txsx file. So this writer is a file that the AI has created for us. And if you'll notice you can find all these part that is highlighted in this yellowish grid color. And now all of these are code that the AI has generated for us. And if you want to you can go ahead and click on this accept file option to accept the changes that the AI has made. Or if you click on this revert file option, the changes will be reverted and you know all this code will disappear. And now if I head back to let's say layout. Okay, pretty much I mean since we used the AI to create the new project, everything is highlighted in green. But for now I'll go okay the whole point is you can find all these code that the AI has added and deleted by this red and green. Let's say highlight. And now to okay, I'm pretty happy with all the results. So if you want to you can go through individual files and review the code and accept or decline using these two options right here. But for now everything looks good to me. So I'll go ahead and click on this option right here that says accept all which will accept all the changes that the AI has made. And next up it is okay we are waiting. Okay. So seems like all these changes are made live and but here we have all of these import error. It seems okay in which case let's wait. Uh actually seems like we have a problem because cursor has actually created this app folder outside of our main folder. So maybe I can go ahead and put drag and drop it into let's say or maybe I could go ahead and copy these two files that is layout.tsx and paste.tsx and I'll delete the existing files from our project. Okay. And now inside of the app folder I'll go ahead and paste it. That's good. And now I can delete this one. Click on move to trash. And hopefully if I run Okay, so if you want to, you can go ahead and click on this open terminal option and run this command using AI itself. So as you can see here, we get a error. And that's because we tried to run it outside of our agency landing page. No problem. I can do it manually. So let's cd into agency landing. Hit enter. And now you can go ahead and run npm rundev and hit enter. And that should start a development server and you can access it by going to localhost 3000. And now if I press command and this link it will automatically open it up in a web browser and you can view the changes of the website it has made. All right. So this right here is the landing page that the AI has created for us. So it says transforming ideas into digital reality. Okay. Here we have a couple of these lines a button our services section. Okay. So this writer is like a basic landing page that the AI has created for us. And I know it does not really look that interesting. And now the cool thing is that you can further go ahead and start building on top of this one. For example, if I open this one, I can find all these files. Okay. Inside of my app folder, we have layout.tsx page.tsx and all that. Okay. And now let me go ahead and open this page.tsx file. So let's say I want to add a client testimonial section right beneath the hero section. So let's say I want to add something in here. So I can go ahead and press command K to generate and I can go ahead and say add a new client testimonial section and hit enter. And now this writer is the inline interface in cursor that you can use to generate or write code on the fly or within the file. So let's wait. And now I basically asked the AI to create a new client testimonial section and include the same. And now I can click on accept. All right. So as you can see here we have this client testimonial section right here. But one thing that I've noticed is that the headings in these two sections, it is barely visible, right? So, we can use AI to fix it. For example, in this one that is client testimonial, I'll go ahead and select that part right here. Okay? And I can go ahead and click on this option that says edit. And I'll go ahead and say the heading is barely visible. Can you change the color to black? And hit enter. And that's all you got to do. Now the AI will go ahead and change the color of that particular element. And I can click on accept. And there you go. We have it in black. And next up, let's just say I want to add a gradient background or maybe let's say a red background to this our services section right here. No issues. I can go ahead and let's say find that one first. So here we have the our services section. And I'll go ahead and select this entire section just like that. And now I can go ahead and let's say click on edit. and say add a gradient background or maybe let's say a specific color and I can click on submit edit. Now let's wait. Okay, so it is adding that gradient background and I can click on accept. And as you can see here we have a subtle gradient but it's barely visible. So I'll go ahead and ask the AI to make it let's say a different color. Click on let's say make the gradient from red to let's say blue. Hit enter. [Music] All right, there you have it. Accept. There you go. So, still the gradient is a little subtle, but you can go ahead and specify the exact color and you should be pretty much good to go. And next time, let's just say I want to add a navigation bar to our website. So, all I got to do is to let's say, okay, this time around, I'll use the dedicated chat interface right here. And I'll go ahead and say add a navigation bar with some links and social icons to the top and hit enter. And now the air will go ahead and create a new navbar component and include the same in our homepage. So let's wait. So it says I'll create a navigation bar with links and social icons. I'll use react icons for the social media icons and add a smooth scroll effect to the navigation links. All right. So let's wait. Okay. So, seems like the AI is okay, I'll go ahead and stop it first. So, seems like the AI is still making all these files outside the directory and that is not where AI is supposed to make this edits in the first place. So, first of all, okay, so this writer is the good point to showcase this restore checkpoint option. So, if you scroll up when you make any changes within all these changes, you can find a option that says restore checkpoint. Now what happens is that when you click on this restore checkpoint option all the changes made up until that point will be preserved and everything afterwards will be discarded. So in this case the AI has actually went ahead and created a new app folder a components folder and also created the navbar.tsx file right and next up if I click on this restore checkpoint option AI will go ahead and delete that or let's say revert all the changes that the AI has made after that point. For example let me go ahead and click on restore checkpoint and click on continue and as you can see that folder is gone. Okay. So if you let's say make some mistake or let's say AI made some mistake and if you want to revert all the changes you can use that feature to restore the changes. And now if you want to you can actually go ahead and start a new chat. Okay. I'll go ahead and click on that one. And this time around I will go ahead and add this file in the context. So I can go ahead and let's say put it in here. And now I guess the AI will have a good time understanding the project structure. And it will go ahead and create the file in the right folder. Space the prompt and hit send. And hopefully this time around the AI should create the file in the right folder. Let's see. Okay, right now it is actually writing the code inside of the page.tsx file. It is not creating a separate component. But if you want to, you can ask the AI to do that. And every time you want to let's say implement a new feature, it is actually good and suggested to create a new chat for the same. Okay. Now the thing is let's say let me go ahead and open the old chat in here. Now if you go ahead and start sending messages within this chat itself, the AI will have pretty much everything in context. Okay, all previous conversations will be in its context. So it is better uh to go ahead and start a new chat. If you want to implement a new feature or let's say you want to add additional changes to the same feature, you can continue it in the same chat. So that is basically how I use uh this chat. And now let me go ahead and access the old one. Okay, there you have it. And now it is asking me to install React icons. Okay, I guess that's already there. All right. So, there you have it. A navbar with some social profile icons to the right, some links, and also the logo. Looks good. And next up, let's just say I want to create a new page with some functionality in it. For example, let me just go ahead and say, okay, all of this looks good. And now I'll go ahead and create a new chat. And in this time around, I'll go ahead and say create a new page at / let's say contact and create a new contact form. Add some information about the company and also our office address. Okay, so basically we want the EA to go ahead and create a new page at / contact and there we should display a new contact form add some information about the company and also our office address and now if we want to I mean let's just go ahead and try cloud 3.7 and further if you want to let's say enable thinking mode you can actually enable this one so the AI will go ahead and think before making all these edits and now for now I'll go ahead and click on send so let's wait okay so as you can see cursor is listing all these files that are already existing within our project and it is analyzing the structure of our let's say project and it is now analyzing the structure of our project and then we'll go ahead and create all these new files. So let's wait. All right. So seems like it's done. So I can go ahead and click on accept all. And now as you can see cursor has went ahead and created a new contact folder inside our app folder and we also have this page.tsx file. And the cool thing is that the AI has further went ahead and edited or added a link in our now bar. This contact link is now working. So if I go ahead and click on this contact link, it should take us to the contact page. And as you can see, get in touch, send us a message, about us, the contact information, and all that. And I know the styling is a bit weird, but if you want to, you can actually go ahead and fix all that. But that's not the point. I'm just showing you how we can use cursor. And now in a similar fashion, you can go ahead and implement any new changes using EI itself. Next up, let's just say create a new sneak game in our app at slash game and I can hit enter. But this time around, I'll use cloud 3.5 sonet and I'll click on send. Now, basically I want to add a new snake game feature into our app. So, let's see. Okay, so seems like that's done. I'll click on accept. Okay, so let me just go ahead and try to visit that. Click slash game. Hit enter. All right. So there you have it. So there we have a functional snake game. As easy as that. And you can use the arrow keys to move around and play the game. And as you can see the high score and score are updated in real time as well. Cool. So this way you can go ahead and further ask the AI to implement pretty much any changes and you can take it up from there. Okay. So basically this is how you use cursor. And now let's just go ahead and explore some advanced features of cursor. So here I have opened up a new chat and let's say you want to add a specific file to the context of the EI so that you can make changes read the file or let's say you want to make changes to a specific file within your project. So if in the chat interface you will find an option that says add context and if I click on that one I get a couple of these options and all I got to do is to click on this option that says files and folders and now I should be able to select any of these file from my project. For example in this case let's say globals dot css. So I could go ahead and search for globals. And as you can see here, we have globals. CSS. And now I can add this file. I can explicitly add this file to the context of the EI. Or if you want, you can also go ahead and let's say drag and drop a file to the chat interface. And the same will be added in here or in here as well. Okay. So in a similar fashion, you can go ahead and add folders as well. For example, I can drag and drop this game folder. Drop it in here. And there we have the entire game folder selected. So if you want to, you can actually go ahead and add specific files or folder. And if you want to, you can even add code a certain code block. For example, let's select this one. And let's say this constant all the way from the top to the bottom. And now I can click on this add to chat option. And the same is added to the context. So this specific part is now added to the context. Okay. If you want to, you can then go ahead and ask questions or make changes and do all that kind of stuff. And another thing is that if you click on this docs option right here, this is actually a real game changanger. So if I go ahead and click on this docs option, I can go ahead and add documentation pages of any third party websites and let the AI go through and fetch all the content and have everything in its context and I can use it to implement all these features from that website. For example, let's say I want to add authentication to my project. Right now I don't have any superbase or anything set up in this project. So I can just go to superbase.com and then head over to the docs page and I can go ahead and copy the URL of the documentation page from here like this. Copy. Head back to cursor and if I scroll all the way down I can find an option that says add new do and I can paste the link in here. Hit enter and now the EI will go ahead and crawl all the different individual pages within this URL and add it to its context. For now I'm not doing that. For example, if I go to my cursor settings and if I scroll down in the features tab. Okay. So as you can see here we have all these docs that I've added in the past and I went ahead and added a superbase o SSR. So that is the documentation part. I went ahead and added that. And now the AI has fetched around I guess nine pages and this right here is the main okay this one is the main dogs and the AI has okay indexed 611 pages of content all the code best practices examples and all that. So basically the AI has went ahead and crawled all 611 pages and fetched the content and added all these things into its context. And now let's just say I want to implement let's say authentication to my app. All I got to do is to implement user o in our app and I can go ahead and say follow the and then I can put the at the rate symbol and go ahead and select the docs option and then select the superbase let's say o docs and select that one and I can go ahead and say follow the superbase odocs and now I can go ahead and click send and now the a will go ahead and go through all these content that it has fetched. So as you can see searching up serverside o and all that and now it will go ahead and find all the necessary information and try to implement superbase user authentication to our app and now as you can see in order to implement user authentication we using superbase we need these two packages called as superbase/s superbasejs and superbase o helper nextjs so it is asking us for the permission to install the same for now I'm not implementing it but for example if you want to work with let's say any thirdparty services so if they have a documentation you can go ahead and give that to the a and you can use it and start implementing the same. But for now, I'll go ahead and stop it. And none of these changes are accepted. So I'll go ahead and click on reject. Okay, so that's pretty much it. And next up, let's just go ahead and explore the cursor rules file. So if you want the AI within cursor to let's say behave in a certain way, create files in a certain way, name the files in a certain way or let's say you want to give additional context or you want this you want the AI to behave in a specific way or work in a specific way, you can actually go ahead and define exactly how in a cursor rules file and include that in the root of your project. And now every time you're working on that particular project, the AI will have everything in its context from the rules file and will go ahead and you know do its work accordingly. So let me quickly show you how. So in the root of my project, I'll go ahead and click on this new folder option and create a new folder called as dot cursor / rules and hit enter. So here we have a new folder called as dot cursor and another one called as rules. And now let me go ahead and click on this option and create a new file. And we'll go ahead and say uh instructions MDC. And now I can go ahead. So as you can see here it says rule type and I can go ahead and select it always autoattached agent requested. So I can go ahead and let's say always and you can go ahead and input whatever stuff that you want to always talk like a 5 years old. I know it is not like the best rules. I just want to you know sort of uh let's say demonstrate the uh whole thing. So I can go ahead and click on save. And now if I go ahead and ask any question or let's say do anything the AI will talk like a 5-year-old kid. So I can go ahead and say how to implement a database to our project and hit enter and let's see. So as you can see now cursor is behaving like a 5-year-old. So it says hi there waves excitedly and let me help you set up a super fun database for our project. Okay so it says yay I see we have a super cool nextjs project. Oh cursor has even included a emoji to the end. Okay. And now in a similar fashion, you can go ahead and create additional files in the cursor rules directory and add additional context or rules that cursor should follow. For example, let's say you want cursor to follow a particular naming convention every time it creates a new file. You can go ahead and do or let's say give instructions uh as to how exactly it should name the files. Or let's say you want the AI to limit the maximum number of lines that each file should have. You can go ahead and give instruction for that and do all that kind of stuff. So that's for cursor rules. And now if I head back to my cursor account and log into my account and go to account settings, I should be able to use see my usage statistics. So as you can see I have used about 45 credits of the premium model and GPT40 mini I have used one but I don't really have any limit for that one. So you can go ahead and find how much usage you have left uh by visiting this page right here. So that's also one thing to keep in mind. And now another cool thing within cursor is that let's say you are making some changes or writing a code manually. You get that autocomplete feature. For example, I can go ahead and put let's say function add. And as you can see, it is automatically pre-filling stuff for me. And if I press tab, the same will be uh pre-filled. And I can again press tab. And here we have a function to add two numbers. Okay. In a similar fashion, whenever you're writing a piece of code, the AI will predict what it is and go ahead and give you a suggestion. And if you want to, you can go ahead and press tab to kind of prefill it or let's say accept the changes or if you don't want to, you can avoid that. So that is also one more feature available within cursor. So as you saw, this is how simple it is to use cursor AI for recording. So I have covered a good number of features that cursor has to offer. And if you want to quickly get started, all you got to do is to click the first link in the description below and you can go ahead and download cursor, install it and start using it as well. And now one more important thing that is left us MCP servers. And know MCP servers is like a quite a huge topic and there's a lot to cover in that specific area. So I'll make sure to post a dedicated video explaining all about MCP servers and also a guide on implementing the same in cursor as well. So if you want to watch that video, make sure you subscribe to the channel to get a notification when I post that video. So that's pretty much all I wanted to show you in this video and I hope you guys found this video useful. If yes, make sure to subscribe and I'll see you the next