This Claude Code for Web workflow will change how you vibe code forever

you're using Claude Code for web wrong. If you use it the right way, your entire Claude Code workflow will 10X. In this video, I'm going to show you a Claude Code for web workflow that will have you building AI apps so much faster. Whether you're a Claude Code noob or stone cold expert, you are going to learn so much from this video. Everyone using Claude Code just got free credits, so you might as well take advantage and watch this entire video. Let's get into it. So

there's going to be two parts to this video. Part one will be me setting up Claude Code for web. So building a very quick app in Claude Code, connecting it to Claude Code for web and show you how that's done. Part two will be me getting way more advanced, showing you the master workflow of Claude Code for web, pulling down the code to your local environment so you can test it and ship it. So if you already have Claude Code for web set up, feel free to skip to the next chapter at the chapters below. Otherwise, feel free to stick around with me here as I build a new app and connect it to Claude Code for web. So

we're going to build a quick demo app here in Claude Code just in Visual Studio Code. Then, we're going to take that app and I'll show you how to connect it to Claude Code for web. So, my preferred way of using Claude Code is the extension inside Visual Studio Code. Super easy to use, great UI, and Visual Studio Code is really, really dependable. So, get that all set up if you haven't yet. Open up a new project and we'll get this started. So, the demo app we're going to set up for this is going to be a journaling app. I'm going to show you how to build this really basic journaling app. But then we're going to add a ton of features and functionality by using Claude Code for Web, which is going to be awesome. And real quick, if this is your first time hearing of Claude Code for web, this is their cloud-based version of Claude Code, where from any browser or device in the world, you can spin up tasks for Claude Code. Even if you're not your computer, whether it's the web, whether it's a browser, whether it's the iOS app, you can now spin up tasks from anywhere in the entire world, which is incredible. but it has some really advanced functionality. So, we're going to build out a basic journaling app. Then, I'm going to show you how to use Claude Code for web, the workflow for it, where I build out really advanced things for it. But, we're going to keep it simple at first here. Here's the prompt, and I'll put it down below. Feel free to take it and steal it. I want to build a journaling app. It should be a beautiful, clean, simple app where the centerpiece is a markdown editor. On the left hand side, it shows all your save journal entries. Use Nex. js, TypeScript, Tailwind, V3, and local storage for this app. If you're not as technical, these are very popular technologies that we're going to be using to build this app out. And I'm going to hit enter on that. And now Claude Code is going to start building out that basic demo app, which for the record, you can take this, build it out, use it for your own life after this. So you have a real working app for yourself. And I'm going to say yes and don't ask again. And this is going to build out the app that we're going to connect to Claude for web so I can show you all these advanced workflows and functionality in it. So, at this point, I always just say yes and continue without asking me because Claude Code's amazing. You don't need to approve every single step here. So, that's cooking now and that will be done in a second. We'll check out the app, then we'll get into Claude for web. Man, if you haven't started using Claude Code for web yet, you are missing out. My productivity has been insane since I started taking advantage of this. We're also going to go over the iOS app, which is really awesome, too. All right, looks like it's all done. Beautiful clean UI with sidebar and editor layout. I'm praying there is no blue and purple gradients. Markdown editor with live preview. All right, let's check it out. Let's just go straight into it. So, I'm going to hit control tillday to bring up my terminal. I am going to cd into the journal app folder which they just created. So, cdj and I'm going to tab which will autocomplete and then I'm going to do npm rundev which will run the development server. I hit enter. Boom. We're good to go. Localhost 3001. Let's click on that. All right, it looks like it is done. Let's pull it open. And boom. Look at that. It is all set. We have our basic journaling app here. Let's do a new entry. We get this nice editor. Hey, wait, shout out a second. No blue and purple gradients. I think this is the first time in history an AI tool has designed a UI with zero purple and blue gradients. Shout out AI. You did it. We've now this potentially could be an indicator of AGI. I wouldn't count that out. Let's just test this out. Let's see how this looks. Let's do a bold new journal entry. This is my new journal. Let's hit save. All right. Well, it didn't do the bold, but that's fine. It still has the editor here. And let's go to preview. Let's see that. Oh, boom. It has the bold. Okay. So, this is a nice markdown journal tool. But now, let's connect this to Claude Code for web. So, we can do a lot more of the advanced stuff. So in order to use

