Master Claude Code in 2 Hours: Complete Beginner's Guide for 2026 transcript

So, this video is a complete crash course on Claude Code with one goal in mind, which is taking you in the shortest time frame possible from a beginner all the way up to an expert. And how we're going to do that is by building out seven very practical use cases that I personally use on a daily basis. Let's go over what these actually are, cuz I'm sure that you're going to be wanting to use these as well. So, the first one is building out a beautiful website.

The craziest part is is these websites are even easier and faster and more beautiful than something like WordPress for example. Then we're going to train, and this is probably the most important thing, we're going to train Claude on exactly who we are and what we do so that it can essentially understand us well enough to meet us where we're at and give us real uh answers back to questions that we have rather than just generic AI slop.

Then we're going to be training Claude on how to automatically categorize incoming emails in our inbox, even do things like generate drafts. Then we're going to teach Claude how to build out beautiful slideshows very quickly. Then we're going to be teaching Claude how to build out dashboards for all aspects of our life, but one of my favorite use cases is to build like a profit and loss dashboard. And then we're also going to be building out a unified dashboard where we can have every single one of our favorite apps in one glance so we can see everything going on with our life in a moment's notice.

Okay, so that's what we're building out today. It is a lot, but here's the benefit of building these all out. Not only are you going to learn Claude and we're going to go through every single major foundational concept that you need to know in order to actually use Cloud properly, but you're going to save so much time. It's going to take you a while to go through this whole video, but you're going to win back all of that time within probably two to eight days with all of these builds because each one of these builds individually should ideally save you 15 minutes every single day.

And that's going to compound, right? You're going to win back your time probably latest eight days and then for the next few years, you're going to just win back so much time on top of that. And if you want to take it a step further, there's literally thousands of people at any given time looking to hire experts with Claude on places like Upwork. You can see right over here the amount of people searching for it. Okay.

Now, the cost today is $20. And that $20 for this video is for your Claude Code subscription. And everything else we're covering is completely for free. And you do not need to have a technical background with Claude because we are going to be starting from the ground level, building up from there, and walking through pretty much everything click by click. Now, there are three different ways that you can use Claude. And sometimes it's a bit confusing because at first you have the clawed uh interface in the cloud.

Okay. And that's option number one. It's pretty limited. You send a message, it replies, so on and so forth. Then you have claude co-work which can work with your computer files and it's still quite limited. Then you have claude code which gives you all the functionality you're looking for to go ahead and build out things like a website or a personal or like an application or whatever the case may be. Then this is what we're going to be using today so that you can automate pretty much anything.

And the tool we're going to be using is called VS Code which is also for free. And in order to get started there's four things we need to do to set this up properly. Okay. Number one is we need to download cloud code or sorry VS code then add VS code or cloud code. Oh my gosh I'm losing losing everything. We need to install cloud into VS Code. Then we need to create a project inside of VS Code. And then we need to um add a couple things or tools in order to get Cloud to work properly.

Let's dive into this right away. So inside of Google, we're going to type in VS Code and we're going to click the first link and download it. Now VS Code is a coding workspace and this is what it looks like inside. looks very very scary, but it doesn't have to be. As long as you can communicate back and forth with Claude just like you do here normally, you're going to be totally fine. You don't need to have any technical background or coding experience or whatever the case may be.

And by the way, the reason why we're using VS Code specifically is because when you use VS Code and you build up projects, you can see every single file and folder in your system, which is super super useful as your project expands. And you can kind of think about that explore page like Google Drive, right? You have a folder and that folder contains a bunch of different files. It's the exact same way that VS Code works as well, which is why we're using this so that we can see everything we built.

Okay, so once we've gone ahead and downloaded VS Code, this is what it looks like inside. Okay, step number one is officially done. Moving on to step number two. Cloud Code is an extension that lives inside of VS Code and you can access it by clicking these four squares right over here, searching Claude in the extensions tab, clicking the first one, downloading it, and then you see the tiny uh icon for Claude at the top right hand corner.

You click that and now once you've gone ahead and subscribed, this is where you pay the $20 for the subscription if you haven't done so already. Then you can message Claude back and forth down here. And for pretty much the remainder of this video, we're only going to be focusing on this clawed terminal. You'll see a lot of stuff down here. Pretty much all of this stuff over here I don't use. And pretty much everything else over here I also don't use.

We're literally just going to be continuing forward almost entirely from here. And the explore section where we have our files and folders right over here. And it's going to become very apparent in this uh master class, you know, as we go through this together. Okay. So we have downloaded claude. Step number two is officially done. We're good to go. Step number three is we need to create a project. So you know when you like create a folder in Google Drive and you stuff everything in it.

Same kind of deal with cloud code. You need to create a parent folder and all of your different files and folders live within this. So all of these files, all of these folders live all within a parent folder. So let's go ahead and create that. And how we do that is by hitting this paper icon here. And we need to open a folder. Okay. And how I like to do this is I like to keep myself nice and organized so that inside of the documents folder, I have a Claude Code folder that has all of my projects contained within it.

We're going to create a new folder here. And this is going to be called Claude Code MasterClass YouTube. Okay, it's going to be completely empty. And we're going to go ahead and open this up and we're good to go. Okay, that is step number three. All set. Okay, last step here is we need to download some things. Specifically, those things are called git and node. And these are kind of the tools Claude needs to do the job.

So, let's say that you go to a restaurant. The chefs in the restaurant need tools to be able to cook, right? They need pots, they need pans, otherwise they can't do their job properly. And with good node, these are the tools Claude needs to get the job done. So, we need to download that. But before we go ahead and download this in the bottom of this video, there's going to be a link to my free school community, um, I highly recommend going ahead and and jumping into that because I have a lot of resources down here for you to go ahead and grab.

And one of those resources is every single prompt that we're using in this video today so that you can easily follow along. So, what we're going to do is grab these prompts, okay, from my community. It'll direct you over to a page like this. We're going to copy it. And inside of Cloud Code, what we can do is create a file. We're actually going to start off by creating this file manually. Just so you know how to do this.

You see this plus button right over here? It says new file. We're going to uh click that and type uh type uh prompts.m MD for the name. MD stands for markdown. Okay, it's a text file that has styling on it. You can see this header in blue. And then you also have all of these different bullet points in orange. Okay, this contains every single prompt that we are going to be using today. And in order to complete the setup, we need to download git and node.

So, we're going to do that. And we have the prompt lined up right over here to go ahead and do so. Now, instead of pasting it where it says this build with agent over here, what we want to do is open up claude instead. This is something that I really quickly want to cover. There's two different claike interfaces. You have Claude right over here. Okay. And then you also have this agent inside of VS Code. This is VS Code's kind of chat or kind of like chat interface or or uh Claude.

Don't use this one. It sucks and it's going to get you bad results. Every time you see it, just make sure to go ahead and close it and open up Claude instead. This is what we're going to be using for the remainder of this video. I'm going to fire off this first prompt. Okay. And what this is going to do is it's going to help us download get and node again the tools that Claude needs to get the job done and Claude is going to reply back to us.

In my instance, it said, "Hey, you've already installed the stuff, so you're good to go." In your instance, if this is the first time you're opening these applications up, it may take you 10 or 15 minutes to go ahead and download this. But let me explain what's going on here. So, I sent a message, okay? And what Claude did is it went ahead and checked if we had already installed these things because my my prompt here was check my computer install git and node so I can build and deploy websites now the key here is that you may be on a windows you may be on a Mac or whatever right and what claude is going to do here is it's going to automatically check your computer okay to see which type of model you have and operating system and then it's going to go ahead head and download the correct version of git and node.

And then you see this scary looking bash um thing going on right over here. Let me explain what's going on. Claude is usually doing one of four things in your computer. It's finding files, it's creating files, it's deleting files, or it's updating. In this instance, you can see actually exactly what it did. It was checking for git, node, mpm, and all this other stuff that you probably probably looks very foreign. Okay.

Um, just know that it's trying to find whether you have this in my instance if it's downloaded or not. It found it and it told me you don't need to download something that you've already gone ahead and downloaded. So, I'm going to move a move forward here, which brings us to the next prompt. Okay. And prompt number two is all about creating a beautiful uh slideshow presentation. That's the first thing that we're going to be doing today is building out something that looks beautiful like this.

Now, I just want to preface by saying that like if I were to create this myself, first of all, I wouldn't be able to do it because I don't think I'm talented enough to go ahead and design something like this. Number two is that if I hired somebody to do this, it probably cost me an insane enough money that I wouldn't want to pay for it and it would take like probably like I don't know, maybe a week to turn around. And Claude can build this in a handful of minutes and pretty much oneshot the design.

It's absolutely beautiful. So, we're going to go ahead and create this very quickly. The first thing that we need to do is we need to create a beautiful design, something that we're proud of. And the best way to create a beautiful design using Cloud Code is to find something that you already like and tell Claude, "Copy it." Okay, how we're going to do that is we're going to navigate over to the site dribble.com with three B's.

I know it's three. It's crazy. I always misspel this. And we are going to search for something like power point. Okay, if I can manage to spell that. And there is a lot of different designs here that we can go ahead and grab. But for the purpose of this of this video, I'm going to use this one right over here because I really really like this. So this slideshow presentation is something that caught my eye. I'm going to download this file.

Okay. So once we've gone ahead and downloaded it, maybe I'm just missing something here. save link. Save image as. Okay, there. That took way too freaking that's an embarrassingly long time [laughter] to find how to download a file. Okay, so I've downloaded this to my computer right over here. Okay, next step is is we need to tell Claude the design that we like. And how we do this, okay, is by uploading this into our conversation by hitting this plus button and upload.

Now, just before we go ahead and upload it, I am going to create a new conversation with Claude. And the reason we're going to create a new conversation is because if you just spent 15 minutes downloading something like Node and Git, then there's this huge amount of context where we just talked about some completely random conversation. We don't want all of that context bleeding into the new conversation we're having about creating slideshow presentations.

So, anytime we switch contexts and build a new project, we're also going to start a new conversation here. So, let's go ahead and attach that image, okay, by hitting the plus, upload from computer. Going to go over to downloads and attach it. Now, we can also open this up and view the image that we just attached. And now we're going to go add in the next prompt over here. Okay. But instead of copying and pasting it in, let's speak to Claude instead by hitting this uh this button right over here, this audio button.

