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 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, 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. This is how

you 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 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

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 to review, I have 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 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.