871: Coding Agents Cursor + Windsurf Tips

Scott and Wes explore the world of coding agents, diving into tools like Cursor and Windsurf that promise to change how we write and manage code. They discuss modes, workflows, and practical tips for experimenting with these AI-powered tools in your next project. Show Notes 00:00 Welcome to Syntax! 04:12 What are AI Agents? Cursor Features, Windsurf Features. 07:25 Brought to you by Sentry.io. 07:50 Chat Mode. 08:11 Composer Mode. 08:55 Agent Mode. 10:03 Inline Chat Mode. 11:02 JavaScript Set Methods Demo. Wes’ Example on X. 16:10 Fire Dispatch Data. 20:01 Rules Files. Cursor Directory. 22:37 Use screenshots. 23:36 Refactoring to separate files. 23:53 Use it to experiment. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:01Wes Bos?

  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 of other ones. Wind Surf, Cascade, Replet Agent, how to use these to be the most effective. And there's a relatively new features to all of them called like Agent Mode. And we're specifically going to be focusing in on that. So my name is Wes Bostrom, developer from Canada. With me as always, Mr. Scott Tolinski. How are you doing today, Scott?

• 0:31Scott Tolinski?

  Yeah, 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 broke my finger in a kind of dramatic way. And man, it is really impacting my life. My like, I was trying to do a lot of coding yesterday. My hand is like all tweaked out and stuff.

• 0:56Wes Bos?

  Oh, man.

• 0:57Scott Tolinski?

  I'm like getting RSI from it 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 sucks. So to give you some backstory real quick here, we can, we can kind of breeze through this. But also if you are a little squeamish, maybe fast forward like a minute or so. Yeah. So Courtney was like, oh, I'm going to 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, yes, I'm so stoked about that. So I had a number of light switches I wanted to do.

• 1:31Wes Bos?

  Yeah.

• 1:31Scott Tolinski?

  So 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 developer's account or whatever for Jellyfin. I'm like, I'm, I'm setting up Landon's Minecraft server on my Mac Mini. I'm doing all this little stuff I want to do. And so I'm like swapping out one of the light switches for one of my Casita 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 have to like, put some force behind your, your drill to get it so it doesn't strip.

• 2:09Wes Bos?

  Oh, yeah, I did this.

• 2:11Scott Tolinski?

  So.

• 2:12Wes Bos?

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

• 2:14Scott Tolinski?

  I had my 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 not only left a big ol' hole in my finger, but it broke my pinky bone. Uh, so my, my hand is feeling kinda awful right now. Uh, that was on, uh, that was on Saturday. So, you know, I'm, uh, I'm hanging in there, but man, it sucks.

• 2:49Wes Bos?

  You had to go to the doctor or the hospital? Do you have the cast on it?

• 2:51Scott Tolinski?

  Yeah, I went to the urgent care. I, I do have a little cast 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. Uh, it all around sucks. I, I'm like the king of, uh, injuring myself in dumbass ways. So this is like par for the course for me. So yeah, yeah.

• 3:15Wes Bos?

  Man, I've, I've done that a couple of times where I've, I've been leaning in with the drill and then it slips and I put it, I put it right through my finger once and it hurt a ton.

• 3:25Scott Tolinski?

  That's exactly what I did. Right through the finger. Yeah, I know.

• 3:28Wes Bos?

  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 use down there? The Phillips? The Star?

• 3:39Scott Tolinski?

  This was a Phillips idea. This was specifically Phillips.

• 3:42Wes Bos?

  We 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.

• 3:50Scott Tolinski?

  Sucks. And you know what the worst part about it is? It ruined my whole day. Cause I had this whole day and I had to spend the rest of the day in the urgent care. Like, ah, my, my, my day of accomplishing tasks, the Minecraft server never got finished. Uh, 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 for them to be. Yeah. If only I had AI agents to take care of them.

• 4:14Wes Bos?

  There you go.

• 4:15Scott Tolinski?

  Yeah.

• 4:15Wes Bos?

  All right. So this word agents has been kinda thrown around. It's, it's kind of like a, 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, uh, meaning it can generate code, NPM install things, run things on terminals. And the important part is that it feeds its...

• 4:40Wes Bos?

  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 where at a certain point, you can't give it your entire code base. 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 base. And it might do a search for your code base for things that are related,

• 5:20Wes Bos?

  or it might look at what tabs you have open up, or it might follow your ESM 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. I was like, ah, sorry, 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 three or four times to actually get to the end result. And that's kind of neat, because

• 6:03Wes Bos?

  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 say, All right, 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 yes, that ESLint error. And then you go kind of go back and forth. And that's the sort of idea behind AI agents in coding.

• 6:25Scott Tolinski?

  Yeah, 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's going to run through those tasks. You know what, I was wondering if the Copilot workspace would be considered an agent. It's kind of very similar.

• 6:39Wes Bos?

  Yes.