claude code for web you need to have your code hosted on GitHub which is a code repository. So if you haven't yet sign up for GitHub go to github. com create a free account. Then we can do new repository. We're going to call this a journaling app. You can make it public or private. I'm going to make this one public. And then I'm going to create the repository. Once you click create, you just take the address right here. I'm going to hit copy on that. I'm going to go back into claw code. And then what I'm going to do is I'm going to say, can you upload this code to and then put in the address for our repo and hit enter. And now Claude Code, like the good employee it is, is going to take our code and put it on that new repository. I'm just going to yes. And don't ask me again. Just get to work Claude Code. And we are going to be one step away from using Claude for web. I know you're getting excited. I know you want to use up those free credits, baby. Let's get into this. Cook it up. Here we go. Done. Uploaded. Let's verify claude codes work. That was super simple and easy. Come over here. Refresh. Boom. There's our code. It is inside GitHub. I love that. Now we are ready. Now we are ready for claw code. You ready for the fun part? Let's start having some fun. Let's do some more advanced things here. I guarantee what I'm about to show you your competition isn't doing. So if you do these things, if you stick with me and do all these steps, you're going to be ahead of 99% of people. I guarantee it. Here we go. So to access Claude for web, super simple. Go to claude. ai. You'll see code right here. You click that puppy and here you go. You're in claw for web. The other way to access this is on iOS. So if you have the clawed iOS app, watch this. If you go into the app, you hit the three lines up there and then you click on code, you get into this really nice clawed code for web mobile app experience, which is excellent. So, anything you do on the web browser version, it's the same thing you're going to be doing on the mobile app. Completely crossplatform. It's all the same. I'll do some things in this workflow on both just so you can see how fun it is. Uh, but let's do this. The first thing we need to do is connect to our journaling environment we just created. To do that, we click right here. If this is your first time doing this, you'll probably just have to sign in with GitHub real quick in Cloud Code for web, which will be super simple. Once you do that, you just search for the new app you created in GitHub. You click it and you are connected and good to go. And we can start melting these free credits I just gave to everybody here. So starting from a high level, the