Can you please make a beautiful HTML slideshow using the attached image as a design? This is for a $2,000 um digital marketing contract. Awesome. So, it just transcribed everything for me. And you can see the model down here that I'm using. it might be a better idea to start with Sonnet so that as you're using your $20 subscription, you don't burn through all the credits really quickly and then run out of uh usage for the week or the day or whatever the case may be.

So, let's go ahead and fire this off. Okay, so what's going to happen is Claude has received our message. It's going to build it out from scratch. It's going to do some bash command. Keep in mind when you see these kind of scary looking bash commands, just know that the vast majority of the time, most people don't read these at all. You honestly, most of the time, people just trust Claude is going to do the job you asked to do.

But you can always take a look and see what it's actually referencing here. Now, it's going ahead and actually designing that slideshow for us. Okay. What I would think about this conversation as is you are the boss, Claude is the employee. You send a message to your employee and Claude will follow up with you and do the task that you asked it to do. I'm going to return back when this conversation is wrapped up and we can see the finished.

Now, just as we're waiting for this slideshow to be created, I want to point out one thing here, which is that we're currently using the model Sonnet, which is not nearly as good at design work as something like Opus or Fable. But the trade-off of using these models is that because they're more powerful, they're also more expensive, which means that you can hit your cloud code limits substantially faster. And we're going to be talking about that throughout this video, but I wanted to quickly point that out in case you wanted to use more powerful models to get better results.

So, we are back and Claude has built out this slideshow, but the only thing is is that we can't see it. It's just stuck within this folder here. And if we open up the folder, we saw see a lot of crazy stuff going on here. I mean, if this is your first time at Cloud Code and you see all this stuff, this is, let's be honest, it's pretty scary, right? And if you see an HTML table, this is even worse, right? The last thing you want to do as a non-developer is come into Claude and see a bunch of code.

Okay, so what we want to do is just kind of bypass all of that and see results as quickly as possible. Now, how we open up this slideshow presentation is one of two ways. Okay, number one is we can ask Claude, hey, can you open up the slideshow presentation? Or number two is, hey, can you give us an absolute path? And I'm going to explain this in about 30 seconds. Here on the prompt list, let's go ahead and copy in the next thing where I'm asking Claude to open up the presentation in Chrome so we can actually see it or and also can you give us a absolute path?

So we asked it to open it up and now we're in Chrome and we can see this beautiful slideshow presentation that it just went ahead and created. But you'll notice something in the URL bar here. Okay, this isn't a website. This is called technically an absolute path. And what an absolute path is is it's the direct location of a file on your computer. So let's go through this together. So let me show you what I mean here.

This particular file is located on our computer. If we head over to documents and then we go over to cloud code and then we go into the folder we just created for this particular project and we just keep going all the way down the list. This is exactly where it's located. So if we grab that URL of the file and we paste it into Google Chrome, it's going to by default open it up for us. which is why at any point in time, anytime you create something, you can always ask for the absolute path and then paste it into the browser to actually display it in front of you.

This is a nice little trick that I learned way too late using cloud code that I wish somebody told me earlier on because this would have saved me a lot of time as well. Okay, so those are two ways of doing the same thing, which is just ultimately opening up a project that we just created together. All right, let's move on here and state something that is really important before we move forward, which is that every time you're using Claude Code, if you and I copy the exact same prompt and do everything the exact same, we're still going to end up with different results.

Okay, here's an analogy. Let's say you hire 10 employees and you ask 10 employees to do the exact same task and you give them the same tools. Naturally, there's going to be slight variations among every single one of those 10 employees. They'll come to somewhat of the same conclusion. It's just going to be slightly different, right? And same kind of deal with cloud code. So the point of me telling you this is as you go through this series if you're seeing something slightly different than mine that's totally normal and in fact that's to be expected.

Okay. Now let's move on to something called permissions and claude because this is very very important. Okay. So if we take a look at a conversation here I asked a question and then Claude is asking me a follow-up question before it proceeds. Now, this might seem harmless to you, but this is probably one of the biggest killers of time when it comes to Claude code. And here's the reason why. What usually happens with Claude is when you start using it, you're going to go multitask and do something for 20 minutes, come back and expect the work to be done, only to realize it didn't even freaking start yet because it's still waiting for you to reply to a particular question.

And this is the ultimate killer of time. Okay, so what we want to do is we want to change the permission mode down here. If we click on this, okay, there's multiple different permissions. We have manual. Then we have edit automatically. Then we have auto. And then there's also another one over here called bypass permissions which we're going to enable. Here's the rule of thumb. The further down you go, okay, the more freedom you give Claude and the faster you're going to go.

But the more freedom you give Claude, meaning that it's going to ask less for your permission to go ahead and do the things you asked to do, the more mistakes could happen. But here's the caveat, okay? Mistakes usually don't take that long to correct, but the time you waste waiting for Claude to ask you questions is devastating. Okay, so it's up to your discretion. I like to go as far down as possible and give Claude the most freedom because that just speeds up the workflow uh as fast as possible.

So, in order to uh add bypass permissions, we're going to hit these three buttons right up top here. Click configure editors and search for bypass permissions. Okay. And um you see this box right over here, allow dangerously skip permissions. We're going to toggle this. And we also have this section down here, initial permission mode. I like to select bypass permissions. This is the default. It's going to be on new conversations.

So when we click X here and we open up a new conversation. Okay, we can see it's by default set to bypass permissions. That's because that's what we just selected. This plan mode here is just essentially saying Claude is going to think through how to execute a task before actually going and executing the task. Okay, cool. So that's bypass permissions. The more autonomy you give, the higher the chance of a mistake, but the way faster it goes.

And for me, those mistakes are minuscule compared to the time wasted on a like a permission down here like manual or edit automatically. Okay, cool. Now, we've created this beautiful slideshow presentation, but of course, you can easily go ahead and edit it as well, and it's exceptionally fast to go ahead and edit. So, for example, you could take that draft you created, make the title bigger, add a chart, try dark theme, and so on and so forth.

Let's go ahead and try this out. Okay, so I'm going to go back to our initial conversation here, and I'm going to say something like, make the title bigger and add a chart on page one. Also, can you please uh switch this over to dark mode so I can take a look and see what that looks like? Okay, I'm going to fire this off and Claude is going to oneshot all of these different changes all in one go um before we part ways and I return back when this is done.

You can see that it's asking for all of this permission and that's because it's set to manual. So, I'm going to go ahead and switch this to bypass and then I'm going to return back when we're done. Okay, so we're back and we've created the slideshow presentation. Of course, the Canadianness in me had to say thank you to Cloud Code over here. We have the before and then we have the after. We have the light theme and then we have the dark theme.

We have the chart that we added in here. This is kind of mistake. Definitely shouldn't be placed like literally on top of a picture. And also the title here is substantially bigger as well. So you can see that you can go ahead using cloud code and really quickly make a bunch of changes fast. Okay. But let's say that through the process of building something, you realize you don't actually like the changes you made and you want to revert back to a previous state.

We can go ahead and rewind the code to some former version of what we built out. And how we do that inside of a conversation is hitting the escape key twice inside of Claude. Okay? And then we can just go back to whatever it is we're looking to revert it to. Alternatively, what we could do is we could scroll up to a former version of the conversation and hit this escape or rewind icon at the top right corner of any chat, click rewind code to here, and it's going to remove or rewind all of the lines of code that were put in place.

So, I'm going to go ahead and revert it. We're good to go. When I refresh this, it will be right back to the normal version of it. Okay, cool. Now, the cool thing about Claude is that up until this point in time, we've just been dealing with one file type, and that file type has been HTML. Okay? But Claude can build in all different file formats. We can build pictures. We can build documents. We can build PowerPoint presentations or sheets or whatever the case may be.

So, in order to do this, what we're going to do is copy the next prompt over here, paste it in, and return back when it's finished. Awesome. So we are back and Claude has built out multiple different file formats. So if we take a look at this trade marketing proposal. Okay, there is multiple different assets that we've created under this export file and we have the doc. We have multiple different images and we also have PowerPoint presentations.

Now, I want to point out something here that kind of bothers me right now in this build, and that is that inside of this explorer tab, everything is getting super messy, super disorganized. It's hard to find things, and it just gives me anxiety looking at this. Later in this video, we're going to change all this, and it's going to be super organized. But the reason we're going to keep it this way is just so you can understand what a bad project looks like and then later on what a good project looks like.

Okay? So, we have these images, we have a doc, and we have these PowerPoint presentations. If I open up this PowerPoint presentation, I can't view this inside of cloud code just like I can't view these docs inside of cloud cloud code. So, what I'm going to do because I'm on a Mac is I'm going to actually upload these into uh Google slides. Okay. But the problem is is that because this is so disorganized and I need to file find the file on my computer, sometimes it's kind of hard to go ahead and do that.

The easiest way to find a file inside of Cloud Code is by right-clicking on it and then revealing in Finder. And this will tell you exactly where it is immediately. So, I'm going to copy this file. And then inside of Google, I'm going to head over to Google Slides, click file, open, upload from my computer, browse, and I can paste that file that I just found using reveal in folder. And then open it up, and we're good to go.

Let's take a look at this um slideshow right over here. Cool. So everything's good. It's editable and uh yeah, it just looks great. We can go ahead and of course do this with a Google doc as well. And using that particular prompt that we had earlier on this prompt list, we're able to completely rewrite the document so that it is a proper document and it's not like some random slideshow that looks kind of janky on a uh on a Google doc.

So really cool stuff. Let's move on from here. The next thing is skills. Okay, this is probably the thing I use the most inside of Cloud Code. And here is how it works. Right now, we've gone back and forth with a lot of instructions. And you know, when you're creating a a nice proposal, like, you know, we sent off three messages, but you may send off 20 messages or 30 messages and 40 messages. What happens if you come back the next day and you're like, well, I want to create another proposal.

