DLAI Logo
AI is the new electricity and will transform and improve nearly all areas of human lives.

Welcome back!

We'd like to know you better so we can create more relevant courses. What do you do for work?

DLAI Logo
  • Explore Courses
  • Community
    • Forum
    • Events
    • Ambassadors
    • Ambassador Spotlight
  • My Learnings
  • daily streak fire

    You've achieved today's streak!

    Complete one lesson every day to keep the streak going.

    Su

    Mo

    Tu

    We

    Th

    Fr

    Sa

    free pass got

    You earned a Free Pass!

    Free Passes help protect your daily streak. Complete more lessons to earn up to 3 Free Passes.

    Free PassFree PassFree Pass
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.
course detail
Next Lesson
Build Apps with Windsurf’s AI Coding Agents
  • Introduction
    Video
    ・
    2 mins
  • Getting Started & First App
    Video
    ・
    5 mins
  • AI Code Assistants 101
    Video
    ・
    6 mins
  • Fixing Tests Automatically
    Video
    ・
    3 mins
  • How a Collaborative AI Code Agent Works
    Video
    ・
    9 mins
  • Search & Discovery for AI Agents
    Video
    ・
    9 mins
  • Understanding Large Codebases
    Video
    ・
    4 mins
  • Wikipedia Analysis App – Data Analysis
    Video
    ・
    8 mins
  • Wikipedia Analysis App – Caching
    Video
    ・
    4 mins
  • Wikipedia Analysis App – Fullstack App
    Video
    ・
    10 mins
  • Wikipedia Analysis App – Polish
    Video
    ・
    5 mins
  • Conclusion
    Video
    ・
    1 min
  • Appendix – Prompts and Repos
    Code Example
    ・
    1 min
  • Appendix – Tips and Help
    Code Example
    ・
    1 min
  • Course Feedback
  • Community
  • 0%