Sign in to continue learning
Build Apps with Windsurf’s AI Coding Agents
Beginner
1h10m
Topics
AI Coding
AI in Software Development
Agents
GenAI Applications
Prompt Engineering
Search and Retrieval
Task Automation
In this lesson, you will learn how to get started with Windsurf and build your first app in just a couple of minutes with an AI agent. Let's dive in. All right, let's get started with Windsurf. All you have to do is go to Google search up Windsurf.AI download and click the button and the link according to your OS. I'm using Mac I have to do is click download button and I'm pretty much good to go. Once downloaded the application, you'll open it up and you'll see something similar to this. This is Windsurf. You'll have to log in and authenticate. And then if you're ready to get started. Windsurf is a Visual Studio code of work. So if you've used VS Code, a lot of this will visually look similar. Although there's a lot of the AI pieces that we're going to explore throughout this course. Because it's a VS code work, you could also, throughout installation, import all of your settings from our existing VS code setup. The main thing to notice about Windsurf first is this panel on the right called Cascade. That is our AI collaborative agent, which we'll be using extensively in this course. As you can see, I have a completely empty project to start, and I'm just going to go ahead and ask Cascade to build our first app. If Cascade doesn't show up for you, all you have to use is the keyboard shortcut command L in order to close and open it. All right, so let's use Cascade to build our first app. In my case, I love the snake game. So I'm just going to go to Cascade and say create a snake game with JavaScript and HTML. Immediately you'll see Cascade go out and start taking multiple actions. Go out and write multiple files of code in order to complete the task at hand. Cascade is even capable of suggesting terminal commands, so I can even run my application. Great. Seems like everything is ready to go. So I'm going to go to localhost 8000 to check out my game. Well, there we go. The snake game. It exists. Game is over. I can restart it. Cool. But let's make this a little bit more fun, because this is the beauty of working with an AI agent. We're going to go back to Windsurf as an example modification, let's say I want to change the background color every time a food square is consumed. Something fun. Great. Seems like a sum. I'll go back into my Chrome or refresh my Chrome. Let's see if this worked. Okay, the background color is changing every time I consume this square. Exactly like I asked. This is the beauty of working with AI agents. Whatever your creativity is, you can use it to build whatever you want. Let's actually add one more thing. I actually want to make it look more like the classic snake game. Change the food square to be an apple emoji. Okay, let's go back to Chrome. Refresh. Just like we wanted it, the Apple emoji and the background color is changing. We can keep on doing this forever. Let's keep on making this one. Let's go back to Windsurf. Add a little explosion where the food square is consumed. Every time is successful. All right. Seems like it's done again. Let's go back to Chrome. We start. And there we have it. A particle explosion. Every single time I consume the apple and the background color changes. How about we just completely start breaking the rules? Let's go back to Windsurf and let's make the apple also move. Make the apple into a moving target. Move slower than the snake. Of course. Right. Seems like it's done again. Now the drill. Refresh. And there we see. You can see the apple is moving slower than the snake does, but still very catchable. Great. So you've just seen me build my own personalized snake game. You should go out there and try building your own. Of course, AI is non-deterministic, so you might get slightly different results or you might have to change a few things but expand your creativity. See where you can make.
