§ 01 · The Hook
The bait, then the rug-pull.
Nick Saraev opens to camera, no music, no title card: just a number. Four million dollars a year in profit. From there he promises a four-hour masterclass that takes complete beginners from installation to deploying autonomous multi-agent systems that bill real clients.
What the video promised.
stated at 00:45 "No fluff, here is what you guys are gonna learn in this course..." delivered at 250:00
Where the time goes.
00:00 – 01:07
01 · Intro and promise
Credentialing ($4M/yr, 2K students) and full course outline. No fluff.
01:07 – 03:44
02 · Basics of Claude Code
What Claude Code is, how it differs from ChatGPT, why it matters.
03:44 – 08:05
03 · Setup and install
Terminal login, Opus 4, API key, first prompt.
08:05 – 12:23
04 · Terminal vs GUI
Why you need both; IDE concept introduction.
12:23 – 19:11
05 · IDEs: VS Code vs Antigravity
Whiteboard diagram: extensible vs AI-native IDE. Recommends Antigravity for CC.
19:11 – 30:29
06 · First build: Invoice web app
Builds an Accrue-style invoice app from a screenshot reference in about 15 minutes live.
30:29 – 41:47
07 · CLAUDE.md deep dive
The project brain: global vs local hierarchy, /init, dos and donts, memory architecture diagram.
41:47 – 54:42
08 · Advanced functionality and .claude directory
Hooks, slash commands, permissions, the full .claude/ tree, plan mode intro.
54:42 – 90:00
09 · Plan Mode
Why planning beats blindly coding. 10-min plan-first path vs 38-min code-and-fix path.
90:00 – 130:00
10 · Complex project build: Proposal Generator
Full-stack Next.js + Supabase built live: auth, multi-step spinner, GitHub integration.
130:00 – 160:00
11 · Context management
/context command, token categories, compaction, keeping CLAUDE.md lean.
160:00 – 175:00
12 · MCP: Model Context Protocol
Setup walkthrough, Awesome MCP list, Chrome DevTools MCP, Gmail MCP, Context7.
175:00 – 195:00
13 · Skills
What skills are, folder structure, building a scrape-leads skill, cross-niche outliners.
195:00 – 215:00
14 · Sub-Agents
Turning skills into autonomous agents. Email classifier with 4 parallel Gmail-label scripts.
215:00 – 243:00
15 · Agent Teams and Git Worktrees
OpenClaw multi-agent framework, debate-agent pattern, 10 Claude instances in parallel branches.
243:00 – 250:00
16 · Deploying with Modal
Any skill becomes a serverless web endpoint. Live demo: lead scraper form outputs CSV.
250:00 – 250:43
17 · CTA: Maker School
90-day accountability program, first customer guaranteed or full refund.
Visual structure at a glance.
Named ideas worth stealing.
54:42
model
Plan Mode Math
- Plan 5 min + Build 5 min = 10 min total
- vs Build 15 min + Test 10 min + Fix 13 min = 38 min
Two scenarios with concrete time estimates. Planning first saves 28 minutes per task and produces better code.
Steal for Open every Claude Code session with a plan prompt before writing any code
30:29
model
CLAUDE.md Hierarchy
- ~/.claude/ (global - all sessions)
- .claude/ (workspace - this project)
- subproject CLAUDE.md files
Three tiers of context that stack. Global rules persist across every project. Use /init on every new repo.
Steal for Run /init on JoeFlow, MCN, and every new project immediately
175:00
model
Skills to Sub-Agents to Agent Teams
- Skill: reusable markdown instruction file
- Sub-Agent: skill that runs autonomously in its own context
- Agent Team: multiple Claude instances with a shared task list
Three-layer progression from reusable snippets to fully autonomous parallel workers.
Steal for JoeFlow Sessions panel architecture - each template row could launch a sub-agent team
240:00
concept
Git Worktrees for Parallel Builds
Run 10 Claude Code instances in separate git branches simultaneously. Compresses days into hours.
Steal for MCN feature sprints - assign one worktree per feature, let them run overnight
243:00
concept
Modal Serverless Deployment
Any skill file becomes a web endpoint in minutes via Modal. No Docker, no infrastructure config required.
Steal for Turning JoeFlow skills into lightweight web tools for MCN+ members
Lines you could clip.
00:05
"I use Claude Code every day to manage a business that does over $4,000,000 a year in profit."
153:20
"Allow the AI to be your hands. You are the person that is coming up with the ideas and thinking."
240:00
"We can actually spin up ten different versions of Claude Code in different worktrees and have them all working at the same time."
250:10
"That is my last and only pitch of this video."
How they spent the runtime.
Hook length67s
Info densityhigh
Filler8%
Sponsor blocks
- 47:09 – 50:49 · LeftClick
Things they pointed at.
How they asked for the click.
250:00
product
"Definitely check out Maker School. My ninety day accountability program. I guarantee you get your first customer by the end of the ninety day period. If you do not, I give you all your money back."
Single CTA at the very end, zero mid-roll. The entire 4-hour video is the funnel. Guarantee-led offer framing.
Word for word.
HOOK opening / re-engagementCTA the pitch analogy story
00:00HOOKHey, this is the definitive course on Cloud Code for beginners. I use Cloud Code every day to manage a business that does over $4,000,000 a year in profit. I also teach over 2,000 people how to use Cloud Code both for personal and then corporate or professional tasks.
00:13HOOKSo this is more or less what I do all day. Once you understand what I'm about to show you in this course, it's no small stretch to say that ClaudeCode will augment your productivity. You'll gain leverage in areas that you probably didn't even realize that you had and that's both for software engineering and also other parts of your life.
00:28HOOKThe focus here is not software per se, so you don't need to have a technical background to understand what I'm going to tell you. I'll make sure to start slow and build concepts on each other naturally and gradually, so that everybody here is on the same page. So no fluff, here's what you guys are gonna learn in this course.
00:41HOOKWe're gonna start with the basics by downloading and then setting up Claude code ourselves. I'll then teach you all about integrated development environments or IDEs. There's several on the market and I'm gonna walk you guys through the three most commonly used ones so that we're all on the same page.
00:56HOOKAfterwards, I'll show you how to set up your project brain, which is also known as the claud dot n d file. Once we're done with that, we'll use claud code to actually build something because the focus of this whole course is on practical building. We'll build a simple web app hosted live on the internet, which I'll help you guys learn by doing, not just sitting around and listening to me.
01:14After that, we'll cover the Claude directory, the sub agents folder and a bunch of functionality that not a lot of people know about. We'll then cover Cloud Code's various modes including their plan mode, which you guys might have heard about. Dangerously skip permissions mode, which gained a fair amount of, uh, notoriety recently
01:29and how to use them, as well as use them safely. We'll then cover complex project builds using plan mode and what I just showed you guys. After that, we'll cover context management, which is quite the term right now.
01:40I'll teach you guys all about how to manage your context efficiently, avoid context drop, and ensure that your prompts are built and structured in a high ROI way. I'll run you through every slash command in Cloud Code and how to use all of them. We'll then cover hooks, which are custom scripts that you guys can fire automatically before or after every Claude code tool call.
01:56Very useful to know. I'll then talk about Claude code skills, which is basically how to create these skill files that turn Claude code into a bunch of different specialized agents. We'll then cover model context protocol and how to set it up effectively.
02:07I'll talk about a handful of automated systems that you guys can quickly build with model context protocol, including email managers. You can build your own bookkeeper and more. I'll cover Claude code plugins and marketplaces.
02:17The Chrome Dev Tools integration, which is a very slept on connection between Claude code and Chrome that enables you to collect data from sources that don't have APIs. It's very, very valuable to learn.
02:28We'll then cover Claude code sub agents with scoped tool access. I'll talk about their new agent team feature and how to use them productively. And then get work trees and session mobility, which essentially will allow you to spin up parallel cloud sessions without a lot of the downsides and issues that things like Cloud Bot or or Open Cloud, uh, have unfortunately resulted in.
02:46Finally, we'll cover scaling and deployment. Basically, how to take your automations and run them in production using modal webhooks, GitHub actions and Claude code on the web. So we've got quite a lot to cover.
02:56Let's just dive right into it with the first, which is how to set up Claude code as a total beginner. So the first thing we have to do is we actually have to purchase Cloud Code. And the reason why is because they don't offer it for their free plan at $0.
03:07In order to have access to Cloud Code, you need at least their pro plan for everyday productivity. I'd recommend this if you guys are starting out. The money that you spend on a subscription like this is
03:19so small compared to the massive productivity benefits that despite the fact that it's $17, I personally would not even raise an eyebrow. It's no small stretch to say that Cloud Code probably delivers me productivity benefits on the order of 10 to $15,000
03:33a month because it's not only just skilled as a developer might be, which allows me to build systems that alleviate stresses and strain in my life, But it's much more than a developer as well. It's basically my second brain at this point.
03:45After you click try Claude, it'll take you to a page where you have to log in. And once you're done, you can then create your account for the very first time. So I'd select both of these.
03:53I'm not gonna subscribe to occasional product updates because my email inbox is busy enough. And then you have an onboarding screen with some personal information. So I'm just gonna fill that out and then once I'm done, circle back.
04:02Okay. So I'm Canadian and unfortunately, our dollars convert quite poorly to Freedom dollars.
04:08So the $17 that we saw earlier is $28 in my own currency. I'm gonna click get pro plan and then walk through the payment details below.
04:16Cool. And now I have a Cloud subscription. This is all that you need in order to get set up.
04:20Everything else is totally free. From here on out, the simplest way to get up and running with Cloud Code is just opening up a terminal instance. That'll seem pretty intimidating to a lot of you, so I'm not just gonna show you how to do it in the terminal.
04:30I'm also gonna show you how to do it using what's called their graphical user interface, which they put together four or five months ago. Any resource that I show you throughout this course is probably gonna look a little different by the time that you look at it versus when I'm looking at it. And that's because Cloud Code, Anthropic and just AI tools in general change really quickly.
04:47Especially since most of the developers are also using Cloud Code. So it kind of multiplies the productivity here. What's important is not the specific layout, the colors, the the the words on the screen.
04:57What's more important is that you just know how to find it. And so, the number one resource that I personally use to look up advanced Cloud Code features is in the Cloud Code documentation. It's at code.claud.com/docs.
05:10Whatever language you speak, just pump in there and then it'll automatically translate that over too. So the Claude code docs specify that in order to install Claude code in your system for the first time, you can run what's called a curl command here. If you're running a Windows PowerShell, you know, you can run this.
05:24Windows CMD, can run that. Just so we're all on the same page here, when you have little snippets of text like this, what they're telling you to do is basically to open up a terminal or a command prompt. So on Mac OS, Linux or WSL, which are all different operating systems, in order to open up a terminal, you just type terminal.
05:42When you do so, you then get a terminal. Now this terminal might look a little intimidating to you if it's your first time ever using something like that. But don't worry about it too much.
05:50I just wanted to show you guys how easy it is to get set up with Cloud Code in this. And then afterwards, as mentioned, we'll we'll do the graphical user interface stuff. Okay.
05:57So this is what it looks like on Mac. If you guys are on a Windows, then you'll have to use the Windows key search bar. Then it'll look up something like CMD or command prompt.
06:05At the end of it, you'll get something that looks pretty similar to this. From here on out, all we have to do is we have to copy over the command that it gives us. So because we want a native install and I'm in Mac OS, I'm just gonna copy over this command.
06:16Also click this little button over here and then I'll tab back. I'm gonna paste it in and press enter. From here on out, a bunch of complicated
06:22things are going to occur. If you don't already have it installed, may take you a little bit longer. But now,
06:27we're good to go. Claude code is installed on our computer. Once you're done with all that, all you have to do in order to use Claude is just type the word Claude directly into your terminal.
06:36It's really that easy. Now, if it's the very first time that you're logging in, you'll also have to authenticate and it'll ask you to do so automatically when you open this stuff up. If not, you can also type backslash
06:46l o g I n. Once you've clicked this, it'll tell you, Cloud Code can be used with your Cloud subscription or build based on API usage through your console account. How would you like to set up?
06:57Now in our case, we're using the cheapest, most effective method, which is the pro max team or enterprise subscription. It's also the most straightforward, which is why it's the one that I used in this course. I'm just going to click enter.
07:08And then it'll then log you into your Claude account, the one that you just set up a moment ago. Once we're done, you're all set up for Claude code. You can close this window, then alt tab back and you'll see that it's going to say, just press enter to continue.
07:21Now, just so we're all on the same page here, all we've really done so far is we've just opened up a chat interface with an AI model. It's just instead of it being in like a nice desktop application or on the web, it's in our terminal. And the value here is instead of running an AI model on the web or in some distant cloud server, what we're doing now is we're running it locally on our computer.
07:40So we actually have the ability to take this model and then locally modify files on our computer. Write scripts, write stories, write poems,
07:50restructure our file organizer, clean up our our PC or our Mac. Like, this thing is currently connected to my computer. And I'll run you guys through how permissions and all that stuff work later on in the course as I talked about in the outline.
08:02But even this alone makes it extraordinarily powerful. So this screen can look pretty intimidating for beginners.
08:08Most people end up using the terminal flow, not the GUI flow. I'm But going to explain to you what you guys see here just for simplicity.
08:15In the top left hand corner, you have that cute little Claude code widget. I think it's I don't know if it was supposed to be a crab or like a jellyfish, but it's adorable. Then you have Claude code and the actual version up above.
08:24Underneath, have the model that you're currently using. In my case, I'm using Opus 4.6. Then you have the plan that you're on.
08:30In my case, Claude Max. So this is a couple levels up from the pro plan. And then, perhaps most importantly, you have the current working directory.
08:37As I mentioned to you a moment ago, this is working inside of your computer in a specific folder. And so, Claude code currently lives inside slash users slash Nick Seraev, which is basically like the the home folder, at least on my Mac OS. Here is your previous command and so I just wrote clear because I wanted to clear it all the way up and give you guys a fresh canvas.
08:57Here is where you actually insert the text. So when you type stuff, it pops up. Underneath here, tells you the model again.
09:04Then it gives you various modes. So in my mode right now, I'm in bypass permissions. This is sort of like a dangerous mode.
09:10It's a mode that not a lot of people feel super comfortable with. But it's the mode that I prefer for knowledge work and intellectually valuable tasks and I'll run you guys through more of that later on. But you can cycle through modes simply by clicking shift and tab, which I'll show you guys how to do.
09:23And then there's some additional information here. There's some version, the latest, and then over here is at least my case the the the token readout. And you know what's really cool?
09:31You can actually adjust this. This sort of thing is your your cloud code status line, which I'm also gonna run you through it. You can make it all colorful and all wonky and really fun.
09:39You can have it display whatever the heck you want. So the very first thing I'm going to do is I'm just gonna say, hey, how's it going? And immediately after, I'm gonna take a screenshot so I could show you guys some more information.
09:48So opening this up in my drawing tool, what ended up happening is immediately after we said, hey, how's it going? You see that another prompt showed up called finagling. This is, uh, one of like a thousand different words that Claude code uses.
10:01Basically, anytime it's thinking, it's gonna use some funny term like finagling or processing or, uh, I don't know, rumpeting or considering or what whatever the heck. They're pretty funny and the cool thing is you can customize that.
10:13Next, you have the number of seconds that your your query has lasted. So I just said, hey, how's it going? And then two seconds in, it's now produced five tokens for me.
10:22And then finally, you also have the the token count. So just so we're on the same page, a token is not the same as a word, but at least for the purposes of most of what you do, you can consider a token to be similar to a word. For instance, said, hey, how's it going?
10:34Um, this is not one, two, three, four. This isn't four tokens. It might be four words.
10:38It's probably closer to six or seven tokens, but just think about tokens as being analogous towards just a few more, if that makes sense. You'll also see that an additional piece of information popped up down here called context. And this is really important.
10:49Um, context goes from zero to a 100% and that's how much basically, um, conversation history you have in the current chat window with your current instance of Cloud Code. This becomes really important later when you're designing a better context management techniques, which is a big portion of what this course is going to be all about.
11:05Because at least as of the time of this recording, context management is sort of like the the big bottleneck in getting these systems to do more and better for you. You'll also notice that on the right hand side, my token counter, uh, my status line here, it it went up significantly. And so basically, what this means is at about 20,000 tokens or so, we're about 10% of the way through,
11:25um, our entire conversation thread that's allotted to us. What's really cool is Claude code will take all of that history and at regular intervals, it'll actually compress that for you by increasing the information density, taking a string of text and then making it higher information density and higher information density and higher information density successively.
11:43So that even if you wrote something in kind of like a, you know, a bloated way, a way that, you you know, you could have used fewer words to say. Um, as your context goes up and longer, um, cloud will automatically manage that for you to ensure that you're within the window. So that's how to set up cloud code in the terminal.
11:57Hopefully, we're all on the same page. Terminals are really similar to graphical user interfaces, which I'm about to show you in a moment. I do recommend that you guys get used to using it in terminal because when you use it in terminal, you basically unlock even more functionality.
12:08You could run a bunch of these side by side. You could run different terminal tools and whatnot that give you guys fast refresh times and we'll cover that sort of stuff later. But what I wanna do now is I wanna show you guys how to run it in a graphical user interface.
12:20And these graphical user interfaces are typically managed by what's called an integrated development environment. Well, that takes us to the next logical question, which is Nick, what is an integrated development environment? An integrated development environment,
12:33also termed IDE, is basically three things put together. Okay?
12:38It's a file folder organizer,
12:42plus a text editor,
12:47plus an AI chat widget.
12:52Similar to what you get if you go on chatgpd.com or cloud.ai. So, you know how on my Mac, if I go finder, I open up a basically series of folders where I can select different files and open them up and so on and so forth.
13:06You can do the same thing on Windows if you just type in folder or I don't know, the c drive or whatnot. Well, an ID is basically that plus something like notepad or notes, plus something like chat gbt all in one.
13:18And right now, we have two major IDEs that the market is tending towards. The first is called Visual Studio Code and the second is called anti gravity. Visual Studio Code is sort of like the o g one because anti gravity is actually built on it.
13:32Um, it was developed a lot longer by Microsoft. It's really, really extensible. It has great support and it's very straightforward.
13:40So I'm gonna show you guys how to set things up on it. But anti gravity, I would consider to basically be Visual Studio two point o. So not only does it have most of the same features now, although it is some of them are still kind of a little beta ish.
13:53It's also a lot more modern. And then there's a much bigger focus on AI, which is obviously kind of the whole point of this course. So I'm gonna be showing you guys initially how to set things up in Visual Studio Code, then I'm gonna do anti gravity.
14:04And then for the rest of the course, we're just gonna be doing all of our work inside of anti gravity. And anti gravity is really cool. There's some additional functionality within anti gravity not even tied to Cloud Code.
14:12So the first thing we need to do is obviously we need to set up Visual Studio Code. In order to do that, just head over to Visual Studio Code on Google over here and then download for whatever your specific application is. In my case, I'm downloading the Mac OS.
14:26I'm then going to have the download appear in the top right hand corner. I'm then gonna give that a click and then go download unverified file. And then over here, on a Mac, you again have to drag the little window over, so I'm I'm just gonna do that.
14:37And once you're done, you're gonna have a page that looks something like this. So remember earlier how I said it was like a file editor? Well, that's what this little left hand side is about.
14:45If I click open a folder, I can actually go through and I can open a folder on my computer. So why don't I just go and open, I don't know, left click contact. Okay.
14:53So now I'm inside of the left click contact folder and you can see we have some files here at gitignore, claw.nd, contact index and a netlify.toml.
15:02Already goes through all that sort of stuff in a moment. It's not super important for now. But this is sort of like where the file explorer functionality comes in.
15:10If I were to click on one of these, as you could see, we've now opened up a big text editor right in the middle of the screen. And so this is a bunch of CSS. It's a programming language.
15:18What's really cool is with Cloud Code, you don't actually have to know how to read any of the stuff. It'll just tell you everything. And so that is the text editor functionality.
15:25I can make changes. Hey, what's up? You know, I could create a new file here if I wanted to called message dot m d and I could say, hey, how's it going YouTube?
15:37So just like in that way, we basically have file editing functionality and then we can also select files to work on and stuff like that. And then on the right hand side, have an agent tab, which is where you have your chat interface with AI. Now, right out of the gate, the Versus Code chat interface isn't actually Claude code.
15:53In order to access Claude code, have to download it as an extension. So I'm gonna run you guys through that right now. On the left hand side here, click on these little blocks, then just type Claude code.
16:03You'll see a variety of these. The one that you're looking for is the one that's developed by Anthropic, the one with that little check mark in it. Be very wary of downloading extensions that are not from official
16:12developers and vendors like Anthropic, simply because people have been known to insert malware and and different things like that in these. So very important that you're that you preferentially use verified sources.
16:22In my case, I've already installed this, but all you have to do is go through that little installation wizard here. Now once you're done, you will have access to Cloud Code. The question is, okay, I have access to Claude code.
16:32How do I actually use it? Well, it's really easy. If you just go to the top right hand corner of this little agent window, you now can just click on Claude code.
16:38But you'll also see that there's a Claude logo up here as well. What the hell does this mean? If you click on this, you'll open up just like another window.
16:45And in my case, open it up with a terminal default. So it's gonna open up this in the terminal. This can be pretty intimidating and kind of annoying to be honest, juggling all these things.
16:54Just gonna zoom in so it's easier for us to see. So my recommendation is, at least for beginners, just stick to the one on the right. That one's simpler.
17:01And as you could see, it's a different user interface than the terminal. Okay. So how exactly do you use this and what are all of the different features and buttons and stuff like that?
17:09Covering the interface, obviously, up top, you have the past conversations tab. And so as you build up more conversation history, you'll actually be able to jump back to any prior conversation you've had with Cloud Code over here. You can do that both locally and then on the web.
17:23I don't have access to either of these yet because I just set this up fresh for you guys. Underneath that, you have the Claude Code logo. Underneath that, you have that cute little jellyfish or lobster, whatever the heck it is.
17:34Underneath, you have your little chat window. So here's where I can actually talk to Claude.
17:38Hey, Claude. What's up? Once we open this, you'll see that similarly to how we had before, we have that little accomplishing,
17:47fidgeting, whatever. We have that little like process, uh, text come up. After that, you then have the response.
17:53The response comes in in this little window, although you'll see it's different when it accesses files and stuff like that. Underneath at the very bottom left hand corner, you have the various permission modes. Remember how earlier mine said, uh, dangerously skip permissions?
18:05We can do the same thing here. If you just click on this, you can cycle through all of the different possible modes, and you see that little window around the chatbot also changes. So, uh, in my case, I'm asking before edits, which means because this is running locally on my computer, before it makes any changes to any local files, I'm gonna say, hey, just ask me to make sure.
18:23Now, is pretty safe and a lot of people, especially coders and and, you know, developers that are a little more old school will usually work like this. But personally, given that when Claude's really in the thick of things, it's asking me for edits every five freaking seconds. If you really wanna unlock that productivity, as I talked about before, you either use edit automatically
18:40or use bypass permissions. And I'll cover plan mode and whatnot later as well. To the right of that is and this is kind of intimidating for some people to understand, but this is the file that is currently being fed in as context.
18:52So for instance, do you see how here it says index dot HTML? And if I click this, I get this little eye icon. Well, if I leave this open, basically, Claude is currently looking at this file.
19:02So what file are you looking at right now? It'll now tell me that it's looking through the index dot HTML that's open in my editor. Hasn't read through the contents yet because reading through the contents of this massive file would feed a fair amount of tokens into context, which would charge me a fair amount of money.
19:20So right now, it's not doing any of that. But suffice to say, I can actually edit this in real time. Yes.
19:24Change the title to Nick's YouTube example.
19:29And what it's gonna do is it's gonna go through my file. It's going to find the title, which is listed right over here, then it's going to change that for me. This is an example of a really simple, easy and straightforward change, but I could do way more.
19:42I could refactor this whole thing from light dark mode to light mode. So I'm actually gonna ask it to do so. Refactor this index HTML from dark mode to light mode.
19:52And if you don't know what this means, it's okay. Bear with me. We're actually gonna rebuild a whole app using Claude code and various design
19:58patterns in a moment. The first thing it'll do is it'll try planning out the changes that it's going to make. And so it's doing a bunch of programmatic
20:06adjacent things right now, like it's filtering out a bunch of, you know, different CSS snippets. It's doing a fair amount of work here. And you don't need to be a programmer to understand what's going on.
20:16We basically now given this a task, it's deconstructing the task into a list of high level steps. Then it's gonna go through and it's actually going to present this plan to me for me to say yes or no to. Now, you'll notice that when I did this, in addition to the interface changing and now the colors being blue, in the bottom right hand corner, we now have sort of a little pause button.
20:33This pause button is pretty important because it allows us to actually stop a clawed code execution in process, like while it's working. So I could theoretically change this at any point in time.
20:42Okay. And I can actually pause it and then maybe I could give it some more instructions or, uh, I don't know, tell it to do something differently. So I'm actually gonna click this little button, then I'm gonna go bypass permissions.
20:51I'll say no plan, just do it. And what I've done is I've I've interrupted the process and the tool call and now it's gonna go through and instead of having to do this big fat plan, I'm just gonna say, it's the wild wild west buddy, just get in there and start making some changes. When I did this, you'll notice that there's now a thinking tab that's open.
21:08If you click on this, you can actually peer into the internal thoughts of Claude as it goes through and accomplishes your request. So in this case, I said the user wants me to just refactor the dark mode to light mode without planning.
21:20Let me read the whole file, understand all the colors, and then make the changes. And as you see, we just had some changes made, which is what this little blue thing is here, showing that we've made, you know, the changes.
21:31So immediately after thinking, and then did some more thinking, then down at the very bottom, it's now updated a bunch of the sections of my code and it's continuing down some little to do list. So this is how you interact with Cloud Code through the graphical user interface.
21:45And there are a couple of additional things like you can click on this button to attach files and folders and use the browser. You can also check all of the commands here, which are pretty powerful stuff and I'll cover them all in due time. So that's Claude code in Visual Studio Code, Versus Code.
21:58Let's now cover how it looks in anti gravity, how to set that up, and then immediately after we're gonna build an actual real web app using Claude Code. As expected, anti gravity is pretty similar. They have a website here called antigravity.google.
22:09It's very sexy and clean. Wouldn't be surprised they built this with agents. You just click download for whatever your specific,
22:15you know, operating system is. In my case, Mac OS with Apple Silicon, gonna give that click. Then we'll go through that same process that we just did for Versus Code.
22:22Once you open up anti gravity, it looks very similar to what we just saw a moment ago with Versus Code. And that's because the two are sort of built on each other. So just like Versus Code was both a file explorer,
22:33a file editor, kind of a notepad and an agent manager. You can see here we have those three same ideas. On the left hand side, we're gonna have the folders.
22:40On the middle, we're gonna be able to edit the text of the files that we work with. And then on the right hand side, we can actually talk to agents. First thing I'm gonna do is I'll click open folder and we'll go back to, I don't know, left click contact just so you guys could see what we're dealing with.
22:53And you'll you'll understand here that the UX is just slightly different than what we had earlier. Um, you know, some things are indented. We have like some little cool symbols in the left hand sides of the file.
23:01This isn't super important, but I just think anti gravity looks cleaner, is why I like using it. In the middle here, if I click this index on HTML, you'll see that we also have the text pop up just like we did earlier. And the only real difference between anti gravity and Versus code is just what we have in this right hand side.
23:16Earlier, we we could have used Claude code really easily because there was an actual dedicated Claude code button. Right now, there isn't. In order to access Claude code, assuming that you've installed it, so head over here, Claude code for Versus code, give that installation button a click.
23:29Assuming that we've installed it, what we have to do instead is we have to double click somewhere here and then click on this little Claude icon. Okay? And then, just delete the agent icon, and now you have the same layout that we had earlier in Versus code, just now you have it with with Claude code.
23:42The reason why is just because anti gravity is a Google product, so they try and push the Google Gemini series of models. That's what we had on the right hand side earlier. And to be clear, this is a Cloud Code specific course, but you can also use whatever model you want to do whatever purpose.
23:54Like, the model type is less important than just the fact that you're really good at using it and the fact that it's smart. So exact same layout here. Not gonna cover it anymore.
24:02Let's get into actually building some stuff. So let's now build our very first app slash web page with Claude code.
24:10For simplicity's sake, I'm starting with probably the most straightforward build, which is just going to be a web page and we're not just gonna do the hero header, which is the top or above the fold section. We're gonna do the the whole website.
24:23And the reason why I'm starting with this is because I just want everybody to understand how good clog code and similar tools have gotten at being able to design high quality websites. This is a site up here called godly.website, and what it does is it basically just showcases really high quality design.
24:39And every single one of these, with maybe just a couple of exceptions, is now doable in probably, I wanna say, less than ten minutes or so front to back using Claude code.
24:52This isn't me just, you know, pretending. This is something that I have done myself dozens of times. I've built really high quality websites.
24:58The other day, built like 15 or so for a project. Um, they all look just like this. So award winning design, uh, award winning app functionality and stuff like that.
25:07These are just a few of the things that you guys are gonna learn today. In addition, you're also going to learn how claud dot m d, which is the system brain file affects your prompts. I'm gonna run you guys through the three major ways that people currently design sites and the various ways that you guys could use these approaches to both design websites, apps, more or less anything else you want.
25:28Then I'm also gonna talk a little bit about deploying. So let's start with claud.md. I have open in antigravity here,
25:36the same workspace that we were looking at before with just a couple of changes. Namely, there's this node underscore modules folder here, which you guys don't have to pay attention to. This is automatically generated by Claude code every time we use a library or use some sort of npm package.
25:52And then underneath, we have claw.md. Now claw.md, as mentioned, is the brain
25:57of your workspace. To make it really, really simple and straightforward for you, because I think a lot of people misunderstand how claw.md's work, Let's just look at a hypothetical conversation. Over here,
26:09let's say you are on the right hand side. And so what you do, k, is you say, hey, research
26:18x for me. Research, I don't know, the best trending posts on Twitter in my niche, whatever the heck. Right?
26:26And then what ends up happening is the model afterwards, Claude, whatever you're using, whether it's Opus 4.6 or 4.5 or Sonnet or Haiku, it'll respond to you in purple saying, sure, one moment.
26:37After it returns whatever you want, then, you know, you continue in this vein. And so what I'm trying to get at is there's a pattern here.
26:45Right? There's user and then there's model, and then there's user and then there's model. The way that the claw dot m d prompt works
26:54is basically at the very first message, before you even get to that point, what's hidden from you is the fact that there's actually another prompt.
27:04K. This prompt is injected at the very top of your conversation string before you even send the first message. And so, this Claude NMD being sort of the very first thing that the model reads and sort of internalizes
27:17is really, really important to help steer the output of the ship. Now, what is steering the output of the ship? Well, I often use an analogy here.
27:26Let's say you're somewhere on the East Coast of, you know, North America. And you're trying to go to, I don't know, let's say the West Most Coast of Africa or something like that. As you guys know, these intervening distances are are really huge.
27:39These are I don't actually know how long it is, but probably at least 10,000 kilometers or so. Now, if your ship positioned right over here, okay, and this is your port
27:49and your goal port is over here. Let's hypothetically say, you have limited ability to steer the ship. For whatever reason, the steering wheel or whatever the ship equivalent is, it just doesn't really turn that much.
28:01What that means is, if you wanted to make it as close as humanly possible to that x, what you would have to do, logically, is you'd have to make sure you're very, very accurate at least when you leave the the port.
28:14And the reason why is because if you're not, k, if you give even a very slight range of possible, I wanna say angles that you could go,
28:23k? It may not seem like that big of a difference if you go, you know, from this line to this line, at least initially.
28:30Right? But over an intervening distance of tens of thousands of kilometers, obviously, this goes, you know, a very, very long way away from what your what your goal is. And so steerability in AI
28:40is basically when you try and minimize the number of potential or the width of all of the potential options.
28:50And so what claude.md does is it allows you to take the space of like, you know, a really wide angle of ways that the AI could go. K? And it's like, I don't even know where that we're gonna go if we take that topmost path.
29:01And then compress it down into a much more likely subset of possible options
29:08that the AI could go. Such that, you know, if you were to be even slightly off here, the impact on your final destination, while, you know, you wouldn't make it to your goal, you'd still make it pretty close.
29:19So I want you to treat your Claude. Md as basically that initial trajectory that you launch all of your Claude sessions, whether in terminal or whether in the GUI tool like I'm showing up here.
29:31So with that understood, now that we're on the same page about how Cloud NMD is injected at the very front of any conversation, you start to realize that there's a tremendous amount of value in making that Cloud NMD as high quality as possible. Okay?
29:44So including a file, capital c l a u d e dot m d in any workspace project directory,
29:52means that this is now injected at the front of our conversation. And so, you don't talk to this any differently than you would clot itself.
29:59This is just a file that standardizes it and makes it really easy to build in like conventions for different workspaces. In such a file, you're going to want to be very concise and you're also going to want to give it sort of the bounds of what this workspace is for. I could just as well actually copy this whole thing over.
30:16Okay. And then paste this directly into my Cloud Code and then just get rid of my Cloud MD entirely. But the value in having a Cloud MD is I just don't have to do that every time.
30:25It's initialized very top of that conversation history like we just saw. And so what's in here, to be honest, is not super important. I actually had another version of Claude just develop this based off some Twitter
30:37posts that I saw that talked all about how to build websites with best practices. And you guys have access to all this stuff down below. I obviously have that template folder, um, that you guys could use to to get this and anything else.
30:48But suffice to say, um, this is how or one of the ways rather that you can currently design websites using Cloud Code. So the three major ways that people are currently using Claude code and other agents to do designs are as follows. The first is that you give it a pre existing design and then you give it the ability to screenshot itself over and over and over and over again.
31:09And basically, what happens is the first variant that they create, that Cloud Code creates, will be like an 80% match. Then it'll screenshot that, compare it directly to the source image,
31:21and then list all the differences, and then get 90% of the way there. And then it'll get 95% of the way there. And it usually can't get a 100% of the way there, but it can get like 99% of the way.
31:31The value in this sort of approach is what we're doing is we're basically taking an inspiration website. And so in our case, we're gonna be using it on this site here. And then we're using that to template out a bunch of like design fundamentals.
31:42So like the size of the text, the colors, the the way the buttons look and stuff. And then what you do is you just change the content of the site with Claude, so that it's like whatever site you want it to make. So in my case, you know, I run this business called LeftClick.
31:54This is my AI automation agency. You know, we help people install growth systems into their businesses, typically b to b agencies. So what I would do is I would basically try and rebuild this site using this design.
32:05And, you know, I can make some minor changes afterwards. But so long as I start with this nugget, Claude tends to do a really good job afterwards. The second way to build is you basically just give it a massive voice transcript dump.
32:16For those of you that didn't know, there are now ways for us to basically dump like a large amount of text using a voice transcript tool. I'll show you guys what that looks like now. But if I just hold this f n key, this little widget appears in the bottom of my screen.
32:28Now this is listening to everything that I say and because I can speak a lot faster than I can type, I can actually say a fair amount in a pretty short period of time. Most people type between 50 to maybe 70 words a minute, but we talk closer to 200 words a minute. That's a two and a half to maybe three x improvement.
32:42And because these models are so intelligent and smart and capable of extracting the meaning from the text, you know, text is all they look at all day long. What you could do is you could just use a massive voice transcript dump to basically spell out everything that you want on the website. This isn't gonna one shot your website because we don't have a pre existing design, but then you can just go back and forth with it.
33:01And then in a fraction of the time of developing a real website using a voice transcript, we can get pretty close. The third major way people are currently designing is they use components. Now for anyone here unsure of what components are,
33:14basically, there are now services and tools out there like 20first.dev, where designers have created specific components on websites.
33:23And there are features on these where you can actually click on it and then click on this button up here, copy prompt. Okay. And then it will take this entire web page, entire design, you know, this little animation flickering thing, this jump on a call button, the sign up here button, whatever.
33:39And it'll copy all the text needed to have Claude code reproduce that for you. And so, it's really straightforward and simple. Just make an account on one of these services and then let's say you're building a website, you scroll through and you're like, wow, I really like this background paths component, right, with these cool sweeping things.
33:54I want that on my website. You would just copy the prompt, paste it in the Cloud Code and say, hey, install this thing somewhere up at the top. Because AI is great at language,
34:02uh, you know, you can get pretty close. So you can do all sorts of things with this. You could do like cool button borders as we see here.
34:08You could have like a sign in component over here. You could have multiple cards. You know, this stuff is okay.
34:14To be honest, I find it much easier just to go straight to number one, which is just giving it a design and a screenshot loop and just having it work off of something preexisting. And I want you guys to think of this as like you copying a design.
34:25As you'll see, the end result will be quite different from this. But it's just a good way for you to like get a rough idea of the end design. And also not have to worry about things like the sizes of fonts, you know, the the the colors and and so on and so forth.
34:38Okay. So we're basically gonna use this as like our inspiration. And then once we have our inspiration in place, Cloud's gonna be able to design whatever we want, whether it's an app or a dashboard or whatnot very, very quickly.
34:48The final thing that I have to talk about before we actually do the designing is the difference between building something and then deploying. So when you build something, you're typically building it locally. When you do a tool, an automation, like we're gonna do later on in the course, or an app or a website, you know, we're we're running this thing on our local computer.
35:05But if we want other people to be able to access it, then obviously, we need to deploy it. We need to push it onto the Internet. And a variety of different tools that allow you to do so.
35:12So today, I'm just gonna show you how to build the stuff. And then over the course of the next few modules, as we get deeper and deeper into the course, I'll also talk a little bit about tools like Netlify, Vercel, Modal, and whatnot that allow you to pull to push both your software, uh, the tools that you make and then even things like websites and and full fledged apps to the cloud so that other people can access it on a domain like, you know, nicksawesometool.com.
35:35Okay. So without further ado, how would I actually go about this design process? Well, as mentioned, I have this Claude dot m d file set up here and this is just something that I had Claude basically scraped through Twitter to find me the best practices of all of the different types of website designs out there that people are currently using Claude and other tools to create.
35:51And then I just had to like write me a little a little script, basically, little summary. And this is very squarely this give it a design screenshot loop. It's just written in like a very particular way.
36:00You do not need to know how the tools work. Don't need to know how anything works. You basically just need to know how to like find resource out there, or use AI to find a resource, and then use it to make your own Cloud.
36:08D. With that in mind, what I'm going to do now is I'm actually just going to go on the website that I want, I'm gonna screenshot it. However, if you guys aren't familiar,
36:15you know, if I just screenshot like one section of the site, like this for instance on Mac, then I feed it in. You know, I I don't actually have most of the site. Right?
36:22I only have that hero header. Okay. In terms of how to actually build this puppy,
36:26use command shift I or right click on the page and then type inspect. This will open up a window that looks something like this.
36:35Once you're done, change the dimensions to full page width on desktop. That's usually nineteen twenty by ten eighty. This is termed the widescreen aspect ratio.
36:44Then, just hold command shift p. I think it's control shift p on Windows. You'll open up this little command bar.
36:50With this command bar in place, you can then just type in screenshot and then go capture full size screenshot. It'll actually scroll through the whole site and take an entire screenshot for you. If I click on this button now, as you guys could see, we now have a screenshot of the entire website top to bottom.
37:04It's kind of a hack. Not a lot of people realize that you can do this, but you can. It's pretty neat.
37:08And once we have this, we just have to do one more thing. It's pretty big right now. If you were to send Cloud Code, you know, like 20 megabytes or something like that, a file.
37:16Number one, it would like really massively eat up your token limits. And then two, I think the API might have like a limit on this. We just have to make this file significantly smaller.
37:24So I'm just gonna open up this resize PNG file here, page called resize PNG from iloveimage.com. You can use whatever the heck you want.
37:32And I'm just gonna drag and drop this in. I don't know, 50% smaller? Maybe even like 75% smaller.
37:38And then click resize images. This is now going to basically remap this for us. Let me click download.
37:43What we're looking for is we're looking to get a file that's less than about, I wanna say, I think like four or five megabytes or so.
37:51So it's not perfect. K. It's a little bit blurry, but it's alright.
37:54Maybe I'm just gonna go back and resize this one more time so that it's I don't know, maybe a little bit bigger. Let's do 50% smaller instead of 75%. Okay.
38:02Once we're done, we can click download resized images. This one is about four megabytes or so. If we open it up,
38:07you could see that it's still high quality, but it's much much smaller than the other file, which is like three or four times. And now that we're done, we just add this in a cloud code. So back to our cloud code instance, I'm gonna go down here to bypass permissions.
38:19Then I just need to go find the file, so I'm gonna click this, top right hand corner. And I'm just gonna see if I can drag this in directly. K.
38:26So it's gonna open this up. That's okay. Just zoom in, copy,
38:29and then you can actually paste this in directly. K.
38:34So just click that copy button, paste it, and now you actually have the whole file as context. K. And then we just have to do one more thing.
38:40We're just gonna head back to the website. I'm going to find actual and then scroll down to this little body tag and then right click and press copy styles.
38:48This is gonna copy the styles of the site including the button colors and sort of like the little gradients in the background and and so on and so forth. You can paste that in. K.
38:57And then I'm just gonna press enter. Now that we've uploaded these, keep in mind that despite the fact that this might mean nothing to you or I, keep in mind that there's that extra prompt that's been injected up at the top that literally says when the user provides a reference image, screenshot, and optionally some CSS classes or style notes, you should generate a website.
39:17So that's what it's doing immediately. It's analyzing the reference image and building this website recreation. Let me start by creating the actual HTML file.
39:24So this will now walk through its own little to do list, take screenshots of its created website, compare it with round one, basically do the same thing over and over and over and over again until it gets to where we want it to go. And this is really what I consider to be the core building philosophy
39:40for Cloud Code. What you do is you basically give it a high level task, which in our case, we did with the cloud.md. Okay?
39:47Then, we allow it to do the task. And then we allow it to verify or basically judge
39:55its results. I think the reason why a lot of people end up sucking a Claude code or maybe they end up giving it instructions and then not being satisfied with those results is they'll just give it the task, and then it'll do the task. And then their loop is kinda like this.
40:09Right? Task, do the task, give it another task, do the task, so on and so on and so forth. If you don't give Cloud Code the ability to verify its own results, either visually through a screenshot tool, or if you're building some sort of software through, like, um, automated testing mechanisms and and so on and so forth, test driven development,
40:24then, uh, you lose, the vast majority of the value of AI. The reality is AI is not gonna be perfect the very first time, but the value of AI is not in its ability to one shot everything 100. The value of AI is its speed because you can have it get to 80%.
40:39Let's say this is like a, I don't know, a little quality bar or something.
40:45You know, what you can do is you can immediately you know, it's not just gonna be like, if this is time step one, two, three, it's not just immediately gonna be at a 100%. Right?
40:53That's just that's not what it does. It's not gonna go from here to here in like two seconds and be done. What it is going to do though is
41:00it's very quickly gonna start here, then it'll go here, then it'll go here, then it'll go here.
41:07And then eventually, after two or three or four time steps, it'll it'll hit that 100%. And, you know, we think that this is a really long period of time.
41:15K? But in reality, this is like five minutes. And if you contrast this with how long it would take a human to do that same, you know, approach, you know, humans will probably get closer to 100% quality on their very first go, but it's not gonna be like a minute or two.
41:30What this is gonna be is it's gonna be like, I don't know, five hours. You know, we actually, believe it or not, tend to be a lot more precise than these machines that we've built. We can one shot things to a much greater degree than they can, But their ability to test and then retest and work really really quickly, orders of magnitude times faster than we do, is the real value and that's something that I don't think enough people talk about.
41:48So just make sure there's always a task, do the task and then verify the results loop somewhere in here and you'll be fine. Now heading back to our, um, Cloud Code instance, you could see now actually completed the first round of its HTML.
42:01Now it's, um, screenshotted it as well and then it's basically comparing the screenshot to the work that it's generated. And with this, it's going to make minor changes. So as you see, the very first thing it's done is it's replicated the get paid the same day by setting a payment link or the most flexible invoice in the planet with the buttons and so on and so forth.
42:17Okay. It's also replicated that top section and it's used little placeholders here with these 160 times a 100 little buttons, even with like the right tilts and and whatnot because it doesn't have access to the images.
42:30It then is, uh, you know, entering these little dibs right. It's even got this cool little post it note, is really cool and then it even has the reviews.
42:37And so, as sort of like rebuilding the design of this website, it's doing a really good job and we're only a couple minutes in. What's cool too is if you check out the thinking tab, you could see that it's gone through iteratively every section of the site. K.
42:49And it's, you know, listing what it needs to do next. So better decorative elements in hero, better floating band, fixing the blue dot positioning, improving the invoice cards with map thumbnails. I don't know what half of this stuff means, to be honest for me, it's not super important.
43:00And just because I want it to be a little bit special and then show you the parallel capacity of Cloud Code, what I've done here is I've actually opened up another anti gravity instance. And what I'm going to show you guys how to do is actually design multiple of these simultaneously. Once we built this test,
43:15this do test and then verify loop over and over and over again, which we already have in our Cloud NMD, It's actually really easy to spin up multiple prompts and just have like 10 versions of Cloud working on things simultaneously. So just for shits and giggles, why don't we head back over to our little website designer.
43:30It's like giving me a file here called Twingate. Okay. And then I'm pasting it all in.
43:34And now my computer's really humming, like, you guys probably can't hear this because I like to noise cancel most things, but it's making some noise. And the reason why is because I now have two of these instances running simultaneously, developing me a website.
43:46On the left hand side of things, just expand this, um, we see that it's taken multiple screenshots. There's screenshot one,
43:53screenshot two, screenshot three. You guys see how it's getting closer and closer and closer to the end result?
43:58Well, now it's doing some final editing. It's making some features thumbnails better. On the right hand side, it's now going through the initial development of that new index dot HTML.
44:07And so because you can run as many cloud instances as you have tokens, basically, um, I can run as many of these website designers simultaneously in however many tabs I want. And this isn't even the most efficient way to do this.
44:17I'm gonna show you guys a much more effective terminal management structure that'll allow you to do like five or 10 or 20 of these simultaneously. Okay. On the left hand side, it's now saying it's done.
44:25So I'm gonna say open index dot HTML. That's always just gonna be the actual website file. And if you just tell it to open it, it's gonna go through and do so in a tab for you.
44:33Okay. And here is the demo of the website that we put together. So I mean, it's not perfect.
44:37It's not everything that I want, but it's good enough for us to start. So what I'll do now is I'll go back and I'll have it recreate left click. Hey, this is looking pretty solid so far.
44:46I'd like you to, um, check out leftclick.ai. That's my personal website. And what I want you to do is to design,
44:54uh, or take the information from leftclick.ai and then insert it into this website. I don't want this to be a clone of leftclick.ai, but I want it to be pretty close.
45:02Use the formatting and everything that you've developed so far to help place elements and stuff like that as necessary. Insert images as well and make sure that any elements that are there look good.
45:12Continue doing a screenshot loop if necessary until you have something that looks very high end, very professional and and minimalistic, just like you've already developed. Okay. So I just fed in a bunch of information.
45:22Now it's gonna go through, fetch the content from left click and then help me design the site. On the right hand side, we're creating that initial index. HTML.
45:29Now, in this case, I obviously did the two website design simultaneously manually. Uh, but what you can do is you can actually work this into your website or app design process. You'd actually have it take in, let's say, three different examples of, uh, templates or of design inspirations,
45:45whether from godly. Website or from, I don't know, Dribbble or one of these big design aggregators. And then in the Cloud.
45:52Md, you could say, hey, actually want you to develop three versions of this. Then you can give it some source and then you could actually just like let it do its little test verification retry loop before giving it, you know, a source website like in my case, left quick.ai to have it like do some modifications. Or maybe just doing a big voice dump of what your website is, what it's for, the various audiences you serve and stuff.
46:11And then at the end, could actually have three websites simultaneously that Claude presents to you after five or ten minutes and says, which one do you like the best? The options here are virtually unlimited.
46:19The other website developer so far has made this, which actually looks pretty reasonable. You can see that there's still some things that it needs to change. Some of the text looks like it's placed weirdly, some of the blog posts and stuff like that.
46:31Obviously, the development is mostly hands off at this point, I'm just monitoring it. And on the left hand side, we've now taken four screenshots of this and gotten really really close to that result. It's now building like the left click site itself.
46:42Most of the time, I don't actually care too much about what's in the file explorer. So that is the third panel on the left hand side of both of these windows. So for simplicity, what I do is actually just close it out.
46:53And then I usually have on the right hand side, some sort of output that AI has generated me. And then on the left hand side, I just have my my actual little chat window. I'm just gonna zoom out just a tiny bit here, so we're still all on the same page.
47:04CTAWe could see everything. And then that way, can now just orchestrate and kinda take a step back and see how things go. The left click design is also starting to come together.
47:12CTAAs you could see, we've taken that initial website from actual as inspiration. So we have like the same sort of buttons and the nice rounding, nice hover effects on things, and then obviously we have the font. Uh, but then now, we've actually replaced it with left click content.
47:25CTASo the definitive AI growth partner for fast moving b to b companies, tens of millions of dollars generated and more saved, proprietary systems, real revenue, no fluff. As we scroll through here, you can see it's even inserted like a little button and click video element. We all have our case studies down below.
47:38CTAWe have some pictures of me and my business partner, although we're kind of cut off at the middle of the head, so we could probably fix that. And, yeah, we've even got some testimonials, which is really really clean. Let's see what happens if I click this button.
47:48CTAOh, nice. It's even gone to our discovery page. We we we're actually like having button click functionality and stuff like that in here as well.
47:54CTAKinda curious what happens if I click on this. K. Nothing so far, but maybe I can tell it to do stuff.
47:58CTAWe also have an about and then we have a case study, so that's really nice. So yeah, I mean, things are progressing more or less exactly like we wanted them to. We even have our little logo.
48:06CTAFrom here on out, I'm just making minor changes and, you know, gonna go back and forth with it until I get what I want. So on the left hand side, I'm just gonna voice dump. In my voice transcription tool, I can do this like this.
48:17CTAI really like the output. I think the logo in the top left hand corner is a little too big. Make that smaller.
48:23CTAThe bolding of the hero header font is also quite strong. See if we could try a serif font instead of a sans serif font. Underneath the introducing left click section, we have a button player,
48:36CTAum, over the picture of myself and Alex Ramosy and Sam Evans. But when I click on this, nothing happens. Either turn this into a light box or, uh, eliminate that little button in the middle.
48:48CTAThe rest of these look great. My and Noah's profile pictures are currently cut off at around the middle of our foreheads. So move us down and zoom out of the photo slightly so that we're perfectly centered in frame and
49:02CTAeverything else here looks great. Meanwhile, on the right hand side, we see this index dot HTML is now done, so we can open this up. I'll say open in Chrome.
49:13CTAThat's now gonna open up the other version of that website for me and it's looking like it's pretty clean, it's pretty matched with what we have. So because I want to do the same thing that I did with the other source, I'm just gonna scroll back up to where I gave it the instructions to basically copy over left click. And then I'm just gonna paste this in.
49:30CTAAnd now I have this also customizing the site to my specs. You don't have to develop in multiple tabs. This is something that I think you learn how to do the more of these clog code agents, frankly, that you're orchestrating.
49:42CTAThe benefit to this is obviously, you can develop basically however many times faster as tabs that you have open. But the downside is you also tend to context switch a fair bit. The number one thing that you don't want clogged code to do is basically just sit around waiting for your instructions.
49:56CTASo if you are going to do it this way, just be honest with yourself and ask yourself whether or not there's always like clogged code operating in the background. I find if it's not running because it's waiting for you for more than maybe 10 or 20% of the time, you probably have too many tabs open. Personally, I cap out at about three or four.
50:12CTADepends on how intellectually heavy the things that I'm building are. And, you know, it's a learned skill. It's not something that you're gonna figure out right away.
50:18CTAThere's a fair amount of like remembering that you have to do as well. Um, I've built a couple of things to help me build things faster. One of them is a little hook.
50:26CTAThat's a chime that keeps on going off that you've probably been like, hey, what the heck is that thing? Um, that's something that you can do and I'll show you guys how to do a little bit later on in the course. With that knowledge, you can basically set different chimes for different windows.
50:38CTAAnd when chime one plays, for instance, you know that your top left window is done, so you can go give it some more instructions, look at the results. When chime two plays, you know, you can go to the top right window and and do some work there as well. All this stuff in due time.
50:49Okay. Now, we've implemented all of the changes that I want, including some changes that I didn't even mention. So you see here in the background, there's this very slight little vertical line design, um, that it pulled from my main website, which is really clean.
51:01I like that. Makes it makes it quite different. We also have a serif font instead of a sans serif.
51:06I like that. Makes me stand out a bit. As we scroll down, you can see that we have since removed that little play button, which didn't really make any sense and it was looking clean.
51:13We have all of our profile photos. I like how it kind of inset us a bit. Looks like my buddy Noah is still quite cut off, which is unfortunate.
51:19So I'm gonna have to fix that up. But the rest of this looks really good, which, you know, I'm a fan of. Let me just make sure all these buttons work again.
51:25Cool. That goes directly to our thing. With some minor changes, I think this website is basically ready to go.
51:30And looking at the other option here, we've more or less taken the same hero header. We have the calendar button working.
51:37You have this nice noise background, which I like. We still have some issues with the photos and them being cut off. You're gonna get stuff like this pretty pretty often, to be honest with that, but that's okay.
51:46You can also manually readjust them if necessary. I don't really like how there are two logos, so I'm just gonna do the same thing. Hey, this looks great.
51:54I don't like that there is both an image logo and then a text logo. Just have the text logo. We want a text gram, just called left click in the top left hand corner.
52:03The noise background gradient looks a little bit blurry, so
52:09remove that. Only keep it on the social proof section. Myself and Noah's
52:17faces look fine. Just move Nick Sariaf's head down about 15% as it's getting cut off a bit right now.
52:25Center of the testimonials and client review section. Right now, it's a little bit weirdly set off to the left. And then change the 2025
52:34copyright to 2026. That's all. And that looks a lot cleaner to me.
52:38We have our case studies nice and centered. Both of our heads are visible, which is really clean. We have our various services.
52:44And then down here, let me just click this button, make sure it opens that tab. Nice. So, I mean, you know, I wasn't juggling this and trying to show you guys how to do it realistically.
52:52Hopefully, you guys could see. You could build your own super clean, high end, sexy website in probably less than five minutes now, um, at least locally. Uh, later on in the the course, I'm gonna show you guys how to take this local website and then deploy it.
53:03That will similarly just take a few minutes once you know what you're doing and the various platforms to use. So you could take the same approach. You could use it to build an app.
53:10You could use it to build a dashboard. You could use it to build more or less whatever you want, whether, uh, you are sourcing websites from a repository like godlydot, uh, website or dot design or whatever, or you're doing this maybe a little more manually.
53:22Maybe you're actually going into apps that you really like and then you're using them as design inspo. Um, either way is perfectly fine. So long as you start with that level nugget, everything else as you guys see here gets a lot easier.
53:31And worth noting, um, I just designed for desktop today. But, uh, if you wanted to design for mobile or whatever, you do the exact same process. You would just do it with a mobile screenshot.
53:39Uh, if you are just designing for website, make sure that your websites are, you know, mobile and responsive and stuff like that, lest somebody open it up on their phone and get treated with, I don't know, my giant ass forehead. You can also do that in the agent really easy. Just say, hey, make sure this is nice and mobile optimized.
53:53I'm noticing x y z images in a weird place. Okay. So hopefully, you guys have now learned at least a little bit about the way to do a practical build and practical design with Cloud Code.
54:02As you see, lot of it's quite hands off. It's not, like, extraordinarily involved. What you do is you basically steer it, like I I I talked about before.
54:09You carve out the the river, and then you just give it a boat, and then it just goes along its way. So long as there's some sort of test driven development loop, some sort of screen shot or verification loop, uh, the quality that you can end up with is orders of magnitude better than not. And if you guys are ever wondering why you're not getting the results that you want, just make sure you have some sort of verification loop built in.
54:27Next up, we're gonna learn how to build significantly more complex tools, not just websites and visually designed things, but also whole back ends, whole architectures and things that you could use either to, I don't know, like launch your own SaaS product or build really cool internal tooling for yourself, your own personal life or for your team.
54:43Alright. Now that we've done a little bit of building with Cloud Code, we put together what I would consider to be pretty solid websites with just a few moments of work. Let's dive a little bit more into Cloud Code's advanced functionality.
54:54And I wanna let you guys know that what I'm about to talk about here, probably less than 10% of everybody that currently uses Cloud Code understands. So when you unlock what I'm going to be teaching you in this module, uh, you'll know significantly more about Cloud Code for one, and then you'll also be able to combine each of these cool different features in in fantastic ways that, uh, I think you'll quickly see the value of.
55:14So what is the dot claud directory? Just to be clear here, for anybody that doesn't know, in programming convention, first of this is a folder.
55:23And in programming convention, if you put a period in front of the folder, this basically hides the folder from view. And so if you just open it up in a file explorer, you wouldn't actually see.
55:32For instance, you know how like, um, I don't know, in my case, my computer is called Nick, and then underneath that, I might have some some other folders, maybe I'll have like a documents or something. Let's turn this off before that. It frustrates me.
55:43I might have a documents. Well, if under Nick, I stored another folder called dot hidden. If I were to open up my file explorer because it has appeared in front of it, because that just happens to be the convention, the file explorer wouldn't show it to me.
55:55So it's sort of like the developer way of, you know, building folders that don't really muck around and ruin your nice organization. So in Cloud Code's case, have a dot lowercase c, Cloud directory. And inside of this Cloud directory,
56:09there's basically support for like 10 or 15 cool advanced features that once you know, you can augment Cloud Code significantly more than sort of vanilla out of the box. So let's run through all of them together.
56:20This is what like a fully loaded dot Cloud folder would look like. Okay.
56:24And there's actually two levels to this and I'll cover both of them in a moment. But the one that I wanna talk about first is right over here. So inside of the dot Claude folder,
56:33you can add a settings dot JSON, which is team permissions and hooks. I'll talk about hooks a little bit later on, but that's how I get my cool little chime noise at the end of everyone.
56:42You have settings dot local dot JSON. Anytime you have a dot local inside of a file, um, this basically keeps it local on your computer as opposed to push it pushes it to a, uh, online repository. For those of you that are unaware, a lot of programmers and people people that use Cloud Code use,
56:58um, GitHub to basically store all of their active projects. Now because GitHub is a cloud service, there are some instances where you don't actually want the cloud service to have access to the data inside of your repo, particularly if it's quite sensitive stuff like, you know, tokens and and authentication keys and whatnot.
57:15So they developed this convention where you could just go dot local dot whatever, um, in order to kind of override that and then not push it to GitHub. You have the same pattern here with Claude, where your Claude dot m d lives, and then Claude DotLocalDotMD.
57:29This is again git ignored. That just means it's not gonna go over to GitHub. Then interestingly, you have an agents subfolder,
57:35you have a skills subfolder, you have a rules subfolder, and finally, have a hidden dot m c p dot json as well.
57:43You know, think if you're somebody coming into this without a technical background, you'd look at this and you'd like be like, oh my god, this looks insane. Like, what the hell is going on settings.json, settings.local.json.
57:52Why is Claude capitalized? What does MD mean? And I'm gonna explain all that stuff to you in due time.
57:58But for now, just know that these are basically the various buttons that Anthropic, the developers of Claude code, have given you that you could press to sort of customize your own instance. And each of these files, you can customize to whatever degree.
58:09You can add whatever the heck you want there. Some of these files reference other files. Um, you know, it it's really up to you and Claude because most people don't actually develop this stuff on their own.
58:18They actually, like, kinda co work with Claude to put together their own settings. But it it's up to you how intense you wanna go into. Personally, I just have a claude.md.
58:27Sometimes, I'll have skills and agents. I'll run you through sort of like my own eighty twenty setup later on in the course. Okay.
58:33So anyway, this dot claud folder actually lives inside of your claud code folder workspace, wherever you're working. So I mean, I don't actually have a folder set up yet, but let me do it right now.
58:45And if you use this dot cloud folder, you're basically like do unlocking, uh, advanced functionality, um, more so than just having a cloud dot m d in the root of the folder.
58:53So that's what I'm gonna do. I'm just gonna move over my dot cloud to sorry. I'm gonna move over my cloud dot m d to dot cloud.
59:00And then as you see, there are some additional folders here that I'm going to put together as well. Inside of this, I'm going go agents. Also going to go skills.
59:09And over here, I'm going to go rules. And let's explain what all of these three mean. The first idea is this idea of breaking up your big clod dot m d into different rules.
59:17And so basically, what this slash rules folder allows you to do, is allows you to take everything that we've written here. And then instead of just sticking it all into one file, you can define high level rules that correspond to different parts of, let's say, a build. So for instance, in this example,
59:34there's a rule for code style. There's a rule for testing. There's a rule for security.
59:39There's a rule for front end. There's a rule for, you know, within front end react and then styles as well. And so, you know, code style might be a very simple kind of two paragraph thing that just explains how to organize your code.
59:52Security might be a pretty simple few paragraph thing that explains how to, you know, secure your code bases and whatnot. Styles could be a list of tailwind CSS styles or, I don't know, whatever.
60:02Just like some some sort of formatting instructions to make websites look a certain way. And so for instance, if you look at our claud.md over here on the right hand side, you can see that we've split it into a variety of sections already. There's like a workflow section.
60:12There's like a technical default section. There's like a rule section. We can actually split these into their own rules files, and that's what I'm gonna have Claude do in a second.
60:21Split claude.md into its component rules. Use the Claude code rule spec specification if you don't know what that means.
60:31And so what I'm doing is I'm empowering Claude code to basically go through our current folder for one. Then if it doesn't already know what, you know, rule specs are, it's gonna go read up on rule specs. And then it's basically just gonna take this file and then split it into what looks like three file rules inside
60:48of the rules folder. So now we have rules split into workflow, technical defaults, and then design rules.
60:55K. And as you could see, this is a little bit more compressed than we had earlier. Basically, the title of the file is sort of like that little heading.
61:02Okay. Great. Anything else we need for efficient
61:07coding? You know, it can go through and it can create some additional rules for you. So now if you think about it, k, and by the way, I don't actually recommend just asking Claude, hey, build me rules for efficient coding.
61:19It's not gonna do a very good job. Usually, the best place to find like high level instructions and stuff like that. That's sort of on the cutting edge.
61:24Recommend, uh, like, scrolling through Twitter and then finding Cloud Code power users. It's like a real gold mine. The reality is Cloud Code will actually, like, incorporate the most commonly used Cloud.
61:35Md configurations and stuff like that into every successive generation. So a lot of the time, you know, you don't have to include the stuff you had in your Cloud NOD from like Opus four or whatever because nowadays, it just sort of understands that natively. And so if I, you know, talk about this example in the context of what we've already done, you know, over here, we had one monolithic clod dot m d file.
61:54Right? But imagine that we instead split this into, I don't know, let's just say three rules. You know, we have the
62:02workflows, Then over here were the design rules
62:09and then the tech defaults. Okay? Now instead of dumping it in as one big clot in default, make sure have a lot more granular control over little things.
62:18Um, and so we can organize this to, let's say, evolve the workflow without touching the design roles and so on and so forth. And in general, this form of segmentation can be useful, especially when you're working with other people. You can give people access to, let's say, like, the styles, but then maybe you actually have full control over like the top down workflow.
62:35Or as I'm sure you can imagine, you could have a really, really long claude.md. Right? A lot of people have Claude dot m d's that are, I don't know, like many, many, many thousands of words, sometimes tens of thousands of words.
62:44So splitting it up in this way just helps keep you organized. It also helps allow you to see areas that like you don't really need anymore. It's one thing if it's a giant file that's 10,000 freaking words long.
62:55It's another thing if it's like pretty simple and pretty straightforward. So we can similarly create skills and agents and they're organized in very, um, um, you know, similar ways. I'm gonna talk through some specific agents that I'd recommend having and then ways to use the skills folder to basically automate large portions of most knowledge work later.
63:11For now, I wanna talk a little bit about the top half of this image. So the bottom half, k. This is stuff that we've already kind of discussed.
63:18This is the dot clod slash folder. But it turns out there's one folder that existed even higher level than the dot clod in your workspace. K.
63:26And this is like the global folder. Now, anytime you see this little squiggle,
63:33k, in computer programming or networking or in file in your file explorer, this basically refers to like your home folder. Okay? And this isn't the home folder of your workspace, not the specific one that we're working on.
63:45This isn't, you know, if I go back to anti gravity, my website design example copy folder. What this is referring to is this referring to, like, the home on your computer. And so this might be like the Nicholas folder or something like that on my computer.
63:56And basically, Cloud Code allows you to define settings that are both local, which corresponds specifically to the workspace that you're in,
64:05and also global, which are are basically settings that are shared between all of your workspaces. And that's where the second, um, sort of category bends into. And so what we do is in addition to being able to set a cloud dot m d on the local level, for instance, a k have one that applies to all workspaces.
64:23If we were to expand this just a little bit, the way that this thing actually works, if you think about it, is we have the claud.md, that's over here.
64:35And this is your local dot claud. K?
64:40But then, we also have high level other claud. Nmd files
64:47and rules and stuff like that. Maybe this is called tech rules.
64:51Maybe this is called permissions. You know, maybe this one's called, I don't know, style guide.
64:58And these come from your global little squiggly line slash dot clot.
65:06And the way that this is organized is very similar to the way that the local dot clot is organized. It just exists in a different folder and it basically supersedes any local dot clot functionality. So this is another example of like splitting permissions.
65:19For instance, if you're working on a big team, um, you know, maybe you as the director of the team have access to, the global dot claud, uh, tilde, it's called slash dot claud folder. And in there, you put your, like, global settings.
65:32So these are high level rules that the agent in all workspaces reads and and understands. Maybe things like, hey, you know, don't allow people to delete these files or folders.
65:42When speaking with, uh, you know, staff members refer to them as x y and z, whatever. And then every individual engineer on the team or every individual team member, they empower themselves with a local dot cloud folder. And this is ways that a bunch of companies are currently starting to organize both their high level, you know, home clouds or their global clouds, and then, um, you know, the ones that exist per workspace.
66:02Space. So to make a long story short, there's actually three layers of claud dot m d that merge together. We've talked about two of them so far and there's like one more that's even higher level.
66:11But basically, the first is your personal global and that is at the very top level here.
66:17That's in your home folder slash dot claud slash claud dot m d. Then you have the per project or per workspace folder, which is dot claud inside of your current workspace slash claud dot m d.
66:29And there's also a third option specifically for enterprise. This is like your managed system level claud dot m d, uh, for enterprise licenses and stuff like that. 99.9%
66:37of you will not have enterprise licenses. I'm not gonna talk about this at all. But rest assured, it's a very similar concept.
66:42You just define another markdown file that, uh, you know, sort of exists in that ranking or precedence level. Now, if I open up a repo that we haven't looked at before, this is my own left click site where I'm working using a strategy called get work trees. Again, we'll chat about that later.
66:56But let's say, you know, I open up a new file folder and I wanna run Cloud CodeNet, and I don't actually have a preexisting Cloud Code. And, you know, I want the model to help me with this. All I need to do is just open up that file folder.
67:06K. Open up Cloud Code and then type slash in it. And we'll get into more slash commands in a moment.
67:12What this does is this basically allows us to analyze the current code base and then write a Clawd dot m d that summarizes what the current code base does and then give some instructions to, uh, you know, a future version of clot, which is really cool. So what this is doing right now is it's reading through all of the files.
67:29It's summarizing them. It's sort of looking through and, you know, seeing, uh, what what stands out in the code base, trying to look for commonalities and patterns between them.
67:38And then finally, it ends up creating a a capital Claude dot m d. And it does this directly in, like, the workspace root. So it doesn't do this inside of a dot Claude folder.
67:45You have to, you know, do this sort of organization yourself if you wanna go any higher level. But as you could see here, it just put that together, and I can open it up. And I can actually see sort of like the way that it wrote its own Cloud dot MD.
67:55So this file provides guidance to Cloud code when working with code in this repository. This is a premium marketing website for LeftClick. It's an AI automation agency targeting b to b companies.
68:03Here's how to deploy it to Netlify. Here's the architecture. Here's the design system.
68:08Here's the Netlify config, etcetera. Why is this valuable? I mean, like, it technically has access to all this information anyway.
68:14Right? So, like, why are we getting it to summarize it all? Well, we're getting it to summarize it all because one thing we're gonna talk a lot about in this course is context management.
68:20And that basically just means, um, all of the, uh, tokens currently in a prompt. As you've seen, there are multiple levels to this. Right?
68:27There's, the global Cloud. M d. That's injected.
68:29Then there's a local Cloud. M d. That's injected.
68:32There's the enterprise level Cloud. M d, that's injected. We're then gonna talk a lot more about the tool calls and various tool definitions.
68:39Those are all injected. And then finally, at the very end of it, you actually have your own prompt that you're sending, which is also part of the context. Well, if in addition to that, you force Claude to read through every single file every time that you initialize to know what the hell you're talking about, obviously, you have to add significantly more tokens to any prompt.
68:55Right? And by doing so, a couple of things happen. One, the quality of Claude on average will go down because there's a negative relationship between the length of the prompt and then the quality of Claude's outputs.
69:05That's just sort of the way that it works statistically with these models. But two, you're also paying way more because now instead of consuming, you know, let's say 10,000 tokens at a time, you're consuming a 100,000 because this thing had to read through your contact dot HTML, had to read your index dot HTML, had to read your message on it, it had to read everything.
69:22And so, Claude dot m d, if you think about it, in addition to providing high level instructions and, you know, uh, some guidance and and steering of the ship, also is a mechanism by which you can significantly reduce your token usage and then increase the average quality of Cloud because it'll just know everything, especially when you use, uh, backslash in it like I just showed you a moment ago before actually having to read through the files.
69:45You know, it'll know that index.html uses an inverted light color scheme. K?
69:50It'll know that, you know, there's a contact.html, which is a contact page. It'll know how it's hosted.
69:54It's not gonna have to like do a bunch of API calls to various services to figure this out. It it just already knows all the stuff because that's what this slash in it just did. So if you don't already have a claw dot m d, I highly recommend going to your folder, generate one.
70:06Um, once you have it generated, then you can continue making additions and changes as necessary. But literally just having a description of the way that the folder works is like, honestly, the the the 90% of the battle. So for simplicity, I've compiled the top recommendations into a quick do and don'ts guide for you.
70:21The first thing to do is just run backslash in it first anytime you're working in a new folder. The second is I just use bullet points and short headings, try and compress information as much as possible. Basically, write in like a high information density style.
70:33Don't just voice transcript dump into your Cloud. Md. If you wanted to write a Cloud.
70:36Md, for instance, using a s help, I might actually voice dump into Cloud and then say, turn this to a very high information density summary of rules and stuff. Put the most important things at the top. If there's anything that, like, it absolutely shouldn't do, like, never delete x y z file or whatever, mention it up at the very top.
70:52The first few things that AI learns, it tends to remember. It's sort of like the middle gap of the prompt. If I were to show you guys what this actually looks like, basically goes like this.
71:01It remembers a lot of the beginning. It doesn't really remember much of the middle, and then it's more likely to remember some of the end. Um, so this is called your, uh, primacy bias.
71:10Human beings are like this too, which is really interesting. And then this is called your recency bias, which means, you know, Claude and us are biased towards, um, remembering things at the very beginning of the stretch and at the end of the stretch, But more so at beginning, which is why I put very important guardrails at the top.
71:27Periodically review and prune this, like treat it like living code. If you have a Claude, constantly update the Claude in MD. You will find over time it adds things that aren't really super necessary, some super precise instructions.
71:37It It starts changing sort of the way that it talks to you and stuff. So I treat it sort of like technical debt, and then I reduce it over time. Uh, what not to do is don't dump entire style guides and API docs into it.
71:47This is an unfortunate habit that I've seen a lot of people do where they basically are like, oh, you know, I want this to be my I don't know. Let's just say a PandaDoc companion. So they go to the PandaDoc API, and then they download the entire thing, and then they try and paste it into the Cloud.
71:59Md. Ends up being 10,000 tokens, and then keep in mind, this is initialized every single time you run Cloud Code. Right?
72:04In addition to it taking a little bit longer because now you have that initialization time, it's also just a pain in the ass, and it's and it's more costly while reducing Claude's quality as mentioned. So don't do that. Instead, like, talk to Claude.
72:15Say, okay. What specific API endpoints are we gonna need? And then give it the whole API, and then just have it, like, prune it down to just the specific sections that you need or specific, maybe high level instructions on how to use this API that maybe is not super relevant, uh, or or trivial, I should say.
72:30Cloud dot m d allows you to do what's called an at include. This is very simple to just, you know, I I didn't wanna spend too much time on this.
72:37But basically, if in your cloud.md, you just say, you know, at git.md, and you have a folder called git dot m d somewhere else in your computer.
72:47I mean, it'll actually go and it'll like include that into the cloud dot m d. As you guys can see that functionality sort of taken care of by rules, but I just don't add include a bunch of files unless absolutely necessary.
72:58Don't write really vague rules in general, like treat Claude like, you know, really intelligent savant style intelligence. But also, you know, people that are they tend to be really intelligent and savant take a really intelligent one specific little slice of of the field.
73:12If you give them too much rope, they'll just hang themselves. So try not to write like really high level vague aspirational things unless absolutely necessary, unless it makes sense.
73:20For instance, don't just say, be smart. Don't say, make no mistakes. Claude's not gonna understand that.
73:25Right? I keep seeing a meme, uh, rolling around Twitter, and it's like, Claude, make me $1,000,000. Don't make any mistakes.
73:32And it's like that it's just not gonna that's not gonna improve the quality of its output or anything like that. Um, in general, you want to keep it somewhere between, like, 200 to maybe 500 lines or so max. Um, the recommendation is not to go any longer than 500 lines.
73:46Otherwise, again, you're just dumping in a ton of context. And then don't forget to add rules when Claude keeps making the same mistake. So like if you're working with a particular library or particular software platform or again, a particular API like PandaDoc or whatever, and they have a very specific way of going about things.
74:00You know, every time you load up a fresh instance of Cloud Code, it's gonna continuously make that mistake, which is gonna cost you again in tokens, but then also in context because of quality. So if you find that it makes a mistake more than two or three times, tell it, hey, you know, I want you to add this to your Cloud NMD so that this would work the next time I run it on a fresh instance of Cloud.
74:17That's one of my favorite things to, uh, to to tell it. Okay. So these are just some high level rules.
74:21Obviously, there are more. If you want, like, a really powerful way of, you know, finding solid, um, Claude code tips, uh, and specifically, like Claude dot n d stuff, I actually go straight over to twitter/x,
74:33and then I say, you know, compile the last month of high ROI
74:39claud .md writings. What are the best things to include?
74:45Because this technology moves so quickly rather than me, uh, you know, trying to, like, tell you guys to always include a certain snippet of text in your Cloud. Md. Basically, I just have it go through the last month of Twitter posts.
74:56After a moment, it'll tell you the most useful HireOI insights and patterns. Grock obviously is a access model. They have access to all Twitter posts.
75:03And there are some extraordinarily intelligent people on here that basically live inside of Cloud Code. So I get most of, like, my advanced tips from them. And, yeah, you know, there's there's a lot of instructions and advice here given in just the last month or so.
75:16Okay. Now that we've talked about the Claude. M d, let's talk about a few additional features that, uh, not a lot of people understand
75:22have they have access to inside of Claude code. The first is this concept of auto memory. So basically, in addition to the Claude.
75:28M d, there's an additional tiny little file that's injected at the top of every session. And you'll find that Anthropic and the developers of Cloud Code do a lot of these injections. It's not just the Cloud NMD and it's not just this memory file, which I'll talk about.
75:42They they have a lot. Tool calls, definitions, lots of stuff. So the way that memory works basically, is if you tell Claude something in one instance, and you tell it to remember it, it'll actually write it to this memory file.
75:54And then in another instance, when you pull it up, this is like a global memory file, it'll it'll remember you. So if I open up Cloud Code again and down here I say, I don't know,
76:04what's my brother's
76:07name? So try and ask it some, let's say, personal information that I want it to find out for me.
76:14It 'll say, don't know your brother's name. You haven't shared that with me. I say, remember that my brother's name is George.
76:22Now, what it's going to do is it'll save that to its memory file, Okay. Which already has a few other things, like the fact that my dog's name is Yelpers. You guys think my dog's name is Yelpers.
76:33Then if I go to a new fresh Cloud Code instance and then I say, what's my brother's name? Notice how this time we're not gonna have that issue. It's just gonna say George.
76:42And the reason why, if we just go back to this very stereotypical, prototypical example, which continues to grow, in addition to both the enterprise
76:53Cloud. Md, the global Cloud. Md, and then the local Cloud.
76:57Md, you also have a file here,
77:03which is separate from all of those called memory dot m d.
77:09And Claude will inject this at the very top of basically every new session. So in addition to, again, this global section here and then this local section, we also have a memory, and then we have a bunch of other tool call definitions and stuff like that, which I'll talk a little bit about later.
77:24In practice, memory isn't super valuable or anything like that. I mean, Claude NMD does a lot of that, of course. But, uh, you know, it's separate from Claude .md.
77:32You can kinda treat this as Claude's own notes. It's not really your instruction set. Okay.
77:36Next up are agents. As you see here, we have this agent subfolder within the dot Claude local, uh, settings folder. This can be pretty difficult to understand, so I'm just gonna give you a high level overview now and then we're actually gonna do a lot more agent development later on in the course.
77:50But let's just say I want an agent called tell me the time dot m d.
77:57It is a really simple agent. I basically just wanted to tell me the current time. Um, I can define the tools that it has access to, the model, the max number of turns that I can have it autonomously go and fulfill my request,
78:09um, whether I want it to have global or local memory. I can give it a little description, a name, and then also down here, just like a brief little outline of what it is that I wanna do. And so in this case, hypothetically, I'm just saying this is a time teller, you know.
78:21I basically want my big agent to talk to my smaller agent and then say, hey, what's the time? Very simple and and straightforward. So I'm actually gonna open up a new,
78:30um, session here and I'm gonna say, what time is it? Use my agent.
78:36And if you haven't already seen the sub agent tool call, a little bit different from what you guys are probably used to. Notice how now we're opening up this task called tell me the current time.
78:46And what happened is we see this little in input. What this is is this is our main agent talking to a sub agent. And so this main agent basically said, I see that Nick said what time is it?
79:00And he asked me to use my agent. Let me check all of my available agents. And then went through the agents folder, found that there was an agent called tell me the time .md.
79:09And then said, oh, I see. There's an agent here that can tell me the time. Since Nick asked me for that, this is obviously the one that he wants me to use.
79:16It then creates a task called tell me the current time, and then sends the new agent a message saying, hey. Nick wants to know the current time. Please determine the current time and report it back.
79:26Then at the very end, it says the current time is 02:23PM empty. Anything else the agent wanted you to tell me?
79:37Yes. It greeted you with a howdy partner and then it gave me a little cute cowboy emoji. The reason for that obviously is because down here, I said also say howdy partner.
79:46And so you can have agents for a million different things. In general, one off functions like tell me the time aren't really that valuable because, you know, your parent agent can sort of already tell you the time for the most part.
79:59But there are a couple of agents that do make sense. And so if we split this into parents and then, you know, a variety of different ways you could call this. It used to be master slave, by the way, which, you know, had a bunch of issues.
80:10They had to change it. Now it's like kind of like parent agent and then child agent. But if you think about it, there are a few agents that actually make sense.
80:19The first agent that makes sense is in general, having some sort of research sub agent. The reason why is because the way that agents work is they're spawned with their own context.
80:29And so this agent down here that we just spawned has no, uh, no context aside from just this input. It literally the only text inside of its, um, you know, prompt is the user wants to know the current time. Please determine the current time along with, you know, the high level instructions that we defined and tell me the time.
80:45Like, that's that's literally all that it has. That's its whole clod dot m d, essentially. And so because of this, because of the separation of contacts, you if know, you wanna keep the total number of tokens that you use as low as possible in the parent agent, which is usually the smartest one, like the one that you're paying the big API token usage and stuff like that for, uh, instead of trying to fill in
81:04a 100,000 tokens of research when it goes on the Internet and it looks up trends, then it goes checks out Google Analytics, and then it goes pumps things into, uh, I don't know, DuckDuckGo. Instead of, like, filling or polluting all the context of the parent agent, what you do is you basically just say, hey, you know, go research
81:21x y z and tell me a summary.
81:27And then it will go pollute all of its own contacts window, get it super long, might use 50 or a 100,000 tokens, which is why a lot of people use the, uh, sonnet model series at the time of this recording for that purpose. And then the only thing that actually makes it back to the parent is just that summary. So down here, this could use a 100,000 tokens.
81:45Right? But then like the tokens that it transmits back might only be, I don't know, like two k or something, which is if you think about it, a cost savings amount of 50 times. We're literally 50 times cheaper than whatever the parent cost would have been.
81:56And then we also get to use, um, you know, a lot of, uh, cheaper, uh, sub models and stuff like that, like Sonnet, like Haiku, and so on and so forth. So research is really, really good.
82:05Um, and that's one, uh, sub agent that I would almost always create. I'm actually gonna show you guys how to create one later for your code and then also for other automation purposes. Another one that I really recommend is basically having like a reviewer agent.
82:17The way that the reviewer agent works is in contrast with the research agent, you know, it having no context is actually the whole point. So basically, what happens is this parent writes a bunch of code.
82:28Right? You know, it's like your index dot HTML or as we're gonna see it's gonna be Python scripts or whatever the heck. It's just gonna do a bunch of code for you.
82:34And then after writing all that code, k, its context is now really biased towards the way that it wrote that code. Basically, you know, if you think about it, there's like 10,000 tokens and all of those tokens are like, hey, you know, I should write the code this way because of whatever reason.
82:48Well, if you want it to write really, really good code, a lot of the time, what you have to do is you actually have to give it to another version of itself with no context, and then just say, hey, this is the this is the code knowing absolutely nothing.
83:00Do you think this is good code? And if the answer to that question is yes, then obviously it's a good code. But if not, k, what usually happens is when you do this, when you spawn a new agent and give it the code, it'll say, it's kinda weird that you wrote it that way.
83:11Why did you write it that way? And then the reason why is because the initial version of Cloud, as mentioned, was just really biased because it had just done all this thinking and and stuff like that. And so, you know, they do this in in,
83:22you know, like big enterprise and stuff like that. Like, you do what's called a code review where, you know, a programmer writes some big long function or some cool tool or creates a nice app. And then they're so biased about the way to do things because they've just spent, like, ten hours, you know, hammering a particular method or a particular approach.
83:38Then when they give it to a code reviewer, okay, another human being, the guy looks at it and he's like, what the hell is this? Why did you do it this way? You could have done it way easier with another way or whatever.
83:46Or, know, hey, noticed that your security is kind of off. So in this instance, what the reviewer sub agent does is it basically takes advantage of the fact that it has no input, and then it's able to look at the code with like a totally blank face. And so with this, you basically say, you know, look at the code
84:02with zero context or no context and break down
84:10plus improve it. And then what it'll do is it'll take all of the code, so it might feed in, you know, like 10,000 lines or something. And then it'll return
84:19just the changes to the parent agent. And then, you know, this might be again, like two k tokens or something. And the parent agent will will do the changes because it's usually smarter.
84:27And then, you know, now your code's way higher quality. Finally, one that a lot of people are using is sort of this middle one here, which which is like QA slash testing. Now this is more of like an advanced programming thing, but basically, in order to determine whether or not a piece of code works or a tool works or a piece of software is like good, typically, um, you can develop a bunch of tests and then you can subject your tool or software that you just created to these tests to figure it out.
84:49Now, obviously, your parent agent can do this, but, um, you know, this is just something that would pollute the context and be tremendously costly, both in terms of tokens, but also the intelligence of the the parent model. And so typically, what people do is they'll they'll break things down into this research sub agent, a reviewer sub agent, and then also some sort of QA or automated test sub agent, um, in big enterprise, and that's how they do, like, automated testing of their code, automated test driven development, and so on and so forth, which is similar to what I was doing earlier when we designed those websites where, you know, we tell it to do the thing, it goes and it does the thing, and then it uses some sort of way to verify that it did the thing correctly.
85:20You can kind of think of the QA agent as like a way to facilitate that. It's just with design, it's pretty easy because you just see a screenshot in and then you look at, you know, the screenshot. And if the screenshot's good, then you're good.
85:29With, you know, back end development, obviously, you need a way to determine, hey, is the thing that I said that it should be able to do actually happening. Last but not least, we have skills, which were previously referred to as custom slash commands.
85:41Now skills are pretty great. Skills basically allow you to automate a vast majority of, I wanna say like the day to day knowledge work that you may or may not be doing, especially when you pair it with tools like Excel or Google Sheets or whatnot. Now, I came up with this idea of directive orchestration executions.
85:57It was this framework that I put about, probably about like four or five months ago, just as Cloud was figuring out how skills worked and and stuff like that. And they've since created skills, which I think is actually a much better alternative to my DOE framework. So I just use skills now.
86:11But basically, what these things are are just like sub agents. These are high level instructions that you can give to, uh, the parent agent. Okay.
86:20The one distinction between sub agent and then skills is in the sub agent, it does it all look like a different agent. In the skill, it's like given to the parent agent. Basically, And it's just a list of instructions allows it to do something.
86:29So I wanna give you guys a brief little example of what that might actually look like using a skill that I developed called shop Amazon. So heading back to our folder here, if I go down to skills, you see that there is now a skill called shop-amazon.md. Up at the top right hand corner, the name is shop Amazon.
86:43Underneath here is browse and purchase items on amazon.ca via the Chrome Dev Tools MCP, using the user as to find compare byproducts in Amazon. Then there are a bunch of high level instructions about how exactly to use a various
86:56like, some various tools to browse Amazon for me and then find products that I want to do, including stop, like, get purchase approval. Do not skip this step.
87:06So, I mean, like, I often buy products on Amazon. And to be honest, there's just so much junk on Amazon now that I don't wanna have to spend every, you know, day, hours of my time, like, rifling through mostly, you know, like, uh, SEO optimized garbage, which doesn't actually mean anything. So what I did is I put together a skill to do that for me.
87:23And at the moment, um, I require, uh, something to connect my, uh, basically in photography, like a bounce sheet or a reflector with, um, one of my stands. So what I wanna do is just I'm gonna speak into it.
87:36I'm gonna say, hey, I'm shopping for something to connect one of my reflectors to one of my tripod mounts.
87:44I purchased the reflector a couple days ago, and I didn't realize that I needed, you know, something separate to kinda clip the two together. Could you shop Amazon and give me some options that I could use? So I'm just gonna press enter here, and then I'm just going to let it go on its way.
88:00We open up the thinking. What it's going to start with is the user has asked me to help them shop on Amazon. Then the user wants to find a reflector holder or whatever.
88:08And now what it's gonna do is actually open up a Chrome tab for me using Chrome Dev Tools, and it's going to go and it's going to look for it. K? Now it knows that I'm in Canada, for instance, so it's actually looking it up at the amazon dot c a up here.
88:20Scrolling through, it's gonna open things up, take screenshots of various parts of the page. It's gonna read through everything and so on and so forth. And that'll actually, at the end of it, get me a bunch of options according to what I wrote in my, um, you know, shop dash Amazon
88:34markdown skill. And so if you think about it, like, is something that previously a virtual assistant or something might have done. Right?
88:40I mean, this is something that, like, I would have just given to somebody and delegated away. Hey, you know, I'm setting up a photography studio in x y and z. Well, now I can actually just write a skill, a high level skill that teaches it how to use Amazon.
88:52And then once it goes through Amazon and, you know, finds me the products, then just gives me like a big list of things like this. So what I can do now is I could say, hey, you know, I wanna buy x y and z, and then I can go and actually buy it for me. You know, obviously, um, I recommend if you guys are, like, making purchase decisions with Cloud Code.
89:08This isn't really something I'd a 100% automate. You know, maybe I'd have it add all the products to cart, and then I'd say, hey, give me the page so I can review it and then purchase it myself. But you can automate this about as crazily
89:18in detail as you want. What we've done is we basically made an API out of Amazon, and they don't have one specifically because they don't want everybody to. With Cloud Skills, you can do something like that super easily.
89:28The variety of other skills that you can create, this one's called Upwork scrape apply. I have a bunch that do, like, um, you know, lead scraping for me more generally. I have skills that automate the process of sending welcome emails to new clients.
89:40I have, uh, skills that automate the process of building their deliverables. And what's really cool is, um, you're not the only person that had like, you don't actually have to put the whole skill together yourself. You can just have Claude help you put the skill together for a future instance of Claude.
89:51And in practice, that's usually what I do. I'll say something like, hey, I wanna build a skill that does x, y, and z. Can you help me format it?
89:57Here's like how skills work because sometimes it it won't know for whatever reason. It'll have to go research skill formatting and stuff like that, and then we'll say, sure. I could put one together for you.
90:05Then what you do is you take that, feed that to a fresh instance of cloud code that has no understanding of the skill is, see how it does. If it screws up, you just give it feedback and say, hey. Modify the skill so you do better next time.
90:14You rinse and repeat, and eventually you get an error rating, which may start off at, like I don't know. Let's say, like, it it's only good 70% of the time on your first.
90:23Well, after some changes, now it's good 80% of the time. Then after a couple more changes, now it's good 90% of the time. And then eventually, I wanna say you can get to like 98 to 99% fidelity and accuracy, which in any sort of knowledge field nowadays is more than enough.
90:36I'd say most human beings screw up more than one to 2% of the time. So we'll cover a little bit more about skills and how to create them, how to take preexisting SOPs and workflows and stuff like that and convert them into skills a little bit later on. But for now, just know that they're there.
90:49Okay. So most everything there has now been covered. Uh, we talked about Claude.
90:54We've talked about the claude.md. We've talked about the local. We've talked about the agents folder, the skills folder, the rules folder.
91:00We only have a few things left, like there's, um, m c p's to talk about, but now is not a good time to, so I'm gonna push that off to later. And then also the settings dot JSON is a good thing to mention. But since this deals with hooks, I'll also talk about that later.
91:11You're now at the point where you understand, I want to say, you know, 90% of the internal workings of Cloud Code. You understand the file structure, the organization. You understand the highest ROI to build anything, whether it is a simple website or something more complex like a full stack app or an automation.
91:26From here on out, it's really just learning a little bit more about Claude's various modes. So plan mode, dangerously skip permissions, you know,
91:34ask before editing and so on and so forth. And then we can take a list and then we can use it to build something really really cool. What we're going to learn about next are the various permission modes available to us in the Claude code.
91:45Now, just so we're all on the same page here, when I say permission mode, what I'm referring to is this little button down at the very bottom of the GUI. And you can toggle through this button pretty straightforwardly and easily. And as you could see here, when we do, we get four main modes.
92:00The first is ask before edits. The second is edit automatically. The third is plan mode.
92:06And the fourth is bypass permissions. I should note that you're not actually getting a bypass permissions right out of the gate here, at least not as of the time of this recording. So I'll show you guys how to enable that yourselves.
92:15So we're gonna run through each of these as well as some extras. And then at the end of today's module, we're gonna focus significantly more on plan mode. I'm gonna walk you guys through how plan mode works, why you might wanna use it, then ultimately how to use plan mode to build something that I've personally been wanting to build for quite a while.
92:29So we're gonna do it interactively together. So permission modes control how your agents handle permissions. You also give the current permission mode to any sub agents that you employ, which is gonna be pretty important for later.
92:44Now, they tend to inherit the permission contacts from the main conversation, but there are a couple situations in which they can actually override the mode too. Um, for now, I just want you to pretend that all we're talking about are our current, uh, top level agents. We're not focused on any sub agents or any additional functionality.
93:00Nothing like what we just talked about earlier. Um, so we have default. Default is standard permission checking with prompts.
93:08You guys remember down here where it says ask before edits. You guys can think of this as basically the default. Okay?
93:14And so the default setting is before Claude makes any changes to any files on your computer, it has to ask you whether or not it's okay to do it. I'll show you guys what that looks like right now by saying, you know, change
93:31the title of the project to Nick's happy fun time. So because I'm in ask before edits mode, you'll see that before it does any sort of change, what it's gonna do is it's first gonna look at the specific file that defines the title.
93:46It's going to pop open on the right hand side the exact section of the page that it's considering updating. So initially, it's a profile name dash work log.
93:55Profile name in this case was Nick. It defines some really cool badass variable stuff for me. But because of my dumb request, it's now saying title equals Nick's happy fun time in lowercase.
94:03You'll also notice, I'm just gonna have to remove my head here so we can see this a little bit better. You'll also notice that down at the bottom it says, hey, should we make this edit to index.astro? That's the file.
94:14And I have three choices. I can either say yes by clicking or pressing one. Two, saying yes, allow all edits this session or three, could say no.
94:24And finally, I could also say, tell Claude what to do instead. JK, please don't do this.
94:30And so because of this, it's going to say no changes made and I will not have actually gone through the request. Obviously, most of the time, we don't actually do that. We don't actually make that third, uh, or rather we don't click that fourth one.
94:42Um, as you see, it's also kind of annoying. But generally speaking, if you guys are working in a code base that is, I don't know, really high risk, sort of high reward thing, where like every change needs to be good or it's gonna screw everything up, you can use ask before edits. I should note that very few people are nowadays.
94:58We moved away from ask before edits. Most people now use either the next setting I'm gonna show you, or they just bypass permissions like me entirely. The next major setting is accept edits.
95:09In accept edits, what we do is we auto accept any edits to files. But then if you wanna create new files, it'll still ask you for it. And so going back to our little Claude code page here, we move from ask before edits to edit automatically.
95:23K. We can now edit any preexisting files. So we can do is we could say, sorry, I actually want you to do this.
95:31Update the project to the title. And because we've selected edit automatically instead of ask before edits, it'll actually go through and it'll automatically update that for me. See how there was no little panel on the right hand side?
95:44So this is useful when you wanna give the model like carte blanche control over any preexisting files, but you don't want it to like have any control or any ability to make new ones. So I'm just gonna say revert the change. And keep in mind that now, because we're in edit automatically, it can do so without actually having to pop.
96:00The next one is don't ask. Now, there's no don't ask permission prompt explicitly set up here. So if you wanna get to your permissions, you actually have to go backslash permissions and then continue in a terminal.
96:11This is gonna open up a new page for you. That's going to then pump in Claude with some permissions tab. And then you're going to get a list of all of the different permissions
96:20that you can have, including rules in this workspace. So as you could see, we have allow, ask, deny,
96:28workspace. K. So this is equivalent to our edit all tab.
96:32Deny will always reject requests to use any tools. Ask will always ask for confirmation before using tools, and allow won't ask before using any. What's cool is you also have the ability to add a new rule.
96:44So permission rules are basically where you give it a the name of a tool and then you either allow it to use the tool or you force it to ask you for permissions before using a tool. That obviously takes us to that logical question. Well, what are tools, Nick?
96:57We haven't talked about them. Well, the variety of different ones that Claude code could use. There's stuff like the ability to fetch things from the web.
97:03There's stuff like bash, which is the ability to write like terminal commands and whatnot. And, you know, the purpose of this course is not to go through every single one of the tools because to be honest, they're always changing the tools and like the sorts of tools that we have and stuff that's not super valuable. But it's just so that you know, you can identify
97:18and then change on a like file or tool basis, which things ClaudeCode has access to. So long as you're hyper hyper specific about it using in this case,
97:28um, you know, this little tools output. The next tab is delegate. Now, this is a coordination mode for agent team leads.
97:35Basically, um, the Cloud Code now has that feature called the agent teams feature, where a single agent up at the top can delegate a bunch of work to a bunch of sub agents. And so this is the permission that the agent team lead is given, which basically allows them to delegate tasks. Although, I it's not allowed to do anything aside from just team management tools.
97:53We'll talk a little bit more about that later. Then we have bypass permissions. This is what I've been using up until now in basically all instances.
98:00Bypass permissions is great because you can do whatever the heck you want. I should note that there is obviously a risk here. There was a case a little while ago where somebody, uh, had Cloud Code running on bypass permissions.
98:09And then I think it was on like a Linux, uh, computer or something where there's a simple terminal command that you could use to basically delete everything on your computer. It's like sudo r m dash r l or r f or something like that. I don't remember the exact command.
98:20I'm sure Claude would be able to tell you. And, uh, basically, because of a misinterpretation of of the request and, you know, it did a bunch of research on its own or whatever. It eventually thought it had to run this command.
98:30So it ran the command and it basically deleted all of the data on the person's hard drive. They basically had it bricked and then they needed to take it in to fix it. I want you to know that these sorts of things are possible, of course.
98:40And I'm not a lawyer, so don't sue the hell out of me if this ends up happening to you. But it's very unlikely. In practice, this sort of thing occurs.
98:47It's vanishingly small percentage of the time. And nowadays, with agents getting more and more autonomy and other things, and then more and more skill and more ability to plan their own work, like we're gonna talk about in a moment with plan mode, You know, most people are shifting towards using bypass permissions.
99:01Bypass permissions also allows Cloud to create new files, not just delete them, that in addition to editing files can present a risk. The main risk, if we're just being, like, business minded here, is actually you just like, you create a bunch of additional files that maybe you don't need. And, uh, you know, because of that, your workspace can bloat over time.
99:18So it's pragmatic and pertinent to every now and then just ask Claude Coat to go through your files and see if there's anything in the workspace that just isn't required anymore. You know, realistically, as you guys are gonna see when we build this next project, Cloud's gonna try a bunch of approaches to do things both on the front end and the back end.
99:33Although the back end, um, um, usually much more often. And in doing so, it'll accumulate like different libraries that it probably doesn't need. It'll accumulate different files.
99:41It'll create temporary JSONs and and and all this fancy stuff. And as a result of that, if you're not constantly on top of that, you can have a folder that has like 10,000 files and it's all just temp stuff, which slows down your computer and bloats Cloud Code. I've done it before.
99:55So we'll talk a little bit more about context management, how to effectively do that in one of the next modules. But I just wanted you guys to know that for now. In terms of how to set up bypass permissions, it's actually non trivial to do this.
100:05And if it's the very first time that you're setting up Cloud Code, won't have access to that. So head over to the extensions tab, get on to Cloud Code for Versus Code. You're gonna wanna click this little gear icon and go to settings.
100:15That's gonna open up this tab over here. I'm just gonna move it over to the middle, we could see. You'll notice that one of the first settings is Cloud Code allow dangerously skip permissions.
100:23So, um, it'll recommend this only for sandboxes with no internet access. Obviously, mine has internet access just fine. So, you know, accept this at your own risk.
100:31But if you click this button, you will now have access to it down below. There's a few other settings here like Cloud Code auto save, enable new conversation shortcuts, disable login prompts, so on and so forth. Um, I don't really use or change any of these in practice.
100:43Okay. And then finally, you have plan mode, which is gonna make up the bulk of what we're talking about next. Plan mode is read only exploration,
100:51which basically means Cloud Code can research things using web tools. So can go on the internet and find things out for you. It can read through all the pre existing files in your directory.
101:01It can also reason from first principles and it can kind of use its own intelligence to figure things out. And then it can basically take all of this and put this into a plan document before presenting it to you. Now plan mode is awesome and I use plan mode all the time and basically anytime I'm doing any sort of build that's more complicated than a simple design.
101:17The reason why it's so good is because instead of acting, which in the real world takes a lot of time and energy to both do and then undo, all plan mode does is it just researches all the factors involved in the build before doing it.
101:31If you work in this like theoretical plan space and not the actual like space of the, you know, the build and all the libraries and all the code, you will save many many hours of building over the course of just the next few days and probably tens and and hundreds of hours over the course of a lifetime of using this tool.
101:49A minute of planning saves you ten minutes of building. It's just super high leverage and I'd recommend it. So imagine two possible scenarios for me.
101:55In the first scenario, you build something with Cloud Code, Then you test it and then you realize that there's some issue with it. Maybe you're building a simple web app that, know, upon login, add some numbers or credentials to a database.
102:10So you've done this now, you've realized that it's wrong. What that means is because the approach is wrong, basically the time that you spent building, while not completely wasted, a big chunk of it is wasted. Okay?
102:21So not only have you spent the fifteen minutes to build the thing, not only have you spent the five minutes to test the thing, you also have to rebuild the thing, which can take fifteen minutes multiplied by however many times you have to continuously test and retest. That means that the total amount of time it takes you is thirty five minutes, plus a fair number of tokens, which not a lot of people talk about, but this can obviously eat into costs.
102:39That is scenario one and this is the build without plan approach.
102:45K? Now in scenario two, which is the build with plan, what you do is you spend your first five minutes just planning something super in-depth with Cloud Code's plan mode.
102:55Somewhere during the plan, because we're folk we're we're building a super, like, granular line item scope here. We're looking at all the tools, we're looking at the objects and whatever the heck.
103:03There's like a lot that's going on about it. Because we're doing that, Cloud Code realizes that it won't work halfway through and then just recreates a better plan that does it. The total amount of time it takes for you to, get to the building is just five minutes plus five minutes, ten minutes.
103:18And then maybe your actual build time now, because it's like so much better and faster and stuff like that, is only five minutes or fifteen. So you think about it, like, not only have we saved twenty minutes on a single build, you know, we've also done so with significantly fewer tokens. What that means is it's much better to, like,
103:34do all of your work here, basically, during the planning of the spec.
103:41And this is true not only from Cloud Code, but any sort of programming or really any sort of project development. As opposed to here,
103:49which is like where, you know, your machines are actually building this thing, like this fantastic amazing Lego block based construction. I'm just gonna pretend that like we're building some sort of building or pyramid here. Right?
104:02Because, you know, if you screw this up, what that means is now you have to knock all these LEGO blocks down and then you have to rebuild it from scratch all over again. So better to go off the blueprint or the architecture diagram or whatever and make changes there than in the physical world. The physical world incurs a fair amount of real costs.
104:17By the way, know we're working the virtual world here, but it's the same thing as like planning a construction project. Right? You plan construction projects that you don't run into a situation where you don't have enough materials on-site and you're like, oh my god, I gotta freaking stop everything for the day and go find some.
104:30So how do you actually use plan mode in reality? Well, what what I wanna do next is I wanna use plan mode to build out a pretty complicated project. This project is going to basically be a full stack web application.
104:41It's going to have a front end. It's going to have authentication and like an interface where you can log in.
104:46And it's also gonna have a back end. And we're gonna build it in just a few minutes. The specific project that I'd like to build today is basically a proposal generation
104:54platform. I want to automatically be able to generate proposals, high quality sales documents that I can then send to prospects through this web interface.
105:04I wanna do it all natively, and I basically wanna rebuild the functionality of, I don't know, like DocuSign or like the PandaDoc. I want there to be all the bells and whistles on it. I want there to be, like, the ability for people to sign, but also to, like, pay.
105:17I wanna have my own little login screen so that I can give it to my clients and then maybe my colleagues, and I can obviously also use it myself. I wanna, you know, have like a couple of templates that I produce based off of. And basically, end to end, I wanna build a freaking app today.
105:30This is much more complicated than just a simple landing page. Right? So how am I gonna go about doing it?
105:35Well, the first thing I'm gonna do is I'm actually just gonna build out what I'd consider to be a pretty straightforward project spec, uh, which is just a list of things that I want this to be able to do. And there's a bunch of different formatting methodologies here and like different ways of doing it. You don't really have to worry too much about that.
105:49All I'm gonna do is I'm basically gonna dump everything in via voice transcript to a little text tab. And then I'm gonna feed that in the Cloud Code and have it actually format that into a specs document for me. So I'm gonna open up my voice transcription tool and get after it.
106:02My goal today is to build a proposal generation platform. I want this proposal generation platform to have everything that a common tool like PandaDoc might have. Insofar
106:14that I want it to be able to generate end to end high quality proposals as okay. So I just did that.
106:21I have a tremendous amount of context now. What I'm gonna do is I'm actually going to go to a new window in anti gravity, which is close out of the old one. I'm then going to open up a new, uh, folder.
106:31So go open folder. And here, I'm gonna say new one. Let's just call this proposal
106:36generator app. Once I've created this, I'm I'm gonna dump right in. Then I'm going to go to Claude code here.
106:43Let me zoom in so we could see this a little bit better. Down here, I'm gonna go sorry, not bypass permissions plan mode.
106:49As you could see, I'm pretty eager. And then I'm gonna go back here, copy this, and then just dump all this in. It's for a matter of white space, so bear with me.
106:57And what I did here is I just I just dumped in more or less everything that I wanted to do in the app. So I didn't specify things in a technical way, I just told it what I wanted. My goal today is to build a proposal generation platform.
107:08I want this proposal generation platform to have almost everything that a common tool like PandaDoc might have except for the template builder functionalities. I just wanna give you a template and have you do it. Aside from that, I wanna be able to generate end to end high quality proposals as static pages that I could send the URL to the client with.
107:22And now it's going to ask me a bunch of questions about it. So what front end framework do you wanna use? I don't know.
107:27Whatever is the best. So I'm just gonna say this one. Sure.
107:30For e signatures, how legally robust do you need them to be? Um, I don't know what that means. I'll just click the simplest one.
107:35For Stripe payments, will proposals at a fixed price or variable amounts you set on proposal? That's a great question. I'll say variable.
107:40Are using Supabase for the database too? I'll say Supabase for everything. Cool.
107:44Submit answers. So what basically this just did is it crafted a little graphical user interface for me to ask me some questions about specific ways that it wants to do the project. Um, and in this way, we can go back and forth, which is quite nice.
107:56Okay. Tailwind for utility CSS, shad c n u I for polish.
108:00I don't know what the hell that means. Let's just click it. Can you share the proposal template now?
108:04Paste it, link it or tell me the fall path. I'll paste it next message. That sounds great.
108:08So what I'm going do now is I'm going go find a template of a proposal that I want it to automatically generate for me. Okay. So I have my proposal template over here.
108:14It's pretty sexy. You know, I give people some problem areas, some solutions. Know, I talk about why us.
108:21I have a little photo of me, Alex Ramosy and Sam Evans up there. So it's pretty sexy. What I'm going to do next, I'm just going move this into my workspace one time project.
108:29Over here, I'm just gonna rename this to call this proposal template. That's okay. And then over here, I'll say, great.
108:37It's in proposal template dot PDF. And, um, just because I also want the design to be really cool, use a simple clean design sort of like Apple. Follow the proposal template design in the actual generation of the page.
108:50For everything else though, make it kind of Apple esque. Okay. Next up, it'll read through my proposal template and then think up what to do next.
108:57And now it is generating a plan for me. It's figured out the nine page proposal document. It's designing some detailed implementation thing with all the information, the user flow, and so on and so forth.
109:07What's interesting is it's giving this to a sub agent. You could see because it's using the the task feature, which is basically coded sub agent language. As you can see, there's a tremendous amount of information that it's going through in order to generate this.
109:17It's also doing some research like looking up things from PandaDoc just because I I referenced it. Okay. And at the end, it's now finished the final plan file.
109:25So what I'm gonna do is I'm just gonna scroll through and then read it for myself. It's very comprehensive. Proposal generator platform implementation plan.
109:31We're gonna build a Panadoc like proposal generation platform for LeftClick. Users will sign in, create proposals via AI, and share public URLs with clients. Clients will, uh, view, sign Canvas signature and pay.
109:42The proposal page will follow the provided template design. Also, the app is Apple esque and minimal. Here's the tech stack.
109:48I don't know what most of that stuff means, to be honest, and I'm not gonna worry about it. Proposal template sections cover your problem areas, your solution, why us, our team, what working with us looks like, what your investing contracts, signature payment. Database scheme of profiles, I don't know again what the heck this means, so I'm not gonna worry about it.
110:04And then over here, we have a bunch of routes, API things, file structures, you know, as somebody that is not a developer by trade, I'm not gonna focus too much on that stuff. But it looks like when people sign in, they hit log in, and there's will be a dashboard page. When they create, they'll click new proposal, which will go to dashboard slash new.
110:20There'll be a few form fields to fill out, like brief description and pricing rows. They'll submit it. That'll call Opus, and then we'll generate them.
110:27And then in order to copy, we just copy this URL and send it to the client. Now, looks pretty clean to me. I'm sure it's not gonna be perfect, but, uh, yeah, why don't we give it a go?
110:35So what I'm gonna do is I'm gonna auto accept. And I know just because I've done some things before with this tool stack, Supabase specifically, I'm just gonna go through and I'm gonna set up a Supabase account while it's running me through all of this stuff.
110:47That way I can kind of, you know, double up on the time. While this does some work for me, I can go and do the the Supabase stuff. So Supabase is a simple database.
110:53Basically, it just handles like the logins and also handles like the generation of records and stuff. First thing that you would wanna do if you were doing something similar is you just log right into Supabase, um, set up a new account if you don't already have one, and then start your project. I'm doing this for free.
111:05So I just started one called proposal underscore generator, and then I'll click on it, which will take me to the project. Somewhere on the left hand side here, we have API keys. API keys are basically just what we want to give to this so that it just does everything for me.
111:18So let's see here. We wanna give it all keys. So I'm just gonna go copy API key.
111:26And then also, I'm just gonna looks like it's asking me some questions here because it's now oh, it's still in plan mode. So keep in mind, we wanna go to bypass permissions mode now because instead of having to ask them every five seconds for things, you know, I want this to be able to proceed. And then I'm just gonna give it some stuff.
111:41I'll say super base, I don't know, secret key. Just gonna give it to it.
111:46And also give it my super base public key. Why am I doing all this?
111:52Because I know it's gonna need this information in order to move forward. Now in Stripe, I'm gonna go over to one of my accounts and then I'll go test mode, create sandbox. What this will do is this will give me like a little sandbox version
112:04of Stripe that I could use with their own API keys and everything like that. This way I can, uh, basically like, you know, process the payments and stuff like that using this test. So
112:13here it is right now. And then if I wanna get my API keys, I have them both over here. So I'm just gonna copy the publish all key.
112:20You know, I said I want you to take payments during using Stripe basically, which is why it's doing this. Let's go public.
112:28And then over here, I'll go private key. Cool. And so now, I basically loaded it up with what I think is everything that'll need in order to actually go and like, you know, connect.
112:38So I'm just gonna press enter here. In case you guys didn't know, when you press enter, what you do is you basically queue up another message. So when this is done with all of its tasks, uh, it'll now have access to all of my keys and stuff.
112:49So now that it's done that task, it's gonna create all the files and it's just adding all of the information and stuff like that. Looks like we have the super base anon key. I think that might be something else that we need, so I'm gonna have to find that information out.
113:01It'll ask me to do this in a moment, so it's not that big of a deal. This is here. It just got my API key, so it's gonna update the ENV file.
113:07And then at the end of this, it's probably just gonna ask me like, hey, can you also include x y and z? Now, I could have, of course, just asked this thing to start building for me. You know, I could have just given it all the specs and said go for it.
113:15But the planning that I did not only improves the probability that it'll be able to do this on a quote unquote one shot, but it also improves the token efficiency because it's not going to be exploring 10 different approaches at the time of building.
113:31Instead, you know, it has like a a document it can refer to. And that's kind of interesting, but human beings sort of do better that way too. Right?
113:38Like, if they're in a business and then you give them an SOP, standard operating procedure, or you give them a checklist or something, or you give them a simple three step rule they always have to accommodate. They're much much more likely to actually use those rules. So
113:51AI is the exact same, at least as of the time of this recording. And if you give it like a scratch pad, like a to do list, like a checklist, usually quality improves significantly compared to if you just have it try and YOLO stuff. Really showing my age with that quote.
114:04So this isn't at all related to course, but check this out. This is a cool salmon marinade that I just made that I'm about to cook while Claude four point six is doing all the work for me.
114:14So oftentimes, during the protracted building of a plan, I'll just step out and I'll like do some meal prep or I don't know, sometimes if it's really long, I'll go hit the gym. And by the time that I'm back, k, this thing is either still working or it's just wrapping up its completion.
114:28I think right now, we're like six or seven minutes in. But what's really cool is you can parallelize your work. So obviously, this is all about being productive.
114:36But there is also sort of like a time management component to this as well. Like after you do a plan, and we're building a real big full stack app here. This is not a trivial enterprise.
114:44After we do that, like, we're gonna have to wait a few minutes. So, you know, you can just set this aside. The value
114:50that this thing is going to get just watching having me just watch it is quite low. You can absolutely just set this aside, let it continue the building, and then come back either when it's done, or when you hear that little hook chime go off, which is personally what I use to make sure I'm always in the loop.
115:03Anyway, I'm gonna go marinade the salmon and when I come back, this app should be done. Okay. So three or four minutes later, I just got back and I see that it is now good to go.
115:10It's just asking me for a few things. Superbase project URL, which I'll find. My Anthropic API key.
115:16I need to run an SQL migration, give it a Stripe webhook, then ultimately deploy to Netlify.
115:21What I'm gonna do is I'm gonna focus on testing all this stuff locally, and then I'm gonna give it access to all this information. And then after I'm done, I'll do the pushing and the deploying, and I already go through what that looks like. Keep in mind, you don't need to have any computer program experience to do this.
115:34I mean, I didn't really give it anything that was programming specific. I just gave it a bunch of needs. And while, of course, it went through and did a bunch of things that were most definitely programming,
115:42I wasn't really a part of that, which is quite valuable. So I'm gonna go find this information. I saw your next public Supabase URL and then my Anthropic API key.
115:50Okay. So I see it says, reference using APIs and URLs, this project ID. So I imagine that's probably that.
115:56I'll say project ID for Supabase is here. And then throw up a key, I'll just sign in to Claude real quick and grab.
116:03Okay. So then I'm gonna grab this and then over here, I'm just gonna call it proposal generator app.
116:10And so I'm gonna give me a key that I could use to copy. And no, you can't steal this from me because I, uh, I will have deleted it right after this.
116:19Nice try, folks. You'd be surprised that how many YouTubers don't, which is hilarious. Like, half the YouTube API keys that you see still work, six months later.
116:27Be careful, fellow YouTubers. Run the SQL migration as next. So paste the contents of this thing into your Superbase SQL editor.
116:34So I guess I I need to do that myself. So I'm just gonna grab this, copy all this, and then what? Supabase SQL editor and execute it?
116:42K. While I'm doing that, just gonna give it this. And then where do I get that?
116:48Supabase SQL editor. Okay.
116:51There's one right over here. That looks like it. No clue what the heck I'm doing.
116:55Gonna click run. Success. No rows returned.
116:58Awesome. I think that's what's supposed to happen. Anyway, we'll see.
117:01It'll tell me if there are any issues. Stripe webhook, register this in the Stripe dash board and put the whatever secret in ENV various. I don't I don't know what that means and I honestly don't think I need to do that.
117:12I'm just going to ask, okay, let's test this puppy locally. K. So it's giving me the information.
117:18It's also saying that the local host thing is ready to go. So I'm actually just gonna open this up, paste this in and see.
117:25Cool. I got it. So it says I'm gonna have to confirm my email.
117:28So I don't really like that. So the first thing I'm gonna do is I'll say, looks good.
117:32If the user email isn't confirmed, don't give it to them in a red error message that's kind of unfriendly. Just tell them to check their email after their initial sign up because right now there's no notification with that.
117:47And then basically, I'm just gonna like work through this step by step, page by page. K. And the first thing I'm getting is I checked my email inbox.
117:54I'm not seeing an email, so I'm just going to give it a message telling it, hey, you know, first of all, let them know that they need to confirm their email. Second of all, actually make sure that the email is being confirmed because I'm not getting it upon the sign in. K.
118:07And then it gave me the ability to turn off the toggle email, so I'm just gonna save that. So we now no longer need to confirm the email, and I'm gonna go back here. K.
118:17Cool. And it looks like I'm now into the dash dashboard. Bottom left hand corner, we have what looks to be, I don't know, some Next.
118:22Js stuff, I think. I'm not really sure what this is. It might just be like some developer stuff.
118:26On the top right hand corner, looks like we can sign out. So let just try signing out. Cool.
118:32And now, in the middle, we can create a new proposal. Just says proposals up here, so click create new. Now, there's a bunch of information.
118:38I like this. So why don't I just go my own information? I wonder if I just generate proposal if that's gonna work.
118:44Let's do a 1,500, 2,000. K.
118:47And then AI powered sales pipeline. I actually like this, so why don't we do that? The client needs an automated lead generation system that integrates their existing CRM.
118:54They currently spend twenty hours a week on manual outreach and wanna reduce this to under five hours while increasing qualified leads by three x. Right now, they want to get to a 100 k a month. Let's do that.
119:03K. Now, for the money shot, let's generate
119:07proposal. Clicking the button, don't know what's going on. No clue whether this is working.
119:12Generally speaking, when you see a little bar like this with a little circular thing, like, this is pretty poor in terms of, like, user experience because I just don't know if it's working or not. I'm not really sure.
119:23It'd be nice if there could be some sort of progress, some way that I could see the thing actually being generated. Or upon clicking this, it'd be nice if I went to a new page. So I think I'm probably gonna do that.
119:34Hey, I'm not sure if the proposal has been generated. It's been ten or fifteen seconds right now. Could we do some additional user feedback after they click the generate proposal button?
119:44Some sort of status, um, some sort of updates. Basically, there just needs to be some way that I know that the proposal is actually being generated, not just hanging all day. Okay.
119:53It did it did end up generating the proposal after a while. It looks very clean, but still I want you to do this. Okay.
119:58So I'm just going to feed that in here. I'm really liking this. I mean, at the logo even, that's very sexy.
120:03Using the same font, nice, confidential. Oof. This is so sexy.
120:08Look at that. Wow. I just built a proposal for this.
120:13What I'm gonna do now is just give it some more feedback. I don't like how the text immediately under your problem areas
120:21is really constrained width wise. You should make that a little longer, maybe two times as wide.
120:30In each of the bull in each of the sub benefits underneath o one, o two, o three, o four, it's a little too wide now, so make that maybe 75% as wide.
120:42Do the same thing with the text under your solution.
120:46Under why us, looks great. I want to have that image of myself, Alex Formosie and Sam Ovens in there somewhere.
120:53So find a way to include the image in a high quality manner. There's some minor spacing problems with
121:02the we've done this before, we focus on money, and we don't treat AI as a fad. They're not perfectly lined up to the numbers one, two, three on the left hand side. Add some images of myself and Noah.
121:17The what you're investing looks pretty clean.
121:25But in general, there's a bit of a discord between everything being left aligned and then the service agreement being in white at in the middle. Find a way to fix that.
121:41Okay. And now, there's one more thing I want to do. I just want to verify this works.
121:50K. And now I'm just gonna click sign and pay, we're gonna see what happens. Okay.
121:54Cool. Looks like we're here in the example sandbox. That's awesome.
121:56I'm just gonna pump in that some payment information here. Cool. Looks like the payment went through, and then we also have this wonderful payment received button.
122:03You can close this window. That's awesome. Uh, okay.
122:05Great. So let's just adjust that final bit. Excellent.
122:08Everything worked great. Um, on the final page where you do the confetti, make the confetti last a little bit shorter. The ones on the left and the right were a little long.
122:17And then, change will be in touch shortly to get started. To, you'll receive an email with more details and a link to book a kickoff call. Actually,
122:28screw that. Let's just give them a direct calendar link to book a kickoff call. Why not?
122:32That's way easier and way faster. K. So I'm just gonna give it my own calendar.
122:39I'll just give it an example here and then boom, I'll just have it go off again. So I mean, this looks really clean so far. Guess there's one more thing I have to check.
122:46Have to check and see if we can see the proposals listed. Okay. So we can't.
122:49So can I click on this? Can we go right back to the page? Nice.
122:52Now, can I just open this up in some new tab that's not logged in? Nice. So the slash p must be slash public.
122:58That's really clean. So I mean, like this. I mean, we did this in just a few minutes.
123:03Honestly, very sexy as you guys could see. Did very little work. And, uh, yeah, I just need to find a way to basically,
123:08um, standardize the spacing and the width. Like, I don't I don't like how this one over here is on the left hand side, and then this stuff stretches all the way up to the right. But this is just a minor design thing, and we can absolutely significantly upgrade this.
123:19God, we even have a signature here, which looks so cool. I love how that you can now build your own apps. Right?
123:25Like, you don't actually have to go to like a big developer or pay out the ass for some big platform. You can just like one shot an app like this with good enough Cloud Code skills. Okay.
123:33And it's gone through and it's updated the widths and stuff like that. That looks pretty clean. Now, I'm just gonna go give it some images and then it should be good.
123:39We're gonna add them to public slash images apparently. Nice. Looking pretty clean if I do say so myself.
123:44Don't know what the hell I was doing with cuffing my pants like that, but what are you gonna do? Just looking at what it changed, it made this a little bit wider, but then it made this much much smaller. So I think what I'm gonna do is I'm just gonna enforce like the same width across the entire page.
123:57That probably makes the most sense. Why don't we just like constrain it so it'll be like here? I don't know.
124:03Like here or something. That way it'll be somewhere in the middle. Just gonna take a screenshot of this.
124:08Hey, this looks good, but I'm finding it a little too wide at the moment. I believe we should just constrain it and do a bunch of padding on the left and the right.
124:16I sent you a screenshot of a quick example. Now, I guess we didn't actually do the screenshot. Because I mean, it's good because it's like mobile optimized and stuff, but obviously, you know, on my actual desktop, there's just so much white space.
124:27Let's just center everything, make it scrollable and then I'm just going to Yeah.
124:33I'm not really sure why. I couldn't take a screenshot of those, but whatever.
124:38That looks good to me. Boom. Just fed that in and we should be pretty good to go, I think.
124:43Holy, that salmon's good. I am definitely doing that again. Anyway, I gave it some more time and it's since centered most of this, I want to say.
124:52Looks pretty clean, all things considered. You know, we're doing some cutting off of faces and whatnot, but it's not that bad. And, yeah, honestly, this is very similar to like the quality of a PandaDoc.
125:00I guess the last thing I'm gonna do is I'm just gonna say stretch the strategy bit all the way to the end. That probably makes the most sense.
125:09Stretch this bit all the way to the bounding boxes of the container, I e the white box should go all the way.
125:17Okay. Here's one more thing that I think this is a good opportunity to talk about. A lot of the time, this will tell you to do things like credit GitHub repo, push the code, etcetera.
125:26Just ask the agent to do it. Most of the time, it can actually do what it is that it's asking you to do. If it can, you know, let it try and then it'll tell you absolutely.
125:34Hey. Can you do all this for me?
125:38Then it'll just tell you what parts it can do and which parts it can't. Okay. Taking a peek here.
125:44It's telling me to go deploy the project. So go here, add new site, import an existing project. I can do that.
125:49Select. We need to build settings.
125:53It should auto fill, confirm, and click deploy. My proposal generator is available. That's funny.
126:00This is like the universal domain name here. Right?
126:03Like, anybody will be able to access this.
126:08I'll put an a at the end because I think it's funny. K. Automatically detected.
126:12Next. What else? Confirm click deploy.
126:15Okay. So go to site settings, and then we need to add all of this information in.
126:20So I'll do that. Environment variables, import from a dot ENV file.
126:24So I'm just gonna paste this in.
126:27So there's this dot ENV local. Let me grab that. Okay.
126:30And we just imported all of these.
126:35Nice. Oh, that's nice.
126:39Now, I need to go set up my Stripe webhook, so let's just paste that in. Add a destination. We need to add this endpoint URL, so proposal generator.
126:48I don't know exactly what all this stuff means, but just gonna select all. And then, I guess, it's just proposal generator.
126:57K. And then, no description, I think. That looks good to me.
127:02Okay. Everything is now added. So go through and then make sure my site's deployed.
127:07I saw some issue with it earlier. Alright. So this is now gonna take whatever this is.
127:11And now that it actually has access to the app, it should be able to update it for me. I don't know for sure. To be honest, we'll figure it out.
127:18Hopefully, you guys can tell. A lot of this stuff is me just saying, hey, fix it. And if you can't fix it, what the hell do I do?
127:25And then it just tells you what to do, and then you're good to go. What's important really is like, if you think about it, the software engineering stuff, this is like almost completely automated.
127:33I mean, I was doing more cooking of my salmon rice bowl than I was actually, you know, steering the ship after a certain point. And it's because we we made use of the plan mode so heavily. What's important really is like your agency as a developer and like your ideas and your willingness and capability to like put together things.
127:51In my case, you know, I do a lot of proposals. I send out maybe one every couple of days right now. At our peak, we were sending like four or five out a day.
127:58And so doing all that stuff manually was obviously very time intensive. Well, if I could just one shot it with like a little voice transcript and then an AI prompt, obviously, and then generate my own landing page like that, that's really valuable for me as a business. That's something that AI would not know of right now and would not really be able to do.
128:13So, you know, allow the AI to be your hands. You, similar to the way that like, you know, keys and a keyboard are. You're the person that's coming up with the ideas and thinking.
128:22Okay. So I'm not sure if you guys are paying attention while all of this is occurring, but did you see this little context tab
128:29get filled up? Because this is at a 100% more than once at this point. Essentially, occurs is, this is your total amount of context available to you, somebody that's doing a build.
128:38Right? Well, when this reaches a certain limit, when it hits, you know, 99 or a 100% or whatever, what it'll do is it'll take all of the text that you've written so far and will compress it down as tightly as humanly possible. You know, now let me commit and push so Netlify rebuilds.
128:52Might literally just turn into Netlify rebuilding dot. It'll save all those tokens, but in doing so, also increase the information density of your prompt.
129:01And then it'll basically compact it. That's what the term is. So that you have more information in the same amount of tokens.
129:08So the next prompt that you use is both higher quality, but then also doesn't actually run over the token limit. The unfortunate reality is models right now only have token limits of somewhere between 200,000 to about a million. Some of them have 200,000, other ones have a million.
129:21The model I'm currently using is about 200 k right now. And that means that, like, after a hundred and ninety nine thousand nine hundred nine nine tokens go in, like, there's only room for one more. Um, that's just the way that they're built.
129:31Right? That's just their infrastructure. So Claude does a lot of these like automated context management techniques without really telling you.
129:37Um, and that's core of what we're gonna learn after this project is done. Anyway, went back and forth a couple times and now you can see that we have the app live. It's live on a public facing URL.
129:45So I'm gonna go on nikkiwiki@gmailcom and actually sign in with my previous account. And now you can see, I actually have access to that same pipeline, that same page that I had previously, so I'm gonna give that a click.
129:57Everything is nice and centered right now, which is exactly what I wanted. Super clean. What's cool too is it stretched the strategy setup and fee all the way to the right hand side, and then, you know, I have the ability to to do my signatures and whatnot.
130:09So suffice to say, like, this this works. This app is now functional. It's live.
130:13It's, you know, honestly probably better for my purposes than PandaDoc was, which I was paying out the ass for. Not that I don't think the company's cool, but damn, is that some expensive API pricing I think for what it's doing. In my case, I'm doing all that now basically for free.
130:25At least Netlify, you know, the deployment solution that I had available was free. So aside from the Cloud Code tokens, you know, it's one of those things where you spend it once and then every time I ever generate a proposal from here on out, that's sort of fixed. Now, I mean, we built like an app here.
130:38Right? This is a full stack app. That's what this is.
130:40That's why there's like the login page. There's stuff on the back end. There's a database.
130:43There's, you know, the front end and and whatnot as well. But I want you guys to know that like, despite Cloud Code and how awesome it is, I'd be very wary about taking apps that are fully vibe coded and then publishing them on the Internet.
130:56This is sort of my obligatory safety message because there are people that are out there that are using Cloud Code and similar tools to try and find security vulnerabilities as well.
131:07And unfortunately, despite how amazing Cloud Code is right now, not at the point where it, fully a 100% patches everything on the front end and the back end. So what this means is, okay, there are a couple little safety precautions that I recommend you have. The first is, I'd recommend that whatever, you know, URL that you're putting together or whatnot, it's not like an obvious or basic URL.
131:27Like, for instance, I wouldn't just go proposal generated on alify.ai.router. I actually have my custom URL, and then I'd make the custom URL something that, you know, realistically, it's not, like, trivial. It wouldn't be like google.com.
131:38Right? Like, not, uh, leftclick.ai. I would make it short.
131:41Because there are a bunch of services out there that are scanning all DNS ranges and also all URLs, uh, which basically mean that, like, the shorter and simpler your thing is, the riskier it is, the more other human beings will have access to this.
131:51Like, there's probably already been, I don't know, like, or 40 people that have access to my service despite the fact that I just whipped it up. That's just how it works. Right?
131:58People are always constantly scanning the Internet and sending requests. The second is I wouldn't charge money for these, k, without having a developer go through the authentication,
132:08at least the front end, at least once. And I say this for liability reasons, like, I don't want you guys to like get a bunch of user data, like usernames, passwords, email addresses, payment logs, and stuff like that, and then have that exposed to bad actors on the Internet.
132:23It just isn't really worth it right now. Like, you guys are looking to sell apps with this approach, you know, just pay some person, you know, a few $100. Have them look over your app.
132:31Let's be real. The software is not the mode anyway, so you can just give it to them. Screw the NDA.
132:35And just like have them tell you how to secure your application. Hell, they can even give Cloud Code some, uh, some tips or maybe like a prompt that you could use to to do it almost automatically. But I guess what I'm trying to say is like, despite how compelling it may be to like make these apps public and stuff like that and then charge people for their usage, I personally wouldn't.
132:51I personally only use apps right now internally within my teams or for my clients. I do not roll these things out and then, like, try and make money from them off the wider Internet when, the App Store or whatever.
133:03I've just seen too many horror stories. We saw a Cloudbot a couple of weeks ago, at least is the time of this recording, which later turned into MoltBot, which later turned into OpenCloud. It rebranded 5,000,000 times because every freaking version of it had major security issues, and then people were getting prompt injected and hacked and stuff like that.
133:20And I mean, like, you know, a fair amount of your reputation that goes with that as somebody in a business context, but also you are playing with fire here. This is like, you know, real human beings consumer data.
133:30So I don't wanna make safety too big a part of my thing. It's just uncle Ben time. With great power comes great responsibility.
133:36And hopefully, you guys see here. I mean, this took me, I don't know, fifteen, twenty minutes realistically end to end. I was obviously making food and whatnot coming back.
133:42I wasn't as efficient as I could have been. But you are certainly wielding great power right now. And if you're going to have other people trust you with their credentials and logins and passwords and everything like that, you need to make sure that, you know, you're not using that power willy nilly.
133:54Next up, I wanna chat context management. Now for those of guys that don't know, context management is essentially you handling tokens
134:03in a prompt as effectively as possible. There are many people out there that over complicate the hell out of this, so I'm gonna do my best not to. If I open up a new instance of clog code over here, and then I type this backslash,
134:16and then scroll down, you'll see that I have access to a bunch of really cool functions here. I can compact, context, cost, debug,
134:24in it. I can do insights. I have the ability to choose between models, thinking, account and usage, fast mode.
134:31Uh, we're gonna talk all about this next, but for now, I wanna focus specifically on one slash command called slash context. Look at what happens when I click this. If I scroll up and then zoom in a little bit, you could see here that at the very top,
134:47Claude tells us essentially what is currently using its context window. For those of you guys that don't know, context window in the term in the domain of AI just refers to the total amount or total number of tokens that a specific model can deal with at once.
135:04So if you guys remember earlier where we're doing a build, I said it was about 200 thousand for Cloud Opus 4.6, that's the model that I'm currently using. There's some models out there like some Sonnet series models that can go up to one or 2,000,000 tokens now. But the number of tokens in a context window aren't directly related to the performance of the model.
135:22Context window is sort of separate from that. So Cloudopus 4.6 has a context window of about 200,000 tokens. And then you'll see here that so far I've used 26,400,
135:32which means mathematically, I'm 13% of the way through. You might be asking, well Nick, how the hell is that possible? All you've written so far is slash context.
135:41Where are those other 26,398 tokens coming from realistically? That's a great question.
135:47Immediately underneath, you could find out for yourself. And so what I reckon you guys do right now, if you've never done this before, is head over to your own Cloud Code instance without even watching any of this and just type backslash context and look at all of the things that are currently consuming, um, your prompt.
136:02Now, I should note that this is stuff that you're actively billed for. K? This is not stuff that's free.
136:07Despite the fact that a lot of the time, Anthropic and Claude, um, you know, they'll add a bunch of things to your context that really telling you. This is still stuff that at the end the day you are paying for.
136:16So if you submit a bunch of one off requests like individual instances of cloud, note that there's gonna be your prompt, which it'll bill you for, but there's also gonna be always like a flat, um, additional cost, maybe $5.10, 15,000 tokens or more depending on how you set it up. Okay. So going down here under category, you could see all of the different ways that our tokens are currently being used and all of the additional tokens that we didn't really realize we're we're making use of.
136:39The first is your system prompt. Now, if you guys remember, claud.md takes up a fair amount of your context.
136:47And there's different types of claud dot m d's. You have your global, um, tilde slash dot claud slash.
136:54That's the one that defines all workspaces, not just the one that you're currently in. Then you have the local dot claud right over here in yellow.
137:02In this case, we've broken them down into individual rule or component claud dot m d's. Underneath, you also have capital memory dot m d. And then and only then do you actually, you know, send a message basically and have your prompt.
137:15And so earlier on, you remember how we had like 26,000 tokens or so. Well, probably, I don't know, 10,000
137:21tokens or something like that was just taken up by all these system prompts. We'll double check-in a second because we can actually see the real number. And then only a couple of tokens, in this case two or something, were were actually taken up by our our other request.
137:33So that begs the question, where are, you know, the other, I guess, 15,000 or so tokens of the 26,400? In addition to the system prompt, which to be clear, this is your claud. M d
137:44and rules. You also have system tools, which is as of the time of this recording, almost 17,000
137:53tokens. Now, tools are things like the model's ability to run bash.
137:59That just means open up a terminal. It's the model's ability to run web search. That means to request a web page, have that web page information brought back, parsed, and then dealt with.
138:11It's the model's ability to do things like create a plan. These are all tools and functions that you don't actually realize that Claude has access to, but it does. And this is what the Claude code developers, Boris, Cherny, and all the rest of the team had basically done.
138:28Before you even get to your own message, which is all the way down over here. Okay. As we see, we have that claw dot m d stuff.
138:36K. Then we have the tools. Then we have m c p, which I'll cover in a second.
138:40Then we have that memory dot m d. Then we have skills, and then and only then do we actually have our messages.
138:48So there's a lot to go yet. These tools are constantly changing and if you guys want a list of all of them, you can actually just ask your Claude model. So I'm just gonna say, what tools do you have access to?
138:57List them all. And it's gonna go through and it's going to enumerate every single one. So see here, we have task.
139:04That's what opens up every time we call a sub agent. There's task output, which is another tool where it like retrieves the output of the agent. There's bash, which is how you execute shell commands.
139:13Glob is finding a file by pattern. Grep is searching file contents. Read is just how it reads files.
139:19You do need an additional tool for that. Edit is how it changes things. Write is how it creates and overwrites new files.
139:26Notebook edit is something specific for a type of file called a Jupyter Notebook. A lot of people do like data science and stuff like that in Cloud Code, and Jupyter Notebooks are a big chunk of that. There's web fetch, which is how it calls, uh, various Internet sources and then returns it.
139:40This is web search, which allows it to search sort of like Google. There's to do right. If you guys have ever wondered where those little to do lists come up when Cloud Code is doing stuff, it's that one right over there.
139:50Ask user question, because I've ever wondered where those little graphical user interfaces come up where it says pick one, two, three, or tell Cloud something. That's where that comes from. There's enter plan mode, exit plan mode, there's skill, which is just a meta function, which, um, more or less orchestrates how you call skills.
140:05Then there's task stop, which is useful because sometimes Cloud needs to stop something that's running. Okay. So basically, of all of the context, we scroll back up here and avoid this MCP tools, we'll cover that in a second.
140:16Okay. 16,800 tokens are being taken up by all those tools, basically all of the time.
140:22And there's nothing you can do to fix that unless you wanna go in and make your own version of Cloud Code or something. I will say, I think that some of these things are unnecessary. I mean, I don't I definitely don't need the Jupyter Notebook calls.
140:33I think there are a few additional features here that maybe I don't need or we could probably make them smaller. But this is something that the quad code team is constantly improving, constantly pruning and and so on and so forth.
140:42Next up, we have the MCP tools. Now, unlike system tools, MCP tools are things that you define yourself. Which means every one of these tools is something that I like basically put together.
140:52This is something that I connected to an MCP server to basically extend the functionality of my cloud code. So basically, what I'm trying to say is, these right here are default and these ones right over here, you control.
141:05And so, you know, as a percentage of my total context, I'm spending 2.8 percent on customizing my own cloud instance and then 8.4%, which is the default. Obviously, default ones are a lot bigger.
141:14But you know, some of these MCP tools can be pretty valuable. Issues with some MCP tools are, um, you know, they're they're really, really big as you guys are gonna see when I screw around with a couple of crappy libraries. Um, so you have to be pretty selective about how you choose them.
141:25And that's what this next section is down here called MCP tools. So for instance, I downloaded an MCP, a model context protocol toolkit called Chrome Dev Tools. This just allows Claude to open my browser.
141:38So what I could do is I could say, hey, open a Chrome instance and go to niksarayev.com. If you think about it, the context that I put together here, let me change this and say, great work.
141:50Go to leftclick.ai. If you think about it, you know, immediately above each of my messages is obviously all of the tools. Right?
141:58And so what these tools are is they're basically definitions that say, hello, Claude. You have access to the ability to take a screenshot. If you wanna take a screenshot, just call this specific tool and it'll do the screenshotting for you.
142:08And so, um, this is all above sort of my initial prompt where I say, great work, go to leftclick.ai. And so when I say go to leftclick.ai, Claude knows. Okay.
142:16Like earlier on, it said, if a user asks you to go to a website, call this tool. It obviously just references the specific thing. And as you guys could see here, it's it's navigating, it's taking screenshots, and it's basically controlling my browser right now, which is really cool.
142:28So that's an example of a tool that I think is pretty valuable. Um, that said, there are a lot of tools that aren't super valuable. And unfortunately, MCP tends to consume a fair amount of your context if you're not careful.
142:38As you see here, there's click, close page, drag, emulate, evaluate script, fill, fill form, and so on and so forth. I'm not gonna cover all these because there's just so many different MCPs that you could use, and each of them have so many different tools. Underneath that, you have memory files.
142:49You guys remember earlier when I told you that there was this big like m o m o r y dot m d. That memory is super straightforward, and in our case, that's only 88 tokens. Not that big of a deal, but it's basically Claude Scratchpad as it works.
143:03Next, have skills. Because remember, we had a Claude skills skills folder in another repo.
143:10That Claude skills folder basically in our case, like, I don't know, browsed Amazon and found something for us. In this one, we don't. So the only thing that's really storing is just the skills definition, which in this case is 61 tokens, expressed as a fraction of the total number of tokens we have available to us, 200,000.
143:25You could see that that's that's not even 0.1%. By the way, as I've communicated and kept talking with Claude, we've accumulated more tokens. So you can see how earlier it was at like 24,000.
143:35Well, now we're at 30,600. Right? We've gone up from I think 13% to 15%.
143:39So that'll continue happening as we as we go on. Next up, of course, you have your messages. And so in our case, we're consuming 2.6%
143:45of our entire context window right now just through messages and just through back and forth. This is sort of inescapable or unavoidable. Although, are ways to, uh, manage your context a lot more efficiently.
143:54You know, a couple of ways are speaking high information density ways wherever possible. Obviously, voice transcript tools are kind of against that because they take into account all of your ums and ahs and and whatnot. But if you wanted to be really, really efficient, what you would do is you would take your voice transcript, pump it into a cheaper model, one that doesn't cost you as much money, that's in a separate tab.
144:13Have that summarize it into a very tight request, and then actually send that to the initial, you know, Claude agent. And that's a strategy that I've used to manage really small context windows in the past.
144:22Obligatory, this is where the conversation with Claude actually occurs. I should note that, I don't know if you guys remember, but sometimes you can ask Claude stuff and then a little thinking tab will pop up. Well, that thinking tab isn't actually included in the messages.
144:33You are still billed for this separately, but basically what happens is, um, at the time that you make a request and at the time that the thinking occurs, it sticks all that onto the big message chain and then it uses that to figure out the next thing. So it uses basically this thinking area. It's almost a scratch pad to figure out more.
144:49And then, um, what it does is it collapses it, disappears it, and then it just gives you the answer. And then it pretends as if the reasoning or thinking little section didn't even exist. So don't worry about thinking here, assuming you have extended thinking on.
145:01Um, that doesn't really get included, although, of course, you are still paying for it. And then finally, the bulk of our context is free space, 67.7%, which is good for us.
145:09Not really sure why they include that here, but they do. The last thing that you guys need to understand is this idea of an auto compact buffer. Now an auto compact buffer is basically just a certain amount of space that Claude's developers always leave available.
145:20Um, and then, basically, what happens is when you hit that buffer, a k when there's only 33,000 tokens left, it'll automatically compact all of the previous conversation history. Now, this is done automatically, but you can also do this manually by going slash compact. What happens when you go slash compact is it basically takes all of our conversation history here.
145:39K? It'll take this, it'll take that, it'll take all that. And then it'll just squash it down into a very high information density summary.
145:46And so what I'm gonna do is immediately after it compacts, I'm actually gonna ask it to tell me what it just compacted. Basically, hey, you know, tell me what is currently available in your context. Okay.
145:54And as you can see here, it says this session is being continued from a previous conversation that ran out of context. The summary below covers the earlier portion of the conversation. First, there's an analysis tab where it chronologically analyzes your conversation.
146:06First message, user ran this, then user asked this, then user asked this, then user asked this, user asked this, user asked this, and so on and so forth. Okay? And so if you compare all of this to all of the messages and all of the tool calls and everything like that we did above, this will be fewer tokens.
146:20Right? Significantly. Probably like three or four x.
146:23And so in this way, gradual and progressive compaction of a conversation maximizes the information density. And then Claude's really good at like not leaving important things out.
146:34Um, so you tend to have most of the information that you really want or really need in this context. They've started also recently doing something called auto compaction, which is where this compaction is occurring constantly in the background for you. Okay.
146:45Your oldest messages are just like compacted into, um, you know, higher information density summaries, and then that's constantly sort of like a tail behind your current conversation. That's pretty cool because if you think about it, um, you know, us human beings are just not very good at remaining really concise and being very precise.
146:59And constantly updating that context improves the quality of subsequent outputs as well as, you know, bills you less, which is kind of interesting because, uh, you know, Anthropix's whole business model right now is monetizing Claude and and, you know, Claude and and Claude code. So the fact that they're doing this sort of runs contrary to their interests, which is one of the reasons why I like them as a company.
147:18They're obviously motivated by the quality of their product more necessarily in their their revenue and whatnot. So Cloud's website here is really helpful. They have actually a whole section dedicated to reducing token usage and minimizing the amount of what's called context rot that accumulates in a conversation.
147:33I'm just gonna run through them with you guys, and I want you to know this is this is constantly being updated. So the the time that you look at it might be a little bit different from the time that I'm looking at it. Again, if you guys want, like, up to date up to date tips, I recommend checking out Twitter, x.com, talking to Grok, and just saying summarize the best, you know, strategies to reduce token usage that users have been talking about in the last month or so.
147:51So you have, you know, strategies like rag, retrieval augmented generation, your strategies like continuously and consistently compressing the Claude. M d. Your strategies like telling, you know, Claude to write as concisely as possible, but then turning on, um, extended thinking, which is a feature I'll run you guys through later.
148:07Which basically means you blowed up the reasoning tokens, but then the actual token spill, uh, ends up being very low, and so on and so forth. So the number one recommendation that they have is to manage your context proactively by using slash cost. This helps you check your current token usage.
148:20You can also configure a status line to display continuously. In order to configure a status line in Cloud Code, you just go slash status line. You'll notice that you can't currently do this inside of the GUI version, so what you have to do instead is you have to open Cloud in a terminal here.
148:34Because, you know, graphical user interfaces don't have a status line. A status line is basically this little piece of text that occurs before. And then you just go slash status sorry, slash status line here.
148:45It'll ask you what you want to put in your status line. And so I'm basically just gonna ask it to include a little like, uh, like loading bar with the total number of tokens that I've used. Update my status line so it includes a little loading bar that is how many tokens that I've used out of my total context.
149:02So as you could see, it converted that into another mini prompt using a status line setup agent, and then, um, it's gonna do this kind of cool little status effect. So I'm actually gonna get to see it down here. I'll show you guys what that looks like in a sec.
149:13Okay. And as we could see here, we now have that little bar. So 13%
149:16of my tokens are used up. That's kinda neat. We also see the current model,
149:21and then, you know, the the branch that we're on if you're into programming with, uh, repositories and, like, get workflows and stuff like that. This to me isn't, super valuable, to be honest, if I'm being frank. Uh, I just thought it was kinda cool.
149:31So just another reason why doing all of this in the terminal gives you significantly more latitude. You can't really just like add a status line to the GUI version, at least not now, but this one's very hackable. Another thing you can do is you can add custom compaction instructions.
149:43So you can actually say slash compact and then give it a prompt telling it what to prioritize. You could do this every now and then, which is obviously quite valuable. You can use slash clear to start fresh when switching to something that is unrelated.
149:56So what I mean by this is, if I just delete this little terminal instance down here, just go back slash clear. What it'll do is it'll clear the entire conversation so you have no context anymore. So now, there's no previous context.
150:06If I go back to slash context, you can see that, uh, scrolling up the messages, you know, we have a 152 tokens, which is basically everything that we've done here so far. Aside from that, you can use instructions inside of the claw.md to basically try and minimize the total number of tokens generated as I mentioned. So you could say something like, hey, you know, write as succinctly as possible.
150:23You can reason all that you want because that isn't added to the context. But when you actually give me something, just give me the bare bones information. If I need more, I'll actually ask you.
150:30Choosing the right model is really big. Um, so if you're using a really simple sub agent or something, we'll talk about how to develop those later on. I recommend using smaller models like Sonnet.
150:39These smaller models are typically less intelligent, but they have much larger context windows and then you're billed less. So that allows you to, like, do all the heavy lifting inside of the sub agent that's cheaper, and then they just return you those results, which is great. As you see here, um, the Anthropic team specifies to reduce the MCP server overhead.
150:53And that's because, as I mentioned to you guys, some MCP servers just suck. They just have a bajillion tools. You'll download 120%
151:00of your token usage will be gone immediately. That's obviously quite costly, and then it makes Claude much dumber. So, you know, there are ways to reduce MCP server overhead.
151:07They have what's called advanced and automatic tool search now. Uh, when MCP tool descriptions exceed 10% of your context window, they won't actually load all of them. They'll just try and search for them before.
151:16So meaning, you'll say, hey, you know, can you open up a new page in Chrome Dev Tools or something? It won't actually have access to all that immediately. What it'll do is it'll search first a list of tools using Grep or something like that, which is its own built in search tool.
151:29And then it'll find one that says open Chrome DevTools, and then it'll load it. That helps you avoid, you know, massive MCP server overheads and then obviously wasting a lot of tokens. Some other tips are to move instructions from Cloud MD to skills.
151:40So remember how earlier I said your Cloud MD should be like 200 to like four or 500 tokens, uh, lines maximum. Some people make it even longer, you shouldn't. Instead, what you can do is you can break those down into specific rules.
151:51And then any rules that are more tasks than rules, you can actually just turn into skills. So skills will load on demand, meaning that, uh, only when you specifically invoke them will they be added to your context, which is quite helpful. You can also adjust, uh, extended thinking.
152:04We haven't chatted too much about extended thinking, but if you go back to Claude here, if you go to slash, uh, model, you have the ability to switch which model you're using. And then additionally, if you go over here, there's also a thinking tab, which allows you to turn on and off that little reasoning or or thinking window.
152:20As mentioned, thinking is pretty valuable because it avoids you wasting tons of tokens in the conversation chain itself. It offloads it to a little thinking tab. Uh, and what you can do is you can actually modify the effort level using slash model.
152:31You can disable thinking completely or you can turn the number of tokens that you give it to, like, maximum think from, I don't know, 8,000 to like 32,000 or more. Now agent teams is another feature of Cloud Code, which I'm looking forward to covering with you guys. But currently, it costs a lot, about seven times more tokens than standard sessions, especially when teammates run-in plan mode because every teammate maintains its own context window.
152:53So they actually kind of recommend against it if minimizing token usage is the number one thing that you wanna do. And then finally, um, you know, writing specific prompts is probably the highest ROI type that I could give you here. Instead of improve this code base, you know, you saying something specific, hey, fix this one feature that I found in this file, uh, is a lot more precise.
153:10And as a result, you know, despite the fact that it'll it takes a little bit more thinking on your end, a little bit more of your extended thinking, um, Claude's token usage ends up being significantly decreased. Finally, even Anthropic says that planning for complex tasks is the way to go because this significantly reduces the total number of tokens you use, um, when you're actually building solutions.
153:28Usually, API calls and calling servers and requesting web pages and stuff, these load a ton of tokens in the context. So avoiding doing research entirely is is pretty valuable. Once you're at the building stage, just front load the research with Plan and worry about it later.
153:41Now it's time to chat skills, which in my opinion is probably one of the most economically valuable ways that you can use Cloud Code. This is a Cloud Code in aggregate tutorial, obviously, so I don't just wanna talk about skills. If you guys wanna know more about how I personally use skills and things like skills, I do also have another course that talks all about what I call agentic workflows,
154:00which are analogous to skills. But for now, anybody that's not acquainted with us, just wanna run a quick demo. So if we open up this dot claud folder on the top left hand side, you can see that we also have a nested skills folder.
154:10And I have a bunch of different skills here. I have skills that allow me to classify leads, create proposals automatically, not dissimilar to the proposal generator app that we did before.
154:21And find outliers in my niche, um, updates and auto reply to emails, edit my YouTube videos for me, you know, onboard new clients to my agency,
154:31apply to Upwork jobs, and so on and so forth, monitor and then classify my school posts. I mean, if you think about it, what this is is this is a collection of all the things that I usually do in a daily basis, like for my own intellectually valuable knowledge work, the stuff that I basically get paid for. Now, what I've done is I've just turned them into, um, checklists and then I've just given these checklists over to Claude.
154:51So let's pretend that I wanna do one of these tasks today. Uh, you know, in my case, I want to scrape some leads. So what I've done is I've created a skill up here called scrape leads that scrapes and verifies business leads using a service.
155:02Then it classifies with a large language model, enriches the emails, saves it to a Google Sheet. Used when the user asks to find leads, scrape businesses, generate prospect lists, or build lead databases for any industry or location. I then have a goal up top, which is to scrape leads using a particular source.
155:16I have a bunch of inputs. I even have some scripts that I could use to run these, and then I have a process, and this is my checklist. Start with a test scrape, then do verification, then do a full scrape, then do LLM classification, upload to a Google Sheet, enrich missing emails, and so on and so on and so forth.
155:30K. So as you see here, big big deal. This is a fair amount of time and energy that, you know, I used to take to do these lead scraping things.
155:36As part of my work is, both for my, uh, my dental company and then for LeftClick, you know, for on behalf of my clients. Lead scraping is like a major chunk of what makes a successful cold email campaign.
155:47And I just had to do it myself every time. It would take an hour or two. Well, what I can do now is I can just turn all of my own knowledge into a skill.
155:54K. I can define it in markdown format here and, know, I can write it with Claude. Then I can just say, scrape me one k dentists or 1,000 dentists
156:02in, uh, I don't know, across The United States. And when I press this button, what's happening now is it's successfully loading the skill. It's starting with a test scrape of 25 dentists to verify my quality.
156:15It already, you know, automatically finds the different filters I wanna use and and so on and so forth. And then it's gonna dump these into a little folder for me. What it'll do after, according to my skills pack, is it's going to read through each of these 25 leads.
156:28Sometimes do a little bit of background research to say, hey, are these the sorts of leads that I'm actual you know, Nick is probably actually interested on? And then if so, then it proceeds with a full parallel scrape of 1,000 simultaneously, and that occurs quite quickly.
156:40So in this case, it started four of these scrapers and it's just, uh, you know, parallelizing these, so I'm gonna get 250 from each. To be clear, previously, this probably would have taken me fifteen or twenty minutes to set up the filters, to set everything, um, you know, kinda configure that initial search. And then if I wanted to do that search of 25, I I would have had to manually verify them myself, which took me another ten or fifteen minutes.
157:00After that, I would have started the actual scraper, then I would have had to like upload them into a Google Sheet. I would have had to cross reference the leads to make sure they're good. I would have had to run some additional AI based flows.
157:10And it just would have been a big pain in my ass to make a long story short. Now, AI is capable of doing this for me in just a couple of minutes. And I'm running this in terminal because I have access to what's called fast mode right now.
157:20Essentially, Anthropix new Opus 4.6 model has launched with the ability to run two and a half times faster for approximately three times the price. So I'm happy to pay a little bit more money if it means that I can do all of the knowledge work that I need to do a little bit faster. As you see here on the right hand side, it's now finding a bunch of my leads for me.
157:35It's compiling them into a list. Um, 250 leads done from that search, 250 leads done from that search, 250 leads done from that search, and we just have one more to go. And what's really cool about skills is it doesn't need to be right every single time.
157:46It's not like a program. It's not like I put something together, and then the second that it makes a mistake, it's done. As you see here, scraped about a thousand leads in eighty seven seconds and now it's uploading to Google Sheets.
157:55And somewhere along the line, there was an issue. And the issue was, it turns out it can't use spaces and stuff like that in the file. So what it did is it realized that it made a problem.
158:03K? And then it uploaded to Google Sheets with the proposed solution. It went through and it read through a little bit of like the API documentation and stuff like that to do that.
158:11This is stuff that I previously would have had to do and that try and retry loop just takes forever. On top of that, what it does is it goes and enriches the emails for me. And then what I end up with is I end up with a list that looks something like this.
158:21So I just bold this and I make this a little bit bigger. I've since hidden the email columns here just because I don't wanna, you know, show too much information. We have clinic phone numbers and and stuff like that, company phone numbers numbers and addresses.
158:31But as you can see here, we we have tons of information about dentists that are across The United States. Looks like a big chunk of them are in Philadelphia, New York, um, Moorestown, Boston. We have cities.
158:41We have everything that we need. And so what I'd do with this now is I would take this, then I would send it into a tool like Instantly, which is my cold email platform, and then I'd immediately start sending. And as I mentioned, this takes a pre existing process that would have taken me at least half an hour, probably more, and it turns into one that I literally did in eighty seven seconds.
158:56So as you could see, skills can be extremely economically valuable. The question is how do you actually about creating them and creating them in a way that I think is like reproducible and efficient and so on and so forth. Well, the first thing is, uh, you need to know how script or rather skill structure works.
159:09If I just zoom in on this to make it a lot easier, you could see that our scrape leads skill is broken up into a few components. First, we have the folder itself, scrape dash leads.
159:21Then we have another folder inside called scripts. This runs the program aspect of the skill. And then finally, we have the actual skill dot m d in markdown.
159:29So I want you to treat what we're seeing here in the skill dot m d as basically like the orchestrator
159:37of this whole affair. So the skill dot m d is like the checklist
159:46or orchestrator. You know, in an orchestra, the orchestrator is the person with the little, I don't know, those sticks.
159:54My sister does some of that actually, which is funny. I don't even know what the hell they're called. But, you know, it's where you kinda wave them around and do all that stuff.
160:00And then what happens is, you know, the orchestrator is not the person making, you know, the conductor, I should say, is not the person that's making the, uh, music. What they're doing is they are orchestrating the production of music from a variety of other sources. Inside of scripts,
160:15we have, you know, the actual musicians themselves, violinists, you know, the the cellists, we have the pianists,
160:24and so on and so on and so forth. And so, basically, what occurs is we give it a big checklist of tasks in the skill. Md.
160:31We give it a bunch of reference information and everything that it needs. And we treat it just like we treat a junior employee. We say, okay, here's the checklist, go ahead and do it.
160:38And then where the orchestration kinda comes in is if there's an issue with the step by step execution of different subtasks, some of which are going to be scripts and stuff like that. Then, um, Cloud gets to use its own native intelligence to fix it in real time. Not only do they fix it, but then it also goes in and it updates the skill so that if there's another issue in the future or if another instance of Cloud tries running this, it doesn't run into the same problem.
161:00So as you could see, they're very, very valuable. They're more or less exactly the same way that like a person would go and do a task. Now inside of my scripts folder here, I have, as you could see, a bunch of different, um, you know, actual Python scripts that have been developed for this purpose.
161:12Do I know anything that goes on in here? No. I haven't even looked at this code.
161:16It's probably the first time that I'm ever opening up this file. What I did is I told Claude that I wanted it to go and, you know, do things in my checklist and then go create scripts that would do them all for me. It's much better to do this than just tell Claude to do it from fresh and from scratch every time.
161:30Because obviously, if it's the same thing that you need to do every time, you should like turn it into like a defined program. Right? Because then it's always gonna execute similarly.
161:37That way, is not actually doing the executions themselves. What it's doing is it's just using the scripts here just like it uses tools.
161:44You know, how it has access to bash and web search and stuff like that. This is the same idea, it's just we're doing it encapsulated in the skill. Okay.
161:50So it takes this information, you know, it goes through the skill. It says, okay, step one is test scrape. So I need to run the scrape Apify with this query, max items 25, whatever the heck that means.
162:00Then it goes, it executes this. Once it's done, it checks the result. You know, if that's the case, then it goes back and then it runs the same scraper except with different parameters.
162:10Assuming that that's good, then it uses this classify leads LLM script afterwards to, you know, tabulate that information. Assuming that that's good, it goes into what looks like what looks like update sheet, like create a Google Sheet and then send it.
162:22Assuming that that's good, it then goes and enriches the missing emails and so on and so forth. And there's different paths here based off of, um, you know, how many people we wanna scrape. I have a few other skills that I use pretty often as well.
162:33This one's called literal literature research. And so, you know, if I'm trying to perform research on a task, I will actually say, go perform a lit review on the recommended daily dose of, let's say, vitamin d in IUD
162:47for males in their early thirties. What this will do, k, in addition to reading the claw.md to get context about this whole thing, is it'll go through and it'll read this literature research skill. If I open this up so that we can all see,
163:02the first thing it's gonna do is it's gonna query like this database, which I'm suggesting that it queries. So this database, I think, was called PubMed. After that, it's going to analyze using this little deep review script.
163:13And you'll notice that, you know, if I make this big again, you know, I made some mistakes here. Right? For whatever reason, the first query did not actually work fine.
163:20But, you know, it ended up redoing it over and over and over again until it figured it out. And so this is the orchestration aspect that I'm talking about. You can give it a checklist, but obviously, not everything goes right perfectly.
163:29Because not everything goes right perfectly, you need to give it some flexibility in order to do your tasks. And that's what it's doing right now. Right?
163:35It's gone through and it's, uh, you know, gone and created a bunch of literature review based information for me. Why would I use this versus, let's just say, telling Claude to go find that information? Because I've already just put in the, um, you know, infrastructure to query specific databases that I really like.
163:50I've, uh, taught it how to, like, run parallel queries so I can do this research in tenth of the time. I've taught it to use models that might be a little bit less capable, but might have much longer context windows and so on and so forth. And so this enables you to find a workflow that works really, really well, and then just consolidate it and then do it the same every time.
164:06This is why I no longer hire. I mean, you know, my businesses collectively still make over 300 something thousand dollars per month right now in profit. That's a lot of money.
164:14I don't have staff members to do these things for me anymore. Anytime I want anything done, I'll just tell Claude to do it with one of these skills. Because to be honest, it's the exact same thing anyway.
164:24I would have just hired a contractor to do this sort of literature research. I would have hired a contractor to do my lead scraping. Why why do I have to wait around a whole day or two for them now if I could just execute a skill to go do the thing, retrieve me the results, and then, I don't know, maybe feed it into another skill, you know, hundredth of the time for like a hundredth the cost.
164:40Okay. So while all of this is occurring in this tab and I'm doing that research, why don't I show you guys how to actually create a skill in practice? Um, to make a skill, it's really straightforward.
164:48You basically just give it like a bullet point list of things that you want it to do. So I'm going to say, today, we're creating a skill. Why And don't I just use my voice transcript tool?
164:55That's way easier. This skill will design websites in a format that I really like using a template that I really like. I want the websites designed very similarly every time because I'm gonna use them to pitch people.
165:06In short, what I'm going to give you is I'm gonna give you a bunch of information about a prospect and then I want you to design a website using a specific template. The template I'm going to supply you is this one. And then what I'm gonna do is, you know how earlier
165:19we went through godly. Website and then we found a template that we really liked? Well, I'm just gonna scroll through and I'm going to find a template that I really like.
165:26So scrolling through, I don't know, I just want this to be a simple website that I could use for let's just do like, I don't know, dentists hypothetically right now. So I'm gonna go over here and then I like this build an Amsterdam one.
165:40K. And then what I'm gonna do is I'm just going to I think that's it, honestly. I think I'm just gonna screenshot this and I'll just make one pager for Claude.
165:47Just gonna screenshot it. Okay. And then I'm gonna go back to my anti gravity and then paste it.
165:51I want you to use screenshot functionality to mirror the style of the website. I'm also going to paste in some of the HTML, so you can use that to create a style guide, etcetera. You'll receive as input,
166:02like a Google Sheet with information about a prospect, and then you just create a website that matches. Uh, find web images using publicly available sources. Make sure it's really pretty.
166:13And, uh, yeah, follow the template as closely as possible. Then I'm going to go on the website. I'm going to let's just make it really wide because sometimes websites are different.
166:22And then what I'm going do is I think I'm just going copy all of this. It's really, really long. Right?
166:27I'm just going to paste it in. So that's going to be huge. It's going be a lot of stuff to paste, 474 lines.
166:32And then, anything else that we need to do? I don't think so. I guess I just need to give it an example of some of the input.
166:38So I'm going go and then find that Google Sheet that we just had with a bunch of dentists. Then I'm just going to copy all of this information. And I'll say example of the data and then I'll paste that in.
166:48K. So I mean, I just found a tremendous amount of information here. Right?
166:51Like this is really, really big. But with our little fast mode plus, you know, some pretty
166:58precise instructions. I think we can probably generate a cool skill in just a couple of minutes that does this sort of thing automatically. And after this, I'll have a system where I can basically just feed in a Google Sheet and then I can generate a beautiful customized website for a prospect in like two seconds, which has information about them that clearly is customized and so on and so forth.
167:14And then I can just give it to them as sort of a lead magnet or something. That sounds pretty fun. And it's already gone through and it's done some stuff.
167:19Now I'm not using plan mode for this, but you absolutely can. I just wanted to one shot a skill with this fast mode just so that I could do something while I was waiting for the literature review to finish. As you could see, it's loaded in the skill pattern and structure from the other skills as well as the Claude on MD.
167:33And now it's just gonna ask me some information. So where should the output of the skill be? A local HTML file?
167:38Yeah. Let's just use local HTML for now. How will you provide prospect data?
167:41We'll just do Google Sheet URL. For images, which approach do you recommend? Yeah.
167:45Sure. Let's do the Unsplash API. Should the website be a mock up of what their business site could like or a pitch page about your services mock up of their site?
167:51Cool. That looks great. So that's sort of its plan mode analogy, and, um, this actually initiated plan mode without me even having to ask, basically.
167:59If I just make this a little bigger so you could see the entire chat. This went through and then turned on plan mode, like, on its own. I didn't even have to ask it to.
168:06And that's what occurs sometimes when you do bypass permissions, it'll just choose choose to create a plan for a more complicated software build. Cool. And now, I'm going to bypass permissions, and we're gonna go.
168:14While that's occurring, just scrolling through this literature review. Looks pretty cool. Gives me a bunch of information, apparently one to 2,000.
168:20So that looks pretty fun. K. And then this looks like the little demo that we put together.
168:24This is a pretty basic demo. I'm not that big of a fan to be honest. So I think we're gonna have to go do some back and forth.
168:29So we did build a website in just a few seconds from them, which is kinda neat. K. It's now gonna take a screenshot of this page for us.
168:35And as you could see, it's now accumulated like 19 or 20,000 tokens, which is kinda cool. Um, here's what we got. Full viewport hero.
168:42Okay. So I'm just gonna say, not a very big fan of the website design. I don't think this matches the website.
168:47I'd like you to get pixel perfect accuracy by screenshotting, um, the comparison back and forth. Go find some library that allows you to do this as necessary.
168:57In terms of Unsplash, how are you currently getting your images? Let's just do that. That's fine.
169:01I don't really want it to go, you know, force me to get an API key or something like that. I'm just gonna have it run. Okay.
169:06That's looking a lot better than what we had before. I like this. Uh, looks like it took some photos of areas that were similar to where this place is located.
169:14And as we scroll through, we obviously have the the information and the template and stuff. I don't like how a lot of these images are the same, so I'm just gonna say, nice job. I don't like how all these images are the same though.
169:23Get different images. Looks really clean. Uh, we even have like their phone numbers and stuff like that.
169:27So we're now capable of basically, like, one shotting a website for somebody. And, uh, as you could see, we can generate these super, super easily and very quickly. What I'll do now that we have this is, realistically, I'm gonna try it with one row and then just see how quickly it can put together the site for me.
169:41Cool. Now I'm going to test it with some new information and let's see how quickly it can put that together. Cool.
169:46We've now done the same thing with Bennington Dental Center, so that's neat. We have some images generated and stuff like that.
169:52Um, it is telling me that the reason why we have images of dogs and stuff is because I don't wanna supply my API key. Uh, you know, if we do, then obviously, they'll be much more dentally oriented. I think that's fine.
170:02Hopefully, you guys get the idea. You could build stuff like this really quickly. In this case, took thirty seconds.
170:07So, I mean, like, what we could do if we wanted to, like, build this out as a service and, like, actually just, like, generate custom websites for people, send them out and so on and so forth. Uh, we could turn the skill into a sub agent to show you guys how to do later, where basically, we can spin up 10 of these simultaneously and basically, in parallel, just generate 10 every thirty seconds.
170:23That's a per website generation time of about three seconds. And so now that we're generating them every three seconds with customized information, matching widths and heights and stuff like that, making it really custom and sexy. You know, you could do 10,000
170:34leads in approximately thirty thousand seconds. I don't know how long that would actually take. Let's see.
170:3830,000 divided by 60 is 500. So it might take five hundred minutes or, I don't know, eight hours for a full 10,000 list.
170:46But, uh, yeah, combine that with the scraper, combine that with you sending people customized websites, and combine that with some other skills that I've set up to, like, automate the process of whipping up instantly campaigns and stuff. And hopefully, you guys can see, we get a pretty solid system on our hands. And that took me just a few minutes to put together.
170:59Now that we know all about skills, let's talk a little bit about the next logical thing, which is model context protocol. So now that you guys understand sort of how skills work, which to be clear, is that skills are basically like back end functions that you can run scripts almost
171:14that use the flexible intelligence of AI and the procedural rigor of Python scripts and other programming tools to do the same thing every time, but also allow you the flexibility to air handle. So now that we understand that, um, let's talk about model context protocol.
171:31And so the way that I see it is these are just skills except other people make the skills for you. I wanna say other people, for the most part, it's like developer teams and stuff like that. Very similar idea.
171:40You're basically just giving your agent access to a piece of software. And then just like it calls its own tools, like web search and bash and the Chrome DevTools, MCP, and the screenshot, all the stuff that we've already looked at. What we're doing here is we're just, um, you know, we're we're just calling them,
171:54uh, but somebody else is responsible for putting them together. Now that obviously begs the question, where do I get, um, you know, MCPs? Well, you can just go on websites like mcpservers.org,
172:06model contextprotocol/servers, and then mcpmarket. I want you guys to know that not all of these are going to be 100% safe or secure.
172:16These are third party libraries that people are putting together, basically, that, uh, try and tabulate the number one MCP skills and so on, uh, MCP tools and so on and so forth. Um, but a lot of these are pretty well vetted at this point, and I'm gonna show you at least a couple that I really like. The biggest one is probably the Chrome Dev Tools MCP.
172:33This is one that I use constantly, uh, basically every day, many times because it allows your coding agent to control and then inspect a live Chrome browser. In my opinion, it is significantly higher quality than any of the current browser tools that, um, you know, Cloud or other platforms have given us. So I mean, like, you know, I have this little Chrome extension here that, um, I can actually use to control this instance of Chrome through this Claude tool.
172:56It's developed specifically by the Claude team and I could say, hey, um, summarize this page. And then what it can do is it can copy all the text on this page.
173:05It can extract the page text and then it can take a screenshot of it and then it can, you know, tell me about it and so on and so forth. I can also have it do things like click.
173:14I could say, okay, you know, star this on GitHub or something like that.
173:21And then I can give it some additional instructions and then it can go through, look for the GitHub link. I don't know, maybe click it. And then now that, know, we have this thing open, it it's gonna go and it's gonna try and star this puppy.
173:32So that's pretty cool. But you'll find that it also takes a fair amount of time. And the Chrome DevTools MCP bypasses that completely and it's like a 100 times faster.
173:40And not only is it a 100 times faster, because you can weave it into skill based scenarios, you can actually just run, um, really, really procedural things in the browser that previously would have taken you like a fair amount of time to automate. So I mean, I already have access to this right now.
173:53But, um, for the purpose of this demonstration, let me just open up a new clot instance in my terminal and then double check the fast mode is on. K. It looks like it is.
174:01You know, all I would really do if I wanted to download the MCP for any tool really now is I would just paste in this definition,
174:09which you can find right over here. K? Basically, all MCP tools are going to have some sort of JSON that looks like this, where there's a curly bracket.
174:17It says MCP servers. It'll say the server name. There's a bunch of commands in Rx, which really don't matter whatsoever.
174:22But basically, you just go on whatever page, um, of the MCP supplies this information. You copy this in. So if you wanna install one, all you really do is you just paste in that little, you know, JSON snippet that we saw earlier.
174:34And we say, I want to install this in my local workspace. It's important that you say local workspace here. What it's gonna do is just gonna grab that data and then install it for you.
174:45My case, it's already installed, um, so I don't actually need to change anything. But now I'll say, great. Run it.
174:51Now sometimes, when you're using a tool that requires authentication, um, what it'll do is it'll force you to go and grab an API key or an API token or something like that. So I'm gonna show you guys an example of using a tool that requires some API credentials in a second.
175:05First, let's just say, okay. Open and navigate to left click AI, then screenshot the site and tell me about it visually.
175:15So what it's gonna do is it's gonna open up that browser, gonna navigate to leftclick dot ai. Now it's gonna take a screenshot, which I think it just did. Now it's gonna read the screenshot, and then it's going to I don't know.
175:25Give me some high level stuff about the website. So, you know, this the header is a simple nav bar with a left click logo. Case studies about links and a let's talk CTA button.
175:33Hero sections, large bold serif. Right? Okay.
175:37Great. Go to amazon.ca and find me a bunch of cheap, but effective
175:43light boxes for my studio. So now, I'm gonna open this up. It's gonna do the same thing with Amazon.
175:48I'm in Canada, hence the .ca. And it's going to start, you know, pumping in various search terms for light boxes and whatnot. I don't know why Twilight is recommended to me.
175:59Must say something about my browsing history. Now, it's going through, finding a bunch of light boxes and stuff like that. It's gonna take screenshots of the page and then, uh, you know, deliver me a bunch of options that I could choose from.
176:10And you can see all this occur underneath the tool call. So these little green boxes are are little green circles, I should say, are tool calls. They have the specific name of the
176:20MCP over here, and then they have the tool that they're calling from the MCP over here as well. And what they're doing here is now that it's taking a screenshot and stuff like that, it's giving me summaries of all the information, and it's even recommending a certain one. Now a lot of the time, you can also just type in the name of the tool you want and then the word MCP server.
176:37And a lot of these tools will actually have gone through and then created this stuff. It'll take me to the ClickUp page with MCP server setup instructions. And then what I'm gonna do is I'm just gonna copy over this stuff just like I did before.
176:46K. And then we're gonna go back to my agent. So I'm gonna do is I'll just go install this m c p.
176:51I'm gonna paste this in. This includes all of the details and documentation here. So first thing it's gonna do is look for some sort of configuration file that's preexisting.
176:59It's not gonna find one, so it's gonna go and just make mine. Then eventually, what it's gonna ask me to do is go grab my API key, so I'll head over here to click up API and then I'm just going to copy my API token. I'll then confirm it and then I can copy my token in and then I'll go back here.
177:13Then I'll say, great, here's my API details. Gonna feed that in. And then every time you install a new MCP server, you do have to open up a new thing.
177:23So that's what I just did here. That's not gonna ask me which workspace I wanna connect to. I have multiple, so I'll click connect workspace here.
177:28Then I can just go back and then I'll say, great. Do you have access to my ClickUp MCP?
177:38I'll say, awesome. Create a new content idea called, um, Claude code course.
177:45Now what it's gonna do is scroll through all of my lists. It's then going to search for various ones that I may or may not have. So I have lists called, um, like, content ideas and trends and stuff like that.
177:56And I'm gonna ask it to insert at my main YouTube queue. So I'm gonna do that. And now you could see there's a task called, um, Claude code course.
178:03If I go back here to my click up, open up the specific task, there's now a course that's basically been created.
178:09I don't like how the status is archived, so I'm gonna the status is archived right now. And as you see here, you know, it's now set to to record. So that's pretty neat.
178:16The last thing I wanna talk about now is if we go slash context and scroll all the way up, you start to get an appreciation for just how many tokens can get used up by poorly drawn or poorly written MCPs. And so in this case, I'm not saying the ClickUp MCP is really that bad, and it's not terrible. I've seen many, many far worse ones.
178:34But it does consume a hell of a lot of tokens. As you see here, just the ClickUp search tool consumes 1,600.
178:41The get workspace hierarchy is four nineteen. This one's 1.1 k. If we added all of them up together,
178:47as you could see, my MCP tooling is now taking up almost 20,000 tokens. That's actually now more than the system tools, which, uh, previously used to be really, really big. And what that means is right off the very get go, basically, like, right at the very beginning,
179:00uh, we are already at something like 35,000 tokens or so before I enter my prompt, before I enter anything. If you take into account the system prompt as well, we're now at 40,000.
179:11You take into account some memory files and my skills, you know, we're not closer to 45. And this is all before I've sent a message. Right?
179:17Keep in mind that, like, 45% is I don't know. Let's just say 45 over 200.
179:23That's about equivalent to a quarter. And so one quarter of all my contacts and by the way, this is the highest quality section
179:31of my prompt. Like, if I were to write actual messages here, this would be the the highest quality output. Basically, the highest ROI section is currently being taken up by a ton of MCP tools and stuff.
179:42Uh, in addition, you'll compare this to skills, and you'll see that, um, scrape leads only takes up 63 tokens. School monitor takes up 59. Right?
179:50Cross niche outliers takes up 58. So it's like, oh, wow. You know, a single one of these MCP, uh, tools, like update task, consumes more than basically all of my skills combined.
180:00It's kinda like, why the hell would I even use MCP tooling if I can just, you know, do a skill instead? The reason really is just the convenience of it. MCP, as you see, is pretty easy to set up, whereas skills, as you saw, take a little bit longer.
180:10That skill back there that does those website designs, um, that took me, I don't know, probably, like, five minutes end to end to create. Once I've created, it's obviously super efficient and so on and so forth. But, you know, the click of MCP, all I really have to do is just like log in and then give it, uh, one line and then and then I did that.
180:24So basically, the way that I personally use MCPs is I use them aside from the Chrome Dev Tools MCP because I just think that's fire and I use it all the time. I use them to, um, very quickly sketch out whether or not something's possible. I basically go to a new tool that I wanna see if I can integrate and I'll just say, hey, you know, here's the MCP details.
180:38Can we do x y and z? And then if it can do x y z the first time, then I'll say, okay, this is great. I want you to take what you just did and once you convert it to a skill instead.
180:45And I want you to go and find like the the API endpoints and stuff, and then build a script that does all that for me instead of me having to use the super bloated, um, MCP tool. By the way, you ever wondered why skills consume so few tokens relative to everything else, that's because the whole skill is not actually, um, loaded into context.
181:02If we go to the scrape lead skill, the only section here that's actually loaded into context is this section right up here. And this in markdown format is referred to as the front matter of the file. And so what's really cool is the Claude code developers realized that they could, um, load in a name, a description, and some allowed tools to the front matter, and then only feed that into context.
181:25And then only if Claude really thinks that it needs to use us. If I specifically say, hey, use the scrape leads file, then and only then will it actually load at all. Which means I get most of the benefits of having access to a bunch of tools and, you know, giving my agent the ability to do a bunch of things.
181:38But I don't have to like load all that in the context immediately, which means I get better decision making at the beginning because performance and prompts are typically the best at the very beginning of said prompt, of, uh, the context window, I should say. And then I also don't have to pay a lot of money for it.
181:50So just another point towards Anthropic, minimizing our total cost, which I think I very much appreciate. So just because this is a practical course, I'm actually gonna show an example of this. I'm gonna draft out a task, and then gonna try it with an MCP server, which is gonna be a tenth of the time to implement.
182:03And then if it works, I'm gonna build a skill to do it instead. What I wanna do today, sort of like my task, is I want to label my emails.
182:13So what I'm gonna do, if you think about it, the task is really I'm going to list last, I don't know, x emails. I'm gonna have Claude read them,
182:26and then I'll also have it label according to some c scheme,
182:32you know, that I put together. And in this way, I'm not gonna replace the job of an email manager, but I'm gonna make the job of an email manager much easier. And if later on, I want Claude to, how do I manage my emails or whatever, well, now it'll have some pre existing labels and organized structures for it.
182:45So first thing I'm gonna do is I'm gonna go back to Claude. Let's go to anti gravity. I'm gonna do this in the GUI this time, not the other
182:53mechanism, not the terminal, because I don't think fast mode's super important for this. And I'm just gonna say, hey, I want to organize my personal mailbox. Could you provide me a list of high ROI labels that tend to work well for personal mailboxes?
183:06Just make sure the thinking tab is on because I want it to really think hard. And then what I'm gonna do is I'm gonna go to one of my personal mailboxes and then I'm going to basically implement this.
183:14I really like action based. That sounds great. Keep that for now.
183:17And then I'm gonna open up one of my mailboxes here. We have tons of different, um, emails. Most of these are spam, to be honest, or little demos that I put together for, um, you know, whatever purpose.
183:27Also part of what looks to be like a Slack workspace, um, for one of my businesses. I think I just did that because I wanted to test what this look like. Um, now that that's done, what I'm gonna do is I'm gonna see how I can implement the Gmail MCP really quickly.
183:38Great. This looks solid. How do I use the Gmail MCP?
183:41It's now going to go and search for Gmail MCP first in my folders,
183:47and then it'll ask me what it wants me to do. I wanna set one up, so it's gonna start doing some searches for Gmail MCP servers. I'm also gonna do some searching myself.
183:56There are probably three or four different ones that realistically work. Um, this looks to be a pretty interesting repo. So what I could do is I could just use this puppy.
184:03That looks nice. I just paste this in. It looks like I actually beat Claude to something for once.
184:08Now, it's gonna compare. Great. Let's do it.
184:12It's a personal Gmail. Is that okay? K.
184:15It's now gonna walk me through, so I'm gonna give this button a click. K. I went through and I got that data.
184:20I'm now gonna paste this in. It's gonna go find the credentials file that I just uploaded. Now, it can do what it needs to do.
184:26I just need to restart the Cloud Code session. So I'm just going to open up a new one here, then I'll go back and then I'll say,
184:34hey, I want you to label my emails. Oh, you know, and I don't actually remember. What was that scheme that it asked?
184:40Hey, I want you to label my emails according to this scheme. So now it's going to call the Gmail MCP. Okay.
184:45It's going to check the Gmail MCP tools. Just figured it out. We have a bunch of preexisting labels, so it's just gonna create a bunch on its own.
184:52The reason why this is occurring so quickly is because I'm using their fast mode, so it's about two and a half times faster than usual. It's now reading through a bunch of emails, and now it's going to, in addition to thinking through them, go through and then do set labeling.
185:04And then, you know, it's just gonna continue doing this for as many emails as I say. So I think I said that I was gonna do, I don't know, 15 emails or something like that. It's just a 10.
185:13So it's 15 inbox emails. Looks great. Why don't we do this for a 100 emails in total?
185:20Now if I go back into my email, uh, which I think was over here, you can see that I now have different labels. Just gotta refresh that. There's action required or reference and waiting on.
185:30So, you know, if something requires my action, some security alerts and stuff like that, then that's one thing. If it's a reference, so this is just stuff that it's storing that, you know, may be useful for me, and then there's waiting on down here. So now that, you know, I've demonstrated that I could do this sort of thing pretty quickly with a setup that realistically only took me a few minutes, I wanna turn this into a skill.
185:47So I'm actually gonna pause this and I'll say, great. This worked really well. I'd like to turn this into a skill called Gmail underscore label.
185:54Basically, what I want you to do is just to call the Gmail API directly and then do all of this labeling for me instead of me having to use MCP because skills are just a lot more token efficient than MCPs. Check out my other skills so you could see an example of how to format them and so on and so forth. And then write me a skill that effectively does this as well as uses Gmail scripts.
186:13Feed that puppy in and then press enter. Now I have some other skills that, you know, might have something to do with Gmail. So if it finds them, then it'll probably just wanna use those.
186:21Okay. Cool. Looks like it's rebuilding it all, which is fantastic.
186:24Um, we're gonna do the Gmail label skill directory. So it's gonna pump in somewhere right around here. Looks like I'm running into some error here, so we're gonna have to do some debugging.
186:33Just gonna paste this in directly. Okay. And it looks like we're just about to wrap this up.
186:37So now I'm gonna select, say that it can see, edit my email labels, and so on and so forth. Now that it's done, the authentication flow has completed, I may close this window.
186:46Going back over here now, it is created with full Gmail sheets and drive access, which allow me to do this much faster. So you guys seeing just how much quicker this is? 100 emails immediately fetched.
186:56It's now reading and classifying all of them using direct API calls instead of MCP server tools. And then in addition, you know, as I showed you guys earlier, we go to Gmail label.
187:05The only thing that's currently being loaded is this. And this is so much shorter than like the whole MCP skill stuff. So it fetched all 100.
187:12It's now categorizing them into five and ninety five. So it looks like zero is waiting on, 95 are reference, and then five are action required. That was way faster than what we're doing previously.
187:21Right? That would have taken probably like five to ten x the time. Looks great.
187:24Why don't we do another 100? And then time yourselves. Tell me how long it took.
187:27Okay. It's now gonna grab all of these. So it's just gonna continue the filtering process by, you know, using some Gmail stuff.
187:34Then it's also gonna add some timing instrumentation. That's kinda cool, just because I'm curious. Fetch was one second.
187:39So we fetched a 100 emails in one second compared to previously where it took significantly longer because I think the MCP tooling had like some built in thing. Cool. The end result was it was 36 to fetch, classify, and then label a 100 emails, so about three point six seconds per email.
187:52Sorry, point three six seconds per email if you think about it that way. Then it also gave me some, um, you know, breakdowns and stuff like that of what it is. I could run this across, like, my several thousand outstanding emails if I wanted to.
188:02I could also do things like have it automated automatically generate replies to each email. You know, we could build a sub agent, which I'll show you guys how to do stuff like that in a moment, where we, you know, split each into a a parallel tasks and so on and so forth. Sky's really the limit here.
188:15Okay. Next up, I wanna chat a tiny bit about Cloud Code plugins. I personally don't use plugins a ton, but, uh, they are out there and so it's fair if I'm building a master class course all about Cloud Code, might as well know what the heck these are.
188:27Simplest and easiest way to access plugins is just go customize and manage plugins. It'll show you the plugins that you currently have installed. So you see the only one that I have installed so far is called claud dash mem at the dot mac.
188:38Um, this is basically a simple straightforward, uh, plugin that basically just adds all of the messages that have sent any claud instance to some memory file, and then Claude can run searches over it if I say, hey, what did I ask you about two weeks ago? So, you know, it's marginally useful.
188:51You then have access directly from Claude to a bunch of other ones that are somewhat useful. Um, they have, like, front end design, for instance, which is kinda cool. So this is Anthropic's own library, which improves the quality.
189:01At least they they say it improves the quality of a front end work. You can build sexier and cleaner designs and stuff like that. Um, you know, I don't know.
189:09It's kind of fifty fifty. They say, like, if you're doing stuff without the aesthetics prompt, it looks like this. And then if you're doing it with the aesthetics prompt, it looks like that.
189:16Personally, I think both of these are pretty bad. This one definitely looks better, of course, but it's not like that much better. Uh, same thing over here.
189:21So I don't know if the guys that made this just weren't, like, actually crazy front end devs or anything like that. But I I personally think my workflow of just going to one of these websites and then copying the, uh, screenshot over and then moving everything into ClockOut is, like, way higher quality.
189:34But there are other cool ones here. Context seven's pretty nice. Context seven basically just allows you to search through any API doc without
189:40really having to, like, know anything about the API docs themselves. You know, if you're working with, like, three or four different tools, you just install this as a plugin and then it'll automatically, um, shrink and then compress API documentation from the sources over to Cloud, and then it can read it in a very token efficient manner and do cool things with.
189:57None of these things I wanna say are required. Vanilla Cloud Code does really, well without any sort of extensions or plug ins at the moment. Um, but, you know, just worth us chatting briefly about that.
190:06And then there are two major marketplaces right now that are sort of, uh, well, sorry. One major marketplace right now that's supported by Claude. It's this Claude code plugins directory, which is in the Claude dash plugins dash official repository.
190:18Um, you can find all of the plugins just by going to plugins and you'll see there's a big list of ones that they support right out of the box. So they have agent SDK dev, they have code review, they have c sharp LSP example plugin. But then there are also open marketplaces.
190:31So if you go to cod plugin marketplace, you'll see that there are a few other ones that people have put together here. Um, so this, for instance, is the Cloud Code marketplace put together by a third party resource.
190:41Uh, you can say Anthropic wants me to take down this website. That's pretty funny. With, you know, like chat gbt prompts,
190:48uh, let's see. Superpowers. I don't know exactly what that does.
190:52We have the contact seven again. A bunch of quad code skills that looks like some other people have put together, although not all of these links are gonna work. And, uh, yeah, you know, the the plugin installation process is pretty straightforward as you guys saw earlier.
191:03So I'll I'll leave it at that. I think plugins are sort of going to be deprecated and probably just absorbed into skills at some point, so I don't wanna spend forever on them. K.
191:10And finally, we have sub agents, which I think a lot of people here were waiting for. I want you guys to know that sub agents aren't like a cure all. These things aren't actually that incredible.
191:18Um, you can do more or less everything that you could do with sub agents as of the time of this recording just with like a a normal master agent. But sub agents do speed things up a little bit, and then they also allow you to parallelize your workflow, which can be quite useful in specific circumstances. One major issue that people currently have with sub agents is they consume a ton of tokens, and then in doing so, can also cost a fair amount, especially when you go to agent teams, which as of the time of this recording is seven times, uh, the token usage of just using like one single Cloud thread like I've been doing throughout this course.
191:46But sub agents are so pretty useful to know. And so the very first thing I'm gonna do is I'm just gonna show you through example, and then we can actually look more into like the the sub agent spec and stuff like that. So you know how earlier we built this system, the skill,
191:56which, uh, fetches, classifies, and labels a 100 emails as zero failures? What I'd like to do now is I'd basically like to turn this skill into a sub agent. So what I'm gonna do is I will remove this so we're not loading any more stuff into context.
192:08Hey, I'd like you to turn this Gmail dash label flow into a sub agent. The reason why is because I want you to parallelize your work. Instead of it taking thirty six seconds to fetch, classify, and label a 100 emails, I want you to be able to, um, spawn 10 sub agents that do all of those simultaneously and then return the results.
192:26Uh, I'd like you to do this using the sub agent spec. If you don't know what that is, do a little bit of research on sub agents. Um, it's an Anthropic and Cloud Code feature that's quite well supported by our current workspace structure.
192:36And once you've built the sub agent using, uh, Sonnet dash 4.5, I want you to roll it out as a test and then show me how much faster it is with some sort of timing instrumentation. Okay.
192:45So I have all that here. I'm now just gonna feed it into my prompt. If we open up this little thinking tab, it's gonna start by researching the sub agents and then building a paralyzed Gmail label flow that spawns multiple sub agents to class my email simultaneously.
192:57We use Sonnet five 4.5 because it can load much more into context, probably read all my emails, and then it can actually go through this whole process and then, um, you know, essentially paralyze it and significantly improve the probability and speed that these things are working well and fast. Very The first thing it's gonna do is actually spin up a bunch of sub agents to do research.
193:13So that's what this task little bubble is. Right? When it says research Cloud Code sub agents, what it's actually doing is it's giving this task to a sub agent called the research sub agent.
193:21Uh, there's another sub agent as well, like the search sub agent. So it'll actually search through my workspace to see if there are any pre existing sub agent patterns. And then because it's capable of spawning these simultaneously,
193:30uh, typically retrieves the results much faster than normal. So that's kind of fun. It's a little bit meta of Cloud Code to do that without really understanding what sub agents are out of the box.
193:38Okay. It's now going to create a sub agent directory inside of my dot Cloud folder, and then it's gonna populate it with all the sub agent spec parts and and everything else. And what's really cool is we're using sub agents alongside skills in this instance, and that's what I'd I'd usually recommend.
193:53I don't recommend just like creating sub agents for the sake of sub agents unless they're very specific ones. I'll show you guys a couple of them in a moment, but for the most part, like, use them where it makes sense. Use them in situations where you want to paralyze the workflow and be a lot faster.
194:06Okay. And then because we just generated the sub agents in a previous instance, we actually have to, um, call the sub agents in another Cloud Code instance. I just had to make a new one basically.
194:15What it's gonna do now is spawn a bunch of sub agents for me. Okay. So that's what these tasks are.
194:18So you could see classify email chunk one, two, three, four, five, six, seven, eight, nine. So all 10 classifiers are now running in parallel. We now have all 10 task outputs here, which is pretty cool.
194:28It's now absorbing all these task outputs, and we're operating at a much higher level of speed than we were before. Right?
194:35So that's recording the time, and then it's going to merge and apply. Classification took nineteen seconds, wall clock time for a thousand sorry, a 100 to complete. And then let's see the total time speed up.
194:46Okay. So in this instance, because we ran the same number of emails, we did 100 versus 100. Um, we only saved six seconds.
194:52So I wanna show you guys now is I wanna show you guys how to do this, um, at scale. So instead of, you know, a 100 emails, I wanna do a thousand. Excellent work.
195:01I'd like you to classify a thousand. The benefits of the speed up are most likely not going to be at the same level of scale, but they will become evident when we go at a much higher level of speed, uh, scale. So now we're gonna run 1,000
195:14of these, a k 1,000 emails split into 10 chunks of a 100 that are being classified in parallel with 10 sub agents. Considering that every time took, I think, like nineteen seconds or something like that per,
195:24I think it's gonna be a lot faster. So we'll see. Okay.
195:27Some of these task outputs are now starting to complete. It's been maybe fifteen, twenty seconds. I'm not sure exactly how long.
195:33But as they're all coming back, you see these little gray bubbles turn into green bubbles. Okay. We ended up having an issue where the prompt was too long, essentially because all of these sub agents returned massive strings of text with every single email, uh, for whatever reason when you combine all this into, you know, the parent thread.
195:49Just way too long and it ran out of context. So what I did is I just copied over everything, and then I gave it to another instance up here.
195:57And I basically said, hey, this is a little too long right now. Uh, I keep running into,
196:04you know, prompt too long output, so I think we ran out of context. I'd like you to modify this so we don't run out of context. If the sub agents don't have to return the actual text to the parent nature, that would be ideal.
196:13Then I ran it in parallel for all 10, and, uh, now we're just redoing it. At the end of it, it labeled 987 out of 989
196:20emails. Um, I didn't time that end to end. If I had to guess, it'd probably be somewhere around like a minute or so, which means we are now classifying a thousand emails in a minute, whereas a 100 was at 36.
196:31And this is really the power of sub agents. Sub agents basically allow us to take some query and then split it up into five, ten, fifteen, twenty, whatever. Run them all, um, you know, synchronously at the same time.
196:43And then once they're done, they just take the outputs of each of these threads and then combine them into the main one. And so, you know, there are a couple of other use cases for sub agents, but for the most part, it's going to be something like this. Like, if you really wanted to use sub agents in an economically valuable fashion, this is usually how you would do so, uh, as of the time of this recording.
196:59Sub agents are fantastic, but keep in mind, like most of the time, they're gonna be less intelligent than the parent agent. And so you wanna reserve the parent agent for taking the outputs of each of these sub agents and combining them and doing something with them, not just spawning, you know, 500 things in parallel to to to to run for no reason.
197:16Um, strategically speaking, some other things about sub agents are try and make the task definitions as simple and as straightforward as possible. Like, I could have given every one of those sub agents more context. I could have said, hey.
197:26I don't just want you to do the classification. I want you to do everything. I want you to do the classifications, the merges, the applying the labels, etcetera.
197:31But because the sub agents are dumber and because we're spawning a bunch, you know, we're multiplying probabilities here. If there's like, um, even a I don't know. Let's say there's a 95% chance that the sub agent's gonna work.
197:41Right? That's a 5% chance that it's not gonna work. And the way in statistics that you calculate the probability of a bunch of things occurring in sequence is you just multiply them out.
197:48So what this is is this is 0.95 times 0.95 times 0.95.
197:53Basically, what this is equivalent to is 0.95 raised to the three. And so if we spawn three sub agents, k, the total probability that all three of them will work the way that we wanted them to, if I just go back over here, is 0.95
198:05raised to the three here. So 85, a k 85.7%.
198:10You know, mean, if I'm running 10, the probability is now down to 59%. If I'm running, I don't know, 50, then the probability is down to 7%. Obviously, I wanna maximize the probability that all of these sub agents complete in the time that I've allotted to them and stuff like that.
198:24Not only for, you know, my own token count issues and my consumption. You guys see back here, like, I'm now at a $173 in additional usage on top of my cloud code usage,
198:32um, not just from this course of my idea, but I'm doing a fair amount. Um, but also for, like, completeness' sake. If I malform the output and then my parent agent can't, you know, collect it all right and do something right with it, Well, then what I've done is I've just basically wasted that whole query because, uh, sub agent prompts are ephemeral.
198:48They only exist for like a short period of time. Their context windows are all self contained. Do I really wanna rerun that thing a 100 times even if it's cheaper?
198:53Probably not. Right? Next up, I wanna show you guys how to create what I'd consider to be the three useful sub agents as of right now.
199:00So what I'm doing is I'm actually having Claude code create these as we speak. One's called code reviewer. The other's called researcher.
199:06And the last one's going to be called QA. And we're going to insert all three of these agents into this folder here alongside email classifier. And then I'm gonna update my cloud dot m d to reference the proposed workflow.
199:16Then I'm gonna show you what all that stuff looks like. Now in order to use agents, what we actually have to do is we have to, um, exit a specific instance that we generated the agents in. Otherwise, we're not gonna see them as available in our task definition.
199:27So I'm just going to create a new instance of Cloud Code. What sub agents do we have access to? I also refreshed this so we could see them all.
199:37And as we can see, have four. We have code reviewer, QA research, and an email classifier. Okay.
199:42What is the proposed workflow every time we develop some software?
199:49What I want us to do now is I want it to go through and then tell me, first, we write the edit of the code in the parent agent. Then we code code review, which spawns a code reviewer sub agent on the change files, fixes any blocking issues. Then we do a QA, spawning a QA sub agent on the code, generates tests, runs them, reports results, and fixes failures.
200:05Then finally, we do a ship. So now that we have all that ready, let's actually go and then let's use our new workflow on the flow that we just created before. So I think it was the Gmail dash label.
200:13Use our new workflow on Gmail dash label. It's the skill that looks through my inbox and then labels emails. So what I wanna do is I want to read through the Gmail label skill to understand what we're working with.
200:26So it's gonna read the skill, and it's also gonna go through all of the scripts. But I basically want us to take these scripts and then apply our little flow. So the first thing that's gonna do is run the code review agent on all four scripts.
200:36And as you could see here, we can run these in tandem in parallel. So first, we're gonna code review, and then we're also going to generate tests and run them for the Gmail label scripts. So we're gonna use both of these and then we're going to use them to feedback to our parent agent.
200:49Our parent agent's gonna make changes to this code and significantly improve the quality of said code. Now, is this like required to do every single time? No.
200:55As you guys could see, we're capable of writing some pretty damn good code without knowing a lick of code with just like the vanilla Cloud Code installation. This sort of stuff becomes more and more valuable when you're working at enterprise and you're creating code that requires, uh, the ability to, one, be like really secure and, uh, verifiable
201:11by both agents and then human beings if they read them. And then two, to, account for all possible edge cases. You know, in my case, I don't really care too much accounting for all possible edge cases because most of the software I'm making is for my own internal tooling.
201:23You know, it's like a one off landing page for a client to use, that sort of stuff. You know, know, if I'm working in a big business, working in a Vercel or working in an OpenAI or working in a, you know, I don't know, Oracle big database or whatnot, this stuff becomes significantly more important. And that's where, um, these sorts of code design patterns become valuable.
201:38Okay. So we're still waiting on the output of the other task. But if I scroll down here, you can see there's actually some recommendations already.
201:44Um, this is being provided inside of this task output, so it's not written very well or nice. So we're gonna have to squint a bit, but code is correct, readable, and handles errors appropriately. Batch fetching is a 100 per batch, but could use the Gmail API max of a thousand requests per batch.
201:57That means that we could significantly improve the total efficiency of this flow, and that's one piece of value that the code reviewer has already given for us. Then we have some callback stuff. So basically, it's identified an error or an issue, which is quite useful.
202:10It's giving us some insights on the readability and, you know, a little commenting that we could be doing to make the code better and so on and so forth. Okay.
202:18Now the tests are completed. So it looks like we've passed most of the test. There's only one that had a wrong exception.
202:24And now it's feeding in all of this information to the parent agent, the parent agent is gonna go through and do the fix. So 16 to 18 characters, it's gonna jump through accepting uppercase and variable length hex IDs.
202:36No idea what that means, but of course, this agent is now thinking dozens of times faster than I'd able to. So I'm just gonna trust that it's doing well. And then, uh, front load all of this, double checking, triple checking, QA, and so on and so forth to minimize the possibility of, longer term errors.
202:50So that looks great. We've now run our new flow, which has, you know, yielded significantly better benefits. Okay.
202:55Great. Now use the research sub agent to go and find me the best MCP server currently available for PandaDoc.
203:06So now I wanna show you guys the value of the research sub agent. This has now spawned one of my research. So it's going through.
203:13It's doing tons of research simultaneously, trying a bunch of different, you know, search queries and so on and so forth. It's now returned, uh, one of the web search,
203:23um, results. And as you could see, it's also doing tons of different, like, HTTP requests and stuff like that simultaneously. Now, I should note that, like, we already technically have a research sub agent built in, but you can modify that research sub agent flow by telling it, hey.
203:36You know, want you to use specific sources. I want you to trust these websites. I want you to, you know, preferentially go directly to the API docs and and stuff like that.
203:43And so that's what that research sub agent allows us to do. It allows us to research things the way that we typically research things, which is gonna be different from just, doing a general Google request for, I don't know, good APIs for PandaDoc. So, again, just to really impress upon you the value of these, um, really, a big chunk of value is
203:59it's cheaper to use
204:03Sonnet as of right now versus Opus. And so rather than do your research or do your low, uh, you know, leverage or low ROI stuff, like reading through a large amount of data to extract something, it's better to use the cheaper models.
204:17The next is that it's parallelizable, which just means that you can spin up multiple simultaneously and then wait for all their inputs as opposed to going one at a time. Like for instance, if this is us and this is sort of our task flow, let's say, you know, this is sort of the serial method, which is what we were doing before.
204:33Let's say every search takes one minute. So, you know, this is task one, takes one minute. This is task two, which takes one minute.
204:41And then this is task three, which takes one minute. I guess this is two and then this is three. That means in order to get to, you know,
204:50the start of our query to the end of our query, Cloud Code takes three minutes in total. Right?
204:57Well, obviously, the parallel approach here is a lot better. We start and then what we do is we just spin up
205:04three different boxes here simultaneously. And now, these all take one minute. And, you know, by the time that we end, what we've done is we've basically taken
205:16one minute because each of these are executing side long sort of, um, with each other. The last major benefit is the way that the context works. And so there's some situations like a, you know, reviewer sub agent where it's actually beneficial not to have any of the context of the code.
205:30It's not to have any of the biases of the decision making of the previous parent agent. And sometimes, you know, choosing a different model to do some of the reasoning can, uh, you know, reveal things that maybe the parent agent didn't necessarily think of.
205:43Sometimes it makes more sense to look at the ground at your feet, for instance, the dumbness rather than look up in the sky at, like, all the complex advanced stuff. Same thing with sort of like a QA agent. The value of both of these is they don't necessarily know what's going on
205:56in terms of the broader world. All they're really focused on is the code itself, way that it was written. And so they get to optimize objectively at like the way to make that thing as efficient as possible.
206:05And that's sub agents in a nutshell. Doesn't have to be any more complicated than that. It's basically just a folder structure and it's very similar to skills.
206:11My recommendation is use this in conjunction with things like skills to accomplish preexisting workflows, um, many times faster because of parallelization. But don't rely on sub agents because a lot of the time, the time it takes to spin up a sub agent for a simple query can be just as long as it would take to use just a parent agent to do the thing instead.
206:28While sub agents sound really sexy and obviously everybody wants to have giant fleets and swarms of them working for you on your behalf, be pragmatic and be efficient here. And now it's time to discuss one of Claude Code's most commonly hyped and misunderstood, but also pretty powerful features,
206:42agent teams. If you're unaware, Claude Code recently unveiled new functionality where you can orchestrate a team of agents and you actually don't do the orchestration yourself. You can actually spin up a team of agents that are managed by another agent for you.
206:57And then all you really need to do is just report back to that manager agent, let them know what you wanna do, and so on and so forth. Obviously, given the fact that this is pretty interesting at first glance, lot of people are pretty stoked about it and they've made tons of videos talking all about how agent teams run their whole life and have revolutionized programming and so on and so forth.
207:13Hopefully, in this module, I'm gonna show you that this is more of the same and agent teams are just another way that you can parallelize your workflow. So the way I want you to think about agent teams are basically just a more advanced version of sub agents. Basically, both agent teams and sub agents are a mechanism of parallelization.
207:31Like we had earlier when I showed you that example of doing a bunch of classification, you know, we have a task and we could do the task one by one. And if we do the task one by one, what we're doing is we're incurring a fair amount of fixed time cost.
207:45Not to mention, there are some instances where task steps aren't even necessary. And so if each of these are one minute, obviously, that's one minute plus one minute plus one minute equals a total time of three minutes to complete the task. Multiply this by 60, you get an hour, an hour, an hour, three hours.
208:01I I'm sure you can start understanding why we parallelize work. Much better to be able to spin up three separate solutions,
208:09have those operate simultaneously, and then merely integrate their results into one thread. Okay?
208:16In a situation like this, assuming one, two, three take one minute, obviously, the total time spent is about one minute. So just like sub agents allows one agent to spin up a bunch of these different tasks and then paralyze them, so too do agent teams. It's just they operate one level even higher.
208:31Instead of splitting one thread into three, what you end up doing is you basically end up splitting as many threads as you want into as many sub threads as you want as well. And so in this specific case, basically, I have one what's called team lead agent. And this team lead agent, as opposed to doing one, two, three, you know, four, five, and six himself,
208:56what he's doing is he's splitting things up into two separate agents here, having them both run three sub agents on their own, and then combine that into, uh, you know, one call. At the end of it, this agent then combines them back into the main thread, and then can reason about things and so on and so forth.
209:14Much in the same way that, you know, if you think about it, um, organizational hierarchies work. You'll have like a manager up here in a business, and then you'll have, you know, for the better lack of better words, like grunts, uh, down at the bottom.
209:27The manager tells the grunt what to do. The grunt goes, does what they want, and then reports back.
209:33So too, do we have sort of this, um, same system with, uh, sub agents and now manager agents as well. And then you basically sit outside of this whole thing just watching it all occur and then nudging different people within the organization or letting the team lead know you wanna change something where necessary. So if you break things down, sub agents own all of the context window,
209:53and the results return to the agent that called them. So in our case, we have a parent agent, we have a child agent. Our child agent owns its own context window and the results every time always go directly to the person or the agent I should say.
210:07Look at me anthropomorphize in these damn things, but called it. On agent teams, they own their own context window completely. They're also fully independent and so they don't necessarily have to return their results back to the caller.
210:19In fact, agent teams can communicate between them. So earlier, where we saw the grunts communicating with the manager, grunts also have the ability to basically communicate between each other. And while I think that this is ultimately less powerful or less effective than communicating with the manager because the manager is responsible for
210:37There are some instances where, you know, Grunt one does have a interesting revelation or time saver for Grunt two that could save him a fair amount of time. And in that way, um, this sort of cross contamination and cross pollination of ideas, while consuming significantly more tokens can lead to a better quality final product.
210:52And that takes us to communication. Right? Um, with sub agents, you always report back to the main agent only, but here teammates can message each other directly.
210:59Basically, occurs in an agent team is they build this mutual scratch pad, which is almost like a like a message board or a BBS board, if you guys remember from way back in the day. It's like a forum. It's like they're on mini Reddit.
211:09And they'll post tasks that they're currently working on. If they have any questions, they'll ask specific people that are responsible for those things. And they'll always just have that stored in their context.
211:18So if they, you know, have a question from one person, they can prioritize that question and then go and find it in, I don't know, their context and immediately reply. In that way, you could save individual agents significant amounts of time. In terms of coordination here, the main agent manages all the work, but with agent teams, it's a shared task list with self coordination.
211:36So just like we had a little Trello board or maybe, you know, a ClickUp, uh, task list or something like that. So too do these agents work off the JSON equivalent. They say that sub agents are best for focused tasks where only one result matters, whereas agent teams are best for complex work requiring discussion and collaboration.
211:53Now, this is just one of those like little marketing isms. The definition between focused task and complex task is very, very fuzzy and there is no real delineation between them. Sort of like how there's a certain point at which a hill becomes a mountain, but nobody could tell you exactly how many feet high the hill needs to be or whatever.
212:09Right? It's just one of those things where when you know, you know. And finally, the token cost of sub agents are quite low, relatively speaking, whereas agent teams are very, very high because every teammate is actually a whole separate clot instance.
212:21So when you scale up and spin up a bunch of these, you can use a fair amount of tokens quite quickly. Now, I should note that agent teams are not enabled by default because they're what we call an experimental feature. This may not necessarily be true by the time you're watching, by the way, but for now, they are.
212:35Um, they have set them to off essentially by default. And so only advanced users really get to peer behind the curtain and and use them. The way that you enable them is you edit your settings dot JSON in your current workspace and you just create this sort of a little string.
212:50You have this curly brace, you have env env, you have cloud code experimental agent teams, you set that to one and then you have some closing curly brackets. You don't need to worry too much about that.
212:58We'll do that in like five seconds. Finally, the cool thing about agent teams as mentioned is you can't just it's not only that you can communicate with the parent agent, you can communicate with all of the agents. So if, uh, I don't know, you want a contact switch and tell agent three in the sequence to do something different than it was currently doing, you can absolutely do that really easily.
213:16There are two different ways to do so. There's what's called in process mode and then split pane mode, at least is the time of this recording. One is where you basically just like alt tab through all of them.
213:24The other is where there's just multiple panes and so you'll see agent one over here. You'll see agent two over here. Agent three over here, and then you'll kinda get their feed.
213:31Um, I will note I've done this before, unfortunately, because Cloud Code renders your, uh, it's not just like a simple text terminal. Basically, they're, like, rendering this two d image constantly on your screen.
213:43It can consume a fair amount of compute, so I don't actually like using it that way anymore. I I basically always use an in process. But I'll run you through what that looks like if you did wanna use split pane mode.
213:51And then obligatory agent team tokens cost way more because you're spawning tons of different cloud instances. And every single one has its own context window and can do its own stuff. So if you have like 10 active agents running, you're gonna consume about 10 times the context, if not more, because there's also gonna be some coordination and communication, um, lag and overhead.
214:09So they have some recommendations here. They say use Sonnet for teammates. Keep teams really small because every teammate runs its own context window, so token usage is roughly proportional to team size.
214:18Keep the spawn prompts focused. We don't know what those are, so I'll tell you that in a second. Teammates will load their own Cloud MD, MCP servers, and skills automatically, but everything in the spawn prompt will also add to their context from the start.
214:29Clean up teams when the work is done, so you can actually roll them down or shut them down. And then, yeah, you know, agent teams are disabled by default because they don't want anybody blowing 10,000 on agent teams in a day, which you can absolutely do if you're not careful. That's why limits are so important.
214:43Okay. So first things first, we have to actually enable agent teams. So I'm just gonna jump over here to this URL,
214:48and then I'm just gonna copy all of the text on this page, and I'm gonna go over to anti gravity, Open that puppy up. And just for the purposes of this example, I'm actually just gonna open a new folder. So go to my Mac and then I'll say agent teams example.
215:02Okay. And I open that, and then what I'm gonna do is go over to Claude, paste this in, and I'm gonna say enable agent teams.
215:11I'm gonna go bypass permissions, close this puppy out so we can all see it. Maybe bump this out a bit so you guys can always see the text. So it's now added my
215:21settings dot JSON here and it's kinda fixed it. Okay. So this is now good to go.
215:25And it's enabled this across my global workspace, so it's not actually even in my file. Let's start with a really simple example of agent team, I could show you the parallelization aspect.
215:33And then what we'll do is we'll actually go into an open source code base. And I'll use agent teams to act as both code reviewers and then also debaters to debate between each other until they determine that consensus on how to make the code even better.
215:46So our first super simple example is gonna be, I'm designing a simple personal website for Nick Sarai. Generate three agents using a team and create three fundamentally different designs. Open all three once done, and I'll compare, contrast, and give feedback.
215:59Also,
216:02make sure they know everything there is to know about me, so nobody is waiting on anything.
216:10K. So I'm using the terminal for this just because the terminal UX is much nicer for agent teams than the GUI UX. I'm sure that'll change at some point.
216:18But, yeah, I also have fast mode on up here, which is just allowing me to do this a little bit faster. And so as you see, what's occurred is the agent, this parent agent here, Opus four point six, sort of made the executive decision for its very first task, basically.
216:32Oh, that's so cool. Didn't even know I could do this. To do research
216:35on Nick. And so after it's done the research, basically, it's now gonna spin up, you know, three agents.
216:41One for site one, another for site two, and another for site three. I really gotta figure out how to do this with hotkeys. It's super annoying.
216:49And then these three agents are gonna go working on this thing simultaneously and independently, and then they're going to combine those three websites back into just like we did with sub agents, sort of that main thread. But what's cool is, you know, these three different agent teams, since they're all individual cloud code instances, they get to do a variety of different, um, things.
217:06They also get to, like, access their own agents, use their own code base, and and stuff like that. So what's really cool is we have three agents now working in parallel.
217:14The first is called design minimalist. The second is called design dark, and the third is called design warm. I ask for fundamentally different types of designs, which is why they're doing this.
217:22Now, if you wanted to see all these agents run simultaneously, all you'd have to do is just go shift up or down. And so right now, I'm in the team lead context,
217:30but I could actually go down here and then press enter, and now I'm in the design dark. As you see here, we got a ton of information here with some, uh, context about who Nick's Rife is, and then it says you're designing a personal website, create a single self contained file. It's now creating a bold dark tech website.
217:44We could also go up to the main team lead, and then you could see that it's let me know that the design minimalist is done, and it's still waiting on design dark and design warm to finish their builds. So I mean, like, how exactly is this different from, I don't know, like sub agents right now?
217:58Well, it's different from sub agents in that you can treat every one of these as basically having its own whole Claude code instance available to to it. It. Okay?
218:06Whereas before, every individual sub agent only had access to the contacts that the parent agent gave. Realistically, what I could do is I could add a claude.md
218:14and all three of these would have access to claude.md, you know, style guides and stuff like that. So I'm gonna take a look at this.
218:20K? Saying that it's all done now, and it actually shut down all three of those agents as well, which is really, really important. If they're constantly running in the background, um, you're also gonna be computing
218:30consuming compute resources just as well as you are tokens. Now I'm gonna compare which ones I like more. This one up here is building at the intersection of AI and human ambition.
218:38Wow. Look at that. That's nice.
218:40Jeez. Insane. It's got a couple things wrong here.
218:43Definitely have more than a 150 k YouTube subs, but what are you gonna do? Looks like it does have my links, which is kinda cool. This is like, you know, dark coding one.
218:51Look at that. Isn't that neat? And this one over here is very interesting.
218:56There's no picture of me on it, but hey, what are you gonna do? How's my little nightclub promotions party business that's a hell of a throwback?
219:04And, yeah, what happens if I click this? Okay. Cool.
219:06Go we go back to our YouTube. That's really exciting. So I mean, like, I don't know.
219:09Maybe
219:12maybe I really like the first one. So what now what I'm gonna do is I'm gonna go back and I'm gonna say, hey, I really liked the warm narrative option.
219:22Looks great. I'd like now I'd like you now to spin up three more agents. I then want you guys to do research on
219:30effective design principles and copywriting principles that convert. Uh, once done, I want you to spin up a bunch of agents to iterate on this design
219:41and come out with their own flavors or versions, then report back to me. So now what I'm doing is I'm taking, uh, you know, this winning design here, the warm one. It's gonna take this warm beautiful thing, and then I basically wanted to, like, iterate on it even more.
219:53And as you saw, this occurred pretty quickly. Right? I mean, this took me maybe, like, two minutes or so.
219:57Is it perfect? No. But, um, because it's not perfect, I basically just wanna have Claude do a bunch of iterations on it and then give me what I consider to be an even better version, which I think it can do pretty quick.
220:06So it's gonna spin up a bunch more. We have research copy, research design, and research examples. This is a good, you know, actual use case here.
220:14It's doing three research agents in parallel. We have one that's figuring out, like, strong design principles based off of, you know, winning combinations.
220:23There's another that's doing some copywriting fundamentals, and then the third that is looking for high quality creator sites. So Ali Abdul, guy that I like, Hormozi, obviously. Danco, these guys are perfect, more or less exactly what I'm looking for.
220:35So it's gonna go do a bunch of research on them and then it's going to incorporate that in presumably some other type of designer. I could see the status by going shift up and down. So this person here, research copy,
220:45it's looking up, I don't know, best hero copy formulas, personal brand, scannable web copy best practices, David O'Gillibe, copywriting principles, headlines that work.
220:55Right? If I go down here to research examples, this agent is now writing up a bunch of high quality website styles. It's then analyzing the websites and, you know, giving me all of the copy and stuff like that.
221:07Presumably, it's going to integrate this into something nice. But if I go back up to the team lead, then I can see that it's, you know, basically just waiting on all three of these to finish. What's cool is these three all have their own token usages as you see here.
221:19So 53,000, this one here is 56,000, this one here is 50,000. When they finish, it then says idle and it tells you how many seconds that the agent is idle.
221:27This is, you know, mildly useful. Obviously, not utilizing your Cloud Agents is one of, like, the biggest issues with them. So what this thing is going to do is basically wait for these other two to finish.
221:36And then if these other two, um, don't finish after a certain amount of time, it'll actually just wind down the research design agent to stop consuming my compute and stuff. Probably the research examples is gonna take the longest time just because I think that that's like less of a a clear cut definition of done, but we'll see.
221:50And then what's really nice is these are cheaper models. Right? 50, uh, eight thousand tokens on the cheaper model, 56,000 tokens on the cheaper model, and only 2,000 tokens in the most expensive model.
222:00And so we haven't actually integrated all of that stuff back into the main yet. But as these finish, they will eventually, you know, take all of their tokens and then bring them back in. And so this token count will will increase significantly.
222:11K. Now that all three of these are done, we've collapsed these three agents into, uh, the team lead.
222:17Now we have these big design principles doc, research copywriting doc, you know, research site example doc. And because of Empower the, uh, team lead to be able to spin up new agents based off of, you know, various things like the conversion rate, the the copy, the creative, and the style, it's now generating new ones. So there's an iterate dark, iterate conversion.
222:39I don't know how many of this, uh, these it's going to spin up, but it's definitely gonna spin up some. In the meantime, we also have these really dense research summaries, so I can actually open this research design principles doc. If I just, um, scroll down a bit so you could see, we now have things like, there's a z pattern layout.
222:55Since the I starts in the top left and moves to the top right, your nav and CTA should be at particular places. There's also an f pattern layout and different actionable recommendations on color psychology and so on and so forth. I mean, this is a tremendous amount of text.
223:07Is this the most efficient way to like get all this across? Probably not. But because these models just think so much quicker than we do at this point, we don't really need it to be as efficient.
223:14We can actually just throw a tremendous amount of text at a prompt and it can actually do a pretty good What I really like about this is it took key inspirations from different people. So in this case, Justin Welch's upside down homepage. I really like Justin Welch, so that's great.
223:26Dan Cohen, C. Hill Bloom's dark premium, bold typography origin story is some sort of cinematic centerpiece. Like, it's taken inspiration from all these different people, then it's combining them with slightly different copywriting directions to create things that are ultimately new and presumably going to be quite different.
223:42And, you know, I think a lot of people rag on agents and AI is not really being creative. Like, what is creativity, um, if not just like combining things over and over and over again in like a million different combinations? I'd wager most things that you probably consider to be creative are things that like whose preexisting
223:57pieces and principles existed before, and AI just combine them into something that maybe hadn't really been put together in that way. There are certain sentences that have never been said before or written before. You could be the first to write one.
224:08Some of them are quite creative. Okay. And we are done.
224:10So the first site here is I help aspiring AI entrepreneurs build their first twenty five k month automation agency. I like this. This is really clean.
224:16That's actually quite the value prop. We do have an issue with the button, obviously. So the thing is this model does not, uh, was not given the ability to screenshot.
224:24I bet you if I did, that would have been pretty straightforward. So this is a good opportunity for me to update the claud.md and say, hey, you know, you can do some screenshots. Still, this looks really great.
224:33Step one, watch the free training. Step two, join maker school. Step three, build your agency.
224:36I mean, honestly, the fact that this is just a couple of minutes, this is so much better than what I could have done in an equivalent amount of time. It's not even funny. And not only did I generate one,
224:46I generated three. So now I have a dark one. Right?
224:49That's pretty clean. I like that. This must be of a Danco one.
224:53There has to be a faster way to matter. Oh, that's clean. Right?
224:58Again, it's taken that main website and then it's iterated on it based off of different styles and different approaches, which is more or less exactly what you do in any sort of copywriting and and so on and so forth. So I really like this one. Mean, this one to me is probably my favorite.
225:11You wanna build an automation business, but you don't know where to start. I really, really like that. Um, so I think I'm actually gonna take that.
225:17Great work. Uh, build in screenshot functionality because you don't have the ability to screenshot a couple things stand out. Also, get pictures of me to put on the site.
225:29Let's choose the first one, which is the conversion machine. I think it's the conversion machine. Right?
225:36Yep. Also, we need to update some stats. We have 2,100
225:41or 2,200 people in Maker School right now. You can check that out just by googling Maker School. And then,
225:47uh, let me see. What else do we have? Grab the image of, uh, me, Alex Ramosy, and Sam Ovens, and put that somewhere on the site, and add more to the site.
225:55Right now, it's good, but I want it longer and with pictures of me.
226:01Also, see if you could build some sort of animation on the main homepage. I think that would add a significant amount of visual appeal.
226:09Right now, it's pretty vague. I do quite like the gradient though. While you're at it, spin up another three and continue doing more iterations, more sections, etc.
226:19Okay. As you could see, we're now searching significantly more of the total space of possible websites here because not only did I spin up, you know, three initially to build me these, and then three iterations on the one that I liked, I'm now spinning up another four, um, based off of the one that I really liked from that previous iteration.
226:38And so in that way, if you think about it, like what we're doing is we're taking this idea of what I want. We're testing a few variants. We're seeing which ones actually look good.
226:48These are two no's. We're spinning up even more. We're seeing which ones of these I really like.
226:55Okay. These ones are all now. And now we're spinning up another four.
226:59And, you know, eventually, if you continuously do this process, you'll get to
227:05a website or a web app or a property that's like five times better because we have essentially,
227:14instead of just picking one option and stopping there, uh, we've really thoroughly explored the space of all possible opportunities and options. And so that's something that agent teams really help with.
227:24I know my text kinda slanting up, but bear with me. And while I'm doing that, we see that some of these are already starting to finish. So iterate scroll just finished.
227:31That was pretty fast. Looks like the editorial magazine style site completed with all 13 sections as well. We got the conversion site fully rebuilt with all the changes now.
227:40And now, we're just waiting on the split. There it is. It's now gonna open all four of these.
227:44And so for a 150,000 tokens or whatever the hell I just spent, essentially, I've now been able to draft up what I consider to be a pretty clean and sexy website.
227:54I have that picture that I was looking for. I have this. I mean, this is great.
227:57Right? One thing I'm missing is that little, um, video page, but hopefully it's clear. I mean, I could build,
228:03god, websites are just the the tip of the iceberg in terms of what you could build. Have my picture here. I got my whole business bird in a show ma.
228:10That's me during COVID doing a little videography shoot. That's when we played bowling down in The Philippines. Mean, I like this stuff's super straightforward.
228:17Also, I really like this other editorial site. I might end up just choosing that. That's super clean.
228:22Right? Those harsh corners and the photos and stuff, very nice. Okay.
228:26But if you just use agent teams to design a bunch of websites, you're honestly leaving tons of potential on the table. Most people are kind of uncreative, and so obviously, most of demos you're gonna see on the Internet are gonna be like, watch me rebuild this website 400 ways like I just showed you. Um, you can go a lot deeper than that.
228:40And actually, the number one recommended use for agent teams right now, at least my recommended use, is using it on pre existing repos to do a tremendous amount of research in a short period of time. So what I'm gonna do next is I'm actually gonna go over here. I'm gonna delete all of these websites that I built because the websites are basically only worth the tokens that they're printed on.
228:57K? I'm gonna full screen this and then I'm gonna say, um, clone this and then open an anti gravity instance inside of it. Then I'm gonna paste in one of the repos for Openclaw,
229:08which, uh, I've made some rather scathing videos of. Openclaw is totally open source, which means you can muck around the code, take a peek at the way that things were written, make improvements if you really wanted to, and so on and so forth. Looks like it doesn't know what antigravity is.
229:22Antigravity, the app. It's like Versus code.
229:27Okay. Cool. And it ended up opening up OpenCLOD
229:30inside of this. As you see, we are now, like, in the folder of OpenCLOD.
229:35It's just instead of it being on GitHub, it's now on our computer. That's just a quick and easy hack. You can basically do whatever the heck you want with these repos.
229:42Once you're inside, I'm just gonna open in the terminal because I think I can probably go significantly faster in the terminal. Let me just open this up. K.
229:50I have it right down over here. I'm gonna pop this puppy open, make it go full screen by clicking that button on the top right.
229:57And now, I'm going to use agent teams to go through this massive massive file and then make improvements. Taking a look at this prompt, I wrote open clause great, but there are a bunch of security issues. I don't know exactly where they all are yet, but I want you to find First, create a team with 10 teammates to look through the code base very quickly.
230:13Split things up logically based on file size, etcetera. Then spin up four agents to document all of the security issues and a fifth and sixth debate agent that plays devil's advocate back and forth. Use Sonnet for each teammate so as to make use of the longer contacts window.
230:27When you've identified all the security issues, then spin up one agent per security issue and make changes. Ensure each agent works only on the security issue it is given to minimize overlap. And if one agent steps on another agent's toes, have them rectify by talking back and forth.
230:40Now, I'm not going to fix this code base throughout the course of this video because that'll probably take several hours for it to go through, make changes, and then obviously, there's q and a and testing and and so on and so forth. This is pretty similar to the workflow of the creator of this, godforsaken repo. And if you're curious about why I have strong opinions on this, just check my channel for, uh, one of my videos from, like, two weeks ago or so.
231:01But, uh, this is pretty similar to the workflow that they're currently using in order to manage things. But suffice to say, you can use an approach like this on basically any open source library, not just to identify security issues, but also to improve the product. You could come up with different, uh, product angles.
231:15You could have it, you know, go through spawn five agents each that propose different product ideas, and then you could have, like, debate agents that debate back and forth about why this would not be a good idea. And in doing so, they come to a consensus and improve the quality of the product at the end of the day. So what this just did is it spun up and listed all of the products here so that it could build a simple and straightforward way
231:36of basically splitting this work up. So now we have 10 scanner agents that are running in parallel across the code base.
231:42This first one here has 83 k lines. The second one has 43, 42, 42, 35, 49. So they're not all the same, obviously, but lines aren't all equal.
231:51So maybe this did some additional work behind the scenes or under the hood. Now this is gonna consume a lot of tokens. So you see here, we're already at 1,300,000
231:57and counting. And, you know, I'm consuming a fair amount of my own token budget to do this, but I figured it would just be interesting for us to do. If you're operating at, like, a massive scale like this with dozens, if not hundreds of these things, you know, you will eventually spend several thousand dollars on said tokens.
232:12And so you need to be prepared for that. Don't spin up an unlimited number of agents if you're not capable of paying the money for upset unlimited number of agents, obviously. And be wary that the tokens that you are using here are tokens that, uh, unfortunately, you will never get back.
232:25You can't spin this thing up and then ask for a refund of any of these. So be careful, I guess, uh, to make a long story short. However, if you do have the money, you can basically convert it and translate it directly into time, as in time savings.
232:37Um, what I've done here is I've taken $1,300,000, uh, $1,300,000. 1,300,000
232:42SONNET, uh, 4.5 tokens, and I basically immediately translated them for probably several hours of my time because I don't actually have to go through this or do this a lot slower with like a more intelligent agent. So now that we've done this, the next step is we've compiled all of these security possibilities, I should say.
232:58We're now spawning specific agents all about particular
233:03security issues. So we have a command injection and code execution agent, an authentication and authorization agent, a path traversal plus SSRF plus info disclosure agent, crypto plus race conditions plus config agent, Challenges findings as not real issues is devil number one, that's devil's advocate.
233:21Then, uh, devil number two says argues findings are real and need fixing. And so basically, these agents are all gonna report over to these puppies. And these two are gonna debate back and forth between each other to determine whether or not this is something that's real, whether or this is something that's actually super important.
233:35They're gonna take different, uh, principled positions and attempt to see whether these findings are not real issues or whether these findings are real and need fixing. Usually, when you have two agents work adversarially against each other like this, the end result is higher quality. This is actually the core of a big chunk of machine learning, um, which is what AI used to be called a few years back, not just large language models.
233:53Generative adversarial networks are one of the, uh, first image models for instance, and they work in a very similar fashion. You had something that generated and then you had sort of like an adversary. And these two just went back and forth and back and forth until you got a really high quality result.
234:05So I can actually scroll down here and see what these two are saying. So these are literally having a conversation right now. These are actually discussing things.
234:12Looking at devil number two, it's sending round one its counter arguments now. We're going back here. And they're basically, like, fighting verbally, mind you.
234:19Sticks and stones may break my bones, but AI words will hurt you, uh, to determine which is the best path forward.
234:26This message over here, this wasn't mine. This was a message from the team lead. Basically, a devil number one responded to team lead saying, hey, here's a key finding.
234:35Team lead responded back saying, hey, keep going and let me know when the debate finishes. When it's done, we're good to go. So to be clear here, over the last, I don't know, maybe fifteen minutes or so of the specific, um, agent team instantiation,
234:47I spent close to probably 80 or so dollars directly on this one query. And that's what I mean by trading money for time.
234:55I mean, like, obviously, if I had a team of developers doing this, you know, they probably would have been more accurate, but it also would have taken them presumably several weeks to do the level of research that this agent was capable of doing in just a few minutes. I traded $80 for that time. And so in some instances,
235:10that's worth it. But in a lot of other instances, it isn't, which is why agent teams need to be handled pretty carefully. They're almost like a nuclear weapon, just one aimed directly at your wallet.
235:19Now we've done the debate back and forth. The two have had a great conversation. And so basically, they found 15 total flaws.
235:25What it's doing is it's now spawning 15 fixer agents, one per isolated security issue or group when they touch the same file. Now, I don't obviously want this to consume all of my tokens, so I'm just going to cancel this and I'll say shut in caps, shut everything down ASAP.
235:40It's not gonna shut down all active agents immediately. Unfortunately, just due to the nature of the shutdown request doesn't occur immediately. It's not just like we're, you know, alt f four ing this whole puppy.
235:49There's a little bit of time because every individual agent is still in the middle of a query while it's doing the thing. So, you know, you're probably still gonna consume a little bit of token usage. Not gonna be that crazy, but it is gonna be a little bit.
236:00But, yeah, you know, I've consumed enough at this point to know that this is something that I'm probably not gonna wanna do unless I'm hell bent on improving the OpenCLR repo, which I am not. And that takes us to the final module in this course, which is one on Git work trees. Now Git work trees used to basically be what agent teams are today.
236:17Essentially, you could have multiple agents all running on their own individual, what's called GitHub repo or GitHub branch. And in doing so, these agents could all work on individual features, which allowed them to do what they needed to do before ultimately merging back to the main branch. To visualize this for you, imagine we start with a job over here at main.
236:35This is our main branch. And then there's some bugs. What we do is we spin up a branch called hotfix.
236:41Now this is given to a different agent. We then have another branch called develop, which is given to a different agent. And then finally, a branch called feature, which is given to a different agent.
236:49So basically, what occurs is we have one agent over here, extending on this branch. One agent over here, extending branch. One agent over here, extending on this branch, then one agent over here, on this branch.
236:59And essentially, each of these go through their own development process, similar to the agent teams like we just saw here, just managed through GitHub instead of just the anti gravity IDE. And then when they're done, what they do is they merge the results back into the mage branch. Now, if you're not a big into programming and you haven't used GitHub before, this idea of a merge can be pretty difficult to understand.
237:17But basically, every branch just stores a copy of the folder. And so this master folder is basically the same thing as this new feature folder with just a couple of minor differences and it's usually the new feature itself. So when you merge, what you do is you're just tabulating a list of all the changes between these two, and then you're taking the new changes from the new feature branch and applying them to the master branch.
237:37Um, this merge process can typically be pretty messy, and so having agents around to mediate the merges and so on and so forth can be quite useful. So first of all, I have a really simple website set up here called left click dash agency. I made this for my own website a while ago and,
237:51you know, had AI do the vast majority of the work in a very similar sort of workflow to what I just showed you guys a moment ago with agent teams. And what I wanna do is, you know, I wanna design additional pages here. Uh, one page that's really long is not enough.
238:04So in addition to this homepage, I also wanna design an about page, a contact page, and a services page. And I wanna use the git work tree workflow in order to do this.
238:17Now, because I've stored information on what I mean by git work tree in my claud dot m d, which is basically that we use git work trees for parallel development with claud code, where every work tree is an isolated working directory sharing the same git history, allowing multiple cloud code instances to work on different tasks simultaneously with interference.
238:35K. This already knows what to do. The very first thing that it did was it basically took my main repository,
238:43which was just called left click dash agency, and it made three different ones. It made one called left click dash agency dash services, that's a new folder.
238:51Another called left click dash, uh, agency dash about, which is another folder. And then another called left click dash agency dash contact, which is the third folder. So basically, it's doing now is it's creating
239:02new GitHub repositories, new individual feature branches to work on different pages for me. Now, did this using the agent team functionality.
239:10And the reason why I did this is just because it's much faster and they get to work on different GitHub repos simultaneously. The only real advantage to using Gitwork trees, think, at this point is just that when you use Gitwork trees, what you're doing is you're not actually modifying the main folder. Like, if you look up here, we're not actually modifying any of this right now.
239:25What we're doing is we're basically creating a new folder in our, you know, uh, GitHub repository, and you can see them right over here, and then working in those different folders individually. So for instance, we have left click dash agency.
239:39This one here is my main folder. Right? But then we have left click agency about.
239:43This is a new branch that's working specifically on the about. Then we have contact. This is a new branch working specifically on the contact page.
239:50And then the finally, we have services, which is a new branch working specifically on the services page. And so the reason why this is valuable to people that are non programmers is because you reduce the possibility of two different agents working on the same file, uh, which will occur.
240:04You will get what are called agent conflicts over time naturally as you have multiple agents working on multiple things in the same base. And the reason why is because files aren't perfect separations of functionality.
240:14You know, you'll have one file and then that file will have, like, the snippet of a little bit of code that's used by another file. And so in that way, there's there's never, perfect separation. So if an agent really wants to, like, totally encapsulate a function or something, sometimes it'll have to dump around from both.
240:28And when that happens, it'll step on the toes of another one. So anyway, when you use WorkTrees in this way, you just eliminate that, um, for being an option completely. Uh, basically, there's just no way that these two can step on each other's toes because they're actually all working in separate folders simultaneously.
240:41And because they work in separate folders, that also means if they do make changes, those changes don't always perfectly harmonize right away. And that's where that merge step comes into into play. Basically, um, you know, now after we work on these three different branches,
240:53we also have to do is we need to unify them through some sort of merge, uh, function. You can see the prompt for the general purpose services.html
241:02one here is you're building the services.html page for left click agency, work in the work tree at this folder, create the file in here, don't modify the index.html, you know, there's tons of information.
241:13If I go back here, we'll see the same thing for contact.html. And so all you really need in order to have a workflow like this that minimizes, um, you know, dependency risks It's just have a cloud dot m b that outlines what to do with Git Work Trees.
241:27I'll include this file down below so you guys have everything that you need. But taking a look at the about dot HTML here, which is one of the files that this thing just whipped up for me, um, you know, we've now basically finished the page. It's used some placeholder little flasks here because I wasn't sure what I wanted to do for images.
241:43Um, and, you know, I can add however much information I want here to really flesh it out. Yeah. This looks pretty clean to me.
241:48Our principal's ready to work with us. We have oh, that's really clean. I didn't realize I could do that.
241:53Likewise, with the contact.html page. So now we have a beautiful contact dot HTML page with like a little send us a message form and so on and so forth.
242:02I wonder if that works. Wow. It even has some validation.
242:04That's pretty neat. K. And then after it's done, what it'll do is it'll merge everything together.
242:08So we also have services. Ayxml up here too, which is really clean.
242:14This looks like a real chunky page, which probably explains why it took much longer. It looks like it even estimated some prices for them, which is pretty nice. So yeah, suffice to say, Gitwork trees, while not necessarily the end all be all, can be an extra layer of insulation if you guys are using something like, um, you know, agent teams or even if you guys are using sub agents, um, just using some sort of merge functionality like I talked about.
242:35If you guys want more on that, I'll include the claud.md below so you guys have everything that you need. Okay. So we've talked a lot about using Claud code to build cool software apps and stuff like that.
242:43The last thing I wanna talk about is basically just automating or significantly streamlining the process of deploying things to the Internet. Guys remember that first site that I made and then the proposal generator and stuff like that? I use a simple service called Netlify to basically push my work live.
242:56And that service works really well for static sites. I'm not affiliated with them whatsoever, the way. Use whatever the heck you want.
243:01Um, but what I wanna talk about next is using something analogous to that just for back end functions and skills and scripts and so on. So what I'm gonna do here is I'm gonna whip up a open conversation. I'm gonna jump into bypass permissions, and I'm gonna say deploy a simple API endpoint that returns happy birthday Nick if it's my birthday or no birthday today m f if it's not.
243:21And what I wanna do is I wanna show you guys how easy it is to basically whip up your own URL that does something for you. This is more of an advanced feature for people that are into automation and workflow building and stuff like that.
243:33But basically, these services, um, in my case, I'm using one called Modal, allow you to whip up, like, publicly available endpoints or publicly available URLs that you can use and integrate within other applications. A lot of the time, applications will use things called webhooks to send and receive information to and from them, uh, to, you know, send events and trigger various pieces of functionality.
243:54And this is a quick and easy way that you can basically create a URL that does that for you, as well as integrate it into things like no code platforms like naden, make.com, Zapier, Lindy, etcetera. So I have my endpoint right over here. What I'm gonna do is I'm gonna take this curl, k, which you may be wondering like what the heck is going on over here.
244:10And then, um, I'm actually gonna open up my own terminal instance and I'm gonna paste that in. So basically, what I've done, make a long story short, is I have generated my own API. Zooming in here, k, what I've done is I've sent a request to my own website, which was Nick's Nicholas Seraev --birthday-check-check-birthday.modalrun.
244:30And then I sent some authorization credentials and stuff like that, and now it's sending me back, um, you know, a little message, which is basically saying, no birthday today m f because it's not my birthday.
244:41So what I'm gonna do is I'm gonna go back here and just to make it even clearer for you guys. Okay. This is awesome.
244:45Remove the authentication. I wanna be able to access this with my browser using a simple get. And then I wanna have like a cute little happy birthday or no birthday message.
244:53What I'm gonna do now is I'm gonna show you that this is analogous or equivalent to just a website. And so what you can do as well is you can basically take whatever you want, whatever piece of functionality, and then immediately deploy like single URLs that people can access to do things, which you may not think is super important.
245:07Um, I just opened this up and we have our own little website here. But, uh, as you saw there, mean, all all I did was I literally sent, like, one little message and then boom, it it bumped this on like, made this a publicly accessible website. You could do this with anything.
245:18You could do this with the websites that we've designed so far. You could do this with the web apps that we've designed so far. And it's just like the simplest and easiest way to get something web accessible, whether you are giving a URL to somebody to have them do something with, uh, creating some additional functionality in your app, logging user visits for things like, you know, ad campaigns and marketing campaigns,
245:35or, um, doing direct connections via webhooks and no code platforms like make.com, naden, etcetera. So how do you do it? My favorite service right now is one called modal.
245:43This is basically, uh, marketed as AI infrastructure that developers love. It's super easy and straightforward to set up, and every time you click on the page, it expands this damn square thing, which is super super cool to look at.
245:55I love cubes. Clearly, their team has spent a lot of time and energy designing this website. I wonder if they use Cloud Code.
246:01Anyway, what you have to do first, you have to sign up. So I'm just gonna go over here into an incognito tab. I'm gonna pretend that I don't have an account yet.
246:07Then I'm going to click sign up. Then I'm going to continue with, uh, why don't we continue with Google? Then I'm just gonna sign in.
246:13Cool. We are now signing in. And the very first thing that happens is you'll have some little onboarding screen that says welcome to modal.
246:18So I'm just gonna say personal, and how did we hear about us? Uh, social media. I don't know.
246:22I just wanna use this for other. Then I'll click get started. What it's going to do now is it's gonna give me access to all sorts of stuff.
246:29And in the top right hand corner, as you see, it's given us $5 in credits. You can actually claim up to $30 in credits, um, just by doing a few additional, like, little onboarding tasks, adding a card, and stuff like that. I should note that I've been using Moodle for quite a while now.
246:41It's probably been, like, a few months, and I think I'm still at, like, $4.50 of credit on my main account where we probably have, an API request coming in every day or two. So, yeah, pretty cool stuff.
246:51Um, definitely a lot of usage there with the $5. It's way cheaper of a service, I wanna say, than, um, like a lot of the no code tools and automation platforms that I was using before, like make.com and nan. Over here, what you need to do is create an API token.
247:04So I'm gonna click new token. I'll say for what did I what did I actually have over here?
247:09That was pretty interesting. Not genuine. Okay.
247:12Let's do that. And then we actually have the token, so I'm just gonna copy the server. And then what I wanna do is I just wanna paste this And, um, in the Cloud Identity, there's instructions where basically you can just give it a new token, and then it'll go and create, um, you know, all of the stuff for you.
247:26So I'm gonna include this in, you know, the description down below. You guys can take a peek at this. If you're new to this, all you have to do is just do what I just showed you, and then now you have the ability to basically run this on any account.
247:37And you know this because this new URL that I just popped up here, this is on a different, um, service now. It's on my Nick j Wells account, not my Nicholas Saraiv account, which I was on just a moment ago. But let's say you want to extend this.
247:48You don't just wanna do a simple URL that, I don't know, like tells you whether or it's your birthday. You actually wanna do something for business purposes. Well, here's where things get really interesting.
247:56What you can do is you can take a skill that you've developed before, then you can just put it up on a URL. So that every time you or somebody else accesses URL, it immediately triggers the workflow.
248:06Let me show you what I mean. Remember how when we chatted about skills, I have this one called scrape leads? What if I just copy this and then paste this directly into this folder?
248:15I'm also going to wrap it in a dot clod and then a skills folder just for organization's sake, because I could tell this is probably gonna get pretty complex if I don't. K. And now I have it inside of dot clod slash skills slash scrape dash leads.
248:26Now what I'm gonna do is I'm gonna say, this is great. What I'd like you to do now is I'd like you to put the scrape dash leads workflow online. I want to be able to access it via a simple URL.
248:36Basically, when I access scrape dash leads, I want a little form to pop up and ask me what I wanna scrape. I then fill out that form, and then you execute the scrape dash leads workflow, and then return me the leads in a CSV file when it's done. And this has taken us probably less than two minutes in total.
248:53I just filled out the request. We now have a URL. Just gonna open up this URL, which is as mentioned the same as any other URL.
249:00The search query I'm gonna do is I'll just do dentist. I'll say United States. We want, I don't know, 100 results.
249:06Let's make it really small. Now that we've clicked, we're just gonna take a few minutes to do the actual scrape. The instructions I gave it were to immediately download the CSV right as this is done.
249:15Okay. And then the top right hand corner, I have my leads underscore dentist, a 100. So I'm just gonna take a peek at this.
249:19And we have the data right over here. Okay. Looking pretty good.
249:24We have a 100 leads. Most of these look like dentists, if not all. We also have a bunch of additional data about them, which is pretty badass.
249:29So I could use this to build a really cool campaign. And, yeah, hopefully, you guys now see the power in having something as simple as modal available to both whip up really quick web pages and internal tooling and even some external tooling, as well as use this to do things like run workflows. Right?
249:44You can build your own API call or build your own API endpoint, I should say. It really just a couple of keystrokes. And that's that.
249:50CTAI hope you guys enjoyed learning everything and anything to do with Cloud Code today. You now have everything that you need to build the foundational base of knowledge, whether or not you guys are programmers or completely nontechnical people coming into this to learn how to do things like build simple apps, websites, or or workflows.
250:06CTAI had a blast teaching you guys this sort of stuff. If you've ever wondered how to monetize work like this, whether it is custom app development or workflow building, definitely check out Maker School. It's my ninety day accountability program where I guide you through step by step and quite literally every single day through a sequence of actions necessary to get you your very first customer.
250:24CTAAnd I also guarantee that you get your first customer by the end of a ninety day period. If you don't, I give you all your money back. That's my last and only pitch of this video.
250:32CTAAside from that, I hope you guys like what you saw. If you guys have any questions or need help with anything that I mentioned in the video, just drop it as a comment down below. Aside from that, have a lovely rest of the day, and I'll catch all y'all in my next course.
— full transcript
§ 05 · For Joe
The whole video is the funnel.
Format worth stealing
Nick Saraev gave away a 4-hour masterclass for free because the course itself is the best possible sales pitch for Maker School.
- Teach by building real billable things. Every demo in this video has a dollar amount attached.
- Single CTA at the very end. No mid-roll. The longer the video, the more trust you have earned by the time you ask.
- Open with a number, not a concept. Four million dollars a year is more compelling than let me show you Claude Code.
- Plan Mode math is steal-able for any AI tutorial: give your viewer a two-path comparison with concrete time estimates.
- The Skills to Sub-Agents to Agent Teams progression is a content series waiting to happen. Each layer is its own video.
- Film with whiteboard diagrams visible next to code — higher-value visual format than pure screen recording.
§ 05 · For You
What to actually do after watching.
For the person who just watched
Stop treating Claude Code like a fancy autocomplete. It is an autonomous builder.
- Run /init on every new project today. Write a CLAUDE.md. Keep it under 500 lines.
- Use Plan Mode before you touch code. Type your goal, ask Claude to plan, read it, then say go.
- Build one skill file this week for something you do repeatedly.
- Install one MCP server. Context7 is the easiest start if you work with external APIs.
- When a project gets complex, open a second Claude instance in a git worktree instead of crowding one context window.
