Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!
Transcript
[00:00] We have this table of data and we need to create certificates to hand out to each of the people receiving grant money. So I'll create a new directory. I'll call this printable certificates, and then I'll open cursor in this directory. And then I'm going to copy and paste the data from this Google Sheet. So copy all those and open a composer session with Command-I.
[00:21] Make sure agent mode is turned on. Paste in the data and then I'll say I need to take this data and 1. Create a printable page with two certificates per page. 2. I want this to be done in a programmatic loop so that all the names and amounts and items can be displayed in each page, and three, I prefer to do this in TypeScript, React, and PNPM.
[00:45] Those are my preferred tools. So use the tools in that ecosystem. And now you essentially hit submit and you pray to the AI gods that they'll answer your request and build you an application. And in our case we just want it to be printable certificates. So we'll run this command anytime it prompts us.
[01:03] So it created a Vite project. We'll run this to install the packages we need and keep on prompting me to accept the commands it wants to run. So this data looks good, I'll accept that. This component looks fine, I'll accept that. Essentially I'm going to accept everything and then I'll review it once it's done to see if I need to fix anything.
[01:22] So let's accept this as well, accept the styles, and then we can run the command to start the dev server. And it says that it's done but I don't necessarily believe it. I would have expected pnpm run dev to start up the project and give me a URL to check. So I'm actually gonna pop this out, scroll down, and there's the URL. I'm gonna command click on that and it looks like it only has the basic template.
[01:49] So based on what I see here I'm gonna assume it made some mistake when it created the source directory and the printable certificates directory and I'll let it know about its mistake. I'll say it looks like you screwed up when making the source directory outside of the project directory. Please correct your mistake. And we'll see what it does. So we can run this, it'll create directories, and now with this running we should be able to follow along as files are created.
[02:22] And I am very tempted just to copy and paste the source directory in there, but I'm going to let it do its thing. And as a side note before, this is a project I actually did yesterday as a request from my wife to help her with this. And it did not create a printable-certificates directory last time I tried it just did it in the root project which seems like the biggest mistake here because yesterday it was able to one-shot this and so far that looks like the biggest mistake here. So this generating looks like it's taking a while I'm going to go ahead and cancel this and I'm going to stop the dev server with ctrl-c. And to me my best bet right now is just to start over from scratch because we never really got to a place that felt like a good checkpoint.
[03:02] So I'm going to scroll back and you can see there are checkpoints which you can revert to anytime it makes a change. But if I go back to the very beginning, rather than trying to correct what it's done here, I'm essentially going to delete everything. Trash, command delete, move to trash, and I'll be a bit more explicit that I wanted to create the project in the current directory. So when you're running any commands please do it in the current directory rather than creating new directories. For example if you use pnpm create to create a project just do it in the current directory and then we'll just restart from here.
[03:40] So I'll hit submit. I'll hit continue and revert. Looks like I deleted when I didn't need to. I wasn't aware of that so I'll just let it keep on running and we'll let it start over. Close this out.
[03:51] This should not be running anymore and looks like we get to our first command. So now it's trying to install dependencies. So node modules packaged, that looks good. I'm going to cancel now. It looks like it definitely had something cached based on this message here.
[04:06] It mentioned existing code. So instead of letting this continue to run, again keep an eye on this as it's working, I'm going to select all of this and start a completely new composer. Select everything and delete it. Then paste this back in. Make sure it's on agent and let it run again.
[04:25] This looks better. We have a dot this time instead of a project name. I should have paid more attention last time and caught this earlier, but you live and learn. So we scaffolded the project, let's install everything. We'll accept this.
[04:37] Looks like it ran into an error trying to create this file, so we need to make the directory for it. And now it'll try and create the file, show it up in here, we'll accept. And it is very strange to quote-unquote work this way where you're just waiting to hit accept a bunch. I will hit accept again since it looks like we're now looping through and creating certificates. Now we have some CSS.
[04:57] Start our dev server. We'll open this up again. It's just on the same port and looks like we have our certificates. Let's go ahead and see what print certificates looks like. And these look decent, but they're not fit to the page.
[05:12] So maybe I wasn't clear enough on those instructions. So I'm going to open this again and I'm going to take a screenshot of this just so it has the context. And I'm going to drag and drop this screenshot in. And I'll say, the two certificates do not fit on a single page. It looks like it's overflowing to the next page.
[05:30] Please revisit the printable styling logic to make sure they're constrained to two certificates per page. With essentially the end goal is after I print these off I can hand them over to someone who will cut the piece of paper in half and distribute the individual certificates. I'll hit enter and again I when I use dictation I mostly just vomit whatever words out of my mouth that come to come to my mind. I don't worry about being too precise rather I just speak until the entire concept is out and let the AI essentially make sense of all the words I was using. All right, let's accept the styling changes and go back here.
[06:07] We'll click print again and now it's only one per page. We'll hit cancel and I do promise this worked in one shot yesterday, but it's good to see things fail and how to fix them. So let's say now we're only getting one certificate per page. My guess is that they're too tall for two of them to fit in a single page. Can you please inspect the components and the styles to make sure that everything fits and that we will always have exactly two certificates per page.
[06:34] I'll hit submit here, cross my fingers, we'll hit accept and click print. And now it looks like we got 2, 2, 2 and I don't know why the second page is blank. So let's go ahead and tell the AI that. Everything looks great except for when I click print. I do have two certificates per page but the second page is blank but every other page looks great.
[06:59] Can you please figure out why and fix it for me. Hit submit. I'll hit accept here. I do like to see this where it's calculating the viewport height divided by two. So let's hit print and it looks like we're in business here where we could print these out and chop them in the middle.
[07:16] And one other thing I did yesterday is I told it for all of the various fonts used in the project I'd like to be able to experiment with fonts. Can you please set up the project in a way where I can just comment out which fonts are being applied to each individual section so that I can easily play with turning fonts on and off and testing out various fonts. So please add a whole bunch of fonts, start with many of them commented out, and make it easy for me to toggle certain fonts on and off just so I can play around with variations myself. And this way rather than having the AI generate one single version and then waiting for it to generate another one, you can ask it to do some variations and just leave some commented out. That way you can go in and just essentially play and try things out rather than sitting around waiting for AIs to finish their job.
[08:08] Alright let's hit accept and let's click on I think this could jump us there the font family and it looks like it did do the job of adding all the fonts but it did not give me the options to uncomment the various ones. So I'll just let it know you forgot to include all of the commented out fonts so that I can experiment with different fonts just by commenting and uncommenting the fonts that you suggested. So please go in and add all of the commented out font sections so I can play with them. And hopefully this works. Sometimes it does have a hard time with comments.
[08:40] It really doesn't like to leave comments in there when it's commenting out code. It seems much easier to have comments in there when it's explaining the code. But I assume that cursor provides some rules behind the scene of never to leave in commented code. All right this is looking way better let's accept that. So now we can, you saw the fonts change over here, now we can come in comment this out, hit save, comment this, and just kind of play at this point with what looks best.
[09:10] And these do look like, if I scroll to the top, it is using the Google Fonts APIs. So we get tons and tons of font options and we could ask for many many more.