Windsurf Tutorial for Beginners (AI Code Editor) - Better than Cursor??

Key Takeaways

today we're having a look at the AI code editor wind Surf and this is a relatively new editor it came out at the end of 2024 I've been using it for the past few months I was one of the first people that started using it funny enough and it's slowly become one of my favorite AI coding editors now in this video I'm going to give you a tutorial walk you through all of the features that you need to know about and share with you some tips and tricks from someone who's been using this pretty much every single day so you can understand how to use it best especially if you're a more beginner programmer now first things first we've obviously got to download and install wind surf I'll assume that you've done that but I do want to quickly talk about the pricing so for wi surf they do have a free plan however to my knowledge at least at the time of filming this video it doesn't allow you to modify files so you can chat with the AI it can generate code but it won't actually put the code into the files for you which for me is the whole reason to use this so personally I pay for the pro ultimate plan because I use this pretty much every single day for most people you're probably going to into this Pro Plan which is just $10 per month and if you compare that to cursor which I believe is currently $20 per month then this is a pretty good deal but do keep in mind if you're just going with the free plan I probably wouldn't even bother you can mess around with the editor but it's really not useful unless you do have one of these paid plans in my opinion it's worth it this is not sponsored you can use whatever you want and you can go use cursor for free if you just want to do the code generation that said let's get into the tutorial because this is definitely a cool editor and something that you'll want to check check out so I just opened up wind surf here and you'll notice that mine probably looks a little bit different than yours that's because when you download wind surf as it is a fork of vs code it will ask you if you want to import your existing vs code settings so that's what I did and I have a theme I have some extensions so all of that came in so it's really nice if you're already developer working in something like VSS code regardless the first thing you're going to want to do when you start writing any code is just open some kind of folder so what I'm going to do is go open folder I'm going to go to my desktop I'm just going to make a folder called test or of course I already have one called test let's just call it something like tutorial or test tutorial and just put this in a place where you're going to be able to locate it later because a lot of beginners make the mistake of not kind of remembering where they saved their code and then later they turn off the computer they open it back up again and they can't find where the project is so just make sure you put this in a location that you're going to be able to find later on now from here you're going to see immediately that this Cascade window is going to appear now this is wind surface version of like co-pilot or whatever you want to call it Cascade I don't really know the meaning of this name but the point is this is what you're going to be using to actually make changes to your code base now this is the main feature this is what I use probably 90% of the time so I'm going to focus on this primarily now before you get into actually prompting this and getting it to generate a bunch of code I do highly recommend that you take a few minutes and generate a little bit of a plan just think to yourself what exactly it is that you want to achieve what you want to build maybe draw out a little image of what you expect the user inter interface to look like I say that because these AI models can really go down some crazy tangents and if you don't know exactly what you want it to do it's going to be very difficult to produce the output that you're looking for so please just come up with a little bit of a plan have an idea of what you want the finished product to look like and that way this will be a lot more effective for you than if you just go in here and start messing with a bunch of random stuff it'll take you down all kinds of different avenues that you really don't want to go down Okay so we're inside of here and we can just write some kind of prompt here and it can start generating code right away but what you'll notice is that You' have this little mode selector here for write and for chat now make sure this is in right mode but again I believe on the free version it doesn't give you access to this if you have right mode on then this is by default going to go and modify a bunch of files for you maybe create new files for you it can do a lot of stuff so if you want to be careful change it to chat mode it can still write the code but it just won't actually apply it to your files so you have the two different modes if you're chatting with the codebase you use chat if you just want some output from the UI that's not related to code or you don't want it to modify your files use chat and if you want to write to your files obviously use the right mode super quick pause here guys I promise we'll continue in a second but I just want to let you know that if you've been watching this channel for a while and you are really looking to level up as a software engineer I am reopening my mentorship program it's called Dev launch it gives you direct one-on-one access to myself where I help guide you to level up as a software engineer whether that be what you need to learn next how to land a job we've had people come in the program that want to learn how to become an entrepreneur or a freelancer how to price projects properly really anything that you need in the software development industry I can help you with if you're a good fit so if you are interested click the link below or go to training. techwithtim domnet you can apply there you can see what it's all about and if you're a good fit then someone from my team will reach out to you with the next steps anyways let's continue and move into the rest of the tutorial so I just threw a prompt in here and I'm just asking it to make a react application for me the generate a fun trivia game and we'll save the scores in some kind of file now notice that what I did here is I told it the exact framework and languages that I wanted it to use now in this case react it's implicit that you're going to be using JavaScript but the point is you don't want to just ask this to make some kind of app because then it will just randomly pick the languages or Technologies so you want to at minimum decide what type of Frameworks and text stack you want to use here so the database the back end the front end what you want to use for a front end framework if you want to use a CSS styling Library your component Library if you know anything about coding you want to at least make those decisions first before you start going to the AI so in my case I'm using react and if you don't know what to use you can change this to chat mode and you can ask it to suggest a text stack based on what you want to build but anyways give it the text stack otherwise you're going to be kind of surprised with what it gives you so I'm going to go ahead and press enter and you're going to see this kind of kicks into action here and what it's going to start doing is generating a bunch of different files now this is really interesting and the first thing just appeared that I was hoping would happen here so notice that wind surf actually has the ability to execute terminal commands for you now because I asked this to make a V2 plus react project it knows that this is the command that it should be using and it asks if I want to allow it to run the command so I'm going to go ahead and press accept and this will actually run it in the terminal for me whatever the output of that command is it can analyze that which is something that's a little bit different from an editor like cursor so I'm going to go ahead and press accept and if you're curious where this output's actually being ran if you pull up the bottom tab here where it says terminal you can actually switch into the different terminals that are running so you can see that I have this Cascade terminal and if I look in this Cascade terminal which is the default one here it shows the command the Cascade just ran and then what the output of that command was so just something to note if you're looking for where this is actually running it'll be running in this terminal named Cascade which you can pull up from the bottom of the page okay so now it's saying okay we want to do this we want to CD and we want to npm and install Okay it's saying that this doesn't work because we're in Powershell so let's run this command and now it's going to install the different packages so those commands have finished now and you'll see the Cascade is going through here and it's creating a few different files sometimes this can take a few minutes depending on how many edits it's making but I want to point you to this output message that we just got right here it says Cascade will not create files that already exist so that's a good thing it means it's not going to override any code that you already have instead it will edit those files but you should be careful because Cascade Ela will not edit any files that have unsaved changes so if you do make a change manually yourself make sure you save that file so the next time you ask Cascade to do something it has the ability to go in and edit that so anyways it's now uh created a few of these different files app.jsx app.css and it's asking if I want to run the backend command to actually execute this project so I'm going to go ahead and press accept and let's see what happens here you can see that this is running and again if you're looking for where that process is running you'll see that it is running in the terminal here in this Cascade Terminal A lot of times you'll have another terminal so just make sure you click into the Cascade one to see this process and to affect what's happening right here you also notice that up here it will say the background processes that are running and it will give you the commands currently running that's because it can run multiple commands at the same time and sometimes you want to track those up here or potentially quit the process which you can do with this x step okay great so now it's done all of that and what it's going to do once it's finished this whole execution step is give me a list of files that it modified so what I can do is I can just click these files here and I can see all of the changes that it's made just like something like a GitHub pull request right it gives me all of the diffs and at the bottom here I can step through the changes if I want to do that through the various files but for me personally I usually just click on the files here and kind of see what's been done so you can go through obviously you can be really specific with the changes you can reject or accept individual files or if you want to be ballsy you can just go ahead and press accept all in our case we'll just press accept all and now all of this is going to be kind of added into the code base and we can go ahead and check out and see what Cascade has done so in my case I know how to open this so what I will do is go here and let me find this and let's open this up and you can see that it's giv me this trivia challenge app let's go ahead and press start game and then it's asking me these questions okay and then we can see game over you scored one out of five play again and it stores the high score so already that's pretty decent considering that was a single prompt but obviously a relatively simple project okay so I want to talk about a few things that a lot of people get confused with here in this editor so first of all I'm just going to ask it to make a very small change I'm going to say can you make this look better okay so very vague wouldn't suggest asking that but I'm just doing a kind of quick example for you guys here now what's going to happen is Cascade is going to start editing these files and a lot of people don't realize that what's being edited by Cascade is actually inside of the file while Cascade is writing it what I mean by that is that even though you haven't pressed accept all changes that's what's currently inside of the file which means that if you were just to close Cascade that content is still going to be there and it also means that you can test what Cascade is done before you press that accept button so the way you should think of it is that when Cascade makes an edit that's already in the code base if you want to remove that from the code base you would need to press reject all changes and then that's going to undo what Cascade has done hopefully that makes sense but a lot of people get conf confused on when it's actually like written into the code because it works a little bit different in some other AI code editors so in this case it's edited app.css right and right now all of the changes you see here they're actually in this file like it's saved in this file and if I go now to my front end and I look at it you see that it's actually been changed even though I haven't pressed accept all changes yet so if I want to go back I'll go reject all changes if I just want to keep what's currently here then I will accept all of the changes so make sure you keep that in mind because undoing changes from Cascade can be a little bit difficult especially as you go through multiple edits so I'm going to go accept all here because I'm sure that's fine and you can see now that obviously this looks a little bit better all right so that's the core functionality covered now let's go quickly through a lot of other features that you'll want to know about so first of all this is your chat window right if you want to open and close it you can use contrl l or command L depending on the operating system that you're on you also can press this button up here thing that looks like the Cascade logo and then this will open or close the chat window for you now within the chat window if you want to start a new session like a new conversation chain you can press this plus button and then you can make a new one if you're going to ask for something completely different that's not related to what you were doing previously I'd recommend you open a new session because Cascade will use all of the previous context and sometimes it can get confused if you were working on a completely different thing and then you start asking something else now of course in this chat window you have the ability to add context what you can do is use this mention so you can use the at symbol and you can tag files directories documentation website links anything that you want to reference when you're giving the prompt however the nice thing with Cascade here or with uh wind surf in general is that it's very good at picking up the context automatically without you having to tag it so for example if I go to chat mode and I say can you explain my project you'll notice that the first step here is that it's going to start scanning the different files so see it's says first I'll check the contents of your project directory and you can see exactly what it's looking in in order to find what's going on in the code so generally I find unless you're in a larger project you don't need to add the context manually it will be able to pick it up as long as your prompt is specific enough but obviously if you do want to tag a specific part of the code you can say at and then you can choose a file or directory and you can tell it hey edit this file or ask a question about this file or whatever it is that you want to do now as well as just tagging individual files you can also reference certain sections of code so for example let's say that I want to talk about all of my state here right what I'll do is I'll highlight this and I'll hit contrl L now when you hit contrl L on a highlighted section of code it will add that specific section of code AS context in the chat window so you can see down here it's now highlighted app.jsx and those lines that I mentioned now I can reference these lines and I can say explain what these do right and now it knows to look at that specific area same thing if you want to make a targeted modification you can do that as well with those lines of code and you can actually add multiple tagged sections and this is something I do quite frequently I'll highlight a line I'll give it to Tas Gade I'll say hey maybe there's an error here or an issue and then it can go ahead and fix that okay so let's go back into right mode for task sorry I feel like I said Cascade there a few times which is another tool that I use anyways you guys know what I mean Cascade and let's talk about a few more things that you can do so that's the chat window obviously you can change the model here as well depending on the plan that you have GPT 40 clae 3.5 I usually just use Claude 3.5 and now we have the ability to edit directly in line so let's say you want to get rid of that chat window I just removed that with contrl L what I can do is I can highlight these for example and I can hit control I now if you hit control I or command I on your keyboard you can see that it will give you the different models first of all I'm going to change that to Cloud 3.5 and then you can do a really quick instruction for modifying just a very targeted section of code so if you want to do something small you just want to refactor something change naming conventions do this use the inline editing here with contr I we could ask it something like can you make this Pascal case not you know camel case okay just a simple thing again I don't know why we would do that I'm just giving you some random examples and you can see now it makes the changes we can see the diff and then we can add a follow-up here so I can ask it again to do something else or I can just accept all of these changes or reject them as you just saw if I want to go back I can use Us control Zed and you see it actually shows me the diff when I go back so what I'm going to do now is I'm just going to go to my chat window and I'm going to ask it to do something like can you add a a timer to my trivia quiz okay so a feature that we probably want to add and after this I want to show you something really interesting that wind surf can do that a lot of editors cannot all right so it's gone ahead here and added this timer and we see it's added a bit of CSS and it's added some logic here in app.js X so I'm going to go ahead and press accept all and what I'm going to do next is a little bit interesting I'm just going to type continue now when I do this what wind surf is going to do is continue along the same chain of execution based on what I was doing previously it's essentially going to guess what I want to do next based on all of the conversation history that I have and then just go ahead and do that so in this case it says it's going to add a visual indicator when the time is running low and ensure it's properly integrated with the existing game logic now obviously we just asked it one thing it doesn't have a ton of context but that's a reasonable thing to do next so what you can do is when you're working on a feature whether you're coding it yourself or you're asking it in the chat window you can just stop and type continue and based on what you've been doing it will make a logical guess on what to do next and continue down that path now obviously if you don't like what it does you can just reject it but in my case that seems like a fine feature so I'm going to go ahead and press accept and let's go back to our UI and let's try this so we're going to go Tim okay and and I don't see any timer popping up so I assume it made a mistake but already this looks a lot better than what we had before and what are we doing here I'm just guessing randomly and there we go okay so the timer doesn't appear to be showing up but again it's AI doesn't always get everything right and also my front end isn't running so I should probably rerun this and that might fix it for me all right so whatever that made a few mistakes happens that's AI also I'll mention here you can see that when you've selected something it'll show it up here and you have the ability to explain refactor or add a dock string just kind of some neat buttons to handle something that you might want to do pretty repetitively to be honest I don't use these very often but they do exist now there are some other features with wind surf here but generally those are the main ones you're going to use 99% of the time you can do things like add images you can reference multiple files right you can go through you can mess with the features yourself and see how they work but generally I found this works a lot better than cursor especially when you have a lot of different files now with that in mind just to Rapid Fire end off the video I'm going to share with you a few tips to keep in mind when you're using this to get the best possible results first tip just tell it what file you wanted to edit so if you only wanted to edit one or two files just tell it exactly the ones by tagging the file because a lot of times it makes a mistakes and create a new file or it'll go edit a file that you didn't want it to change tip number two the more work you do by yourself and the more context you give it the better it performs so the longer you work in a conversation chain the more code you actually physically write yourself in the code editor the better that this works if you just purely use the AI to generate everything can start getting a little bit lost and do some really crazy stuff next thing make sure you understand what it's doing actually read through the code see what is edited if the edit is too big ask it to make it smaller and review this like you would review anyone else's code obviously if you're a beginner programmer that's a bit more difficult but the point is you want to have some grasp of what's going on because when it does eventually make a mistake it can be very difficult to untangle that mess if you haven't been keeping track of all all of the kind of changes that's made up until that point last point to add try to have good directory structures good variable names good file names the better you name stuff the easier it is at tracking the context automatically so try not to have files named like a b c main 1 2 3 try to name them things that are reasonable and logical that the AI can then infer what's inside of them all right so there you go guys that is my tutorial on wind surf I hope that this taught you how to use it one over some of the main features and that you're excited to try it out again again really depends if you're willing to pay the price or not per month in my opinion it is worth it but if you just want to go on a free model then I would recommend using cursor because this is very very limited unless you are paying anyways if you guys enjoyed make sure to leave a like subscribe to the channel and I will see you in the next one [Music]