Build your first App Using AI in 11 Minutes With Windsurf

In this video, I'm going to show you how to use Windsurf AI to build your very first application, even if you've never programmed a line of code in your life. If you stick with me until the end, you will have your own AI chatbot you can use to chat with and get answers from, and you would have built it completely by yourself, even if you've never coded before in your life. We're using Windsurf AI, which in my opinion at the moment is the best AI programming tool out there. Stick with me here. Lock in, code with me, and you're going to build some really cool stuff. Let's get into it. So, Windsurf is a competitor to Cursor. I've been using both a ton. I actually prefer Windsurf to be quite honest. I just think it's a lot smarter, a lot better, a lot faster. Here's where you can check it out on the site, windsurf. com/editor. You can come on here, download it. Free download. Uh they have a free. You can test it out. Play along with me here. Build this app with me here. I personally believe it's the best one out there. You should test all of them out, but I personally prefer Windsurf. It's what helped me build my AI app, Creator Buddy. But what makes it really powerful is Cascade, which is its AI agent. The way Cascade works is you give it prompts and instead of just kind of following directions, it behaves like a real human being. It's an agent. It goes out, it does plants, it breaks things into tasks and it executes on those tasks one by one, which is really powerful. Windsurf was the first one to do that. I think they do it the best. I think it has the best performing AI agent. I think it's the smartest. It's able, it makes the least amount of mistakes in my opinion. And as you can see here, it's just able to take a single prompt and just write tons and tons of code for you by itself and think through things really logically step by step, which is the main difference between a regular AI and an AI agent. It's able to do a lot of cool things like web search. So, if it doesn't know how to build something out, it actually search the web and figure it out by itself from the internet. It'll find documentation for different APIs. That's something really powerful only AI agents can do. can upload images to it has memory so it'll remember your chats. It'll remember everything you say. It'll remember what you're building. So, it always has the important context around what you're doing. The most important thing here is it's agentic, right? Able to think on its own. It thinks a lot independently and it's the editor I feel most like I'm working with another human being rather than commanding an AI to do something for me. There's a few pricing tiers. When you get super serious, you can move up to pro and pro ultimate. But for the sake of this video, just being a beginning programmer, you can easily get away with free. So, this is Windurf. There's really only two main components you need to know about here. There's the main code area in the middle, and then there's the area on the right, which is called Cascade. That's the AI agent. So, what you're going to want to do first to build the app along with me, go to the link to Windsurf down below. Download it. There's a free tier. Just use the free tier. It's good to start off with and we can build a really cool app just by ourselves. Once you have that downloaded, create a new folder, open the folder in Windsurf and you're good to go. You are where I am right now. So, here's the plan for what we're going to build. We're going to build an AI chatbot powered by Claude. It's going to use Claude Sonnet 3. 7 to power the chatbot. I'm going to show you how to hook it up to your front end and show you how to use it so you can have your own chatbot that you use all by yourself. you can show your friends, your family. Hey, look, I built a chatbot. How cool is this? So, let's get right into it. Where we're going to start off is with Cascade over here on the right. This is the AI agent we're going to give commands to. it simple prompts. We're going to talk to it in plain English. Hey, build this for me. Build that for me. And it's going to go and do it. We won't have to write any code ourselves. So, here's the prompt I'm going to use. I'll put this down below for you so you can just copy and paste it if you want. I'd like to build an AI

