Coding Agents Cursor + Windsurf Tips

Welcome to Syntax Today. We had an episode for you on AI coding agents that is how to use Cursor, and there's a couple other ones, Wes Winsorff, cascade, Replit Agent, how to use these to be the most effective. And and there's a relatively new features to all of them called, like, agent mode, and we're specifically gonna be focusing in on that. So my name is Wes Bos, developer from Node. With me as always, mister Scott Tolinski. How are you doing today, Scott?

Yeah. I I could be doing I could be doing a little bit better. I had kind of a gnarly gnarly weekend besides my, Detroit Lions losing, Ohio State winning the national championship. Those are bad things that happened to me this this weekend, but I I I broke my finger in a kind of dramatic way. And, man, it is really impacting my life. My like, I'm I was trying to do a lot of coding yesterday. My hand is, like, all tweaked out and stuff. Oh, man. And I'm, like, getting RSI from h just because, like, the ways I'm contorting my hand to try to type without using, you know, my pinky or any of that stuff, it it sucks.

So to to give you some backstory real quick here, we can we can kind of breeze through this. But, also, if if you are a little squeamish, maybe, fast forward like a minute or so. Yeah. So Courtney was like, oh, I'm gonna take the kids to, this this place with their some of their friends, and you can have the whole day to, like, take care of tasks around the house. And I was just like, Wes. I'm so stoked about that. So I had a number of light switches I wanted to do. Yeah. So I I start and I'm, like, doing, like, 800 things at once. I'm pushing, you know, custom software to my TV with my, Samsung developers account or whatever for Jellyfin.

I'm like, I'm I'm I'm setting up Landon's, Minecraft server on my Mac mini. I'm doing all this little stuff I wanna do. And so I'm, like, swapping out one of the light switches for one of my Caseta switches, and it was a really tight receptacle. And, like, man, the one of these screws was super tight and it, like, was, like, locked up. And so, you know, you need to have to, like, put some force behind your your drill to get it so it doesn't strip. Yeah. I did this.

So I'm I'm gonna get super squeamish at this, but continue

shoulder behind it, and I'm putting my full weight onto it.

And this hand is just kinda hanging out, and it bends and slips out. And while the drill is spinning, goes right into my my hand and pins my finger up against the wall to the point where it broke. It it not only it left a big old hole in my finger, but it broke my pinky bone.

So my my hand is feeling kinda awful. Rouch. Right Node.

That was on, that was on Saturday. So, you know, I'm, I'm hanging in there, but man Did you go to the doctor or the hospital? Do you have a cast on it? I went to the urgent care. I I do have a little cash for it, but the because the wound was so bad, they didn't want me to put it on yet. So I'm just, like, letting the wound heal first and then I gotta put the pinky cast on.

Sucks.

It all around sucks. I I'm like the king of, injuring myself in dumbass ways, so this is, like, par for the course for me. So yeah. Yeah.

Man, I've I've done that a couple times where I've I've been leaning in with a drill, and then it ESLint, and I put it I put it right through my finger once, and it hurt a ton. That's exactly what I did. Right through the finger.

Yeah. I know. Well, in Canada, we have Robertson screws mostly, and they don't do that because the design of the Robertson screw is superior to what do y'all do use down there? The Phillips? The star? This was a Phillips side. Yeah. This Wes specifically Phillips side. Wes still have quite a few Phillips, but the the Robertson doesn't cam out or doesn't cam out and slip out like that, which

is superior. Sucks. And you know what the worst part about it is? It ruined my whole day because I had this whole day, and I just spend the rest of the day in the urgent care, like, my my my day of accomplishing tasks. The Minecraft server never got finished.

My Jellyfin server has, like, hardware encoding issues now. It's like all of the little tasks got half done, which is the worst worst place it's going to be. Yeah. If only I had AI agents to take care of it. You go. Yeah. Right? So this word agents has been kinda thrown around. It's it's kind of like, one of these, like, BSE words in the AI space. But, essentially, the way to describe what an agent is is something that can do multiple tasks, meaning it can generate code, npm install things, run things on terminals.

And the important part is that it feeds its answer back into itself. So a lot of times on the show, we've been talking about just, like, sort of, like, what's called a one shot, meaning that you you type in what you want, and you get the answer back, And and you try to provide the best possible prompt and all the possible context for something Wes, at a certain point, you can't give it your entire code Bos, and sometimes it's better for it to do it in multiple steps.