Well, then you may have to send another 40 messages to perfect it. But what happens if there was a way to kind of bottle up all of those 40 messages so that you didn't have to repeat yourself every single time you wanted to do something like create a slideshow? That's where a skill comes in. Okay, you create the instructions one time and you can reuse it forever. Okay, so how we do this is copy the next prompt over here where we're going to turn everything we've talked about into a skill called slash slides.

Okay, that we can use anywhere in any project anytime in cloud code. And we're also going to save the design reference. And what I mean by that is I really like how we designed this with this particular image here. And everything's looked nice. I'm going to save that so that when we create it, it looks beautiful every single time. So I'm going to fire this off and return back when we're done. All right. So we've gone ahead and created the skill which we can see right up top here include/skill/slides and then references and skill.

There's a lot of files and a lot of folders that we created for doing something quite frankly that should seem really simple. And here's the deal. You don't really need to understand really everything going on underneath the hood here. All you need to know is that a file was created. And these are instructions for Claude to be able to recreate slideshows on demand whenever it is that you want. And every single time you create a skill, one might be slides, another one could be like creating websites, another one could be creating LinkedIn posts, they're always just going to be added inside of this kind of like boilerplate setup in the do.claude/skills.

Okay, so every time you add something, it's always going to be added over here. The only thing that you really need to know is that in order to run this, you need to create another conversation. Okay, and then you can type in something like slash slides. Okay. And this is going to activate the skill that we just created with a slash command is technically what it's called. Like you can actually see that the slash command is opening up here.

Then we can add additional information. Please create a $2,000 marketing proposal for a yoga agency. I'm going to fire this off and then return back when it's done. All right, so we are back and Claude has built out the slideshow just from this one skill and this one prompt. Okay, so let's take a look at the results. Here we have it. Looks pretty much more or less the exact same as the previous slide that we created.

And you can honestly just go back and forth and keep creating these slideshow presentations as many times as you want. The general rule of thumb for skills in my opinion is like if you're going to do something two or three or four or more times or more, I would just turn it into a reusable skill so that you don't have to build it up from the ground up every single time because spending 30 minutes explaining what you want again and again and again just wastes a lot of time.

Okay, that brings us to slashcomands. Okay, so we just went over this one like slash slides and this is invoking a skill. Okay, but there's a lot of pre-built slash commands out of the box you can use that Claude has built out for us. One of the more common ones is usage. So you can see, for example, how much usage you have gone through on the week for a model like Fable for the rest of the models and your session. And the reason I want to show you this one right away is because the worst thing that can happen is you just pay $20 for a cloud code subscription and then you get locked out in like the first couple hours of using it because you burn through all of your usage on a higher model.

And the reason why that hits home to me is because when I used Claude for the first time, I went through my $20 plan in like two hours and then I upgraded to the $100 plan and then went through it the same day as well. So hopefully [laughter] that doesn't happen to you and this is a great way to watch out for that because you can see how much of your usage you've consumed so far. Okay, and there's a lot of these. We're going to go through more of these as we continue on in this video.

All right, so moving on here. We have generated so far some beautiful slideshow presentations and I'm really happy with the results. Now we're going to be going on to the second build which is generating a beautiful website. And the way we're going to design this website is going to be slightly different than the way we went about generating those slideshow presentations. We're actually going to build on top of the previous concept and really nail down a brand for every single thing that we create now and in the future using cloud code.

We're going to use this brand for our website. We're going to use it for our slideshows and our Google Docs and our dashboards and for example our custom software we're building and so on and so forth. Here's how it works. We're using a tool called Claude Design. So Claude's actually built out a tool to design beautiful things. And there's three steps that we need to implement. Number one is we need to create something called a design system.

Okay, this design system is the thing that we use across all the projects. We're going to standardize things like the colors we use or like the font types that we use or we're going to tell Claude what buttons look like on our websites or custom applications so it knows how to reuse or or recreate uh a beautiful aesthetic every single time. Okay. And this is just like a small sliver of the kind of stuff it's going to generate, but it's going to break down everything to do with design.

Okay. And standardize it so you can reuse it everywhere. Then we're going to use cloud design to build out a beautiful website. And then once we've done both of those things, we're going to import those into VS Code. Okay? And we're going to use this kind of stuff to actually go ahead and build out that website from the ground up. Okay? So, first of all, we're designing in uh Cloud Design, importing the website in, then building it inside of Cloud Code.

Okay. So, in order to get this started, we need to first of all make sure we're happy with the design we picked inside of Dribble. I'm happy with this, but if you do want to change, you can always go ahead and type in something like website and then find another um you know design that you really like and then use that. Okay, just like before, we are going to download that same image. Okay, and then we're going to navigate over to claude.ai, circle into design, and choose to view the standalone homepage right over here.

Alternatively, you can just type into your browser claude.ai AI/design to get started. Two things. First of all, the design system. Second of all, the website. Okay. So, the design system is right over here. Okay. We are going to select this and create a new design system. And we're going to create it here. Okay. You can title this whatever you want. I'm just going to call this Claude design system. And we need to upload some material, some reference file to show Claude what it is we're looking to design.

You could just kind of freestyle this and have it create something random for you, but generally speaking, if you provide it with some direction, it's going to be better at building the thing you want. Okay, we are going to use this picture right over here. So, just like before, I'm going to upload this file from my computer. Okay, so this is the image we're using. But alternatively, what you could do is you could head over to a website you really like, take a screenshot of that website, and then upload that screenshot right over here as well and design something like, for example, Stripe.

Okay, we're going to continue to generation. This is going to take 5 minutes to build out. And if Claude asks you any questions right in here on how you want this design system to work out, I'd take the 30 seconds to go through those because it's going to result in a better outcome for you. I'm going to return back when this is done. So, we are back and Claude has built out this insanely large design system. Okay, you can kind of go through this and take a look at everything that it's built, but if you just want to see some examples of kind of stuff it's done so far, just scroll down the page.

You can see a lot of these different uh pages, page elements that it's built out. So, I'm really happy with this so far. I think this is beautiful. Now, what I want to do is take this design system and I want to go on to step number two, which is building out a website with it. Okay. So, back inside of Claude Design, I'm going to navigate to the homepage one more time. And this time, I'm going to create that website.

So, inside of our prompt list here, I have the first prompt that you can go ahead and copy into Cloud Design. And essentially what we're saying here is create me a beautiful website for whatever purpose I have. In my instance, it's going to be a marketing agency, okay? With the following pages. So, keep in mind, we're not just building one page. We're building a homepage. We're building a service page about, contact.

And the most important thing here is we're designing it to convert web traffic into leads. Put placeholder images where applicable. Okay? So, we're designing it as a website that's actually going to materialize into ideally leads or paying customers. Okay? Just make sure that you select whatever design system you created in the previous step right over here because that's what we're going to be using to design the whole website.

So, I'm going to fire this off. Okay. And just like before, if Claude asks you any questions, I'd highly recommend taking the 30 seconds to go ahead and answer those questions because it's going to materialize into better results. Okay, with that being said, I'm going to return back when this is done. All right, so we are back and we've generated a beautiful website. We can take a look at it here. Okay, everything looks good to me.

We've also created this design system that we used to create the website and we got this design system in large part from this one screenshot right over here. Okay, so step number one and step number two are both good to go. Now we need to move on to step number three. Okay, and what step number three is is importing this into Claude code. So back inside of cloth, we need to get these design system, the design system and the website over here [music] and build everything out.

Okay. So how we're going to do this is we're going to first start with the design system. I'm going to click share right up top here. Export this as a project HTML file. And once this is downloaded, I'm going to drag this into my VS Code environment right over here. And then we're going to move on to the next prompt here. Okay, which is going to be essentially turning this zip file into um our whole design reference or brand kit or whatever you want to call it.

Okay. Now, one other thing here which is really cool to know about Claude is you can reference a file by hitting the at sign. Okay. So, what we're going to do is we're going to hit at here and then type in Claude. And you'll notice that we're hyperlinking this particular file right over here. So, Claude knows exactly the file that we are referencing. It's going to unzip this and then it's going to grab all of the elements out of it and create a folder called design and place it into that design folder so we can use it for everything else moving forward.

I'm going to fire this off and return back when we're done. Okay, so everything is good to go. We can open up that design system here. And there's a tremendous amount of stuff going on here. I mean, realistically, I have no idea what 99% of this is, but just know that you don't need to know exactly what's going on underneath the hood. All that's going on here is this folder is essentially this design kit here, which we're going to use to build out beautiful different uh beautiful things like websites and for example slideshows and Google Docs and all of that kind of stuff.

We're going to do the same thing now, but this time for the website. So, I'm going to hit share and project html and export this. And very similarly, we're going to copy this into claude and copy the next prompt here, which is going to be create this exact claw design website using Nex.js from the design created here. And we're going to link to it one more time. Marketing agency website design zip. Let me explain or unpack.

I think that's a more favorable term considering we're unzipping a zip file. Okay, that was a huge dad joke. Uh, we're just going to move on. But essentially we need to unpack a couple terms here. Nex.js. Okay, let me explain what is going on here. So Nex.js is kind of like WordPress, Wix, Weebly or whatever uh for customcoded websites. So you know how a lot of people will use this to build out a beautiful website. You can do the same thing with Nex.js.

It's kind of the same thing, but for customcoded websites that you build using a tool like Cloud Code, for example. Okay, so we're going to use that uh to to build this website. I'm going to fire this off and then return back when we're done. All right, so we have created the website. Let's take a look at it. Okay, from a simple dribble image right over here that we found earlier in this video, we built a website mockup and then we turned that into a live website right over here.

Now, take a look at how similar these actually are. Like, it's not like 100% pixel for pixel perfect, but I would say it's like probably 95% of the way there. So, I'm really really happy with the the first design here, and we're going to have to change a lot of stuff on this website. It is a great start, though. Okay. Now, one of the things that um really bothers me about this website so far, is that on this website, there is a lot of these M dashes here.

Okay. And to me, and I'm sure it's the same for you and pretty much everyone else on this planet, every time you see an abundance of M dashes, the immediate thought is, okay, that's probably generated using AI, right? and I don't like creating copy or websites where it's a dead giveaway that it was generated using artificial intelligence. So the first thing that I want to do is avoid Claude from not only using m dashes on this project but quite frankly just ever.