• 6:39Scott Tolinski?

  Yeah.

• 6:40Wes Bos?

  Yeah, because it will, it will just keep doing tasks until it gets to what it thinks is a satisfactory output.

• 6:47Scott Tolinski?

  Yeah.

• 6:48Wes Bos?

  So I'm going to be specifically talking about Cursor here, but these features are also in Windsurf. Their product is called Cascade. And Repelit 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 a little bit behind right now. I bet in maybe even by the time you listen to this, Copilot will have rolled out some similar changes as well. But this, this just landed in Windsurf a couple of months ago. It landed in Cursor. I think just a couple of weeks ago, maybe a month or two ago. So it's relatively new.

• 7:25Scott Tolinski?

  And if you want to see all of the errors in your application, you'll want to check out Sentry. At sentry.io/syntax. You don't want a production application out there that while you have no visibility into in case something is blowing up and you might not even know it. So head on over to sentry.io/syntax. Again, we've been using this tool for a long time and it totally rules. All right.

• 7:50Wes Bos?

  So in Cursor, you have Chat View, which is kind of 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 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 codebase. 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, uh, this

• 8:34Wes Bos?

  website needs to add a light mode, make sure to reference the styles. And then I might like prompt like a CSS file or um, there's, you can prompt files, folders, codebases, documentation, Git, et cetera, uh, in there. So you add the, all of that to the context as, as you go. Although now the new one is the, the agent mode. Um, so agent mode will allow you to, it runs tools. It allows you to have terminal commands. It will edit multiple files. It will go off through your codebase, searching for possible issues. And that's really like the, the best way to approach

• 9:15Wes Bos?

  this. And that's kind of, it's, it's actually quite good. Like I, I'm not Mr. Gung ho on a lot of this AI stuff. I, I love it quite a bit. I don't think it's going to 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, three or four 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

• 10:00Wes Bos?

  against it and see if there's, there's any issues.

• 10:03Scott Tolinski?

  So are you using this? Cause I have not used composer really. I, the, the way that I tend to use cursor is the command K inline chat is 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?

• 10:25Wes Bos?

  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 mono repo 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. I made here, let me, let me show you. So I built this this morning in

• 11:04Wes Bos?

  about 20 minutes 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 is it 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 six or seven times for it to actually get what I wanted. But then it did it. Then I was like, okay, now I'm gonna jazz it up.

• 11:46Wes Bos?

  And I was like, like, make it look really nice. And then I was like, make it look even nicer. And then I was like, the arrays or the sets that we have, like, the first one is Wes and Kate. And the second one is Wes and Scott. And I want to see the difference between those two 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 Kate is always blue. And it's amazing that, like, that would suck to have to go and wrap spans around all of these names. And this did 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,

• 12:30Wes Bos?

  where 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?

• 12:42Scott Tolinski?

  When you told it to look nice, did you give it any parameters? Did you say, use these colors, use these?

• 12:48Wes Bos?

  Yes, when 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 kind of crappy and you really have to press it to look better. And sometimes go back two or three times. So here we go, I immediate, so now it has said, all right, 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.

• 13:30Wes Bos?

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

• 13:37Scott Tolinski?

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

• 13:49Wes Bos?

  Composer is making checkpoints in the codebase.

• 13:53Scott Tolinski?

  Yeah.

• 13:53Wes Bos?

  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 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 accidentally delete some features and I deleted it like way back. Like, like I went a whole day without realizing that it deleted 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 reinstated it, which was pretty impressive.

• 14:33Scott Tolinski?

  And this is all through one long composer chat or several? Like is composer always one long chat or is it?

• 14:40Wes Bos?

  It can be either. Often when I like want to 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 well. 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.

• 15:21Wes Bos?

  So the other thing that I want now is move the CSS and JS to its own files.

• 15:28Scott Tolinski?

  Also tell it that the dark mode blue is now bad. And tell it that Scott said that.

• 15:34Wes Bos?

  The dark mode, oh, you're right. Cause it now changed the, the blue to be too dark. Good catch.

• 15:41Scott Tolinski?

  Maybe, maybe this is a good time for me to get used to this now that uh, my limited use of my, my left hand is going to be.

• 15:48Wes Bos?

  Yes.

• 15:48Scott Tolinski?

  Yeah.

• 15:49Wes Bos?

  But the other thing is like use, um, I have it hooked up to hitting control twice, but use the, your OS's dictation.

• 15:57Scott Tolinski?

  Yes.

• 15:57Wes Bos?

  So don't even type it, you know?

• 15:59Scott Tolinski?

  I have that set up. Yes. Yeah, totally.

• 16:01Wes Bos?

  The only thing is like, I find it kind of slow, which is the hilarious thing to complain about.

• 16:07Scott Tolinski?

  Yeah, yeah, yeah.

• 16:07Wes Bos?

  It's literally writing the code for you.