So what an agent will do is it will you ask it to do something, and it'll say, okay.

Let me do a quick scan of your code Bos. And it might do a search for your code base for things that are related, or it might look at what tabs you have open up, or it might follow your e s m tree to see which files are.

Then then once it's listed those, it will it will take those and put it into the next prompt, and then it will come back with a bunch of changes and apply them.

And then after it's applied them, it might try to run something in the terminal. It often will run, linting errors and see if there's any linting errors. And if there's any errors that come back from the code that it just it just did, then it will feed those errors back into itself JS, ah, sorry. I I goofed that up, or let's let's change this a little bit so we can fix it. Right? And it sort of goes back and forth 3 or 4 times to actually get to the end result.

And that's kinda neat because that's that's how humans work as well. Right? That's how you don't just say, like, I'm going to build this app. No. You you say, alright. Well, let me see what we're working with. Okay. I got that back. Now let me try this. Okay. That gives me an error. Now let me fix that e s that ESLint error, and then you go kinda go back and forth. And that's the the sort of idea behind

AI agents in coding. Yeah. Then you can think of it really as here's a thing that's going to go off and do tasks for you, and and it it's going to run through those tasks. You know what? I I was wondering if the, Copilot workspace would be considered an agent. It's kind of very similar. Yes. Yeah. Yeah. Because it will it will just keep doing tasks until it gets to

what it thinks is a satisfactory output. Yeah. So I'm gonna be specifically talking about Cursor here, but these features are also in Windsurf.

Their product is called Cascade, and ESLint also is another big one, in the space right now. I don't know that I would include GitHub Copilot.

They do do most of these things, but it's just a little bit behind right now, I bet. And maybe by the time you listen to this, Copilot will have rolled out some similar changes as well.

But this this just landed in Wes Surf a couple months ago. It landed in Cursor, I think just a couple weeks ago, maybe a month or two ago. So it's relatively new. And if you want to see all of the errors in your application,

you'll want to check out Sentry at sentry.ioforward/ syntax. You don't want a production application out there that, well, you have no visibility into in case something is blowing up, and you might not even know it. So head on over to Sentry.i0forward/ syntax. Again, we've been using this tool for a long time, and it totally rolls. Alright.

So in cursor, you have chat view, which is kinda like what everybody is is used to. Right? You you open up chat, you type in what you want, and it will sort of apply the changes to your current tab that you have open.

I bet chat view will probably go away relatively soon because what is far superior is the composer view. And what composer view will allow you to do is is is several things. First of all, it allows you to create multiple files, and you can also add in context to multiple files in your entire code base. So you might create a prompt in your composer view that will will do something like here. I'm in normal view right now. So I'll say, this website needs to add a light mode.

Make sure to reference the styles.

And then I might, like, prompt, like, a CSS file or, there's you can prompt files, folders, code bases, documentation, Git, etcetera, in there. So you add all of that to the context as as you go. Although Node the new one is the the agent mode.

So agent mode will allow you to it runs tools. It it allows you to have terminal commands. It will edit multiple files. It will go off through your code Bos searching for possible issues, and that's really, like, the the best way to approach this. And that's kinda it's it's actually quite good. Like, I I'm not mister gung ho on a lot of this AI stuff. I I love it quite a bit. I don't think it's gonna be the the be all end all. You know? And I know how annoying some of these AI folks can be, but the agent mode is is very good. Like, I had built, I don't know, 3 or 4 things in the last week or so with it, and I'm amazed at how quick and productive I can be. So agent mode will search your code base. It will do multi steps. Right? It can find files that need to be referenced. You don't have to explicitly tell it which files are need to be edited.

It will modify multiple files. You can approve it. You can edit it. And, it also checks its work, meaning that it will run a linter or something like that against it and see if there's there's any issues.

So are you using this? Because I had not used Composer really. I the the way that I tend to use cursor is the Yeah.

Command k ESLint chat JS, like, even I don't even use the chat pane. So the the command k inline chat is the way that I I pretty much use cursor. Are you building things in large projects with this, or have you only done kind of smaller things and demos?