Okay. And so that brings us to the next section here which is memory where you can correct Claude one time and it's going to remember it forever across all projects. So I can tell Claude, hey I don't like you using m dashes. Please don't use that. it's going to save that to the memory and the next time I build a website, I send off an email, create a LinkedIn post or whatever else, it's just not going to use m dashes.

So, inside of the next prompt here, I'm going to copy in never use m dashes. Please save that to the memory and update the site. Okay, I'm going to fire this off, return back when it's done. All right, so we are back and we have officially removed every single mdash from every single page on the website. Okay, that feels substantially better. It's a huge, huge relief. [snorts] So, with that out of the way, we're good to go with M dashes.

We can head over to the next step, which is officially adding in some images to our website cuz right now everything's looking a bit uh blank, right? A lot of placeholders. We're going to go ahead and fill those in. And there's two ways we can do this, okay? And we're going to walk through both of these processes in this video. Up first, we got MCP, which stands for model context protocol. And up second, we got application programming interface.

So, API keys. Okay, both of those names you could probably immediately forget if you want to because they're more confusing than anything else, but they just represent really simple concepts and all they're saying is we can connect in external tools to things like cloud code. So, for example, we could connect in our Gmail account to claude. Okay, we could connect in Google Drive to claude. We could connect in our CRM, Google Calendar, really whatever application.

And in this instance, the application we're connecting into is a image software like for example Unsplash. So this is exactly what we're going to do to grab images so that we can display that on our website right over here. Now the reason why we have two options here is because one is newer and substantially easier to do and one is older and more difficult to do. The reason why we're talking about both is because unfortunately MCP even though it's newer and easier is not always available for every single application.

So you are going to need to know how to do both of these things. And the other thing is is when you go to deploy a website live, okay, unfortunately it can't use MCP. MCP is only something we can use in cloud code. And as soon as you want to deploy that website live, you will need to use API keys. And we're going to be talking about this throughout this video. Okay, so let's go ahead and set this up. It's really simple with MCP servers.

All we need to do is head over to claw.ai. Okay, and at the bottom left where my face is conveniently blocking it, we're going to click on settings here. Okay. And then we're going to navigate over to connectors down here and we're going to add in Unsplash so that we can um grab these images. So how we do that is we are going to search for Unsplash. Okay. And once we find it, we just need to click connect. And all it's going to do is ask us to connect in our Unsplash account into Cloud Code.

So you will need to go ahead and create a free account if you haven't done so already. Like you can see over here, I created an account called test. And once we're good to go with that, that's effectively it. Now we can automatically using Claude grab images from Unsplash right over here and then add them to our website. Okay. Now, just one other tip is that when we add in, okay, an MCP server, we can't use an existing conversation.

We always have to start a new conversation because any existing conversations before the MCP server was added in are now stale and don't have access to it. So, I'm going to create a new conversation and then we are going to load in our next prompt here. And what this prompt is saying is we are going to use the Unsplash MCP server that we just added in here. Okay, which is good to go. And we are going to add photos to our website.

Also, what I want to do is I want to add all these tools like Google ad logos, GA, Google Analytics 4, HubSpot, Salesforce, Looker Studio, AHFS to the page because there's a couple other sections down here that look blank and I want Claude to automatically go ahead and grab all these logos. So, what I'm going to do is I'm going to fire this off and I'm going to return back when it's done. So, we are back and Claude has added in all the photos for us.

Let's look at the before. Okay. And then we also have the after as well. We can go through all the pages and they all have photos which is looking really nice. And if we scroll down to the bottom of this page, we have all these cool looking icons down below as well from all of these different software applications. Now, just a quick heads up, not all of the placeholders are gone. So, you'll probably want to go ahead and change those as well.

But, I'm sure you get the point on how you can go about doing that. I'm going to move on to the next step here. And that next step is linking up this form down below so that when somebody inquires, we can get notified about it. So this website is a marketing agency. The goal is to generate leads so that we can convert them into paying customers. But right now, if somebody fills out the form, nothing happens, right? Which is a problem because we need to be notified so that we can close the deal.

So that is the next step. And how we're going to do this is by using an API key. Specifically, we're going to be using a platform called Resend, which is just essentially like an email platform so that when somebody fills out that form, okay, we are going to be notified by email. So, let's go ahead and set this up. So, what we're going to do is we're going to head over to Google and we're going to type in resend right over here.

We're going to click on the very first link and create a free account. Once you've created the account, you're going to land on a page that looks exactly like this. Alternatively, you're not on this page. You can just click API keys right down here and land on it. And all we need to do is copy this API key. Now, when I say API key, again, you can think about it like a a password. Okay? When you log into an application like recent, you probably likely had to create a password.

When you log into something like Claude, you have to create a password. Or Gmail, you have to create a password and so on and so forth. You can kind of think about like an API key almost the same way. Okay? And so we need to protect our passwords when we're uploading them into clawed code. You typically don't want to put your password right over here for security purposes. There's a proper place where we place passwords and that is called the environmental variable folder.

Okay. And we're going to copy in this next prompt here, which is going to be creating this MMV file and explaining to us in one sentence how it actually works like we're essentially a 10-year-old. Cuz a lot of the times when Claude is messaging you, it will give you like a really dense uh technical description. We want to break this down so it's really simple. Okay. So the EMV file is created. Okay. And what it is is it's like a secret node in your pocket. your app reads the passwords from it when it starts so they never get written into the code so that nobody else can see it.

Okay, so this is a way to securely protect your passwords. So I'm going to open up this file here and we can see that it has um you know kind of this pre-built pixels API key. I'm going to get rid of this and what we're going to type in here is resend API key. Okay, so this label here is essentially whatever you want to call it. This is just so you can remember what the hell it is you actually created. And then we need to grab the API key right over here and then paste it in.

Okay, so name that you remember and then this is the secret key associated with the platform. Okay, so that is effectively it. Now what we're going to do is we're going to say to claude that we created okay that file or cloud created it but we added in the API key from resend. Please make sure that we add it to the form so that when leads come through, okay, on our website, we can automatically go ahead and receive those leads.

Just one additional step. I'm going to pause this. And how I interrupted this is by hitting escape. Okay, so I can stop it. I'm going to say, please also update the form. I want to copy over the form on the website from the contact page to the homepage and separate first and last name fields. Let me explain what's going on here. So, you can see on the homepage we have this form with it's not really asking a lot of information.

Let's say somebody inquired about our services and we want to call them. We don't even know the person's first name. We don't even know how to address them by. Take a look at this form on the contact page over here. it's a lot more complete. Okay, so I want to use this form instead. And I want to separate the name so that in case we ever set up like automated text messages or automated emails and we say, "Hey, first name," we know exactly what that first name is.

Sometimes people can have like double first names like John Phipe and then it can get confusing as to whether their first name is John or Phipe or whatever the case may be. And so I just like to remove all confusion or ambiguity and just have a first name field and a last name field. Makes our lives way easier. I'm going to return back when this uh this prompt is finished. Okay, so we're back. We can go ahead and test this out.

So I'm going to scroll down to the bottom of the page. Okay, where we have our form with the first name and the last name separated. And I'm going to just enter in a bunch of random information here like you can see. And we'll send this off. Okay. So, we have sent it. Everything's good. Now, what I want to do is head over to the email address. Okay. And we can see that new uh submission coming in here. Okay. So, now when we receive new leads from our website, we're going to get an email with that lead so that we can call them and close the deal.

And so, that's how API keys work. Okay. Now, moving on here. The next thing is is our website's looking pretty good, right? But we want to make sure that it looks good not only on desktop, but it also looks good on all different types of devices like tablets and like phones. So, let me show you a quick little hack on how you can actually see these different port sizes or like device sizes on a desktop application. Up at the top right hand corner, you see these three dots here.

We're going to click those and then click more tools over here and then developer tools. Okay. And then you see this icon here. it's a phone next to a computer. We're going to make sure that's toggled on, which gives us access to all of this stuff up at the top here. What we want to do is choose responsive for dimensions. And then we can actually move our uh website. Okay. The cool thing is is we're able to see it in a um desktop format like this.

Okay. Then we can see it at like a tablet level like this. And then we can see it at a phone level. And why this matters is because you can actually see like the page break um at different sizes. This is called I think like a viewport. So um you can see where it technically breaks. Now no phone is this narrow. This is just me showing you as an example of how it could look broken. But you I'm sure you get the point. You can see at all different sizes.

You can even zoom out here to a very large desktop computer to see what other people would see um at at that kind of dimension. Okay, cool. So, the next step that we're going to do here is we're going to make sure that Claude automatically fixes our website so it looks beautiful not only on a computer but also a tablet and also a u and also a phone. And how we're going to do that is by using a tool called Playright. Now, what Playright is is it's essentially code.

That's all it is. and it takes control of your computer and what it can do is it can start analyzing your website automatically. Okay, it can take screenshots, analyze it, make sure it actually looks good and test everything out so that you don't have to spend your time testing it manually. Before we give it a shot, because I'm actually going to show you what this looks like live, we need to install Playright. So, first I want to show you how we can install this and then we're going to go ahead and test at our website to make sure it's optimized for tablets and mobile devices as well.

So, back inside of Cloud Code, what we're going to do is we're going to type in here slash and it should be um marketplace. No, it's plugins. So, slash plugins. Okay. And when we click enter there for slash plugins, you'll be able to see plugins and marketplaces. We can just scroll down here. And you're not going to see this on your side because you probably haven't installed any plugins, but I have installed quite a few here.

And anytime you install anything, okay, it's going to show here. Now, a plugin is just like essentially, you can kind of think about it like an add-on to Cloud Code. It's like something else that somebody's built where instead of you having to reinvent the wheel and build it yourself, you can just leverage what somebody else has built and it works out of the box, which is pretty cool. And so if you scroll down here, you can see a bunch of different stuff that other people have created.

And you can go ahead and install all of these things into cloud code. You can even see how many people have installed it. Right, cool. Now, we need to find playright here. Okay. And you can search up at the top for it. Playright. And then once you found it, you just install it. And then we are all set. And just like before, you're probably going to have to open up a new conversation any time you download a new plugin.

