Transcription
Today, we're taking a look at the AI code editor Wind Surf. This is a relatively new editor that came out at the end of 2024. I've been using it for the past few months; I was one of the first people to start using it, funny enough, and it's slowly become one of my favorite AI coding editors.
In this video, I'm going to give you a tutorial, walk you through all the features you need to know about, and share some tips and tricks from someone who's been using this pretty much every single day. This will help you understand how to use it best, especially if you're a beginner programmer.
First things first, we obviously need to download and install Wind Surf. I'll assume you've done that, but I want to quickly talk about the pricing. Wind Surf does 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. You can chat with the AI, and 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.
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 want the Pro Plan, which is just $10 per month. 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 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 you'll want to check out.
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. That's what I did, and I have a theme and some extensions, so all of that came in. It's really nice if you're already a developer working in something like VS Code.
Regardless, the first thing you're going to want to do when you start writing any code is to open some kind of folder. So, I'm going to go to "Open Folder." I'm going to my desktop and just 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 put this in a place where you can locate it later. A lot of beginners make the mistake of not remembering where they saved their code, and then later they turn off the computer, open it back up again, and can't find where the project is. So, just make sure you put this in a location that you'll be able to find later on.
Now, from here, you're going to see immediately that this Cascade window is going to appear. This is Wind Surf's version of something like Copilot or whatever you want to call it. 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 codebase. This is the main feature; I use this probably 90% of the time, so I'm going to focus on this primarily.
Before you get into actually prompting this and getting it to generate a bunch of code, I highly recommend that you take a few minutes to generate a little bit of a plan. Just think to yourself about what exactly you want to achieve, what you want to build. Maybe draw out a little image of what you expect the user 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 you're looking for.
So, please just come up with a little bit of a plan and have an idea of what you want the finished product to look like. 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 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 write mode, but again, I believe on the free version, it doesn't give you access to this. If you have write mode on, then this is by default going to 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. You have the two different modes: if you're chatting with the codebase, 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. If you want to write to your files, obviously use write 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're 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 into the program who want to learn how to become an entrepreneur or a freelancer, how to price projects properly—really anything 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.net. You can apply there, 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.
I just threw a prompt in here, asking it to make a React application for me, to generate a fun trivia game, and we'll save the scores in some kind of file. Notice that I told it the exact framework and languages I wanted it to use. 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 tech stack you want to use here: 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.
In my case, I'm using React, and if you don't know what to use, you can change this to chat mode and ask it to suggest a tech stack based on what you want to build. But anyways, give it the tech 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 kick into action here. 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.
Notice that Wind Surf actually has the ability to execute terminal commands for you. Now, because I asked this to make a V2+ React project, it knows that this is the command 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.
I'm going to go ahead and press accept, and if you're curious where this output is actually being run, if you pull up the bottom tab here where it says terminal, you can actually switch into the different terminals that are running. 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 that Cascade just ran and 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 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 Cascade is going through here and 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 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 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. 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 finishes this whole execution step is give me a list of files that it modified. So, what I can do is 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. 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 added into the codebase.
We can go ahead and check out and see what Cascade has done. 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. You can see that it's given 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. 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; I wouldn't suggest asking that, but I'm just doing a 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. It also means that you can test what Cascade has 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 codebase, if you want to remove that from the codebase, 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 confused about when it's actually written into the code because it works a little bit differently 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 are actually in this file; it's saved in this file. If I go now to my front end and 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 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.
Alright, so that's the core functionality covered. Now, let's quickly go through a lot of other features that you'll want to know about.
First of all, this is your chat window. If you want to open and close it, you can use Ctrl + L or Command + L, depending on the operating system you're on. You can also press this button up here that looks like the Cascade logo, and 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 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 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; you can use the "@" symbol and tag files, directories, documentation, website links—anything you want to reference when you're giving the prompt.
However, the nice thing with Cascade here, or with Wind Surf in general, is that it's very good at picking up the context automatically without you having to tag it. For example, if I go to chat mode and 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 says, "First, I'll check the contents of your project directory," and you can see exactly what it's looking at in order to find what's going on in the code. 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 "@" and then choose a file or directory and 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. For example, let's say that I want to talk about all of my state here. What I'll do is highlight this and hit Ctrl + L.
Now, when you hit Ctrl + L on a highlighted section of code, it will add that specific section of code as context in the chat window. You can see down here it's now highlighted app.jsx and those lines that I mentioned. Now I can reference these lines and say, "Explain what these do," right? And now it knows to look at that specific area.
The 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. This is something I do quite frequently: I'll highlight a line, give it to Cascade, and 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 write mode for Cascade. 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. 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-4, Claude 3.5. I usually just use Claude 3.5.
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 Ctrl + L. What I can do is highlight these, for example, and hit Ctrl + I.
Now, if you hit Ctrl + 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 Claude 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 Ctrl + I. We could ask it something like, "Can you make this Pascal case, not 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. 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 Ctrl + Z, and you see it actually shows me the diff when I go back.
So, what I'm going to do now is go to my chat window and ask it to do something like, "Can you add a timer to my trivia quiz?"
Okay, so a feature that we probably want to add. After this, I want to show you something really interesting that Wind Surf can do that a lot of editors cannot.
Alright, so it's gone ahead here and added this timer, and we see it's added a bit of CSS and some logic here in app.jsx. 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.
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 asking it in the chat window, you can just stop and type "continue." 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.
Let's go back to our UI and try this. So, we're going to go Tim, 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.
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; it doesn't always get everything right. Also, my front end isn't running, so I should probably rerun this, and that might fix it for me.
Alright, 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 docstring—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, reference multiple files, right? You can go through, 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 want it to edit. So, if you only want to edit one or two files, just tell it exactly the ones by tagging the file because a lot of times it makes mistakes and creates 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 this works. If you just purely use the AI to generate everything, it 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 the changes it'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 for 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 so that the AI can then infer what's inside of them.
Alright, so there you go, guys. That is my tutorial on Wind Surf. I hope this taught you how to use it, went over some of the main features, and that you're excited to try it out.
Again, it 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]