Yeah. I've so I've used it on my course code base quite a bit, which is very large code base. It's a monorepo with multiple, things in it, and it does very good. I don't have as much experience in my code base. I've only been using it for a month or so, but I'm surprised at at how well it works. And then also, I've used it in quite a few smaller websites. So I made the dashboard for the Roomba that I'm currently driving with JavaScript.

Stay tuned for a video on that. Yes. I Node here. Let me let me show you.

So I built this this morning in about 20 minutes Wow. To try to visualize the new set methods. So we have, different intersections, symmetric difference, union, disjointed, superset, and subset.

And this, I went back and forth with it maybe 15 times to sort of add what it is that I wanted. So I started with with basically gave it the code examples, and I said make a visual representation of this code using, what it is called, Venn diagrams and use SVG.

And at first, it didn't do a very good job at it. I had to go back and forth maybe 6 or 7 times for it to actually get what I wanted, but then it did it. And then I was like, okay. Now I'm gonna jazz it up. And I was like like, make it look really Node, and then I was like, make it look even nicer.

And and then I was like, the arrays or the sets that we have like, the first one is is Wes and Kate, and the second one is Wes and Scott, and I wanna see the difference between those 2 pieces of of data.

So I was like, can you, like, color the names from each of their set by the set color? Right? So Scott is always pink, and and Kate is always blue.

And it's amazing that, like, I that would suck to have to go and wrap spans around all of these names, and this did a a relatively quick way with it. So that was much better than just using the chat example because you're able to go back and forth with it Wes it will make a bunch of changes. And you see the changes in the browser right away, but you haven't yet accepted them. So I went into composer. I am in agent mode, and I said, this website needs a light mode. Can you add it? When you told it to look nice, did you give it any parameters? Did you say use these colors, use these kind of When I I said use dark blue and hot pink, and then it just went in and did it, I find that it, by default, makes everything look like bootstrap. So by default, everything looks kinda crappy, and you really have to press it to to look better, and sometimes go back 2 or 3 times. So here we go. Immediate so now it has, said, alright. I've added light mode, and I can see both the diffs in my code as well as an explanation of it in the composer sidebar. And you'll see that I have the website open right now, and it's sort of, like, staged those changes, so I can go ahead and use them. So there we go. I've added light mode to it. Doesn't look amazing.

So maybe I'll go back and say the blues are hard to read.

Make them darker.

So question about this. So when it adds these changes and it's staging them, are you Yeah. Going back and saving the HTML file and it's just and that's what's updating in the browser?

Composer is making checkpoints in the code base. Yeah. And since I have not accepted anything yet, at any point, I can just cancel or reject any of the changes, and it will throw me back to to where I was. So there's no, like, scariness of going too far with it because you can always restore to any point in time, that you want. And in fact, I had it accidentally delete some features, and I deleted it, like, way back. Like, like, I went a whole day without realizing that it deleted an entire component.

And I just added it. I just said, hey. Like, you deleted something, and it, like, went back in the Git history

and found what I was what I was looking for and and reinstated it, which was pretty impressive. And this is all through 1 long composer chat or Vercel? Like, is composer always 1 long chat, or is it It

it can be either. Often, when I, like, wanna switch to, like, building a new component, I'll create a brand new composer chat just because I don't want any of the stuff.

Pretty much I open a new Composer for every single, like, feature I'm working on, but I haven't really found a difference, to be honest.

So here we go. I have now a much darker blue. My light mode, dark mode seems to be working really, really Wes. And then when I'm done, I can I can go through and review all the code changes that are here, and then I just go ahead and click on accept, and boom? Now I've got that feature added to me. So the other thing that I want now is, move the CSS and JS to its own files.

Also tell it that the dark mode blue is now bad, And tell it that, Scott said that. The dark mode. Oh, you're right.

Because it now changed the the blue to be too dark

to catch. May maybe this is a good time for me to get used to this now that, my limited use of my my left hand is going to be Yes. Yeah. But the other thing is, like, use,

I have it hooked up to hitting control twice, but use the your OS's dictation. Yes. So don't even type it. You know? I have that set up. Yes. Yeah. Totally.