Okay. I've already downloaded it, so I'm going to continue forward with this conversation. But what we can do is we can add in this next prompt here, which is essentially saying install the Playright plugin. Technically, we already installed it, but Claude can also just do this automatically for us. We don't even have to go to the plug-in store, but I wanted to show you how you could go to the plug-in store anyways and see what's available.

And then we're going to get it to check our entire website and then fix anything that's broken. And on the phone version of our website, if we navigate back, oops, I clicked on the wrong tab here. If we navigate back to like an iPhone, I want to make sure that instead of having like, for example, and I'm going to zoom in here because it's a bit small. Instead of having like this messy kind of navigation bar here, we're going to switch this up so it's a hamburger helper where we can click it and then the sidebar can like drag out.

You'll see in a couple seconds here when I create it, but that's effectively what we're going to build. What I'm going to do is fire this off and then I'm going to show you in real time what this actually looks like. All right, so we're back and Playright has effectively taken control of our computer right away. I'm not touching anything. Okay, we can see that Claude has built out this sidebar right over here for mobile devices.

So, that's looking good. And you can see Playright's opening it up, testing it out. And now it's moved over to a desktop and a tablet device so that it can actually see at all different sizes what our website looks like to make sure that there's no errors or no mistakes. It can even take a screenshot of the website and then Claude will view it to make sure that there's nothing broken or out of place or anything like that.

Okay, so really cool stuff. It's gone ahead verified everything. And the cool thing about Playright too, just to kind of talk about it a bit more, is that not only, okay, can it test our website like it just did and it made sure it looked beautiful on all devices, but it has a lot of other functionality, too. So, yeah, it can check the website, but what you could also do is have it pretty much log into any application you're currently using and do stuff for you.

So, for example, you could have it log into all your software applications and download all the invoices for the month and then upload it to your accounting software, or you could ask it to find leads online for you or whatever the case may be. And the really cool thing is is that not every single tool has the ability to be connected into it. Not every tool has the ability to connect in via MCP or an API key, but with Playright, you can kind of build out your own kind of authentication.

Now, just as a disclaimer, most apps don't like you doing this. Okay, but with that being said, you are able to do it. Okay, cool. So, we've gone ahead and made sure our website looks beautiful. The next thing that we need to do is push it live. So, the issue with our website is that it's currently on a localhost 3000 environment. What that means is that technically speaking, nobody in the world has access to my particular website.

It's on a development server right now. What that really means is that right now all that's happening is Claude is rendering these website files in your browser. So it's like reading all of this kind of stuff and then it's creating this website from those static files. But what we want to do is we want to push this online so that anyone anywhere at any time can view it. And by the way, with all of these files here, you don't need to know what's going on under the hood here.

Like if you were to use something like, for example, WordPress as well, okay? They also have all of these files that look scary under the hood. It's just that you never see them. Okay? And same kind of deal with the website over here. I don't know what probably the vast majority of this kind of stuff is. Okay, awesome. So, what we're going to do is we're going to push it live. And there's a couple steps to this. Okay.

Right now, our website's in Claude. What we need to do is we need to send it over to a place called GitHub. First, GitHub, you can kind of think about it simply as Google Drive, but for custom code. Okay, you can uh you can send your code online. And I like to think of it like almost like Apple storage in a way where you can just store your stuff in the cloud so that if your computer ever breaks or whatever, you have a backup file of it.

Okay. Then what's going to happen is once it's in GitHub, we're going to use a platform called Verscell. And Verscell is going to deploy our website live so that anyone anywhere, anytime can view it. And I would like to think about I I like to think about Versell like for example site round hosting or blue host or hostinger or or godaddy or whatever the case may be. This is where your website is hosted for people to be able to view it.

Okay. And then lastly what we're going to talk about is something called uh environmental variables. Well technically we've already gone over it but I'm going to uh circle back to this later on after the next prompt. Okay. So both of these applications are completely free to use. So what we need to do is we need to head over to them and create free accounts. Now in order to get our code into GitHub, we need to log into our account and at the top right hand corner, we're going to see our icon.

We're going to click repositories here and then we are going to click create new or new and then we're going to call this whatever we want. YouTube Claude Masterclass is what I'm going to call it. And I like to always make sure that my repositories are private so that nobody else has access to them. Then we're going to create this repository. We're going to copy all of this code right over here by just clicking this copy button right there.

And then back inside of Claude, we're going to paste that in. Okay. And we're going to tell Claude to please push our website. We're not pushing everything so far. We're literally just pushing the website right over here. Okay, so that we can deploy it live. I'm going to fire this off and return back when this is done. Okay, so we are back and the website has been pushed over here. So inside of GitHub, if we refresh the page now, we can see all of the code, okay, that we had in our explorer tab right over here.

Okay, now it's been sent over to GitHub except for a handful of files. So you see this.get ignore. This tells Claude what we do not want to upload to GitHub. And what we didn't upload is our env uh files. Okay, all of these files were never uploaded to GitHub. And the reason why is because let's say for example, we accidentally set this to public. There's literally crawlers online trying to scrape your API keys. if they were to find it in here and let's say that was attached to like a paid API key like Anthropic or whatever and every single time you used it you cost it charged you money and somebody else got a a hold of that they could rack up a bill right so we want to make sure that we protect it and how we protect it is by making sure that we don't upload the MV folder out of the box claude should make sure this doesn't happen but that is why we keep all of our passcodes inside of the folder so that we can stop them from being uploaded to GitHub.

Okay, so now that our code is officially in GitHub, we've done step number one. Now we need to make sure to deploy our site inside of Versel. Okay, so again, if you haven't done so already, make sure to create a free account. Then inside, we're going to go over to projects and add a new project. And this will be um actually I'm going to go ahead and add a yeah, new project here. And just make sure that you connect in GitHub to Verscell so that you have access to all of your GitHub repositories, okay?

So that you can upload a website and deploy it live. And I need to copy this particular repository here. So I'm going to copy this name, paste it into um GitHub, and import this in. Okay, so that is more or less it. All we need to do is make sure we have an application preset of Nex.js. JS. So if you recall, we built out our entire website using Nex.js. And another reason we did that is because the creators of Nex.js are Versel.

So they created the platform to build websites on and also to host it as well. I'm going to go ahead and create this project. Okay. And I'm going to return back when this is done. It should take about 30 seconds. Okay. It actually took half a second here. What we need to do is we need to go ahead and click deploy right over here. All right, so we're back and we've successfully gone ahead and deployed our very first website together.

Meaning that anyone anywhere at any point in time can view this website. Okay, now the first thing that I want to point out here is that we don't actually have this form working properly. So if I go ahead and try and submit this, okay, we're going to get an error here and it's going to say the form isn't connected. Please email us instead. And so obviously this is really problematic because you don't want to have a website live where people are trying to inquire with you and they can't, right?

And the reason for this is because if you recall we created this file which stores all of our secret keys and passcodes and all of that kind of stuff. Okay, but we didn't upload this to GitHub. And because we didn't upload it to GitHub, when Verscell grabbed this information, it doesn't have that secret key, which is problematic because now all of a sudden, if it doesn't have the secret key, it can't fire off this workflow.

So, we need to have a way to add this API key into Verscell. And this, okay, is where the fourth part comes in, which is environmental variables. We need to actually manually add this into our website. So, I'm going to copy this key and inside of Versell. Okay, we can continue to the dashboard and it should be under environmental variables right over here. We're going to choose to create another one. Now, the key, okay, is this orange text here, whatever you called it.

And then the value is the actual secret key. Okay, that is it. We can click save down here. And we're done. We just need to add one more environmental variable in here and that is this contact notify email. This is optional. Like Claude may have added this email in the environmental field here or perhaps it just put it somewhere else in the code. You only need to really add this in here if it's actually in the environmental variable.

And you can always just ask Claude if there's anything you're missing down here. Now, just before we go ahead and test this out, we need to redeploy the site every time we add environmental variables like we just did. So, we're going to navigate over to the deployments tab, click the three dots here, and redeploy. I'm going to return back in about 30 seconds when this is done. Sweet. So, we're all set. I'm going to navigate over to the website and refresh the page.

Okay. And try this one more time. And hopefully, if everything's good, it should work. Okay, so the email has been fired off. Let's go ahead and take a look at our email address right over here. We can see the email has officially come in. So everything's good to go. We're all set. Now our site is connected in. We've had to do quite a few things manually here. Okay, we had to manually upload this to GitHub. We had to manually upload this to Versel.

We had to manually do all of the environmental variables. Here's the thing. It's important to know how to do this under the hood. But let's be honest, you probably don't want to do this every single time. And that's where open- source code comes into the picture. And that's just a fancy way of saying that somebody else kind of like the plug-in section has already gone ahead and developed something. Instead of us reinventing the wheel and and for ourselves, we can just use what already works.

Okay. So, take a look at this. We have this Versel library here. And you don't need this URL. You can visit if you want to. There's three million people that download this every single week. Okay, on this GitHub library, there's literally 50,000 people that have started, probably millions of people using this every single week as well. So, these companies have gone forward created these libraries that allow Claude access to the platforms so that when you go to deploy it, instead of you having to do the whole thing yourself manually, Claude is going to deploy it automatically on your behalf.

If it runs into an error, instead of you spending 30 to 60 minutes trying to debug it, Cloud will fix it in 10 seconds and then it will redeploy it. If it hits another mistake, Cloud will find that error and then fix it and then redeploy it so that all of a sudden you can push your websites live very, very, very quickly. Now, in order to set this up, all we have to do is head over to this next prompt here where we say, "Install the GitHub and Verscell MPM packages." This stands for node package manager.

You don't really need to know that, but just know that millions of people are using this open- source code to uh help them deploy websites like we're doing right now. So, I'm going to fire this off. It looks like it's actually already done. It's automatically uh well, it's already installed on my computer, so it didn't have to reinstall it, but this may take a couple seconds for you. And the only other thing worth mentioning on our website uh here is that it's great we've built it, but let's say you are running a business and you're trying to generate sales or you're trying to generate leads.