way I like to think about Claude Code for web is this is my helper. This is like my junior developer. This is like the partner to the main claude code that's inside Visual Studio. I use the cloud code in Visual Studio to build out the big features, the big functionality, and at the same time, I'm multitasking by sending off my junior developers and some other roles I'll show you in a second inside Claude Code for Web. So, let's do some multitasking. Here are the tasks I like to have running in Claude Code for Web at all times. I like to have four features being built out, two research tasks, one code optimization task, and one security check at all times inside a cloud code for web. If I don't have these eight tasks going at all times, I feel like I'm not getting maximum productivity. So, write this down and I'm going to show you how to set this up. If you keep it in the back of your mind, oh, I need to have Claude for web working at all times on these tasks, your app's going to advance so much faster than you can imagine. Let's set up four small feature tasks for claude for web to work on here. The way I like to think about it is this. This is the key to building out small features in cloud code for web. One, you do so here are a few tips for building out features with cloud code for web. One is your features should not be overlapping, right? So these agents are going to be working separately from each other. So you don't want the features to be overlapping or you'll have conflicting code. Right? So the features I'm about to show you are going to be very disperate features. Desperate up your vocabulary. Keep the features small. So I like to keep these small because if they get too big again you can have conflicts. The scope can get out of control. So we keep the big features with clawed code in the Visual Studio and we keep the features on cloud code for web smaller. And then here are the tasks I always like having again. So you can write that down or screenshot this if you want. So, let's start building out those four features, shall we? Uh, so we're in the journaling app selected. Let's build out a folder system. I want to be able to put my journal entries into folders. Build a folder system. Here's another thing. You can choose your model, Sonnet 45 or Haiku. For these smaller features, a lot of the times you can just go with Haiku 4. 5. So, for this just building a folder system, let's go with Haiku45 and save a couple of tokens and get the most out of these juicy thousand dollars worth of credits. Thank you very much, Anthropic, for that. So, that task is spinning up. That is going. Let's keep going here. I want to be able to color code my journal entries. Haiku 45 sounds appropriate for that. Let's keep going. I want to give titles to my journal entries. Haiku 45. That's a simple task. Let's keep it on 45. Save that moola, that money so we can use it for later. Let's add share on social media buttons. In today's day and age, everyone's sharing everything. So, why might as well share our journal entries on social media, too, right? So, let's send that one to Claude Haiku 4. 5 as well, shall we? And boom. There we go. We have our four sessions going, four features cooking. That takes care of the first group of tasks I like to do with Claude for web. Let's move on to the second one. Two research tasks. But what does that mean, research tasks? Well, here's the thing. It's called Claude code. But the reality is these are just AI agents that Anthropic built. So, you don't have to use these just for coding. You can use these for any tasks you want AI to do. So, I like to do research tasks. What are research tasks? Well, these are basically employees in other areas of our personal oneperson company, right? Other than coding. So maybe we want to build out a road map. So we may have a product manager build a road map for us. And then maybe we want to do another thing. Maybe we want to have a marketing manager. So we have a marketing manager build out a blog post for us. I think that's a pretty good idea, too. So, let's have our two researchers, our product manager and our marketing manager get to work and start building us out some cool functionality. So, I'm going to go in here as our agents are working. It looks like the agent already finished the titles for journal entries. That's awesome. But let's go do this. Let's start our product manager. You are a product manager. Please build out a road map for our app with a list of new features. Bada bing. Bada boom. For these research tasks, for these more in-depth build a road map, write some marketing for us. I actually like to use sonnet 45. I think haiku is really good for executing simple coding tasks for more in-depth writing research reports. I like to use sonnet 45. So I'm going to hit boom. Bang. Send on that. Now we have a product manager working for us building us out of robot. Look at all our employees. People have such a bad impression of AI. They think it's replacing humans. No, no, no. It's not replacing humans. It is superpowering humans. Look at me right now. I am a oneperson business with five employees working for me. Before AI, I would never be able to do this. Now I have the power of a sixperson company, including myself, which is amazing. But let's make this a sevenperson company, shall we? Let's add our seventh employee. you are a marketing manager who is in charge of building our marketing out for this app. Please write me a set of tweets for this app. Going to use sonnet 45 so we get a little bit better creativity, more in-depth tweets. I'm going to hit send. Boom. There's our seventh employee. I don't think I'm done yet. I think I want to hire two junior developers to work for us now too. Let's make this a 9erson company. Again, AI not replacing people. Instead, it's supercharging people. These are the types of things, by the way, that put you ahead of your competition. Right? Your competition right now is sitting there. They're putting a prompt in Claude Code. They're going they're scrolling Tik Tok. They're going and they're scrolling Instagram. They're looking at thirst traps for 10 hours a day. Not you. You are building in Claw Code. then you are spinning up seven to eight new employees in claude code for web. This is how you do it. win. Cuz don't get me wrong, this is a competition. And if you're watching these videos, if you're in the fin fam, if you hit like, subscribe, and turn on notifications right now, you are ahead of everyone else and you're winning this competition. So, let's spin up another junior developer. As we talked about before on our checklist here, we had the four features going with the two research tasks going. Now, let's optimize the code. So, I'm going to go in and I'm going to say, "Please take a look. " And as you can see here over on the right, already got tweets cooking. I'm not even done spin up task. We got tweets cooking. Please take a look at our codebase and make recommendations for code optimizations. This is how you keep your code tight, speedy, and efficient is we want to constantly be optimizing. I spin up agents just to take, hey, take a look. Let me know where we can optimize the code. I'm going to use Sonnet 45 for this one. Let's hit send. We got another employee cooking. We already got multiple of our employees done here. So, our optimization employee got hired. You passed the interview. Congratulations. Now you're working for me. You're in the Alex Finn enterprise or if you're watching this video, your personal enterprise. And then last one here, let's take a look at the checklist security task. So, we are going to spin up another agent. You are a security professional. Please review the code and find any security vulnerabilities. Security is super important right now when it comes to vibe coding. A lot of people building apps, they don't know how to do anything with security. They put vulnerabilities, they get hacked. You want to make sure you constantly have an AI going reviewing your code. I am not a security expert, but I have an app out there, Creator Buddy, that's being used by thousands of people, and I have had zero security incidents. And the reason that is because I have AI agents going reviewing security at all times in cloud code for web. So let's do that. I'm going to use sonnet 45 for that because security is really important. And I'm going to hit send. And boom, our security employees going. So looks like a lot of our feature tasks were done. Let me show you how to now pull down the code and integrate it into your codebase. So let's do this. Let's integrate the title functionality into our app so we can start adding titles to our journal entries. Here's what you want to do. The absolute easiest way to

