Cursor Composer: Is This How We'll Code Now? 🤔

--- type: transcript date: 2024-08-30 youtube_id: oXbqFvAr0tw --- # Transcript: Cursor Composer: Is This How We'll Code Now? 🤔 in this video I'm going to show you how you can quickly build out web applications by leveraging cursor cursor is a great tool if you haven't used it before it's essentially a fork of VSS code with a ton of AI features built in it's really at the Forefront and Cutting Edge in terms of what you can do with code editors I encourage you to check it out if you haven't already they do have a free trial that you can try in this I'm going to try and build out a simple web application and just show you some of the features with incursor and how it can really enrich your development experience in building out applications I'm going to try and highlight as many features with incursor as I can in building out a web application from scratch all I have here is an empty directory called demo ab and then I'm going to have the web browser where I'm going to have the full stack app on the right hand side of the screen here you'll be able to see everything side by side as I do it the first thing that I'm going to do is you can open up your terminal within the terminal here which you can just open from the top here within cursor we're going to say instead of actually just typing out the command I'm going to show you that with command k you can simply type an instruction with natural language we're going to say create a new nextjs app once we have that we see that we do have our Command and we can simply run this by clicking command enter you can simply click escape to close this out and then go through the different commands so we're going to say that we're going to be using typescript eslint Tailwind we're going to be using the app rouder and then we're not going to be setting up a custom Alias once we have that we can go ahead and mpm run Dev this is the template for next J here so the first thing that we're going to do is you can open up your page and that's going to show you what you have on the right hand side here so if you command shift I this is going to be similar on Windows as well what we can do here is let's say make a simple naav and footer component place them at the top and bottom of the page so the cool thing with the composer view is you can select the context of the different files that you want to pass in in this case we passed in the context of this page but the really cool thing with this is it can actually create these completely new files for you and even within the page that we're editing it's going to put the nav component and the footer component and even import them for us as you go through each file you can just command enter to accept everything and now if I just zoom out a little bit here we see that we have a simple nav as well as a simple footer and we can see that we now have a components folder as well as a footer and a navigation so let's go back into our composer view here I'm going to expand this and then we're really going to focus on the mobile view so I'm going to say let's focus on mobile first make sure it looks great and remove anything that could conflict with the header or quitter all right so it just went through those files so we can command enter tab command enter okay so now we see it on the right hand side here we see that we do have our navigation as well as our simple footer now I want to go out of the composer View and I'm going to show you command K if we just highlight a piece of text and I click command K and I say I want this to be a beautiful landing page for a image generation SAS company then I'm going to go ahead I'm going to submit our edit and then what you'll see is you'll see all of those changes start to stream back in line by line so again go ahead and accept that we'll save this out all right so now that we have this saved out we might not love how this looks right yet but let's just continue on in the composer view I'm going to go ahead let's create a new pricing page with an annual monthly toggle at the top with three cards of different pricing tiers for my SAS image generation company so we'll go ahead we'll plug that in again it has all of the context of everything that's created already and here again we see that it's creating a page completely from scratch you don't have to copy and paste things from cloud you don't have to feeded the context continually of what you're editing you can simply put in the pieces that you need and then make your request and apply it directly within your code editor here now we see a pricing item within the nav if I if I click pricing now we see that now we have a basic pricing page so there are a few things that can obviously be fixed up so we have the monthly and annual toggle here now we can see within our app we have this pricing directory as well as the page all right so now I'm going to go within the folder and I'm going to highlight everything and I'm going to say I want the prices to be $9.99 19.99 and 29.99 and I want the choose plan button to always be on the bottom also the monthly and annual toggle but at the top is broken visually so this could be partially because I am zoomed in a little bit here but if I zoom in a little bit we actually do see that it is still broken I'm going to go ahead and submit this edit here we're going to have to change the annual price as well but you see the diffs of the edits here so instead of $449.99 we see $29.99 see where the toggle is it's making some changes what you can do here is if you want to go line by line and accept each generation you can command y just to make sure you see everything that's happening if you just go through the file you can be a little bit more methodical by doing the command y instead of command enter but from my experience it does work pretty well most of the time here we see that it did move those buttons to the bottom here but our toggle at the top is still broken so if I go to the top here where we have the toggle I'm just going to highlight this and I'm going to say the toggle is broken visually still we're going to go ahead and submit that edit we're going to accept this save up the file and now we see that it's resolved we can see really quickly obviously we have to fix our annual prices and whatnot but how simple it is to start to build out an application so far we have a really simple homepage obviously there's a ton that can be improved here we have our pricing page we have our about and contact which still don't exist now let's hop over into the composer view let's create our about page as well as our contact page and fill that with some information all right so we see that it's created two more files for us so we can just go ahead command enter and then you can also shift tab to go back within the composer and then command enter and then now if we go to those pages and we go to about we see our simple about page and then we see the contact page as well and we even have a little form here so now that we have a contact form let's say I want to add front end and backend validation to this contact form and let's use a simple react server action to send this form to my email I'm going to go ahead we're going to submit that and again it has basically all of the context of our entire application we see that it's editing the contact page here so it's going through it's writing out all of the things that we're asking it for here we have our contact page edits we have our validation on the front end and then now we have our server action as well so here it's using node mailer and it also has this Zod validation here so again we just accept these changes and then once those are accepted here we see that we do have an error for Zog we can just go open a new terminal and install Zod within our project and we also need node mailer so I'll just bun I and you can also mpmi node mailer we can also just simply install the types as well so we can just go ahead and grab this paste this in so that clears that error now the other cool thing with curs is you can go ahead and fix errors directly from the terminal here you can just obviously infer different parameters like you could with inv vs code but if there are things that it might need a little bit more context or help from an llm you can go ahead and ask AI to fix different parts of your application so you can just sort of Click through all of your different errors and a lot of the times it does a really good job the other thing here is since there are so many errors what you can do instead of doing it one by one we we can just say I want this to be valid typescript and then we can submit that and then here we can see it's adding all of the different interfaces and then it will quickly go through the whole file and it will quickly add essentially everything that we need to make this valid typescript I can just accept that and there you go so we went from 16 errors down to zero in a matter of seconds now if we go back to our application we have home we have pricing we have about we have contact now let's open up our composer view where we'll command shift I and now let's make an image generation page and let's start by using Dolly 3 and Dolly 2 from open AI I want the prompt on the left hand side as well as the generated image on the right the thing if you didn't use cursor you could imagine how long it would take you to write out all of these different files right it sort of goes without saying that this is obviously going to speed up a ton of different tedious little processes within the development process so here we see that it updates our navigation and we could simply ask with broad details what we'd like to have it Implement and we can just go ahead and accept the changes so now we see our generate Pages here see that we do have to install the open a SDK so we'll just go back to our other terminal window here we'll install open Ai and now we see this simple prompt here we see Dolly 3 we see Dolly 2 and the other thing about that cursor if at any point you want to interact and have a conversation with the llm you can just click command L and it will open up this chat window here where you can go ahead and just ask questions or if you're stuck on something you can have a conversation here and you can also even add images so if you want to say make this page for me and pass it in a JPEG or something of a layout of a design that you might have it will do that as well within our image action we see that we have open AI so we're going to need an open AI API key and then a so I'll just open up our composer and I'll say create Ain for the environment variables I need and then while it's doing that we can just head on over to open Ai and get an API key all right we can see that it created a env. looc again we can just accept this and the cool thing with this is since we've basically used this throughout the build of our application it has the context of everything within this composer here it's giving us where we can put in the SMTP credentials for mailer say if we want to use something like AWS or whatever you want to use for SMTP you can plug in your details there to have a work in contact form once we have that we're going to close this out and we're going to open up the env. looc and then there for now we'll just plug in at least our open API key all right so now that we have our open API key I'm going to go over to our application and I'm going to say generate a photo of a dog let's just do a really simple one and we'll click generate we see that it even has the loading state for us there we see that it does say generating and then we have that pane on the right hand side where your generated image will appear here all right now we see we have an invalid Source prop this is a good example where we could take an error message like this we have an unhandled runtime error and if I go back within our composer view I make this a little bit wider and I'll just paste in this error and we can just simply submit that and see if it can resolve this error for us without really even digging into what's happening so obviously if this was more of a production app you might be a little bit more careful with some of the things that you're editing but here is just to really give you an idea on the power of how quickly you can build something out with cursor I'll just go ahead and accept the changes that it suggested for us and then here I'm going to go to generate again I'm going to say a photo of a dog and then we'll click generate but the neat thing with that is we did see that it did return something from open AI so it does have basically all of the pieces within it all set up for what we need to work so here we see an image of a dog if we look through everything we have a homepage and mind you obviously the these things are simple there might be things that you don't like like the linear backr obviously you still have to tie together some of these pieces but it just shows you how quickly you can build something out with a cursor so if you wanted to make a simple chat application or an image generation tool you could see how quickly you can build out something like this you can tie up your pricing to stripe you can add in a credit system if you'd like you can add in authentication you can do basically all of the subsequent steps from here I'm going to show you a little bit more I'm not going to build out a full featured application I do plan on doing that in a later video cursor has really started to change the way that I've developed just really starting to see how you can leverage it and how powerful it is it really is urg in the sense that you don't need to go from cloud or chat GPT or perplexity or all of these different chat interfaces to build out your applications all of a sudden you have the most powerful model so gp40 or Cloud 3.5 Sonet directly within your IDE and basically every place that you'd like to have it so whether it's in line for coding suggestions or with command K or the composer feature or even within the terminal basically anywhere that you need help it's there to help you out with this brings me to an educational platform that I found incredibly valuable brilliant.org brilliant offers a unique approach to learning that aligns perfectly with the problem solving mindset we've been discussing their platform is designed around Interac active Hands-On lessons in math science computer science and now artificial intelligence what sets brilliant apart is their focus on Active Learning instead of passive video lectures you're engaged with thought-provoking problems with intuitive explanations this method has been shown to be six times more effective than traditional video-based learning I've been particularly impressed with their new course on how large language models work it provides an in-depth yet accessible look at the tech te ology behind AI tools like the ones we've been exploring brilliant isn't just for Tech professionals or students it's for anyone that wants to sharpen their analytical skills and gain a deeper understanding into the world around us whether you're commuting taking a lunch break or winding down in the evening brilliant makes it easy to turn a small pocket of time into an opportunity for growth if you're interested in elevating your learning experience I have a special offer for you visit brilliant.org developers digest to get a 30-day free Tri and if you decide to become a member you'll get 20% off an annual subscription brilliant is more than just a learning platform it's a tool for developing the kind of critical thinking skills that are invaluable in our field I encourage you to give it a try and see how it can enhance your own Learning Journey all right so now let's go back within our composer View and let's start to tidy up our application a little bit so let's say I want the app to be called images by developer digest and I want the background of each page to be more professional and I want more relevant information on every single page to be about the image generation we'll submit that now that we have that we're just going to accept all of the different changes so we'll just go through each file here accept all of those and now we'll go back to our application so let's just make this a little larger so we see we have a nicer linear gradient background we see images by developers digest we see our navigation is sort of positioned properly we see everything's actually in line as well which is also a sort of a nice little feature here we see our simple prompt window we see the pricing page the about page about AI images by developers digest here it's just giving you some copy it's giving you the team and then it finally is giving you that contact page maybe you want to add authentication and stripe and start to set up your database schema it's really up to you and how you decide to build out applications but you can see that you can really start to build out a SAS application in hours now with cursor just with natural language I've pretty much built this entire application well authentication stripe a database as well as like an S3 bucket maybe for images and all of that as well as maybe caching and whatnot for the application needs to still be set up you could probably get there within maybe a couple hours time with a very simple MVP it obviously needs a little bit more love but basically we started essentially from scratch right this is just to give you an idea on what you can now build with just cursor and primarily the composer view so that's it for this video if you found this video useful please like comment share and subscribe otherwise until the next one