Cursor: Revolutionizing Code Editing with AI

--- type: transcript date: 2024-08-22 youtube_id: tw9GyD0Zkiw --- # Transcript: Cursor: Revolutionizing Code Editing with AI in this video I'm going to be covering cursor I originally covered cursor on this channel when I started the channel about a year and a half ago this is when it was an open source project and the code editor was a lot simpler than it was now it's definitely to the point now where it's really full featured there's a ton of interesting things that the team is doing there I'm just going to be doing a little bit of a demo onto some of the different features that are built within cursor there is a free tier so I encourage you check this out there's a 2E free trial so you get 2,000 completions so 50 slow premium requests as well as 200 cursor small uses so the way that they break it up is for the premium Flagship models like gbd 40 as well as claw 3.5 Sonet those are considered premium requests and then for their cheaper models like gp40 mini or their own model which is I think called cursor small those are considered small models so on the pro tier it's going to be 20 bucks a month you get unlimited completions as well as 50 fast premium completions per month as well as unlimited slow premium requests here I have a really simple template of a nextjs app we have a header we have a footer and we have a really simple screen if I just pull up cursor here and make it a little bigger and what I'm going to do here is I'm actually going to expand this and what I'll do in this video is I'll focus on maybe the mobile views hopefully you can see more of the editor and then just a less of the actual interface that we're going to be working with here the first thing right off the bat you might think this looks like vs code and yes it definitely does so it's very seamless in terms of the migration from VSS code to cursor you can even install your VSS code extensions within this and all of that it's a really natural transition if you are a vs code user all right so the first thing that I want to show you is a new feature that they have within beta which I think is probably the coolest feature that I think a ton of people are having fun playing around with it's definitely not perfect yet but it definitely shows you the potential of this tool and where things are going so honestly when I saw this I was a little bit skeptical at first but having used it a little bit it really is pretty amazing I'll just show you here I noticed on my nav bar on mobile the title went away I say on mobile the title in my nav bar disappeared for the page let's add a linear gradient and for my footer let's have the nav items stack into two columns and then from there I'm going to submit this and then what this is going to do is it's going to take all of that context of what I'm sending in it's going to be taking the page it's going to know about the nav and the footer and then what it's going to do is it's going to go through each of them and it's going to apply essentially a diff of the change that it's making to our different files here you can take a look at all of the different changes that it's suggested to apply to the particular files it's really thought out in terms of the different key commands that you can use I can just tab through this so I can see all of the different changes and what you can do is if you want to accept it I can command enter and that will apply that I can command enter for the footer and I can command enter to the nav there now that they're accepted I just refresh the page here and look at that so we have a nice two column footer here on mobile we have that subtle linear gradient on the background here we see our app name here and then if I just make this bigger so it looks like our normal footer this has applied across mobile and desktop and then I do see we have example app now as a button now I'm just going to exit out of this view now I'm going to go within the navigation here and I'll just close out this terminal view so I'm just going to word wrap everything I'm just going to delete this example app button that we have within the middle here and then what we can do here so I'm just going to highlight the whole file here and I'm going to say change the app name to developers digest and add a couple links on the right hand side so you have the option here of the different models that are available to you you can also plug in some API keys if you'd like if you want to use open AI you can plug that in or if you want to use Sonet directly from the anthropic API you can plug those all directly within cursor here but here you have the option of using Cloud 3.5 Sonet or you can use a smaller model you'd like if you're within the space and you're familiar with the different capabilities of the different models say for smaller edits and you want to be a little bit more mindful of maybe saving some of the credits of your fast inference of the stronger models you can just switch here I'm going to submit that and what it will do from there you'll see it quickly go through the code and then you can just accept the changes I can just accept that now it says Developers digust we have a couple links here it's not quite on the right side here what I can do here is I can say since those links aren't quite on the right hand side and say if you're not familiar with Tailwind you can just go ahead and highlight that chunk of code where they are and you can say the links are not on the right side and then you can submit that and then right there you see a couple different changes we can accept that and now we see the credits in the center and then we have the links on the right hand side so just to give you an idea on some of the things that you can do all right so now we're on our homepage it's a pretty simple homepage we have a little bit of authentication here from clerk it's going to show these different buttons depending on whether you're signed in or signed out and let's just go ahead and try and make a more impressive generation in this case we're not going to use gp40 mini let's make a few different sections that incorporate the dashboard and learn more buttons within some copy about a company called developers digest I want links to recent YouTube videos in cards and I want cards of some recent GitHub projects on the page let's go ahead and submit that edit here in this case we're going to be going through this whole file here and what I'm going to do here is once it's done with the generation I'm just going to go ahead and accept it I'm going to save that out and then there we go so let's just make this full screen here obviously we don't have images since it's not going to be pulling those images but you saw within just seconds we have a landing page right it went from just being a dashboard and a learn more button to now something where if I just swapped in these images this could be something that you could use for an actual project right this is just a really quick look on some of the things that you can do with cursor there are a ton of little things that you can do so I'm going to show you a couple more here let's say you forget how to install something like Shad CN UI you can go ahead and click command K and you can say install Shad CN UI and then there you go it can even write terminal commands for you now if I go back to the page. TSX here and let's just break the code here and let's open up the errors panel what you can do here is if you have an error you can just just go ahead and click fix with AI and it's just going to go ahead and fix your code so you can just click accept and then there you go this is really useful if you have a bunch of typescript Errors across different files you can just go through and iterate different files and really quickly come to Solutions on what you need to do to resolve that particular type error another thing here is you also have a chat window here within the chat interface what you can do is you can access files folders code web docs git or a code base I can say what is the latest version of nextjs what it's going to be doing there is it's going to be searching the web for the answer instead of actually leaving your Editor to get an answer for something you can just quickly go to the chat window which you can open and close with command L and you can just add web how do I use the router then there you go it's going to go ahead and give you a really quick example on whatever question you might have that that is super useful now the other thing that you can do here is just like you saw within composer view you can also select different folders here so you can say let's just include the three things that we have working with on the page and I could say make some suggestions on how this can be improved this can be more technical this can be really whatever you want it doesn't necessarily need to be UI based so say if this is a backend application this will work just as well as you might expect effect here it's saying let's consider a bit of responsive design we have the existing code add a grid we also have a performance optimization and then what you can do here is if there's something that you want to apply within your code you can just click this apply button it will show you the diff and then you can accept it with command y or command enter you can just go through here let's say I don't want that suggestion and then there's things like even like accessibility I can go ahead and apply this I'm going to accept that I'll save that out now the thing with this is it's not always going to be perfect suggestions but it's going to be improving over time as these llms improve a tool like cursor is the perfect tool that's poised to benefit from all of these llms continually getting better and better over time now now the thing that I really like with cursor is it's a tool that really anyone can use beginners can use this as well as really season developers now if you're a more seasoned developer and you're thinking this isn't something that I'm going to be using or not something that particularly need I'd encourage you give it a shot it might really surprise you because even just for the speed alone of making some of those smaller changes or even bigger changes or even some of those more tedious changes say if you just want a simple landing page you want to spin it up maybe you're a backend engineer and you're not used to styling things out and you don't work with Tailwind or reactor components all too much you can do essentially what I just showed you in this video and quickly scaffold something out and you could obviously iterate from there so you can command K or you can leverage that chat interface but overall this is just a really quick look at cursor I'd encourage you check it out it's a really impressive tool I'm going to be using it at least for the next month here I've used GitHub co-pilot I've used super Maven I'm going to make a video maybe in a month's time where I'll Circle back and I'll revisit what I think about the project but overall that's it for this video if you found this video useful please like comment share and subscribe otherwise until the next one