Windsurf AI Tutorial for Beginners

Key Takeaways

Today we're taking a look at Windsurf, a powerful code editor that uses AI to help you code much faster. Now, it's a great starting point for beginning your AI coding journey, but it also works well on large code bases. So, regardless of your experience level and the size of your project, it's a great tool to use when you're coding with AI. It shares a lot of similarities to other AI coding tools, but it does have certain features that help it stand out. Today, I'll show you all of the core features and build a basic full stack application from scratch. To get started, you can head over to windsurf.com and download the editor. And it is going to be something that runs on your computer instead of in the browser like some other AI coding tools. In terms of price, there is a free tier, but it's pretty limited. So, it's pretty much only there to let you try out the tool. But then you're going to want to upgrade to the pro plan, which I find to be a very cost-effective solution for coding with AI. Now, once you've downloaded Windinsurf and you open it up, it's going to look something like this. If you've used VS Code or other coding tools before, you can feel free to skip along, but I'm going to cover all of the different panels on here so that beginners know what to expect. So, first of all, on the left, we have the file explorer. And this is going to be pretty much just looking at files in a folder on your computer. So if I open a folder here, let me go ahead and open this blog demo. Now I'm looking at the files in that blog demo folder. And right here in the middle, it's looking at this posts.ts file. So we can see the code inside of that file. You can quickly navigate across different files up here. They basically act like tabs. And then on the right we have the cascade panel. And this is the primary AI tool within Windsurf. Think of it kind of like chat GPT that's hooked up to your entire codebase. It can answer questions about your code. It can create new files. It can even modify existing files and insert changes directly into them. Of course, there's a lot more to it and we'll dig into all of the details shortly. One more thing I want to show you is that if you click up here in terminal, new terminal, there will be a new panel that shows up down here, and that is going to allow you to run commands on your computer, which you might want to do if you need to install specific software or actually start your program. You will also be able to run certain commands from the Cascade chat window, which I'll demonstrate shortly. But at a high level, these are the most important parts of Windsurf. got the file explorer, the code viewer in the center, and the cascade panel to the right. And then optionally, you can have the terminal window open in the bottom. Okay, so let's go ahead and start a new project so I can show you how I can build a full stack application from scratch very quickly using Windsorf. I'm just going to go to file, open folder, and I'm going to open up this Windinsserve demo 3, which is currently empty. Now, the first thing I'm going to do is actually think about the design of my software. So, I'm going to go over into Cascade and switch into the chat mode. And then I'm going to choose the AI model that I want to use. The thing to keep in mind about Windinsurf is that it uses state-of-the-art models from companies like Google, OpenAI, and Anthropic. And every time a new model comes out, they simply integrate it into the tool. So, you're always able to use the latest and greatest models as they come out. Currently, as I'm recording this video, the two models that I've personally found to be the most useful have been Claude 3.5 Sonnet and Gemini 2.5 Pro. I find that Sonnet does a really good job of doing exactly what you want, and Gemini 2.5 Pro does a pretty good job of considering alternative designs and helping you architect solutions. So, those are the ways that I typically use these models. There is also Claude 37 on it, but I've personally found it to overengineer solutions and write too much unnecessary code, so I don't really use it. As of this last week, we also have GPT4.1 and04, and I simply haven't had a chance to experiment with those models just yet. Let's go ahead and use Gemini 2.5 Pro. And I'm going to describe the type of software that I want to build, and we'll get a highle architecture from it. I'm going to be using voiceto text and I'm simply using my computer's native dictation without any additional software which you can also do by simply pressing the function key twice on a Mac or Windows plus H on a Windows. I want to build an application that helps me check domain names for availability. I want to be able to provide a name and check multiple TLDs all at the same time using the who is API. Can you please help me choose the right technologies for this and give me a highle overview of the architecture? I'll go ahead and submit that. Okay, so it's giving me some suggestions in terms of languages and libraries that I can use. I personally like to use JavaScript for everything because you can use it in the front end and the back end. So I'll give it that suggestion. It looks like out of the box it was thinking we could create a command line tool, but I do want to make it a full stack kind of thing with a React front end. So I'll explain that. I want to use React and make this a full stack JavaScript application. How would you organize the code and which libraries would you use in this case? Okay, so in this case it's telling us you know we can use create react app or vit and saying we can use Node.js JS and Express and it's giving us an overview of what the project might look like. So this gives you an idea of how you can have this kind of direct conversation with the AI in the editor. And now we're going to take this plan and make it a reality and just ask Windinsurf to implement the rough draft of the project for us. I'm going to say let's go ahead and create a project with a UI folder that will contain a V react project and a server folder for our Node.js backend. We can use the who is package for checking the domains and an express API. I'm also going to switch it into write mode which will allow Windsurf to start creating files directly for me. All right, so it's getting started and take a look at that. It's already created several files that are going to act as our server. Now that it's done writing some code, it's giving us some commands to run and we can run these directly from the Cascade chat. So in this case, it's asking us to install these dependencies which are going to be necessary for our code to function properly. So I'm going to go ahead and run that and then I'll go ahead and run this other command. All right. Now it looks like it's moving on to the UI. So it's going to run this command to create the V react project. It looks like this command is asking for a confirmation. So I'm going to click this open in terminal button and I'm going to just click Y here so that we can run the UI setup. And we can see immediately that a bunch of different files got created. So we can see our app.jsx and various other configuration files. We'll also want to run the npm install inside of the UI folder. All right, so it looks like it's finished the UI setup and now we can run npm rundev to hopefully start our servers and the UI. Okay, so I ran npm rundev, but it looks like the UI didn't load. So it's suggesting I run this additional command. I'll go ahead and do that. And now we have two services running. We got the UI and the server in separate terminal windows. Now what I can do is go over here and open this preview. And this is something that's unique to Windsurf. You can actually take a look at what your website's going to look like directly in the coding tool. So you don't have to open up a browser and do this separately. And the other cool thing I love about this is that you can actually pick certain elements to give to Windsurf as context when you're trying to change things. So we'll see if we can use that a little bit later. But right now we have this basic UI up and running. Let me try a domain and see if it works. So, I'll just type in windsurf. We'll click check availability. And over here, we actually see that the server is running some checks for us. And hopefully, we'll see it respond to the front end. All right. So, this doesn't look very readable, and we're going to improve the UI in a moment, but at least we have the UI and server communication properly working. Okay. So, what I'm going to do now is actually open up a new chat. Now, keep in mind when you do this, it is going to shut down this preview server. So, you need to simply ask it to restart the preview if you want to go back to it and interact with it in the new chat. But I do like to start a new conversation whenever I'm working on a new feature because you got to keep in mind that every time you send a message, it's sending that full chat history to the AI to use as additional context. And that can actually have a negative impact on the AI performance because it simply gets distracted by all of the additional context. When you give it a prompt that is very focused and you limit the amount of context that is submitted, the AI is more likely to do exactly what you want. So a good habit to keep in mind is just open a new chat for every new feature that you're working on. So in this case, I'm going to ask it the following. Please use Tailwind to make the UI look nicer. And I'm going to use Sonnet 35 because it tends to do a better job at these focused sort of tasks. Now, one thing you'll notice is that I simply ask that question without tagging any files. And Windinsurf automatically identified that it needs to modify this app.jsx file. And that is one of the powerful features of Windinssurf is that it's really good at context management. It can figure out the files that are relevant to your request, read them, and then modify them. So in this case, it's doing some additional searches and it's suggesting here we go. We should run this command. I'll go ahead and do that. All right. When we ran this command, it looks like it ran into an error, but Windsurf automatically identified that. And now it's going to create this configuration manually instead. Okay. Looks like this edit was going to remove a large portion of the index.css, which I think is actually what we want. So I'm going to go ahead and apply it anyway. And now it's modifying app.jsx. Okay, so it's made some changes. And when you open up the file, you can actually see the specific changes that it made because it will highlight things that it has removed with this red highlight and then things that it has added with this yellow green kind of highlight. This can be really useful for seeing what changes the AI made so that you can figure out, you know, how did it work before, how does it work now, is this actually what I wanted to do. And you can go through and accept these one by one, but I will typically accept all of the changes for a file and either roll back if there's a problem or try to iterate and see if it can improve the code. By default, all of these changes are already a part of your file. So when I go ahead and run this npm rundev, it is going to use the updated version of the file. Let's check out this preview. All right, and it looks like we ran into an error. I know this is a problem with Tailwind version 4 and I wonder if Windinsurf can actually pull the documentation and see if it can properly install it because the AI seems to be a little bit outdated on how to install the latest version of Tailwind. So, what you can do is actually tag additional context in the chat. And I'm going to tag at Tailwind CSS docs and we're going to see if it can actually change the code to use version 4. So I'm going to tag the Tailwind docs and say that it did not properly install it. I'm going to paste this error and ask it if it can use the docs to properly install Tailwind version 4. Now we see that windsurf is actually going and searching across these number of different web sources which we can check out and it's using that additional context to help us modify the code. All right, let's go ahead and try to uninstall these packages and we'll install these instead. Okay, so it looks like it's still running into this error. I'm going to go ahead and copy paste this directly in and we'll just submit it and see if it can fix the problem. And if not, we're just going to roll back and we're going to set the Tailwind version to V3, which I know is going to work. Okay, so it looks like we're back to the same error. So, what I'm going to do is actually go and scroll up here to the part where we were going to use the new Tailwind docs, and I'm going to revert to this step, which is going to actually undo all of the code changes that it did past that point. So this can be a really powerful way to code with AI because you can ask it to do something and then if you don't like the result, you can always just roll back to that previous checkpoint. So in this case, I'm going to go ahead and ask it to use Tailwind version three instead. Okay, here we go. Now after changing to Tailwind v3, this is what our UI looks like. Let's try this again. Windsurf and we'll check the availability. Oh, now it failed to fetch. And that is because our server is no longer running because I opened this new chat. So, let me go ahead and open a new terminal down here. I'm just going to click this little plus. We'll cd into the server, which will move us into the server folder. And in here, I'm going to use npm rundev. And that is going to start up our server. So, let's try this again. Check availability. Now, we see it running those checks. And here we go. Now, we have a pretty decent looking UI. Let's see if we can improve this a little bit. I'm going to go ahead and take all of these logs and just select them and then add it to the chat with this button over here. This is going to allow Windinsurf to actually use the contents of these logs to help answer questions. And the specific thing that I want to do is make it a little bit more resilient to things like this timeout error. So I'll just say please improve our server code to be more resilient to timeout errors and other possible error cases. So it's made a bunch of code changes. I can go open up this file and take a look. And the cool thing here is that it does apply the changes directly to the file. So it's not like Chad GPT where I have to take the results and then figure out how to slot them in. Windsurf is able to take that AI response and actually apply it to the file. I'm just going to go ahead and trust these changes. I'm going to accept. And by the way, this is a little toolbar that you can go and review all your files through. So you can navigate across the files pretty quickly here and then jump through the different changes. This is a really good idea to do because you at least want to be aware of what your code is doing high level so that you can properly prompt AI as your codebase grows. For the moment, I think I'm just going to go ahead and accept all of the changes across all of these files. And we're going to give this another try. So, let me just go to the preview. I'm going to press CtrlP and just click preview over here because I had it recently open. I'll refresh and we're just going to check windsurf again. Okay. And in this case, windsurf.com.net and.org are all taken. But how about windsurf now? Let's check the availability for that. All right. Well, we could get windsurf now.net. That's available. So, we're definitely off to a strong start here, but I want to add another core feature to my application, which is going to use AI to come up with domain names for me based on a description of my business idea. I'm going to go ahead and start a new chat. And I'm gonna actually tag at web so that it searches the web because I want to use the latest Gemini API in my application. And when I tag web like that, it's going to look for those additional resources like we saw when I tagged the Tailwind docs. And it's going to be able to use that context to properly modify my file. I'm tagging web here because this request requires some context that is outside of my codebase. But you should also know that you can tag specific files in your codebase if you want to focus the AI's attention. This is going to help a lot in large code bases where you might have multiple files with similar names or just complicated folder structures. You can tag specific files so that the AI has a better idea of where it should do its work. But for now, let's go ahead and use this web context. So I'll say I want to add a feature that lets me input my business idea. and we use Gemini 2.5 API to actually generate the domain names. Can you please add this across the full stack? So, this request is pretty representative of the scope that I found to be the best mix for working with AI in the sense that it's not so small that it's only modifying one little file or function, but it's also not so large that it's trying to build a whole product for you all in one go. It's a full stack feature that's going to impact a number of different files, but it's focused enough where the AI is actually going to do a good job. Okay, looks like it's finished writing the code, and now it's telling me to put my Gemini API key in AENV file. Now, one thing you should know is that Windinssurf will listen to the.get ignore file, which will allow us to prevent things like our sensitive API keys from being sent to Windsurf servers. So if I create this env file and I put my Gemini API key here, Windinssurf is going to ignore the contents of this file. Now there is one other special file that you should be aware of which is the windsurf rules file. I'm going to go ahead and create it over here. Windsurf rules. Now this is a special file that allows you to give instructions that windsurf will listen to in every single request. I personally don't really rely on these types of rules files because there's nothing that I want to go with every single request that I make to the AI, but it can be a great way to give instructions in situations where you're, for example, doing test-driven development or you have a particular set of technologies or approaches that you want to use that you want to make sure that the AI is constantly aware of. So, they give you some examples here. You might say what your testing framework is. You know, certain files you don't want to modify or certain APIs you don't want to use. In my case, I just typically tend to include that in the prompts that I write instead of using a rules file to define it for every single request. There is a whole directory of windsurf rules that you might use. So, be sure to check that out if this is something you're interested in. Okay. So, for the moment, I went ahead and added my API key to myv file. And let's take a look at what the UI looks like. Now, I'll open the preview. And now, we have a way to generate domain name suggestions. Let's see. The default it has is an online marketplace for handmade artal soaps. Sure, that sounds good. Let's see what domain suggestions it has for that. All right, so it looks like we got an error. Let's take a look at the server code. I'm just going to go ahead and copy paste this into the chat and we'll see if it can fix it. This is a pretty common flow with troubleshooting and you shouldn't expect the AI to always get the code right the first time. It is often the case that it'll write something and it's a good starting point, but you're going to run into errors and then you'll ask it to fix it or you might have to roll back. And that's just the flow of coding with AI. I'm going to make this request again. All right, looks like we got another error. And when I look here, I see this model name. Looks like it's incorrect. And actually, Windsurf is automatically suggesting something for me. I can just press tab and it will use this model instead. But I'm actually going to use the Gemini 2.5 Pro preview. Let me use that. And now, if I try this again, now we have some suggestions. So, let's take a look. Look, I can just press these and it's going to populate the domain name here and then I can quickly check that. But something that I wanted to do is actually be able to check all of these. So let's take a look at that code and I'll show you how you can use windsurf tab to quickly make code changes directly in the code. So first of all, I'm just going to accept all of the changes so that I can see a little bit more clearly. And now I'm going to look for the code that's responsible for adding the suggestions into the domain search. So, it's going to be some kind of on click. I'm just going to search for that. Set domain name to suggestion. So, what I actually want to do is set the domain name to the suggestion plus whatever it is currently set to. So, I'm going to say if there is a domain name and automatically, you see windsurf comes up with the code that it thinks I'm going to write. I'm going to say plus suggestion. I actually want to have a comma in between those. There we go. And I can just press tab. it'll autocomplete for me. But now that I think about it, if I don't currently have a domain name, I do want it to just be the suggestion. So, I'm going to start typing here. If domain name, then it's the domain name plus the suggestion. Otherwise, it's just a suggestion. And you can see this was a lot smoother than me having to type everything out. So, Windsurf does a pretty good job of predicting how you're going to want to change the lines. So, now that I've made that change, I'm going to go back over to the preview. And if I click these, we can see that they get added. So if I run the check for all of these, we can see that it is working end to end and we can see which domains are available and which ones are not. Now there's one more powerful Windsor feature that I want to show you and it is the ability to directly deploy your application from the code editor. Now this is something that only works with static frontends currently, but I hope that they continue to evolve the feature and allow you to deploy backends as well. So an application like this could be deployed entirely from windsurf. So let me show you how that works. And I'm just going to open an empty project so that we can create a simple front end. So for this quick project, I'm just going to ask for create a 3JS game that is basically space invaders that allows me to control a spaceship and shoot aliens that are coming towards me. All right. And with some work, we have a working game here. Now what I'm going to do is deploy this so that you could play it too. So the way you do this is you simply ask windsurf to deploy the application. Windsurf is going to look at your project and then create a netlefi tommo file that is going to specify how your application should be deployed. So under the hood they are using netlefi to host these applications. And right now when I click deploy, it's going to deploy it to Space Invaders 3D game.wwindsurf.build. So I'm going to go ahead and deploy that. And now it is running a quick app build and I should be able to access it shortly. Now it's deploying. And now the deployment is live. So I can go over here and play the game. There we go. So I didn't need to have any other special software to actually deploy this application. I did all of this from within Windsurf. So, I think this can be really useful for quick games and one-off tools that you might want to deploy. And hopefully in the future, they will also add support for deploying servers. So, that's Windinsurf in a nutshell. Now, there are some other features that I didn't cover, such as the ability to use images to generate code. There are also memories that Windsurf can create based on the conversations that you have with it. And it also has integration with MCP servers, which is a little bit more of an advanced topic, but essentially it allows the AI agent to utilize other tools and query things like your database or other services. I have a dedicated video about MCPs that you can watch, but I would say the most important next step is to learn how to best word your prompts so that you can get the most out of AI. So, make sure to check out this next video and I'll see you there. Thanks for watching. Take care.