The only thing is, like, I find it kind of slow, which is a hilarious thing to complain about. Yeah. Yeah. Yeah. Yeah. Literally doing all this stuff for you. But it's slow. Yeah. See, I'm working on another one right here, which is pulling all the data from our city's fire department and and saving them. So there used to be this Twitter account that every time a fire call went out, they would tweet out the details about that fire call. It would give you cross streets. It would give you what engines are are re responding.

And both, like, regular people, when, like, you see a fire truck, you say, what's going on? You go to the Twitter account and say, oh, it's a medical or, oh, there's a massive fire at this specific Scott.

And the city removed it and replaced it with some crappy website.

So I was like, I'm gonna remake this Twitter account.

So I just I just wrote a whole bunch of things. Like, let's go through it and say, if we have sent an incident previously, can you run a deep check on the object and log any differences? Make sure to use. And then I referenced parse units dispatch and parse stations involved to parse the unit strings into an array of unit. You may do this before looping over it. And then it it went ahead and and wrote all the code for me. So, like, I find for, like, very complex data structures, it works really well. And then I got into it. Well, this is another tip I have is I say the order of the stations seems to change. So sometimes it will tell you it'll give you an array of data, and then it'll give you the array of data backwards, and it will think those are different. Mhmm. So I was like, can you use symmetric difference, which is a new API? And I went back and forth, like, 4 times, and I even gave it a link to the documentation on MDN to say, no. Use this. And it kept being like, no. This is not in all the browsers yet. Let me recreate it. And I've I was like, use it. My environment supports it. And finally,

it went ahead and did it. So you have to be a little bit aggressive with it sometimes. And it does that does illustrate something that I I've come to realize with any of these AI tools for Yeah.

All of the tools will be so much more effective if you're giving it instructions as if I mean, if you know what you're talking about. Because if I ask it, like, very Node right. I I give it nontechnical prompts or I'm not, like, really telling it what to do specifically.

A lot of times the code that it gives me isn't something that I would be comfortable pushing out. It might work or it might be okay or sometimes it's just straight up wrong. But if I'm able to give it, you know, bits of a technical solution, use this API, use this strategy, use, you know, these types of things and you direct it more technically, I found the results to always be that much more better than they would be GitHub.

Totally. I agree. And I'm I'm quite surprised that at the quality of the code that it it puts out. I know, like, you certainly have to be careful and and whatnot, but I'm I'm relatively surprised at at the quality of the code.

You gotta know what you're doing a little bit. You Scott know what you're looking for. Still like, there was one The pnpm error had some touch animation issues in Safari. It would not figure out what the actual issue was, so I had to go in and and do it. And and in fact, that debugging of that Safari issue took me way longer than if I had written all the code myself. Yeah. Because I had no idea what was going on. Yeah. You don't know what's going on. I've been let me tell you,

I've had some issues like that with like, you know, ESM or TS config stuff. And the AI agent or the the AI in general is just like, do this. I'm like, you were so wrong. You wrong.

I love to tell it that I say, you are so wrong.

It's like, I'm sorry that I'm wrong.

You better be sorry. Another tip for especially for Cursor, but all of the windsurf and copilot now have similar concepts here JS establishing your rules file. And in Cursor, it's a Cursor rules file. They all have a little bit different names. And in fact, there's a website called Cursor Directory that will have some premade ones for you based on what your project is. But these are just sort of like general information about your code base. And I found that all of the tools in any of the AI editors work so much better if you give it the tools.

One thing that I really like that Svelte did recently JS they they had like an AI file for you on their their website. So you can now use the Svelte 5 AI file to like teach the AI what's going on here. But if you use these these cursor rules files or these instructions files to give it information about what you want out of your code base, I think 9 times out of 10, the results are so much better, in terms of like giving you exactly what you want. You don't have to like tell it multiple times, no, make this snake case, Node, or hey, use Svelte five, please. You Node, stop giving me these kind of things. So I don't want 1 I always hit is it it always uses Axios.

Oh, really? I don't know if that's just because it's it's been trained on code Bos from a while ago. But Yeah.

You have to explicitly go in. And I don't have this in my cursor rules. I I should probably add it. But you always have to say, don't use Axios. Use Fetch and always use ESM. Yes. Always use it. Yeah. Pretty good job at figuring out if you have an existing code Bos. But when you're going from scratch,

those things are super handy. Yeah. Just those general things. Wes,