chatbot powered by Claude Sonnet 3. 7, which is the newest Claude AI model. I'd like to make it so it looks like a chatbot and I can send messages to it and get responses back. Before we implement the code, please build me a plan to build this. So, this is something I do when I'm building any new app with Windsurf is I ask for a plan first. And I do this before it builds any code. And the reason why I do this is I want to understand step by step what it's going to do. The way I like to think about this is I'm the manager, the AI agent's my employee. Before you go off and do a whole bunch of things, I just want to see what you want to do first. So, this is going to give us the plan so we can understand what it's about to build. I'm going to hit enter on that. Now, the AI agent's going and building the plan for us really, really quick. This is something also amazing about Windsurf. It acts really quick. I'll help you build an AI chatbot powered by Claude. Here's the comprehensive plan. So, phase one, project setup and requirements. So, define project requirements. So, it's going to set up the project itself. It's going to choose the technology stack. So, front end, Nex. js. For those who don't know, Nex. js JS is probably the most popular framework for building apps right now. Uh so you'll you don't really need to know how it works. Just stick with me here. But it's a really powerful framework. Environment setup. It's going to create the environment for us and it's going to start the implementation. It's going to implement the claude API. For those who don't know, APIs allow software to communicate back and forth. So this going to allow us to communicate with the clawed AI. It's going to build out the UI components for us and then build out some enhanced features which this will be cool. And I'll show you how to customize this, too. We're going to make this look really, really cool. This will be a cool app to build. You'll be able to show it off. Okay, I like this plan. Let's do it. So, I said, "Okay, I like this plan a lot. " So, I like to give it feedback so it knows what I prefer when we're working together. Let's start off with phase one. Here's another thing I really, really recommend when working with any sort of AI coder is you want to do this step by step. You don't want to try to oneshot prompt everything. You want to do it step by step for a couple reasons. Number one, makes the AI in the output better and more accurate. And number two allows you to customize along the way. So if it does something and you want to tweak a little bit, you can stop, customize it, then continue. Okay, so let's send that prompt. Okay, so the first thing it's going to do is set up a Nex. js project. So that's very nice. It does the whole command for us. All we have to do is hit accept. Make sure as we go along here, you're drinking water. I've been trying to drink a lot more water lately. So pause here, grab a cup of water if you want. Stick with me. The water. Let's work on drinking more water together. So that's going that's building. So sometimes it gets caught up here when it's when it needs to ask you questions. Uh so us questions, but there's no way to input this. So what you want to do is you want to open the terminal down below. You do that by hitting control till day if you're on Mac. And then you can see the questions it's asking you here. So I'm going to hit enter. Just hit enter on all this. Enter. Enter. Boom. There we go. It's building out the app for us. All right. So now it is going to install the Claude chat. the Claude Sonnet 3. 7 chatbot which good. Now this is going to allow us to connect to Claude Sonnet. Hit accept. That's installing that. Let's examine the project structure and set up our environment variables. All right. So now it's building out some components for us. It's setting up the connection between our app and the API. So the AI API so that we can do cool AI stuff in our app. All right. It's creating the main component. So the chat input. So a lot of the UI stuff where we'll enter our prompts. Uh, it's creating a place for our API keys, a chat container. Wow, it's doing a lot all at once. This is pretty amazing. This is one of the cool things about Claude 37 is that it just does a lot more, right? You give it a prompt and it's able to figure out the context very quickly and build everything out. I just said, "Let's build a chatbot. " And it's setting up all the piping for us, the UI, everything uh in one shot, which is pretty amazing. You can see the code it's building in the main section here. So this is the main coding section. As the AI is building code, you'll see it pop up in here. Anything in green is new code that it's building. So you can see it built all these files on the left, all this file structure, all the code here with just my one prompt I gave it, which is pretty incredible. This is another really amazing part about Windsurf in my opinion is the agent's just able to do so much with just a couple prompts. It makes it really great for beginners. All right, looks like it made a lot of changes. Let's run this npm rundev. So I'm going to hit accept. This is going to run V1 of our app. So, as you've seen so far, we're about one or two prompts in. We're going to do V1 of the app. I assume it's not going to have the AI functionality done just yet because I didn't put in an API key, but let's just see if the UI is built out at first, then I'll put in the API key. I'll show you how to do that in a second, and we'll make the AI functionality work. So, let's do this. Uh, so looks like it is running on port 303. So, if you hold commandclick, it'll open it up. I hit open. Let's pull this sucker over here so you can see what it looks like. Okay. So, they made it so that I enter the API key to make this work. All right. Let me do that now. So, if you're following along with me, I'm

going to show you how to get this API key now. Let's do that. For those who don't know, an API key is basically your password for AI functionality. You put the key in, it allows you to use the API for Claude or Chad GPT or whatever you want so that you can communicate with the AI. So basically what we're doing is generating a password for this. So if you go to console. anthropic. com/dashboard, you'll see here then we can click get API keys. Then up here we can click create key. Then you can click then just put in your name. Hit add. So one quick change I want to make before we continue. I wanted to use AENV file. What aenv file is just a secure place to put your API keys. It didn't do it by default. I want them to So I rightclicked new file env. And I'm just going to tell the AI, hey, I created av file. Can we please use that for the clawed API? And the last step we want to do here before we run this again is take this variable from the AI, put it in our env file, and then we're going to take our AP key and put it in here. So just take that key from the claw dashboard, paste it in here, and you'll be good to go. All right, I'm just going to refresh this so we can see our new app. Here we go. Using API key from environment variables. All right, let's start a conversation with Claude. We're going to test this out. Then we're going to do some cool customization right after this. If you learned anything up to this point, make sure you leave a like down below. Make sure you subscribe. All I do is make really cool AI tutorials so you can learn how to build cool apps. And leave me a reply. What do you want me to build next? games? You want me to build other apps? You want me to use other technology? Let me know. Let's chat with this bot. Hey, are