Right now, nobody's going to find our website, which is problematic because if people don't come here, they're not going to buy or convert into a lead. So, we need to figure out how to send traffic to our website. And that comes down to SEO or search engine optimization and [music] Google ads. So, let's say somebody types in Toronto plumber. They have intent to hire a plumber in Toronto. They'll first see Google Ads down here and then they'll see natural SEO listings.

Okay? And your goal is with Google Ads to have an advertisement that people want to click on and then become a lead. And with SEO to rank as high up through the search engine as possible so that you can naturally get leads there as well. And I have tons of content on this. on my YouTube channel. I released a video on SEO about four months ago that got 260,000 views. And this will walk you through exactly how to do this for free.

And I also have a video on Google Ads, which I released 3 months ago, got 224,000 views, showing how you connect Claude into uh your Google Ads so that you can automate both SEO and also Google Ads. in my paid community, which you can get started with on a seven-day free trial. I have a se a 16-p part series on SEO on Cloud Code, walking you through how to do literally everything with Claude. Okay, that used to take hundreds and hundreds and hundreds of hours to do manually.

And then also same thing with Google Ads, a 17-part series walking you through everything from keyword research to setting up your account and landing pages and campaigns so that you can effectively hit the ground running with Google Ads using AI to do pretty much all the heavy lifting for you. All right, so moving on. Build number four is next. And this is probably the most important build of this entire video. We're going to be building out a second brain so that Claude understands who we are and what we do so that when we ask questions, it can help set us up for success by being very specific and intentional with the response.

Let me show you this. Okay, I'm going to first explain the before so that you can appreciate the after. So, let's say you ask a question like, "How much should I charge for a roof replacement in some city?" It's going to give you a generic response back because it [clears throat] doesn't know much about you. It doesn't know much about your business. It doesn't know much about that location. So, it's just going to do it give its best shot.

What we want to do is we want to set ourselves up for success by training cloud on everything about us in our business. So that when we ask a question, it can pull from our context. It can pull from our stats and our history and give us a detailed response on how we can actually move forward. So, if we ask the same question, how much did I charge for a roof replacement in Barry? It will pull in, for example, your past 38 jobs you did last year, and it'll say, "Look, you charge on average for $14,200." It will pull in the research it did on your competitors previously.

And it'll say, "Hey, your competitors are charging 11,900. It looks like you quoted previously for $13,800, you should probably hold it because 41% of the time your deals closed at that price." Okay? So, probably worthwhile to to stick with it. And so that's the kind of specificity we're looking for that's going to help you get ahead in life using AI to your advantage. Okay. And so before we move on here, let's just give this a quick demo.

I'm going to navigate over to the next prompt in the list here. And like always, we are going to open up a new conversation. Paste it in. And I'm going to say something like, "My goal is to generate an additional 10 leads per month." Okay. Tell me the things that I don't know. and then tell me what the next steps are. And it's going to give us a very generic response. You probably don't know your current numbers, monthly visitors, blah blah blah, all this kind of stuff.

Tell me my business. It's it's it's probably not even going to be able to answer this. I don't know your business from this message alone. And if it doesn't know what we do, then how can it go ahead and actually give us concrete advice that we can apply to get to the outcome we're looking for? So, we need to set up Claude in a way that allows it to give us very specific answers back. And that's through a six-part process.

First of all, I'm going to explain everything to you. And then we're going to go ahead and build it out. Okay. Up first, we have something called a claw.md file. And you can think about this like the rule book Claude lives by or the rules that Claude follows. Very similarly to if you were to hire an employee, you'd have standard operating procedures. You'd have to teach them how to do the job you hired them to do. Okay.

Claude.md is the same thing. It's the equivalent but for Claude. And this will have its own file in our system. Okay. Up next, we have context. And this will have its own folder. And with context, this is just essentially training Claude on who we are and what we do. So it knows us and it can be specific when replying. Then up next we have skills. Okay, and skills are the jobs we get Claude to do. We've already built out one and that was creating slideshows, but we could apply this to every aspect of our business and pretty much automate everything.

Then we have something called reference files. Okay. And this is going to have its own folder as well. And this is additional information Claude may need to get the job done. So a skill could be for example let's say uh generate slideshows and then a reference could be here's how to design a slideshow. Here's the things to include in our slideshow. So it's additional context the skills can draw from to understand how to do the job properly.

It's kind of similar to context where context is information about us that we're going to be viewing and updating. References is information specifically for claw to do its job. Up next we have design and this is essentially how things should look and this will have its own folder. And then lastly we have something called output. Okay. And what output is is it's just when we create something called artifacts. Artifacts are just any document like a doc, spreadsheet, slideshow, image or whatever.

We need to put that data somewhere and that's going to be in the output folder. Now I want to preface by saying that this is not the only way to set up your cloud account. This just works really well for me. So, what we're going to go ahead and do is set this up with the next prompt here where I'm going to say, "Please create the following [clears throat] files and folders." Okay, file number one is going to be claw.md.

Okay, and then we're going to create all of these folders. The context folder, the skills folder, references, output, and design. It looks like I actually said output twice there, so I'm going to delete it the second time. I'm going to fire this off and return back when we're done. Awesome. So, we are back and Claude has gone to work for us building out all of these folders which are now officially in the explorer tab.

But the only problem with this is that it's just super messy and super disorganized. It's honestly giving me anxiety. And so, what we need to do is go ahead and clean this whole thing up. And we are going to be doing that, I promise you. But we're first going to drill down a bit into some of these files and folders so it makes complete sense. So, up first, we have the claw.md file. And again, this is just the instructions we tell Claude so that it behaves appropriately.

And I'm going to include in the description of this video a link to my free school community, okay? Which is going to contain a cloud.md file that took me 2,000 hours worth of using claude to build effectively. Now, I'm going to give you two options here, okay? Option number one is you could go into cloud and be like, "Hey, build me out a claw.md file and it's going to be generic and probably won't help you out." or you can grab this blueprint and it walks through all of the things that I wish that somebody gave me the first day that I used Claude code because a lot of these things are gamechanging.

So inside of the cloudmd file, we're going to paste this in here. Let me walk through what's going on. Okay, first of all, Claude can build some really advanced stuff like for example a personal operating system, but I want it to simplify the responses to me so that I just understand the hell is actually going on. So, first of all, I want Claude to reply to me like I'm a 15-year-old so that I understand what it's saying.

And I want it to reply in a specific way. First of all, I want it to tell me what it did and then why it matters and then what the next steps are, okay, or things that I need to do, any errors that encountered, any additional context that I need. And then I want it to also go ahead and sweep all the last conversations to make sure that there was no messages that went unrelied to. Okay, let's go through a handful of these.

So, first of all, anytime it creates a file, I want to make sure that Claude looks to see if there's a file that exists. And if it already exists, update it and only create it if it doesn't exist. And then up next, we have fixing the skill. So, this is really important. Remember how we built out slides? Anytime I want to make an improvement to the theme, like for example, changing the colors or whatever the case may be, I don't just want Claude to update that one individual slide.

I want it to update the skill so that the next hundred times I create slideshows, it remembers the change that I actually made. The next thing is a nine and a ten gate. Let's say you're posting on LinkedIn or you're sending off an email or you're doing something creative. Okay, I don't want to embarrass myself by sending out some generic slop. I want Claude to say, "Hey, this needs to pass a 9 out of 10 threshold. Otherwise, I'm not going to let you send it." Up next, we have calling out any over complication.

It's easy to build really complicated systems, but oftent times the best systems are the most simple. So if you're over complicating something, Claude will just go ahead and let you know so that hopefully you can simplify it. Next thing is that I don't want a yes man. I want Claude to challenge my direction and help me improve whatever I'm building. I don't want it just to say, Jonno, you're perfect and amazing and you couldn't do anything wrong.

Obviously, that doesn't help anyone. Next thing is to give the absolute path to whatever I'm building out. So if I ask it for a slideshow, it's going to give me the URL that I can paste into the chat up or into the browser so that I can see it right away. Next thing is to test before it responds. Oftent times Claude, if you don't have this skill, will send you something like a slideshow or a website or an app and there might be an error and instead of you spending a 100 hours trying to figure out what the hell's going on, Claude can probably figure it out in like 30 seconds.

So, I tell Claude, "Don't send me the response until you've verified that there's no errors." I want to make sure that anytime there's um like research that needs to be involved, Claude goes ahead and does that. So, for example, if we're creating a blog post or a LinkedIn post, go and research 30 topics before replying back to me so that you're informed on the particular topic. Next thing is how to save context. If we head back into Claude and type in SL usage here, the worst thing that can happen is being locked out of your account for a week because you blew past your limits.

So, I want to make sure Claude's always thinking of ways to optimize usage so that I don't run into that issue of having to be locked out for a week. Up next, updating the context. So, let's say I tell Claude a particular story like I uh closed x amount of clients last year. I want it to save that into the context folder so that when I go and create a LinkedIn post, it can actually reference that story or reference that opinion or reference that stat that we talked about in a previous conversation.

This is really, really nice when you're getting Claude to write stuff like emails or LinkedIn posts or social media posts for you. And then lastly, this underneath the sweep, I want to make sure that no message that I sent went unrelied to. And also one upgrade idea. So, for example, I really like Claude helping me improve skills. So, let's say we're building on a slideshow presentation. I want it to suggest a way for the next time we run the skill for this to be improved.

That way, we can have a self-improving system over time. Okay. Up next, skills. We've already gone through this extensively. I mean, we built out that proposal skill, but at the end of the day, your business or what you do for work is likely just like 20 skills stacked. So what you can do is go through everything you're doing and create skills for that and hopefully automate the majority of what you are doing. And then next we have this output folder, right?

And this okay is essentially all of those files that you're creating like PowerPoint presentations, Google Docs, HTML files, images, spreadsheets, all of that kind of stuff. And then we have the context folder. And again, this is like the second brain or whatever. This is how Claude really understands who you are and what you do. Okay, so now that we've kind of cleared up all of that. So, with that being said, let's go ahead and finally organize our entire project into their respective folders.

So, I'm going to copy this next prompt. Okay. And send it off and return back when we're done. All right. So, we're back and you'll notice a handful of things. First of all, Claude is replying in the exact format that we laid out in the cloud. MD file like what you did, what you need to do, why, next steps, and so on and so forth. So that's the first big win here. Then it went ahead and cleaned up all of our files and folders.