TypeScript, blah blah blah. Use this, please. Don't use anything else. Yeah. Yeah. There is a cursor directory website that has a bunch of different cursor rule files for different types of of development, so certainly worth looking into that. Quite honestly, I don't even use a cursor rules file at all. Aside from the use ESM and fetch and use TypeScript types of things, I haven't found the need for it. But, also, I think I do a bit more of, like like, mainstream dev. You know? Like, a lot of the stuff defaults to React. It defaults to using camel case and things like that.

Yeah. Totally. Yeah. I know. I think, yeah, especially if you're getting into the the edge here, you know, Svelte five just came out, all that stuff.

Using those types of tools, I think the cursor rules becomes more important. Because otherwise, it JS. It's like, let me just give you some React code. Let me give you some you know? Yeah.

Other tips we have here is give it screenshots when things are weird. So I had a weird layout bug that it couldn't fix. So I just did a screenshot and gave it to it, and it and it fixed it immediately Scott it'll understand what's going on. Another thing I did was give it screenshots of documentation, which sounds Node, but I had a PDF of the Roomba serial spec, and I could not figure something out. So I just screenshotted the whole page, dumped it in there, and boom. It wrote all the code for Interesting.

Parsing out bits and bytes for or coming over serial, which is is wild. So it does OCR within the it Wes tech text recognition? Wow. Yeah. Exactly. Because it had, like, a table of I was sending what's called a bit array, which is 8 bits in a byte that are just ones and zeros, and I couldn't I didn't know how to do that. Right? So I just screenshot it, put it in. I'm like, create a bit array for me, and it boom. It created everything Nice. Right away.

Tell it to refactor things out to separate files. I find that it will, by default, just add stuff to components, and things can get out of control really quickly and become extremely messy. So explicitly tell it create a new component for this.

And then, also, like, one last tip I have is, like, use it as a way to experiment. You know? Because if you say, I'm trying to debug this thing, and what would I was trying to debug something with, some transitions, and I was using tailwind. So I had, like, transitions in, like, 80 different parts of the code base. So I just said, disable all expensive tailwind classes. I'm trying to figure out a animation bug. It just went through the whole code base, turn remove them, and then I I got to test it. And then if if it didn't fix it, I just rejected the the changes. And if it did fix it, then I knew what to fix. I would still reject it and then go back and and actually fix it. That does seem like a good use case.

Remove all expensive transitions, replace them with, performant ones, replace all,

translates with translate 3 d's, all that kind of stuff. Yeah. Yeah. Yeah. A lot of those things where it's like, that would take me way too long to manually do, and I also cannot, like, find and replace it. You know? You can't do, like, a global search because things are a little bit different. Totally. It's it's really handy.

So those are all my tips for using it. It's the cursor agent is they didn't make a a big hubbub over it, and I think a lot of people are maybe not taking full advantage of it. So I would certainly say, please go ahead and and try it out because it's it's pretty good. It's it's one of those things where you go, this is making me so much faster, and this is I'm able to get through especially for things that are, like, repetitive or boring, making a brand new component, making a dashboard. You know? That's a Yeah. That's a really annoying one.

It's low stakes, but high reward when you can scaffold it out.

Nice.

Well, that that's been super helpful. And to to be clear, all of this stuff is capable in Wind Surf as Wes, like you had mentioned. And you had also mentioned that, you know, some people found Wind Surf's version of this to be even better.

Yeah. Like, quite a bit. You you do any searching on Reddit or Cursor forms or whatever, and quite a few people are are saying, no. I like the the Wind Surf version better. And and the thing is, like, that some of those comments were a month old, so who knows? You know, it's always changing. But certainly check out, the Wind Surf version as well. Yeah. Wind Surf, all this stuff is in constant flux as always. But, thank you so much for this this good introduction on on agents. For me, personally, it's good timing considering I don't. Like I said, I primarily use the command k and and just chat right there. But we're gonna see how much this can do for me, especially given that my code base uses some very experimental stuff. So, I think that's where it's most interesting to me. It's like, how can I get these things to respond well to the fact that I'm using packages that are in alpha and new libraries and things that were just released? So for me, that's super exciting.

Awesome. Alright. Thanks again for tuning in, and we'll catch you later. Peace. Peace.