YT YouTube2Text

YouTube2Text → Transcripts → CLAUDE CODE FULL COURSE 4 HOURS: Build & Sell (2026)

CLAUDE CODE FULL COURSE 4 HOURS: Build & Sell (2026) — Transcript

by Nick Saraev · 56,342 words · 6,128 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

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

About this transcript

This page contains the full transcript of CLAUDE CODE FULL COURSE 4 HOURS: Build & Sell (2026) by Nick Saraev, generated from the public captions YouTube serves with the video. The transcript has 56,342 words across 6,128 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.