• 16:09Scott Tolinski?

  But it's slow. Yeah.

• 16:11Wes Bos?

  See, I'm working on another one right here, which is pulling all the data from our cities.

• 16:18Wes Bos?

  Fire department 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 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 was a medical or oh, there's a massive fire at the specific spot. And the city removed it and replaced it with some crappy website. So I was like, I'm going to remake this Twitter account. So I just, I just wrote a whole bunch of things, like, let's go through it to say, if we have sent it incident previously, can you run a deep

• 17:01Wes Bos?

  check on the object and log any differences? Make sure to use. And then I referenced parse units dispatched 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 went ahead 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 where 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. So I was like, can you use symmetric difference, which is a new API? And I went back and forth

• 17:45Wes Bos?

  like four times. And I even gave it a link to the documentation on M D N 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 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 this sometimes.

• 18:06Scott Tolinski?

  And it does, that does illustrate something that I I've come to realize with any of these AI tools for, 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 not, or I give it non-technical 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,

• 18:50Scott Tolinski?

  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 without.

• 18:59Wes Bos?

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

• 19:14Scott Tolinski?

  You gotta know what you're doing a little bit. You gotta know what you're looking for.

• 19:17Wes Bos?

  Yeah, you still, like, there was one, the one 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 in fact, that debugging of that Safari issue took me way longer than if I had written all the code myself. Because I had no idea what was going on.

• 19:36Scott Tolinski?

  Yeah, you don't know what's going on. Man, 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 were so wrong. And I know that you're 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, is 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 like pre-made ones for you based on what your project is.

• 20:20Scott Tolinski?

  But these are just sort of like general information about your codebase. 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 is 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 codebase. I think nine times out of 10, the 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

• 21:00Scott Tolinski?

  snakecase dude, or hey, use Svelte 5, please, you know, stop giving me these kind of things. So.

• 21:07Wes Bos?

  You know what's one I always hit is it always uses Axios.

• 21:11Scott Tolinski?

  Oh, really?

• 21:12Wes Bos?

  I don't know if that's just because it's it's been trained on codebases from a while ago, but you have to explicitly go in and I don't have this in my cursor rules. I should probably add it, but you always have to say, don't use Axios, use fetch and always use ESM.

• 21:28Scott Tolinski?

  Yes, always use ESM.

• 21:30Wes Bos?

  It does a pretty good job at figuring out if you have an existing codebase, but when you're going from scratch, those things are super handy.

• 21:37Scott Tolinski?

  Yeah, just those general things. ESM, TypeScript, blah, blah, blah. Use this, please. Don't use anything else. Yeah.

• 21:44Wes Bos?

  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.

• 22:19Scott Tolinski?

  Yeah, totally. Yeah, I know. I think especially if you're getting into the the edge here, you know, Svelte 5 just came out, all that stuff. Using those types of tools, I think the cursor rules becomes more important because otherwise it is totally like, let me just give you some React code. Let me give you some, you know, yeah.

• 22:37Wes Bos?

  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 fixed it immediately. So to understand what's going on. Another thing I did was give it screenshots of documentation, which sounds odd, 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 parsing out bits and bytes are coming over serial, which is, is wild.

• 23:12Scott Tolinski?

  So it does OCR within the, it does text recognition?

• 23:17Wes Bos?

  Yeah, exactly. Cause it had like a table of, I was sending what's called a bit array, which is eight 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 screenshotted it, put it in and like create a bit array for me and it boom, it created everything.

• 23:34Scott Tolinski?

  Nice.

• 23:35Wes Bos?

  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 can 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? Cause if you say, hmm, I'm trying to debug this thing. And what would have, 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.

• 24:19Wes Bos?

  It just went through the whole code base, turn, remove them. And then I, I got to test it and then 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.

• 24:35Scott Tolinski?

  That does seem like a good use case. Remove all expensive transitions, replace them with performant ones. Replace all translates with translate 3Ds, all that kind of stuff.

• 24:47Wes Bos?

  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.

• 24:59Scott Tolinski?

  Totally.

• 25:00Wes Bos?

  It's really handy. So those are all my tips for using it. It's the cursor agent is they didn't make 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 try it out because it's, it's pretty good. It's, it's one of those things where you go, oh, 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, uh, making a dashboard, you know, that's a, that's a really annoying one. It's low stakes, but high reward when you can scaffold it out.

• 25:43Scott Tolinski?

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

• 25:56Wes Bos?

  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 Windsurf version better. 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 Windsurf version as well.

• 26:15Scott Tolinski?

  Yeah. Windsurf, all this stuff is in constant flux as always. But uh, 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 going to see how much this can do for me, especially given that my code base uses some very experimental stuff. So, uh, 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 a super exciting.

• 26:50Wes Bos?

  Awesome. All right. Thanks again for tuning in and we'll catch you later. Peace.

• 26:54Scott Tolinski?

  Peace.