Cursor AI Beginners Tutorial: A New Era for Programmers

Key Takeaways

anyone can create any application using this AI code editor literally anyone here you can see an 8-year-old using this AI code Editor to create a chatbot this will automatically create the required files edit the files fix errors and also integrated in your terminal you are able to run this using your natural language that is a power this is going to increase your productivity twice compared to how it was before that is cursor the AI code editor that's exactly what we're going to see today let's [Music] get hi everyone I'm really excited to show you about cursor the AI code editor this cursor AI code editor knows your code base it has Auto completion for your code by just clicking tab you can edit in natural language it's same as vs code you can also integrate if you want to use any other large language model this is available in free plan Pro Plan and business plan you can get started with free plan we are going to see about code generation multi-line edits code based question and answer using image to create a UI ask the web if you want to get any latest information and also you are able to instantly apply those code changes I'm going to take you through step by step on how you can create a website which is going to look like this with Services pricing and contacts but before that I regularly create re in regards to Artificial Intelligence on my YouTube channel so do subscribe and and click the Bell icon to stay tuned make sure you click the like button so this video can be helpful for many others like once after you download cursor in your computer you should be able to view something like this so here you got few icons just click on this to open the terminal you can click on this icon to open the Side Bar and you can click on this to open the right hand side bar so these are the key shortcuts which you need to remember first is command shift I this is completely automated control panel then command I that's like a mini control panel command k for inline chat and command L for sidebar chat so first let's start with command shift I so in my cursor I'm going to click command shift I and that will open this control panel so here I can ask it to create a website so in this I'm going to type create a basic website with Home Services pricing and contact this website is about providing AI Services if a HTML CSS and JavaScript website that's it now I'm going to click the submit button and this is using clo 3.5 sonit clicking submit and here you can see it's automatically creating all the code for those pages it's writing the CSS now now it's writing the JavaScript so now all three files got created now I'm going to click apply all on the right hand side click apply all and now if I close this window you can see all the files got created with all con content now I'm going to open this so just clicking this icon to open the terminal you're going just say open index.html and then click enter now you can see the website here it's just very basic with Services pricing and then contact but we want more advanced so let's improve this from here so coming to my code editor I'm going to click command shift I again now continuing my chat I'm going to ask create each page in a different URL because currently I saw everything is in one page but I want to click to each individual page so I'm going to do this and click enter now this is creating individual Pages such as Services pricing contact and now it's all done going to click accept all and everything's ready now now I'm going to open the index.html file again and here is the page with Services pricing and contact now I need to improve this this is very basic I'm going to ask you to create more content for the homepage coming to the control panel again there multiple options you can try such as add files and then choosing index.html here I can say add more content and different Services it provides with various content blocks and click enter accept all and here you can see all the content now I can say add more styling and make the website more modern so after this clicking submit and accepting the changes and here you can see this website now looks more model with Services pricing and contact but we need to add more services here let's ask that here add files and then Services add more services with content for each service and add that in different blocks now accepting those changes and here you can see our AI services with machine learning national language processing computer vision robotics AI Consulting custom AA solution ready to leverage AI for your business get in that is good now let's go into the pricing page ask you to add more content to the pricing page add more content to add pricing and add contact make it more interact now it's making those necessary changes and accepting those changes now here is the flexibility pricing plans basic Pro and Enterprise frequently asked questions if I go to contact you got the contact form here so I can see it's not aligned properly so going to ask I can use at codebase align the form properly also align the pricing page properly with the modern look applying those changes and here you can see now the contact form is aligned properly if I go to pricing this is much more professional than how it looked this is really exciting now we have a full-fledged website with Home Services pricing and contact which got created in just less than 10 minutes in natural language I didn't code anything at all so coming back to the code editor clicking Escape then here I want want to show you how this can automatically give suggestions so here let me try this when I press space it's giving me auto suggestion on the Clause if we plan to add that so this is a contact info in the contact page so now I can choose this line and press the control I to bring up the mini control panel so here you can see it automatically chose the contact form I can also click the styles. CSS and then select all and control I to add the style here as you can see so now we are choosing multiple files multiple section of the file as marked here in the mini control panel and I can ask add additional styling to the contact Section Clause contact Section Clause clicking enter so now it's modifying the style. CSS and the contact. HTML accepting all those changes now if I go here I can see the contact test came to the center so it aligned that properly also it made a changes here so that's what command I does so we saw about command shift I now just saw the mini control panel command I now next command k for inline chat for Windows user you might need to use control instead of command so coming to the code again I can just choose this and click command K and then say add more contents if it's a code you can even refactor the code so now it's adding more contents then I am accepting that clicking save so in my contact form I can see the additional content automatically got added and the final thing is to try command L that is a sidebar chat so that is just simple just type command L and you'll have the so by default it's using the current file and I have added the web access as well if you want web access you can even just type at web so I can just say search internet about the latest AI features and add that to the contact page making a compiling for users fill the form and clicking enter and now you can see it's automatically going and searching the internet this is really powerful So currently even if you want to fix any errors we need to manually go and search the internet but this will speed up the process of automatically searching the web and giving us that and here's the suggestion I'm going to apply I'm accepting this and now you can see in the contact page we got extra block about the latest feature Dynamic form adjustment realtime data analysis personal responses smart questions finally I want to show you how you can add an image and then create code from that image so here you got option in the chat click on image there I'm opening an image this is the image asking to design the contact form like this design the contact form like this and clicking enter now the code got generated applying it and accept similarly for CSS applying and accept JavaScript apply accept just saving those files and in the contact page you can see that it took the design and changed the layout as we expected so the input what I gave was this it took the layout and the information in the form and based on that it changed that hair similarly you can use an image to create the code I'm really excited about this this is going to speed up your development process twice or three times more and increase your productivity I'm going to create more videos similar to this so stay tuned I hope you like this video do like share and subscribe and thanks for watching