Cursor Composer Agent in 20 Minutes

--- type: transcript date: 2024-11-26 youtube_id: GAe1IQtHqVU --- # Transcript: Cursor Composer Agent in 20 Minutes There's a new update from cursor rolling out where they have uh new agentic capabilities. In this video, I'm going to take a look at that. I'll be going through the list of all of these different features. If you don't have this right now, I did read on their form if you are trying to update to the latest 4.3 version and you are stuck on 4.2 just like I was before I read this. What you can do is you can download it from this change log page. I'm going to link this within the description of the video. To check if you have it, you can just click cursor. You can go to about cursor and then if you have 4.3 that will be the newest update with all of these features. First let's touch on the new composer UI with inline diffs as well as the general agentic capabilities. Just a couple weeks ago if that kodium announced this new first agentic IDE. Now I think a lot of people are saying that this is in response to that and it very well could be but I'd imagine something like this they probably had in the pipeline for quite some time. Maybe in part this is what motivated to get them out the door with this feature or or they could have potentially been inspired by some of the features that Kodium has within Windsor. One thing I noticed off the bat is I can no longer command shift I to open composer. If I command I, that will open up this composer view. And if I want to go to chat, I can just command L. You can go back and forth just like that. And if you want to close them, you can just click the respective button and toggle it like that. For the composer, I actually do like it on the right hand side here. That was something I really liked about the windsurf editor. I I would find with the different composer views of whether it was the one that was overlaid over the terminal or the full screen one that it was a little bit out of place. And frankly, I generally don't use chat too much within cursor. I like some of the inline and command K features as well as the composer. I love that this is here. Now, now within composer, we have normal and then we have agent. And you can toggle this back and forth with command dot. What I'm going to do here is I have a blank directory. Let's try and build a simple blog. I'm going to say I want a brand new nextJS project that will be for a blogging platform for my brand developers digest. I'll submit that and let's just take a look at what it's doing here. Now, one thing that I heard is that this actually has the ability to execute commands within your terminal. Here we see I'll help you create a modern Nex.js blogging platform for developers digest. I'll set up a project with a clean architecture, modern UI, and essential blogging features. First, let me create a new Nex.js project with the latest features. Here we see it wants to run this command, and it wants to use TypeScript, Tailwind, etc., so on and so forth. I'll go ahead and I'll click command enter to accept that. All right. So now we see would you like to use turbopac? One thing that would be nice is if the terminal actually wrapped here. We we're going to be using turbo pack and we'll just go on like that. So now within our project we have this new next.js project. And there is also this ability to pop up the terminal view which I do really quite like here. It's continuing on. Now that we have our base structure set up let's create the essential files and structure for our blog. I'll start by setting up the main components. Let's go ahead. I'll accept that. It updated the layout.tsx. We can see some of the changes here. Developers digest, a modern blog platform for developers. It made a few other tweaks here. It added a little bit of a navigation as well. Now, let's create the homepage with a hero section and what have you. Here we see that it's generated this hero section for us within the page. And it did open up the page. We can see the diffs. It is very nice. Here we have the ability to accept or reject right here or we can do it within this new composer chat panel as well. It also made the blogging page here. We see that it is within our app here. It's made that blog.tsx page. Finally, let's create an about page to tell visitors more about developers digest. Now, we have our about page and it's really moving faster than I can really even describe this as it's going through in real time. Here I have the option to click to run this command to go within the directory and run the development server. Let's go ahead and run that. We see developers digest. We have it starting on localhost 3002. You can click command click that. And there we go. We have our blogging platform now. All right. Wow. So this is pretty impressive, right? There's definitely some things here that we do need to touch up. If I click start reading here, it goes to our blog. We have the ability to sort and filter here. Those don't quite work yet. Now, there's obviously some accessibility things that we'd have to touch up in terms of not being able to read certain aspects. But if I go to the about page, we do see that is broken. The default export is broken. And here we can see the context of the errors. And it does look like it's generating something. Let's just click here. We can see some of the changes that it made. Now, I'm not sure if it's thinking and about to do something. All right. So, it does look like it's generating something. I'm not exactly sure, but I'll just say there was an issue on the about page and the colors are not all accessible particularly on hover. I'll submit that through. And the one thing to note is I didn't actually pass it the context of the error that I saw on the page. Right here we see the default export is not a React component in the about/ page. Let's just see what it's going to do here. We do see it made a checkpoint which is nice that we'll be able to go back to those checkpoints if we'd like. Now I'll help fix the about page error and improve the color accessibility. Let's make two main fixes. Fix the about page error, enhance the color contrast. Let's update the layout to the color accessibility. Again, this is moving faster than I can really even describe. It's making a ton of changes, but it looks like it's adding some Tailwind classes depending on the hover states and what have you. And now it's going over to improve the color accessibility for the page.tsx. It is nice that you can see what it's working through and how many iterations that it has had on that current page within this new composer agent. Now, it generated the page there and it's applying all those changes to the page here. Let's update the blog page with the improved colors. It's just going to work through here. Previously before this feature, what I would do personally within the composer is I would often add a lot of different things. I would add different code files. And what's nice with this is even this looks like an improved UI whereas before you get the root of the system and you go through and select the different files. Now the one big thing that a lot of people like with cursor is you can actually reference docs as well. If you do want to reference a new piece of documentation, you can put in a URL. It will index that page and it will allow to have that context. Let's say there's a new feature within whatever it might be, clerk or lang chain or whatever library you want to use within your project, you can reference that with the docs feature. All right, it went through a bunch of stuff. It has better contrast ratios to meet WG guidelines. It has better accessibility. Let's go ahead accept that and let's go over to our page. So, now we have our about page. There's still some little areas here that aren't quite accessible like the get in touch here. Those aren't a huge deal. But if we go back to our blog, we see that there. We see our homepage here. And this is something I just did with a couple prompts, right? It being able to have the context of the terminal and be able to really have the context. I think that is a huge piece of knowing what the project is, even how to start the project. That's something on Windinsurf when I did try and say I want a new Nex.js project, go from there. I didn't find it actually worked right out of the gate. I found when I asked something like that, it didn't quite work as well as if I specified to first create that project and then have the windsurf editor go through it. Now, obviously, it's really great that we have all of these different competitors within the space. I do see the contrast isn't quite great. Like, this wouldn't meet accessibility standards or anything like that, but I don't want to focus on that aspect. I want to focus on making this capability working. What I'm going to say is I want now for the blog posts to work. Let's have a folder with a number of markdown blog posts as well as add in the ability to search and select the category of blog posts. And while it's running through that, let's just go back to the change log. In terms of some of the other features, there's the early version of the agent within the composer that can pick its own context and use the terminal. That's what we've really demonstrated here within the composer UI in the sidebar. It also has the inline diffs like we've seen. In terms of some of the other features that come with this release, file pill recommendations in chat and composer. We have the recommended in chat and composer to semantically search for its own context. There's a nicer image dropping experience. Now, this might be something to help with that accessibility context, right? Cuz if we give the LLM the ability to quote unquote see what we need it to do, it might be able to better understand the potential issues of where those accessibility issues are. And then finally, there's a beta sneak peek at an upcoming bugfinder feature, which I'll try and demonstrate if I can within the video. Now, let's go back. It's still currently thinking. I'm not sure if it timed out here or what have you, but let's just cancel it and I'll go ahead and I'll run this one more time. Now, it seems to be going again. I'll help you set up a working blog system. First, let's break it down into steps. Let's create the blog. Add the markdown. Here we see we're going to install a number of things. Gray matter remark. Let's run this command. I apologize for the error. We ran the command. It also had an error. We're going to run that again. There is yet another error here. And we're going to try one more time. It looked like it worked that time. This is an interesting problem that I've thought about and have dealt with a number of these tools is sometimes it can be quite hard to get the context for the particular version of the libraries that you're using. You might have instructions on how to use something like say clerk authentication with an older version that's within the training data of the model whereas what you really want is the most up-to-date version typically of what's within their documentation or what have you. Let's go ahead. Let's run this. We're going to create some sample blog posts. And first, we're going to create that directory. So now within source, if I just close out some of the pages here, we have this content folder. And we have this getting started. It looks like a nice markdown blog post here describing things about Nex.js. It does look like it even is potentially a coherent blog post as well, like a simple set of instructions for Nex.js here. And we also have a clean code principles blog post as well. Let's create the utilities to handle the blog post. First, let's create the types files. So within the types, we have the blogs here of all of the different types that we're going to be using. And then also we have what looks to be like the logic to handle the utility function for the blog posts. Here we see on how it will filter through them, map through them, and ultimately render them to the DOM. Now, it's going to create a dynamic route for the individual blog post. If we go over to blogs, we do see that dynamic route there based on the slug of the blog name. It wants to require the Tailwind typography plugin for better markdown rendering. Let's go and accept that. All right. Now, it's updating the Tailwind configuration. Now, the one thing with this is given that it is a bit of a longer running task, I could see potentially how this could go in a direction that you might not want. And the other thing to note with this is given how much that it's doing across the different pieces within the file system. I just be really mindful, especially if you're using this on more of a higher stakes application, obviously like a production application or what have you. I just be really mindful of all of the edits that it's making cuz it does seem to be quite powerful and giving it access to edit everything within your project potentially. You just really want to be careful about what it's changing and that it's not doing something that you don't want it to do. And this goes with all of the uh AI generated tools right now. Just be mindful of what it's doing. All right, I'm not going to read through all of this. It did a ton of stuff. Let's just go ahead and accept this and let's see if it's working. If we just go within our project here and let's just bunddev, it's starting up the server again for us. And if we go back to our page here, I see that it's not working. Now, the other thing to note with this is with this, if I add it to chat, it adds to chat. But maybe it is better if I specify to just say now start the server and let's check for bugs. So we did run into an issue. Import FS from FS. Now let's look for their bug feature. Cursor bug. Here is the new run bugfinder feature. This is an experimental feature. Cost can be very high per run. Bugfinder analyzes code changes between your current branch and the main branch in your remote repository. For the best results, run it on feature branches before merging into the main to catch potential issues early in development. Costs increase with the number of files of line changes. AI powered bug detection is still experimental and may not catch all the issues with your code. You may lose your money and get zero valid bugs back. Please use at your own risk. We're hoping to make the bugfinder both much more accurate and cheaper in the coming months. Here we have some advanced configurations. You can focus on performance issues. Here you can specify your main branch. If it's not something like main, you can just specify whatever that might be. And then here you can select which files. I'm not going to be running this actually in this project since I don't have a GitHub repository and I think it's out of the scope of the main features that I want to highlight within this video. But what I do want to do here is I just want to exit out of this server. And instead of trying that, let's just see if it can catch the bugs within this new cursor composer agent feature. I'm going to just ask it. I want to start the server and fix the bugs. I noticed a few issues that need to be fixed. Let's address them one by one. First, the blog post is mixing client and server components incorrectly. We need to separate the client side filtering from the server side data fetching. Let's create a new client component for the blog list. It's made a handful of changes here to our blogging site and it's made it across a couple different files. I do quite like this to be able to see the different states of the files and changes that it's making. Now it wants to run the server again. And I think that's the thing with this is given that it does have the context of the terminal and it can run terminal commands with your approval of course is it does make sense especially that you can just pop out the terminal just like that to have this within the context and run it within this composer view now because just running it separately I'm not sure that there is the ability to move the terminal into the composer view quite yet like you can within the chat. I've made several improvements to fix the bugs. Let's accept those. I'll go ahead and refresh. We have this issue with import fs from FS. So maybe let's just give this a little bit of a helping hand here. We'll just feed it the error that we're getting. Here we see ah we need to fix the issue. The error occurs because FS is a Node.js module and can't be used directly in the browser in Nex.js. We need to make sure our file system etc. So on and so forth. Now hopefully it finally recognizes. It's making a handful of updates for us here. Now it wants to install the server only package. We'll run this. So now it does look like it's working again. Let's go over to the blog. Now we have the ability to search the blog. We have the filters correctly working. We have tags for those two. And if I search these, so let's just say something like next, right? That's working as well or writing. Right? There we go. And then for the blog post itself, if I click into one of these, the text is quite bad in terms of not being accessible. Let's just as a last step here, let's take a screenshot. Now, mind you, I have my system settings set to dark mode. That could be a part of the issue here. Now that I have that picture, and even though it didn't crash our application, it does look like there was some issue that wasn't immediately clear when on the front end of the application. I'm going to say is resolve that error from the terminal as well as fix all the accessibility issues across the site. I'll just add the image as an example for context and it should have that context of the terminal output as well. Let's just see if it can do all of this in one fell swoop. I'll just let this run for the time that it needs to go through everything and hopefully fix everything up. I'll show the results and then I'll circle back and we'll see if it did it correctly. All right, so it took about a minute or two there to go through everything and it actually touched 12 different files here. So I'll be a bit impressed if it doesn't break one thing given how many changes that it did and it wasn't just one focused thing that we were asking for. I'm going to go ahead and I'll accept this. And moment of truth, it didn't quite fix the accessibility issues across the board there. I'm going to say I have an issue in particular with dark mode. Maybe it just needs a little bit more of a helping hand. That's something I know I've run into. I know other developers have run into. If you don't specify different classes for dark mode and light mode, you're going to run into these sorts of issues. I'm sure with just a little bit more finessing of the prompts that it would be able to fix these things. You can always go ahead and target each page as well. But in terms of some of just the core functionality, obviously there is some polish that needs to be done to make this look more presentable and all of that. But just given from where it started to now being able to access all of your files, all of the context, be able to easily pass in images. But my initial impression with this is pretty impressive given that to get to the initial state of this as well as some of the core functionality like the search functionality as well as these working markdown blog posts here. Now, the color aside, this is great. This is going to be able to allow a lot of people to, I think, continue to build more and more with natural language. With all of these tools, it really reminds me increasingly of this tweet from Andre Carpathy. The hottest new programming language is English. With these types of tools, whether it's cursor, winds surf or what have you, bolt, new, lovable, vzero, all these cool code generation tools, I I think increasingly that coding might really become more commoditized and just more accessible across the board, right? instead of it being a specialized field, which it still very much is going to be, I think, for quite a long time, but more people will be able to dip their toes into this and build these applications just with English that you wouldn't have been able to before. As you saw in what I just demonstrated to you, I didn't touch one line of code, right? You have to be prepared for what's coming. I think there's going to be a ton of people that are going to be diving into this code generation space, which I think is really quite amazing. I think over the coming years, we're going to be seeing more software, more ideas than we ever have ever before with being able to have these tools to build out really quickly. Hopefully, you found this video useful. Again, if you want to install this and you don't quite have the update yet, cuz it is currently rolling out at time of recording, just click this link here, go through the installation process, and you should be good to get set up. Otherwise, that's it for this video. If you found this video useful, please like, comment, share, and subscribe. Otherwise, until the next