you there? Boom. Yes, I'm here. How can I help you today? Are you in AI? How's it going? What's your name? I'm Claude. I'm doing well. Thanks for asking. I aim to be direct and honest with my interactions. Build me a report on the Eiffel Tower. Send. Let's see if it can do it. Can it do research for us? Boom. Look at that. Just like that, we have an entire report built by the AI. Okay, so we got the AI. Now, let's customize. I'm going to show you to do some cool customization. Let's get into customization here. So, when it comes to customization, you really can ask anything of your Cascade AI. This AI agent's pretty independent thinking, can do a lot for you. So, let's go in here. Let's chat with it. I want to make this chatbot look really cool. Can we give it a sick background with some forestlike colors? So, we're going to customize it a little bit. This is how you can talk to your AI. You can give it prompts, give it commands to do different things

change looks, change the way it works, change what happens on your screen. Let's have it make it look prettier. Let's add some cool styling to this. And let's see how it works. Let's see how artistic this AI agent can be. So, it's writing a bunch of code. It's creating some CSS. For those who don't know, CSS does all the styling for the app. I hit accept on this. All right, let's create a forest background image for our chatter. So, it's going to create the images. That's pretty cool. So, it must have some sort of AI image generator built in as well, which is pretty awesome. It's like having your own built-in designer. It's like I got a team of employees working for me, a coder, a designer, all built in, which is pretty awesome. All right, looks like it's done building the code. Let's get back in here. Here we go. forest chat with Claude using API key from environment. Okay, it's got trees in the background. All right, it's it gave it a little gray, a little bit of trees. All right, that's interesting. Let's I want to make this a little bit prettier, though. It's still kind of ugly. Let's get some ideas from the

eyes. So, this is a really cool way I like to talk with the agent because it is really smart. We can ask it for its own ideas. What are some ideas you have to make this look a lot cooler and prettier? Let's see what ideas the agent has as we're building this out. I have several ideas to make this chatbot look even cooler. Animated forest elements. Add subtle animated leaves falling in the background. That's kind of cool. Enhanced message bubbles. I think we got to do that. some enhanced message bubbles. Immersive background. Create a parallax scrolling effect of multiple forest layers. Typography and icons, interactive elements. All right, let's do the messaging format. Right now, there is no message effects. Let's add those and make them look really cool. All right, I'm going to send hit send on that. The AI is going to get to work on making it look prettier with the message bubbles. So, let's get that out. I'll enhance the message effects and make it look really cool. All right. Right. So, it's updating the components, writing a lot of code. 148 lines of CSS styling. I like that it's doing so much. It can do so much so quick. It's pretty incredible. All right. Created a ton of code for the message list. All right. Let's import our animation. Okay. Some animations. Let's test this again. So, let me refresh. All right. Welcome to Forest Chat. Start a conversation with Claude in a peaceful forest environment. Hey, Claude. How you doing? Hit send you. Everyone's got a uh a little image above their message. I don't know. Is that a pineapple? I'm not sure. I'm doing well. Thanks for asking. Just ready to help however I can. How are you? So, it's got kind of a forest vibe to it. But what's important here is you're building your own apps that you're going to use, right? You probably use AI chat bots every single day, right? You probably are talking to AI to help you with your work and do cool things. If you're not, you should be, right? What's cool here about what we're doing is we just built our own version of the app. And I think that's a lot cooler of a way to work when the things you normally do, you just build it yourself. I think that's a really good exercise cuz what that does is it puts you in the mindset of a builder, right? If you're if all the tools you use are tools you build, it gets you starting to think, okay, what can I build to make my life easier? and just gets you in that motion a lot more so that when you do come up with other ideas for original tools you can build, you already know how to do it. talk to the AI. So that's something I recommend for a lot of people to do. Whatever tools you use on a day-to-day basis. If you do a note-taking app, build yourself a note-taking app. If you're using notion, build your own version notion. I got a video showing you how to build notion, right? If you use chat bots, build your own chatbot. It's a really powerful exercise that will get you into a building mindset, which I think is really awesome. So, that is how you build your own chatbot using Windsurf. I think Windinsurf is awesome. I showed you how we can just build things real quick. The agent does a lot of the thinking and planning for us. So, we just have to sit back, enter a couple prompts, and it does a ton of work. I think Windsurf has the most code written per prompt given of any AI editor I've used, which is pretty amazing. If you learned anything at all, leave a like down below, subscribe. All I do is make cool AI tutorials. And leave a reply down below letting me know what you want me to build next. All I do is build really cool stuff using AI.