Welcome to syntax today. We had an episode for you on AI coding agents. And that is how to use cursor. And there's a couple of other ones, wind surf, cascade, replant agent, how to use these to be the most effective. And there's a relatively new features to all of them called agent mode and we're specifically going to be focusing in on that. So my name is Wes Boston, developer from Canada with me as always, Mr. Scott Telensky. How are you doing today, Scott?
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 weekend, but I broke my finger in a kind of dramatic way and
Man, it is really impacting my life. I was trying to do a lot of coding yesterday. My hand is all tweaked out and stuff. I'm getting RSI from it, just because the ways I'm contorting my hand to try to type without using my pinky or any of that stuff, it sucks.
So to give you some backstory real quick here, 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 gonna take the kids to this place where there are some of their friends, and you can have the whole day to 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. So I start and I'm like doing like 800 things at once. I'm pushing custom software to my TV with my Samsung developers account or whatever for jelly fin.
I'm like, I'm setting up Landon's Minecraft server on my Mac mini. I'm doing all this little stuff I wanted to do. And so I'm like swapping out one of the light switches for one of my cassette switches. And it was a really tight receptacle and like, man.
The one of the 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. Oh yeah I did this so. I'm gonna get super squeamish out this but yes I had my shoulder behind it and I'm putting my full weight on to it and this hand is just kind of 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 old hole in my finger but it broke my pinky bone uh... so my my hand is feeling kind of awful right now uh... that was on uh... that was on saturday so you know i'm a
I'm hanging in there, but man, the hospital. Yeah, I went to the urgent care. I do have a little cash for it, but the because the wound was so bad that you didn't want me to put it on yet. So I'm just like letting the wound heal first and then I got to put the pinky cast on sucks. It all around sucks. I'm like the king of
injuring myself in dumb ass ways. This is like part of the course for me. Man, I've done that a couple times where I've been leaning in with a drill and then it slips and I put it right through my finger once and it hurt a ton. That's exactly what I did, right through the finger.
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 down there? The Phillips is a star. This was a Phillips idea. This is a specific Phillips. Yeah, we still have quite a few Phillips, but the Robertson doesn't come out or doesn't come out and slip out like that, which is
Superior sucks. And you know, the worst part about it is it ruined my whole day because I had this whole day. And I had to spend the rest of the day in the urgent care, like, uh, my, my, my day of accomplishing tasks. The Minecraft server never got finished. Um, my jelly fin server has like hardware encoding issues now. It's like all of the little tasks got half done, which is the worst, worst place to be. Yeah. If only I had AI agents to take care of it. Yeah. All right. So this word agents.
has been kind of thrown around. 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.
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 I'll say, okay, let me do a quick scan of your code base and I might do a search for your code base for things that are related or might look at what tabs you have opened up or might follow your ESM.
tree to see which files are. Then once it's listed those, 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 did, then it will feed those errors back into itself. I was like, ah, sorry, I goofed that up. Or 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 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 ES, that ESlet error, and then you go kind of go back and forth. And that's the sort of idea behind AI agents encoding.
Yeah, you can think of it really as here's a thing that's going to go off and do tasks for you. And it's going to run through those tasks. You know what? I was wondering if the co-pilot workspace would be considered an agent. It's kind of very similar. Yes. Yeah. Because it will just keep doing tasks until it gets to what it thinks is a satisfactory output. Yeah.
So I'm going to be specifically talking about cursor here, but these features are also in windsurf. Their product is called cascade and replit also is another big one in the space right now. I don't know that I would include GitHub co-pilot. They do.
Do most of these things but it's a little bit behind right now I bet in maybe by the time you listen to this copilot will have rolled out some similar changes as well. But this this just landed in winter for a couple months ago 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.io forward slash 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 forward slash syntax. Again, we've been using this tool for a long time and it totally rules. All right.
So in cursor, you have chat view, which is kind of like what everybody is used to. 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 ChatView will probably go away relatively soon because what is far superior is the ComposerView. And what ComposerView 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 code base. So you might create a prompt in your ComposerView that 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, etc.
in there. So you add all of that to the context as you go. Although now the new one is the agent mode. 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 code-based searching for possible issues. And that's really like the best way to approach this. And that's kind of, it's actually quite good.
I'm not Mr. Gung Ho on a lot of the AI stuff. I love it quite a bit. I don't think it's going to be the be all end all. I know how annoying some of these AI folks can be, but the ancient mode is very good. 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 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 any issues. Are you using this? Because I have not used Composer really. The way that I tend to use cursor is the Command-K inline chat. I don't even use the chat pane, so the Command-K inline chat is the way that I pretty much use cursor.
Are you building things in large projects with this, or have you only done smaller things and demos? Yeah, 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 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, which I was gripped. Stay tuned for a video on that. I made, let me show you. So I built this this morning in 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 basically gave it the code examples. And I said, make a visual representation of this code using what 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 six or seven 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 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 is west and kate the second one is west and scott and i want to see the difference between those two pieces of.
of data. Can you color the names from each of their set by the set color? Scott is always pink and Kate is always blue. It's amazing that I would suck to have to go and wrap spans around all of these names.
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 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 when it's a 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 colors? Yes. When I said use dark blue and hot pink. And then it just went 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. 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. 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 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. 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 i want 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 get history and found what i was what i was looking for in and reinstated which is pretty impressive this is all through one long composer chat or several like is composed always one long chat or is it
It can be either. Often when I want to switch to 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 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. So the other thing 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 mo- Oh, you're right. Because it now changed the blue to be too dark to catch. Maybe this is a good time for me to get used to this now that my limited use of my left hand is going to be. Yes. Yeah. But the other thing is like use, I haven't hooked up to hitting control twice, but use your OS's dictation. Yes. So don't even type it. I have that set up, yes. Yeah, totally.
The only thing is that I find it kind of slow, which is the hilarious thing to complain about. It's literally writing the code for me. But it's slow. I'm working on another one right here, which is pulling all the data from our cities.
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 regular people, when 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 mass of fire at this 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 into
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 went ahead and wrote all the code for me. So like I find for like a 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'll think those are different. So I was like, can you use symmetric difference, which is a new API? And I went back and forth like four 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 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 that does illustrate something that 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 bits of technical solution, use this API, use this strategy, use these types of things, and you direct it more technically, I found that results to always be that much more better than they would be without.
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 that at the quality of the code. You got to know what you're doing a little bit. You got to know what you're looking for. Yeah. You still, like there was one, the one era had some touch animation issues in Safari. It would not figure out what the actual issue was. So I had to go in 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. 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 AI in general is just like, do this. I'm like, you are so wrong. You are so wrong. And I know that you're wrong. I love to tell it that. I said, you are so wrong. It's like, I'm sorry that I'm wrong.
You better be sorry. Another tip, especially for cursor, but all of the WinSurf and Copilot now have similar concepts here, is establishing your rules file. In cursor, it's a cursor rules file. They all have a little bit different names. In fact, there's a website called a cursor directory that will have some pre-made ones for you based on what your project is.
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 had like an AI file for you on 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 cursor rules files or these instructions files to give it information about what you want out of your code base, I think nine 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, dude. Or, hey, use 12.5, please. You know, it's not giving me these kind of things. So you know what's one I always hit is it always uses Axios. Oh, really? I don't know if that's just because it's it's been trained on code bases from a while ago, but yeah.
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. And usually it does a pretty good job at figuring out if you have an existing code base, but when you're going from scratch, those things are super handy.
Yeah, just those general things. ESM, TypeScript, blah, blah, blah. Use this, please. Don't use anything else. Yeah. There is a cursor directory website that has a bunch of different cursor rule files for different types 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 a 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 especially if you're getting into the
The edge here, you know, spelt five just came out, all that stuff. Using those types of tools, I think the cursor rules becomes more important. Because otherwise it is. Let me just give you some React code. Let me give you some.
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 I don't 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 green shot at the whole page dumped it in there and boom it wrote all the code for inter parsing out bits and bytes from are coming over cereal, which is is wild. So does OCR within the text recognition?
Wow. Yeah, exactly. Because 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 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. They can become extremely messy. So explicitly tell it create a new component for this.
And then also, like one last step I have is like use it as a way to experiment, you know, because 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. It just went through the whole code base, turn, remove them.
Then I got to test it, and then if it didn't fix it, I just rejected the changes. If it did fix it, then I knew what to fix. I would still reject it and then go back and actually fix it. That does seem like a good use case. Remove all expensive transitions, replace them with
Performance ones replace all Translates with translate 3ds all that kind of stuff. 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 really handy
So those are all my tips for using it is 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 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. I'm able to get through, especially for things that are repetitive or boring, making a brand new component, making a dashboard. That's a really annoying one. Low stakes, but high reward when you can scaffold it out. Nice.
Well, that's been super helpful and to be clear, all of the stuff is capable in Windsurf as well, like you had mentioned. And you had also mentioned that some people found Windsurf's version of this to be even better.
Yeah, quite a bit. You do any searching on Reddit or cursor forms or whatever, and quite a few people are saying, no, I like the WinSurf version better. And the thing is, some of those comments were a month old, so who knows? It's always changing, but certainly check out the WinSurf version as well.
Yeah, Windsor, all this stuff is in constant flux, as always. But thank you so much for this good introduction on agents. For me, personally, it's good timing considering I don't, like I said, I primarily use the command K in just chat right there. But we're going to see how much this can do for me, especially given that my codebase 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 an alpha and
new libraries and things that were just released. So for me, that's super exciting. Awesome. All right. Thanks again for tuning in and we'll catch you later. Peace. Peace.