do this if you are not a GitHub master is you just click open in CLI. What that does when you click it is it copies a command to your clipboard. And what this command is going to do is pull down this code. Basically what's happening is each one of these agents spins up their own sandbox where they are writing this code inside of GitHub. So, what you're going to want to do is open up your terminal here, paste in that command, and then hit enter. And what's going to happen is it is going to pull in that code from that claw for web session. I'm going to hit yes, I trust that folder. And boom, there it is. It pulled down the new code. Just make sure you are inside in the terminal, the app folder that was created, and then it will pull it in. So, this works just if you do it the way I showed you, this works just for the CLI. So, it's going to open up a CLI section right here, but you're good to go to interact with Cloud Code this way as well. Let's test this out. Let's see if this worked here. So, I'm going to pull open the browser where we had the app running before. And boom, untitled. Let's see if we can title this my first journal entry. Boom. That works. This is an entry. And I hit save. And there it is. The title saved. So, the code worked. Boom. Brilliant. Now what we can do is now that we tested the code we can say code worked great can we commit to main and then I'm going to hit enter. So now that we tested the code and we made sure it worked that was pulled down from claude for web. We're going to say I pulled down new code from claude for web. Please commit it to main. And I'm going to hit enter. It's going to look for the new code which it found. it is going to go to main and it is going to commit that new code for us to the main branch. If you're newer to GitHub, basically the way it works is it's like a tree. You have different branches. Your main branch is obviously your main branch and you're taking this code from all the other sandboxes and environments that claude code for web and it is smooshing it into the main which is basically your main working branch. So that's how you pull down the code, review it and push it to your main branch. Now, all you'd want to do is go in here and do the exact same thing for the other feature. So, you'd go into whatever feature it is. Maybe we want to add the social media share buttons. You would click open in CLI. You would take that command, go into your terminal in Visual Studio Code, enter it. It pulls down the code. You review. You push. Wait, that is not all though. Let's show you how to take advantage of the product manager and the marketing manager feature. So, we have our product manager. We go into our build app feature road map. They built us out a road map here. Let's check it out. Let's see what it built for us. Search and discovery features. I like that. Tags and organization editor and enhancements. Dark mode. I like that. So, let's This is how you should think about it. This is the workflow. As your road map is built out, we read our road map. And as we do it, let's take some of this and give it to Claude for web to do. I'm going to even take this a step further and I'm going to do it on mobile just to show you what that looks like. So, we're on the mobile app. I'm just copying the iOS screen to my Mac. And we're going to say, let's take a look at our product manager recommendations here. Dark mode. We need a dark mode. People like writing in dark mode. Please add a dark mode to the app. And I'm going to hit send on the mobile app. And now it is going to start work for us building out that dark mode. As you can see here, it already added here. It is completely crossplatform. So, the way I like to think about the mobile app is this allows you to ideulate and write code anywhere you are on the go. For me, I don't know the way you guys work, but for me, the most ideas I come up with are at the gym. I guess just lifting weights, getting huge muscles, really gets the ideas and the juices flowing. So, I always have my phone ready where when the idea comes, I quickly go on the app, I spin up tasks, and by the time I'm done getting huge biceps and triceps and glutes, I'm back home and I have a bunch of code to review and my app improved while I was lifting weights. Your competition, they're looking at Instagram reels the entire time they're at the gym. Their biceps are this small. The amount of dopamine they're getting from Instagram reels is this big. You your muscles are getting huge. You're coming with way more features for your app. you're getting better in every single way. And lastly, the way I really like to use this mobile app is before I walk into my bedroom at night before I'm going to bed. I always pull open the mobile app on my phone. I make sure I have my six to seven tasks I showed you earlier running so that when I wake up in the morning, I have code to review, I have road maps tweets to review, and my app literally got better while I was sleeping. That is how you take your productivity to the next level. That's why claude code for web is so unbelievably powerful. You now have the ability to spin up an army of AI agents. You now have the ability to be a oneperson business that conquers the day that gets so much work done. You need to be taking advantage of this free credit to drive. There's only $3 of credits and we improved our app right here. If you learned anything at all, leave a like, subscribe if you haven't yet. All I do is make incredible videos about AI. Turn on notifications. I go live three times a week. And also sign up for the number one AI free newsletter in the world. Link down below. 40,000 people subbed. I know you'll love it.