We can see that it moved things like prompts, for example. So technically, this is crossed out, meaning that it can't find the file anymore because it moved from the previous location. So, we can close that and it's probably uh somewhere in our system like for example, I don't know, references. Okay, there we go. We opened it up again. Sometimes you just have to refine the files if you moved everything around. But the other really important thing is you'll notice that it oneshotted exactly where everything goes, right?

All of our assets like the proposal and the websites and everything like that went to the output folder. And the reason it knows that is because in this cloud.md file, we have a file structure. So we're actually outlining where everything goes. So Claude actually knows exactly where to place every individual file. And the thing with the claw.md file over here is that Claude pretty much reads this every single time it takes an action.

So when I sent off this particular message over here, it probably went ahead and read the claw. MD file and then placed everything properly. And similarly speaking, every message in the future that we send, Claude is going to read this file, understand all of our folders, understand all of the rules, and then reply back according to everything we specify in the rule book, or in other words, the cloud.MD file. All right.

Now, moving forward, the next thing we have to do is fill in this context folder right over here so that we can train Claude on who we are, what we do, and get specific answers back to any questions that we may have. And this is a mammoth of a project. that would take a tremendous amount of your time to do manually. And fortunately, we can just get Claude to automate the whole thing. Okay. But in order for us to just go ahead and automate and make sure Claude actually does a good job, we're going to take a step back and activate something called plan mode.

So that before just running in and taking action, Claude is going to think through how to appropriately tackle this problem, make a plan of attack, and then execute that plan of attack. Next. Okay. So, inside of Claude Code, what we're going to do is we are going to head over to where it says bypass permissions down here and switch this over to plan mode, which is Claude essentially thinking through how to plan something out before acting.

Okay. But there's a couple other things that we want to do as well. At the time of this recording, there are four different models that you can use in Clot. You have Haiku, which personally honestly I think really sucks and I wouldn't use for pretty much anything. Then we have Sonnet, which you can kind of use for all of your daily tasks. Then you have Opus, and then you have Fable. And the further the right you go, the more powerful the model is, meaning the better quality responses you're going to get, but also the more tokens you're going to use.

And the problem with spending tokens, as you uh probably know already, is that you can burn through your whole limit very quickly if you start using really powerful models and then get locked out for a week, which is ideally something you don't want to do. But a great use case for using these better models is through the planning phase so that we can really think through exactly how we want to uh map it all out before we proceed.

And so for that reason, what I'm going to do is I'm going to switch over to Opus or Fable. Okay? And keep in mind when you're using these models, this ultimately does depend on depend on the plan you're on. Like if you're on a $20 plan, you got to be really conservative. If you're on like the highest 20x max plan, you can pretty much use Fable Opus for most things and not hit the limit. So ultimately, this just is is dependent on the the plan that you're actually on.

Okay. So we have switched over to plan mode. We've switched the model. And one other thing here is if we hit this slash button, we have the option to increase the effort and also turn on think. What think is is it's just giving Claude uh a second opinion almost like it's kind of giving it the ability to think through the problem before it takes action. So we're even giving it like a second route to plan it out. So, it's going to think about how to make the plan.

Then, it's going to make the plan, and then we're going to execute on it, okay? With effort. This is essentially how much resources Claude's using to tackle the problem. The higher up you go, the better the res the quality of the response. Also, the more tokens you're going to use. So, we can move this up to extra high. And then copy in the next prompt here, which is going to be plan how to fill the context folder right up top here from things like our website that we created earlier in this video, the files on our computer, Gmail, and Google Drive.

We don't want you to take action yet. We're just filling out the plan. So, I'm going to go ahead and fire this off and then return back when this plan is done. Okay. So Claude has gone ahead and it's generated the plan and then it's asking us, hey, do you want to automatically accept this plan or should we keep editing? Okay, so we can move all the files and folders over and just really quickly skim through this to make sure we're happy with it.

So first of all, Claude's going to build out a lot of files like about me, business, customers, numbers, voice, competitors, gap, and so on and so forth. And where it plans on sourcing that information from is first of all our website which we created earlier in this video, then from Gmail and also from Google Drive. And it's also looking to pull from local files, too. But here's the problem with these local files is it's literally only pulling from this output folder.

But this doesn't contain a lot of information about us. What I really want Claude to do is pull from our downloads folder and our documents folder and our desktop folder. Because chances are if you've had a computer for three, four, 5 years, there's a tremendous amount of information that Claude can mine here to understand who you are and what you do. So, we need to change this plan. And so, instead of accepting this, we have this field, this input field at the bottom where we can input in additional context.

I'm going to say, please grab computer files from documents, downloads, and desktop. Okay. And then I'm going to fire this off and return back when the plan's been updated. All right, cool. So, we're back and Claude's fixed this. So, now we're going to be grabbing files from all across our computer. I'm going to go ahead and click yes, autoac accept this plan. And that brings us to the next step here where we actually have to go ahead and connect in a lot of these applications because up until this point in time, we haven't connected in Gmail and we haven't connected in Google Drive.

And how we do this is very similarly to before. We're going to be using MCP servers. So, inside the clawedai website, we're going to navigate over to the settings where my face is conveniently blocking the screen. Okay. And we are going to circle into connectors, discover, and first search for Gmail. And make sure this is activated. And also Google Drive as well. And once these two are plugged in, we're good to go. Cloud can now pull from both of these applications.

And then we also have our website and we have all the uh computer files that it's going to be pulling in in from also. And then this selfinterview is something we're going to be circling back after uh we grab from all these external files or these external apps. And the reason for that is because it's great that we're pulling information from Gmail and Google Drive and our website and our folders, but there's still going to be a lot of unanswered questions that Claude likely has.

And that's where a self interview comes in. So Claude can fill in the gaps by asking you the right questions. Okay. So the plan has been created. Now what we're going to do is continue forward with the next prompt here. And instead of continuing forward with plan, we're just going to uh switch this back to bypass permissions. We can also change this to sonnet if you want as well on the $20 plan. If you're on like the 5x max plan or the 20x max plan, you can continue with opus.

I'm going to switch back to sonnet. And I'm also going to deactivate thinking and we can bring down the effort to something like medium or high or whatever you want and then fire this off. And then I'm going to uh return back when this is finished. So we are back and Claude has built out all of these files for us and they all live within the context folder. It's written about us, our business, our customers, the numbers that we have or our stats and then also our voice so that Claude can write just like us.

We also have gaps here as well. And gaps are questions that Claude has where it doesn't have the right answers to. It couldn't find it online or on our computer. So, what we're going to do is conduct a self interview where Claude can go through all these questions, get the answers that it's looking for. Okay, which brings us to the next prompt here, which is given our goal. Please go ahead and interview us so that we can fill in the missing context that is needed here.

Now, I'm definitely not going to just select the first answer to all of these questions. I'm gonna treat this very seriously in this demo. I'm just kidding. But I'm sure you get the point. You just fill in the gaps and then Claude's going to know a tremendous amount of more context about you and your business and and all that kind of good stuff. Okay. Um, with that being said, there are certain things that Claude is not going to be able to pick up on a self-inter.

And a classic example of that is competitor research. So, that brings us to the next prompt. And the reason why I I'm super excited to share this prompt with you is because this is probably the thing that I use more than anything else. And that is to get Claude to research a tremendous amount of data online. So, I'm going to copy this prompt in here. Uh, and instead of just copying it into the main conversation here, what we're going to do is we're going to run two chats at once inside of Cloud Code.

So, we are going to open up a new conversation here and we're going to drag this over to the side here so that we can actually have two conversations running at the same time. And then I'm going to fire this off. research 50 articles online on somebody who wants to who who buys catering services in, for example, I don't know, New York and who my competitors are in the catering space in New York. Then what you're going to do is create buyer personas for my clients and gaps I'm missing out on from competitors.

Use 10 sub agents. Okay? And I'm going to uh use 10 sub agents. And here's why this excites me so much. Because if you were to go out and do this research, first of all, most people probably wouldn't do it because it would just take so freaking long. But if you were going to do that, you'd have to go to caterers New York and then scroll through all of these competitors and do research and it would be a multi-dayong process.

But with cloud code, it can get it done in like 30 minutes. But if you're anything like me, even 30 minutes seems like a lifetime. And so I want to speed this process up. And here is where sub agents come into the picture. Instead of having one agent sequentially going through, let's say, a 100 different articles. Okay, we can have 10 agents go through 10 articles each. Okay, 10 agents going through 10 articles means it's going to produce a hundred different results.

But the important thing is is that it finishes the task 10 times faster. So instead of having to wait like 30 minutes, you're only waiting like 3 or 4 minutes or whatever for all of these 10 agents to go out, find the research, and then come back. But what I want to do is quickly explain how this stuff actually works because sub agents, okay, don't function the same as these regular conversations that you're used to having with cloud code.

Let me break this down. Okay, so how this happens is you have a manager agent. Think about at work or at a at a workspace, you're going to have a manager and that is this chat window that you see right over here. And what this manager is doing is they are delegating task tasks to employee agents. And so we have let's say 10 employees that we're spinning up here. Okay? And what's going on is this manager is saying you're going to go find 10 articles, you're going to find 10 articles, you're going to find 10 articles, and so on and so forth.

And all these employees are going to grab the information, then return it back to the manager agent. Okay? And so practically speaking, what's going on here is you only see the manager agent up here. Okay? and it's going to deliver the results from these 10 sub agents, but you don't get to see these 10 independent conversations. You only get to see the the results coming back from uh to the manager agent. Okay, so you only see the final report from all these employees, but you don't see their underlying work.

Okay, so that is effectively how sub agents work inside of cloud code and they go substantially faster. Okay, so we've gone ahead [clears throat] and we've generated a bunch of additional files. Specifically, we've gone ahead and generated this New York catering buyer personas and whatever. It's cut off because it's way too long. So, you know, there's a lot of use cases for this, but one practical use case could be understanding your buyers and then asking Claude to take a look at your website and be like, hm, can you write this website in a way so that when these types of buyers go to my website, they're more likely to take the one action that I want them to take, which is filling out the form.

And then Claude can analyze those buyers, for example, and then write the copy of the website to convert those people into paying customers. That's just one example here that I can think of off the top of my head, but there's probably a tremendous amount of opportunities with uh understanding your competitors and your buyer personas and all of that kind of stuff. And now finally we can circle back to the very first question we asked in this particular project which is my goal is to generate an extra 10 leads per month.

Tell me the things that I don't know and what I need to do next in order to be able to accomplish that goal. And instead of getting some generic AI slop response back, Claude is going to read all about us like about me, business, uh, customers, gaps, and here's the response. 10 leads per month for Bluebird given what's already working. Venue referrals 40% and corpor corporate lunch, which is the highest margin and it's the least seasonal.

What you don't know, how many inquiries you get now. Okay, that's a real gap. your ch your best channel. Again, that's a huge gap if you don't know where the best channels generate leads and no second venue relationships exist. And corporate lunch has no outbound motion at all. It's all inbound. Okay, so huge gap over there as well. What you need to do next, ask five past corporate clients for one referral each, which is free, fast, and feeds uh your least seasonal offer and so on and so forth.

You get the point. We just took a system that has no context about us that gave us AI generic BS responses back and we turned it into a system that's a that's trained on all of our data on us our business customers everything our like everything and it's able to give us a targeted response on exactly the next steps. Like imagine if you were actually running a catering business like this and your whole focus you had tunnel vision on weddings, right?

Because usually weddings in in this particular space yield the the most deals and their high margin and stuff like that. But if you never even thought about corporate lunches, which Claude is pointing out over here, that could have been a massive opportunity that you never exploited without consulting Claude first. And so these are kind of the golden nuggets you can pick up using Claude code because if you have blinders on, you might not see everything in front of you.

Claude can pick out your blind spots, inform you on what you're missing, and so on and so forth. This is probably the most value you're going to get from Claude Code. Essentially being a strategist or a soundboard where you can bounce ideas back and forth off of. Okay. Lastly, what we're going to do is we're going to create a onepage Google Doc profile of our business. And we're also going to make it beautiful, which means that we're going to be using our existing design uh template over here to build it out.

I'm going to return back when this is done. All right. So, we are back and Claude has built out this one pager. Let's take a look. Uh, yeah, that looks really, really nice. I don't know about you, but every time I make Google Docs, I just can't make them look pretty. So, this is probably the nicest one that I've ever created, honestly. Um, but again, the bar is like exceptionally low. So, I'm I'm happy with that. Okay, cool.

Last thing here is we can take this context about who we are, what we do, and all that kind of stuff, and we could use that to go ahead and rewrite our entire website if you want. All right. Now, moving forward, we are going to head over to build number five, which is creating a dashboard. And we can use a dashboard for a lot of different use cases, but in this particular video, we're going to be building out an accounting dashboard.

So, we can see things like our profit, our revenue, expenses, or whatever else for the month. And you can model essentially anything here. Now, the really cool thing about this is that I used to build out these custom dashboards with a free tool called Looker Studio. Was a Google product. And these used to take me so freaking long to generate these graph uh these these uh these dashboards. And they never looked nearly as nice as what we're able to generate in a matter of a couple minutes with claude code.

So again, couple months on Looker Studio has now turned into a couple minutes using Cloud Code. And the best part about this, okay, is the fact that you can just ask any questions you want and Claude's going to be able to analyze the data and reply back to you. So, all you need to do is upload your bank statements or your credit card statements and it will be able to create that dashboard for you. But if you want to just use sample data, in the bottom of this video in the description, there's a link to my free school community.

Okay? And at the bottom of that page, there's going to be a link over to sample PDF files that you can go ahead and download if you just want to use sample data, which I'm going to be using for this video. So, I'm going to download that sample data. And once it's officially downloaded, should take a couple seconds here, we can go ahead and import that into clawed code. Okay, so I have a zip file here. Now, moving forward, the next prompt we're going to do is turn all of these uh PDF files that we just downloaded into an HTML dashboard.

We're going to do things like show revenue, expenses, categorize everything properly, and also remove duplicates as well in case any of these PDF files are duplicates of each other. And just like before in previous prompts, we're going to reference this exact file here so Claude knows exactly where to grab these files from. So, I'm going to hit the at symbol and type in sample PDFs, which now Claude knows where they're located.

And I'm also going to say, please unzip the file and add these PDFs to a folder inside the output folder. Okay, so we're going to place them inside of outputs right over here. I'm going to send off this prompt and then return back when we are done. All right, so we're back and Claude has generated this dashboard and even given us this absolute path that we can now copy and then paste into Chrome and see the dashboard that we just generated.

Everything looks fantastic. Okay. And now we can act on this dashboard by asking follow-up questions. For example, I need to reduce my spending by $250. How can I go ahead and do that? And then Claude's going to drill down into the data, look at all of the different expenses that we have lined up here, and then find ways that we can go about reducing our overall expenses. Let's see. So, it says you can cancel duplicate or unused software.

There's about $1,657 a month on average. And we also have overlapping tools. Can you please give me the top five expenses that I should cut immediately? And now it's going to drill down even further into the data, find exactly what are the easiest things to cut and then list them out. So Adobe Creative Cloud um we haven't used in 168 days. Then we have Vimeo Advanced and so on and so forth. Okay, so that's just one way that you can go about building out a dashboard.

In this use case, it's accounting and then you can ask any questions you want about the data. This is something that saves I don't know, literally months of time building out. It's so easy now with cloud code and it used to be a giant pain in the ass before anytime you needed to do this manually without the use of AI. All right, up next we have build number six, which is creating a Gmail agent, which is automatically going to manage our entire email inbox.

So, let me walk you through how this works. We are going to receive emails, and when we do, we're going to label them into their respective categories or labels over here. Like, for example, if it's an accounting email, we'll label it as accounting. If it's an agency email, we'll label it as agency. Okay? We can then take actions on specific labels. So let's say we get a personal email coming in. We can automatically go ahead and draft a response or let's say it's an accounting email for example.

We can automatically forward off invoices or receipts or whatever to our accountant. Okay. So that is what this build is going to be doing. And the coolest part is is that it technically lives in the cloud. Everything that we've done so far we've had to manually ask cloud to do. Okay? Like for example, we asked it to manually generate slideshows or the website, but this time we're going to be setting up something called a clawed routine.

And what this does is runs every single hour, every single day of or every single hour of the day so that we can automatically sort all of these incoming emails without us having to actually be present and asking Claude to go ahead and actually do it. So the first thing that we need to do to kick this off is create something called a reference file. And we really briefly talked about this earlier in the video. And what I mentioned was a reference file is essentially additional context on how Claude can go ahead and do the job it needs to do like for example uh generate slides or for example like how to automatically sort incoming emails to our Gmail account.

Okay. So here's how this works. We're going to get emails coming in. Okay. And we need to sort these things uh automatically, but we need to tell Claude how these emails actually need to be sorted because if we just say, "Hey, here's a bunch of labels. Good luck." It's not going to do a really good job. So, we need to create an additional file that clog can read every single time so it understands exactly how to sort incoming emails to their respective folders or labels or whatever the case may be.

And so, that's what we're going to build out. But before we do that, you can always create as many custom labels as you want for your email by hitting this plus button right over here and then creating the label and saving it. Okay, so that's step number one. Now, we're going to create this reference file. So, back inside of Claw, just like we've done for all the previous projects, we're going to first uh create a new conversation here.

And I'm going to paste in the very first prompt, which is going to be creating a reference file, okay, called Gmail labels. And this is going to do a handful of things. First, I'm going to fire this off and then I'm going to explain what it's doing by actually showing it to you. So, I'm going to return back when this is done. All right, so we are back and Claude has very quickly generated all of these Gmail labels. it was able to go into our accounts, find all the labels, and then paste them right into this markdown file over here.

So, let's just go through a handful of these. So, we have the title up here, which we ask for, okay, the name like accounting, and then we have something called an ID, okay? And this is technically the ID of that particular label. So when you and I look at these labels, we see accounting, but Gmail and Claude read some crazy label like label_864622 so on and so forth, right? So this name is for us as humans and this name, this ID is for Claude and Gmail to actually identify the right label.

So it's really important to include this in there. And then we're going to have a description of that particular label. So accounting services and all that kind of stuff. And then we're going to provide examples of emails that would actually fall into this particular category so that when Claude reads this, it can kind of reference where each individual email actually belongs. Okay, so that is effectively what's going on here.

It's going to go through every single one of these labels and create this document. But we have one problem so far. Okay? And what that problem is is that we have okay a file on our local machine and we are going to be creating this automation in the cloud. We're going to be creating this in something called cloud routines. And the problem is is that cloud routines since it lives in the cloud doesn't have access to our individual folder or files on our computer.

Okay. So what we need to do is give cloud routines access to the file that we just created right over here. Okay. So that is what we're going to do next. Let me explain how this works. First of all, if we head over to claude.ai/code/utines, this is how I actually navigate over there. I don't know how to get there other than just typing this in. We can go ahead and click on routines here and choose new routine. And the important thing here is that we can attach something we can attach a GitHub repository.

Okay. So if you recall when we built out our website, we uploaded this to GitHub. And now what we can do is we can upload this entire project over to GitHub. Then we can attach okay that GitHub repository to this routine. And by doing so, we're going to give Claude routines access to this Gmail file so that it can actually go ahead and read this reference file. And when it goes to organize incoming emails, it knows exactly where they all respectively go.

Okay, so the first thing we need to do is upload this whole project into GitHub so that uh we can go ahead and have access to it in this clawed routine right over here. Okay, so we're going to go over to the next prompt on the list, and that prompt is to push this entire project to GitHub. Okay, so I'm going to fire this off and return back when we're all done. Okay, so the project has officially been pushed over to GitHub, which means that all of the code in our explorer tab has now migrated over to GitHub right over here.

And the cool thing is is that if we navigate into the references folder right here, okay, we have access to that Gmail labels file, which means that when we add this GitHub repository, okay, it's going to automatically be able to view this file so that when it sorts incoming emails, it knows exactly where these go. Okay, [clears throat] so we're good over there. The next step is is that we need to actually go ahead and build out this routine so that it just