# Claude Code Crash Course For Developers

https://www.youtube.com/watch?v=C2GpeepcmYs
Translation: zh-CN

[00:00] Hey, what's going on, guys?
  嘿，伙计们，最近怎么样？

[00:01] Welcome to my Claude Code Crash Course for developers.
  欢迎来到我的 Claude Code 开发者速成班。

[00:04] Now, I want to explain what this video is and what it's not.
  现在，我想解释一下这个视频是什么，什么不是。

[00:06] So, it is an overall introduction to the Claude Code agentic coding tool, and when it comes to coding with AI in general, the process is very subjective and individualized.
  所以，它是一个关于 Claude Code 代理编码工具的总体介绍，而在一般情况下，使用 AI 进行编码的过程是非常主观和个性化的。

[00:17] And it's kind of like the wild west right now.
  而且现在有点像狂野西部。

[00:19] Everybody does things their own way, and I will share my way, my process, but that'll be in a separate coding with AI crash course dedicated to showing you how to build decent-sized project using things like feature specs and testing and context management and so on.
  每个人都有自己的做事方式，我将分享我的方式，我的过程，但这将在一个单独的 AI 编码速成班中进行，该课程专门向您展示如何使用功能规范、测试和上下文管理等来构建体面的项目。

[00:35] Now, before I do that, I want to create this overview of Claude Code, and I know that there's a lot of guides out there on YouTube.
  现在，在我这样做之前，我想创建这个 Claude Code 的概述，我知道 YouTube 上有很多指南。

[00:38] However, a lot of them are focused on vibe coding and just prompting from, you know, from the terminal.
  然而，其中很多都侧重于氛围编码，只是从终端进行提示。

[00:44] I want to show you the basics, but also get you set up in VS Code, and not only prompt, but do a little bit of refactoring, look at the diffs and exactly what Claude's doing, some of the internal tools that it runs, and so on.
  我想向您展示基础知识，但也要在 VS Code 中为您设置好，不仅要进行提示，还要进行一些重构，查看 Claude 正在做的差异以及它运行的一些内部工具等等。

[00:56] And we'll create a very simple terminal interface, as well as
  我们将创建一个非常简单的终端界面，以及

[01:01] Use Claude with Git to clone an existing repo and add some features to it.
  使用 Claude 和 Git 克隆现有存储库并为其添加一些功能。

[01:06] Now, along the way, I'll walk you through the features that you're going to use day-to-day.
  现在，在此过程中，我将引导您了解您将日常使用的功能。

[01:09] We'll talk about setup, prompting, models.
  我们将讨论设置、提示、模型。

[01:11] I'll explain how context and tokens work, skills, MCP, sub-agents, and so on.
  我将解释上下文和令牌的工作原理、技能、MCP、子代理等。

[01:17] And I'm going to try to keep it short, but I always have a hard time doing that and and getting out all I want to say.
  我将尽量保持简短，但我总是很难做到这一点，并且说出我想说的一切。

[01:22] But, after this, you should have a pretty good handle on using Claude Code, and in the next crash course I release, we'll be creating, basically creating a a project start to finish and my entire process.
  但是，在此之后，您应该对使用 Claude Code 有一个很好的掌握，并且在我发布的下一个速成课程中，我们将从头到尾创建一个项目以及我的整个过程。

[01:37] >> [music]
  >> [音乐]

[01:41] >> Hey guys, real quick, since you're learning about Claude Code, I wanted to mention my latest course, Coding with AI.
  >> 嘿，各位，很快，既然您正在学习 Claude Code，我想提一下我最新的课程，使用 AI 进行编码。

[01:46] It's a 16-hour course where I show you how to build an app from start to finish using context management, spec files, skills, agents, and more.
  这是一门 16 小时的课程，我将向您展示如何使用上下文管理、规范文件、技能、代理等从头到尾构建一个应用程序。

[01:54] And I know some people are skeptical about AI in software development and and trust me, I get it.
  我知道有些人对软件开发中的人工智能持怀疑态度，相信我，我明白。

[01:58] I have a lot of the same opinions, but the fact is it's here to
  我有很多相同的观点，但事实是它在这里

[02:04] stay and all the top companies are requiring AI skills.
  留下来，所有顶尖公司都要求具备人工智能技能。

[02:09] So, I wanted to give you a a process and a workflow that you can easily follow.
  所以，我想给你一个你可以轻松遵循的流程和工作流程。

[02:12] And I also want to thank Neon for making this course possible.
  我还要感谢Neon使本课程成为可能。

[02:18] We use Neon Postgres database in the main project and I constantly use them in my own projects.
  我们在主项目中使用Neon Postgres数据库，并且我一直在自己的项目中使用它们。

[02:22] They even gave us a link for a $100 credit and I'll put that in the description.
  他们甚至给了我们一个100美元积分的链接，我将把它放在描述中。

[02:26] Okay, so I'm sure that a lot of you have an idea of what Claude Code is.
  好的，我确定你们很多人都知道Claude Code是什么。

[02:30] It's Anthropic's agentic coding tool and it runs in your terminal, although there's also a desktop app.
  它是Anthropic的代理编码工具，它在你的终端中运行，尽管也有一个桌面应用程序。

[02:34] There's also extensions for editors and I'll get to that, but for the most part, if you're a developer, you're going to be running it in your integrated terminal within your editor or with an editor extension.
  还有编辑器的扩展，我稍后会讲到，但总的来说，如果你是一名开发人员，你将在编辑器中的集成终端中运行它，或者使用编辑器扩展。

[02:47] Now, unlike something like ChatGPT or the Claude AI website, it actually runs on your machine and works in your code base.
  现在，与ChatGPT或Claude AI网站不同的是，它实际上在你的机器上运行，并在你的代码库中工作。

[02:51] It reads files, writes files, it runs commands and tooling and so on.
  它读取文件，写入文件，运行命令和工具等等。

[03:00] And there's other tools like it such as Code X, Cursor, although Cursor is an editor, it has the same agentic capabilities.
  还有其他类似的工具，如Code X、Cursor，尽管Cursor是一个编辑器，但它具有相同的代理功能。

[03:03] But if you have any experience with these other tools, then you already have a leg up.
  但如果你有使用其他工具的经验，那么你已经占了先机。

[03:08] Now, I do want to quickly talk about pricing.
  现在，我想快速谈谈定价。

[03:13] I feel like not enough guides actually mention pricing because it's not free for the most part.
  我觉得很多指南实际上没有提到定价，因为在大多数情况下它不是免费的。

[03:15] There is a free tier, but it's basically just to try it out and that's definitely what I would suggest starting with.
  有一个免费套餐，但基本上只是用来试用，而这绝对是我建议的开始方式。

[03:22] But if you start to use it with a real project, you're going to hit caps really quickly.
  但如果你开始用它来处理一个真实的项目，你很快就会达到上限。

[03:25] The next step up is Pro, which is $20 a month or 17 if you pay annually, and then there's a Max plan, which is $100 and that's five times the usage of the Pro plan, and a $200 Max plan plan that's 20 times the usage of the Pro plan.
  下一步是Pro，每月20美元，如果按年支付是17美元，然后有一个Max套餐，是100美元，其使用量是Pro套餐的五倍，还有一个200美元的Max套餐，其使用量是Pro套餐的20倍。

[03:42] I personally use the $200 Max, but I use it all day, every day, not just for coding, but I use the desktop co-work tool for planning and and specking out projects and all types of stuff.
  我个人使用200美元的Max套餐，但我每天都会使用它，不仅仅是用于编码，我还使用桌面协同工具来规划和详细说明项目以及各种事务。

[03:55] And I'll talk about that as well.
  我也会谈谈这一点。

[03:57] Now, when it comes to installing Claude, there's a couple like I said, there's a few environments.
  现在，说到安装Claude，就像我说的，有几种环境。

[04:00] You have the desktop app, which is what you see here, and it
  你有桌面应用程序，也就是你在这里看到的，它

[04:04] Seems like they're really pushing the desktop app because they used to have the curl command to ins- you know, to set up the terminal here as the main call to action, but now it's a download button for the desktop app.
  看来他们真的在力推桌面应用程序，因为他们以前用 curl 命令来安装，你知道，将终端设置为主要的号召性用语，但现在是桌面应用程序的下载按钮。

[04:15] However, for the terminal, you simply click here, terminal, and then you have your your curl command.
  但是，对于终端，你只需点击这里，终端，然后你就会看到你的 curl 命令。

[04:19] Now, I do want to just cover the desktop app real quick.
  现在，我想快速介绍一下桌面应用程序。

[04:24] So, basically, there's three parts to it.
  所以，基本上，它有三个部分。

[04:26] You have the chat tab, the co-work tab, and the code tab.
  你有聊天标签页、协作标签页和代码标签页。

[04:28] So, the chat tab is basically the Claude AI website.
  所以，聊天标签页基本上就是 Claude AI 网站。

[04:31] It's it's a chatbot.
  它是一个聊天机器人。

[04:33] It doesn't It doesn't um you know, it doesn't run on your file system, or I shouldn't say that, it doesn't have access to your file system.
  它不，它不，你知道，它不在你的文件系统上运行，或者我这么说不对，它无法访问你的文件系统。

[04:41] It does have some integrations with like Google Drive and calendar and so on.
  它确实与 Google Drive 和日历等有一些集成。

[04:45] But, for the most part, it's just chat GPT.
  但是，在大多数情况下，它只是一个聊天 GPT。

[04:46] Now, this the second tab is what I use this for, and that's co-work.
  现在，第二个标签页是我使用它的地方，那就是协作。

[04:49] So, co-work is basically like a virtual assistant, and it could does connect to your file system.
  所以，协作基本上就像一个虚拟助手，它可以连接到你的文件系统。

[04:57] You can see I have it connected to my Traversi Labs folder, which is actually my Obsidian vault.
  你可以看到它已连接到我的 Traversi Labs 文件夹，实际上是我的 Obsidian 库。

[05:01] Obsidian is like a markdown database,
  Obsidian 就像一个 markdown 数据库，

[05:05] and I literally track my entire life in Obsidian.
  我简直把我的全部生活都记录在Obsidian里。

[05:08] So, from business to my calendar to personal stuff, YouTube courses, just everything.
  所以，从商业到我的日历，再到个人事务，YouTube课程，总之就是一切。

[05:13] And co-work, basically, I'll run a skill, a good morning skill, every morning, and it tells me what's on my schedule, my to-do's, what I should be working on, and so on.
  而且协同工作，基本上，我每天早上都会运行一个技能，一个早安技能，它会告诉我我的日程安排，我的待办事项，我应该做什么，等等。

[05:24] And then I'll use it to to plan out and speck out projects and stuff.
  然后我会用它来规划和详细说明项目和事务。

[05:29] So, I really like co-work.
  所以我真的很喜欢协同工作。

[05:32] And then you can choose the model here.
  然后你可以在这里选择模型。

[05:34] Now, Fable 5 was just released 2 days ago, and I've used it a little bit, and I do like it, but I don't really I haven't used it enough to have a real opinion on it.
  现在，Fable 5是两天前发布的，我用了一点点，我确实喜欢它，但我还没有真正地用它足够长的时间来形成一个真正的看法。

[05:42] I was using for Opus 4.8 for whatever a month or however long it was released, and I really like Opus, but uh I'm giving Fable a a chance.
  我用Opus 4.8用了大概一个月或者它发布了多久，我真的很喜欢Opus，但是呃，我正在给Fable一个机会。

[05:51] Now, the third tab here is code.
  现在，这里的第三个标签是代码。

[05:54] It's Claude Code, and I don't use this because it's more like vibe coding.
  它是Claude Code，我不使用它，因为它更像是氛围编码。

[05:58] I mean, you can prompt here, and I can say build me whatever, but I don't have act direct access to the code.
  我的意思是，你可以在这里提示，我可以让你为我构建任何东西，但我没有直接访问代码的权限。

[06:03] So, you're going to if unless
  所以，你将要，除非

[06:08] you're vibe coding, you're going to want it in your editor where you can see your entire project structure, and you can watch what it does.
  你正在进行氛围编码，你希望它在你的编辑器中，这样你就可以看到你的整个项目结构，并且你可以观察它的运行情况。

[06:14] You can edit code yourself.
  你可以自己编辑代码。

[06:16] So, I personally don't use this, but if you want to, that's that's absolutely fine.
  所以，我个人不使用这个，但如果你想使用，那完全没问题。

[06:21] To install it in your terminal, you're going to copy this curl command, and you're going to open up your terminal, you're going to paste that in, and run it, and then just go through the process.
  要在你的终端中安装它，你需要复制这个curl命令，然后打开你的终端，粘贴进去并运行它，然后按照流程进行。

[06:30] I already have it installed, so I'm not going to run that, but that's what you would do to get set up.
  我已经安装好了，所以我不会运行它，但这正是你设置时需要做的。

[06:36] And then, you can just do Claude Claude {dash} {dash} version, and it'll show you if it's installed.
  然后，你就可以输入Claude Claude {dash} {dash} version，它会显示你是否已安装。

[06:40] It'll show you the current version.
  它会显示你当前的 এটা।

[06:42] Now, the working directory is really important because that's where it's going to run.
  现在，工作目录非常重要，因为那是它将要运行的地方。

[06:47] That's where it's going to have access.
  那是它将要访问的地方。

[06:48] So, I'm in my code folder.
  所以，我在我的代码文件夹里。

[06:50] What I'm going to do is make a directory called coin CLI, and this will be the simple project that we work with in this tutorial.
  我将要做的是创建一个名为coin CLI的目录，这将是我们本教程中使用的简单项目。

[06:58] So, um what I'll do is open up Actually, let's CD into coin CLI, and then that's where I'm going to run Claude.
  所以，嗯，我将要做的是打开，实际上，让我们CD到coin CLI，然后我将在那里运行Claude。

[07:04] Now, if it's your first time log um running
  现在，如果你是第一次登录嗯运行

[07:08] Claude, you're probably going to have to authenticate, so you do need an account at claude.ai.
  克劳德，你可能需要进行身份验证，所以你需要一个claude.ai账户。

[07:11] You don't need a paid subscription.
  你不需要付费订阅。

[07:14] You can use the free tier, but you do need an account, and it will ask you to to validate.
  你可以使用免费套餐，但你需要一个账户，它会要求你进行验证。

[07:17] And at any time, you can do {slash} login to authenticate, and you can also do {slash} logout.
  任何时候，你都可以输入{斜杠}login进行身份验证，也可以输入{斜杠}logout退出。

[07:26] All right.
  好的。

[07:26] Now, let's just look at the the kind of welcome interface here.
  现在，让我们来看看这里的欢迎界面。

[07:30] First off, it gives you the version, right?
  首先，它会告诉你版本号，对吧？

[07:33] Claude Code version.
  Claude代码版本。

[07:33] It gives you the working directory, the model that you're using, which I have this set to Opus 4.8.
  它会告诉你工作目录，你正在使用的模型，我这里设置为Opus 4.8。

[07:38] Um this isn't my main working machine.
  嗯，这不是我的主要工作机器。

[07:41] The one behind me is, which is using Fable, but it also shows you the context window, which for me is a a million token context window.
  我身后的那台是，它在使用Fable，但它也显示了你的上下文窗口，对我来说是百万token的上下文窗口。

[07:51] I'll talk more about that in in a few minutes.
  几分钟后我再详细谈谈。

[07:51] And I'm using extra high effort, which is kind of a new feature.
  我正在使用额外的“高努力”模式，这是一个新功能。

[07:55] I'll talk about that, too.
  我也会谈谈那个。

[07:57] And shows you your plan, which for me is Claude Max.
  它还会显示你的套餐，对我来说是Claude Max。

[07:59] Now, I want to talk about models.
  现在，我想谈谈模型。

[08:02] So, these are slash commands.
  所以，这些是斜杠命令。

[08:04] If I just do slash, you can see there's a a big directory of these commands, and it shows you on the
  如果我只输入斜杠，你就可以看到一个很大的命令目录，它会显示给你

[08:10] Right, what they do.
  对，他们做什么。

[08:12] So, I want to run model.
  所以，我想运行模型。

[08:13] And from here is where you can actually see and choose your models.
  从这里你可以看到并选择你的模型。

[08:18] In fact, I'm going to change mine to Fable.
  事实上，我将把我的改为Fable。

[08:21] So, you as you can see, there's four available for me.
  所以，正如你所见，有四个可供我选择。

[08:24] There's Opus, Fable, Sonnet, and Haiku.
  有Opus、Fable、Sonnet和Haiku。

[08:26] Now, you can't use other LLMs.
  现在，你不能使用其他的LLM。

[08:28] You can't use GPT or Gemini or anything like that.
  你不能使用GPT或Gemini或类似的东西。

[08:31] It has to be an Anthropic model.
  它必须是Anthropic模型。

[08:32] And basically, you have um these models, they they cost uh different amounts of tokens.
  基本上，你有这些模型，它们花费不同数量的代币。

[08:39] So, Opus is a lot more expensive in tokens than Sonnet or Haiku, right?
  所以，Opus在代币方面比Sonnet或Haiku贵得多，对吧？

[08:44] Sonnet is is an older model.
  Sonnet是一个较旧的模型。

[08:47] It's It's decent for coding, but I would definitely prefer Opus over Sonnet.
  它适合编码，但我肯定会更喜欢Opus而不是Sonnet。

[08:51] And then Haiku is the cheapest model, which is good for like really really easy, quick tasks.
  然后Haiku是最便宜的模型，它适合非常非常简单、快速的任务。

[08:58] All right.
  好的。

[09:00] So, you're going to select your model here.
  所以，你将在这里选择你的模型。

[09:02] And you might be saying, well, why does it matter how many tokens?
  你可能会说，嗯，代币数量有什么关系呢？

[09:04] I have a subscription.
  我有一个订阅。

[09:06] I'm not paying, you know, I'm not using an API key where I pay per token.
  我没有付费，你知道，我没有使用按代币付费的API密钥。

[09:09] Well, there's limits to to your
  嗯，你的有限制

[09:13] Subscription. So, if you do slash usage, you can see the usage and what you're allocated.
  订阅。所以，如果你削减使用量，你就能看到使用量以及你被分配到的量。

[09:22] So, for me, I'm my my current session, a session is about 5 hours, I have 26% used.
  所以，对我来说，我目前的会话，一个会话大约是5小时，我已经使用了26%。

[09:27] And it tells you when it resets. Resets at 12:29.
  它会告诉你何时重置。重置时间是12:29。

[09:31] Right now, it's 11:47. So, I'm definitely not going to use the rest of this within that allocation.
  现在是11:47。所以，我肯定不会在那个分配额度内用完剩下的部分。

[09:35] And for the current week, this pertains to all models, I have 29% used.
  对于本周，这适用于所有模型，我已经使用了29%。

[09:41] This resets June 13th. Today is June 12th, so it resets tomorrow.
  这个将于6月13日重置。今天是6月12日，所以它将于明天重置。

[09:45] So, no way am I using, you know, 70%.
  所以，我绝不可能使用，你知道，70%。

[09:50] And then even if you max this out, you still have uh an allocation of of the Sonnet model, right?
  然后即使你用完这个，你仍然有，呃，Sonnet模型的分配额度，对吧？

[09:56] So, if I use Opus, I max this out, I'll still be able to use Sonnet for an amount of time.
  所以，如果我使用Opus，用完它，我仍然可以在一段时间内使用Sonnet。

[10:00] Now, this this obviously pertains to your plan, right?
  现在，这显然与你的计划有关，对吧？

[10:04] If you're on the pro plan, you're going to have to be more conservative in terms of of your usage, you know, your model usage.
  如果你是专业计划用户，你将不得不在使用方面，你知道，你的模型使用方面更加保守。

[10:13] You might even use Sonnet for
  你甚至可能使用Sonnet来

[10:15] lighter tasks and so on.
  较轻的任务等等。

[10:17] But, this will show you, you know, show you your allocations.
  但是，这会向您展示，您知道，向您展示您的分配情况。

[10:21] And then up here, you can see we have uh these we have stats and config.
  然后在这里，您可以看到我们有呃这些我们有统计和配置。

[10:25] Actually, they used to be yeah, this is what I want.
  实际上，它们曾经是是的，这就是我想要的。

[10:27] So, this will show you your usage by by day, by time, um favorite model, total tokens, your longest session, and so on.
  所以，这将向您展示您按天、按时间、嗯喜欢的模型、总代币数、最长的会话等的用法。

[10:37] All right.
  好的。

[10:39] So, just know that even if you have a subscription, you still want to you want to be wary of your token usage.
  所以，请注意，即使您有订阅，您仍然需要注意您的代币使用情况。

[10:43] Now, another thing that can can raise your token usage is the effort.
  现在，另一个会增加您的代币使用量的东西是努力程度。

[10:46] So, I'm using extra high.
  所以，我正在使用超高。

[10:49] So, if you do {slash} effort, and this is a new feature, but if you do this, you can select anywhere from low to ultra code.
  所以，如果您执行{slash} effort，这是一个新功能，但如果您这样做，您可以选择从低到超高代码的任何级别。

[10:59] And obviously, the higher, the more tokens you use.
  显然，越高，您使用的代币越多。

[11:01] I tend to keep mine on extra high, but again, if you're using like the pro plan, you might want to be a little more conservative and go to high or even medium.
  我倾向于将其保持在超高，但再说一遍，如果您使用的是专业计划，您可能希望稍微保守一些，选择高甚至中等。

[11:11] So, I keep mine at extra high.
  所以，我将其保持在超高。

[11:14] All right.
  好的。

[11:14] Now, before I I do anything
  现在，在我做任何事情之前

[11:16] and I prompt, I don't want to do it from here.
  我提示，我不想从这里做。

[11:20] Very rarely do will I use a standalone terminal.
  我很少会使用独立的终端。

[11:22] I'll use it within VS Code, so I'm going to do {slash} exit to get out of this.
  我会在VS Code中使用它，所以我将执行{斜杠}退出以离开这里。

[11:28] And then let's go ahead and open up VS Code within the Coin CLI directory.
  然后，让我们在Coin CLI目录中打开VS Code。

[11:34] Okay, so from here, let's close this stuff up.
  好的，那么从这里开始，让我们关闭这些东西。

[11:36] From here, there's really two ways to use Claude.
  从这里开始，实际上有两种使用Claude的方法。

[11:39] I can just open up my integrated terminal or I can use the extension.
  我可以打开我的集成终端，或者我可以使用扩展程序。

[11:43] I prefer the extension because it shows things in a much neater way.
  我更喜欢扩展程序，因为它以一种更整洁的方式显示事物。

[11:45] There are a couple limitations, but nothing really that I do daily, but I want to show you both.
  有一些限制，但实际上并没有我每天都会遇到的，但我会向你们展示两者。

[11:53] So, I'm going to start off with the regular terminal, which you can go to new terminal or just, you know, control tilde, and then we'll run Claude just like we did in the standalone terminal.
  所以，我将从常规终端开始，你可以转到新终端或只是，你知道，按Control+波浪号，然后我们将像在独立终端中一样运行Claude。

[12:05] And I'm just going to put this on the right.
  我将把它放在右边。

[12:08] Okay, so typically I'll have my, you know, Claude open here.
  好的，所以通常我会在这里打开我的，你知道，Claude。

[12:10] I'll have my code, and then of course my explorer, and I have access to everything.
  我会打开我的代码，当然还有我的文件浏览器，这样我就可以访问所有内容。

[12:14] Now, I want to run my first prompt, which I
  现在，我想运行我的第一个提示，我

[12:18] Actually have in a gist, if you guys want to kind of follow along.
  实际上有一个要点，如果你想跟上。

[12:23] So, and I'll have the link in the description.
  所以，我会在描述中提供链接。

[12:25] So, it says, "Create a node script in Next.js that fetches the top five crypto prices from the the CoinGecko API and prints them in a clean table with the name, the current price, 24-hour change.
  所以，它说，“在Next.js中创建一个节点脚本，从CoinGecko API获取前五名加密货币价格，并以一个整洁的表格显示名称、当前价格、24小时变化。

[12:37] Keep the code clean and simple."
  保持代码干净简洁。”

[12:39] So, I'm going to copy that.
  所以，我将复制它。

[12:42] And CoinGecko is just uh it's a free API that gives you crypto prices.
  而CoinGecko只是一个免费的API，可以提供加密货币价格。

[12:47] So, no key or anything.
  所以，不需要密钥或任何东西。

[12:47] So, we're going to run that, and let's see what it does.
  所以，我们将运行它，看看它会做什么。

[12:51] So, we want to pay attention to what what's going on over here.
  所以，我们要注意这里正在发生什么。

[12:54] So, it's thinking.
  所以，它正在思考。

[12:57] Now, the first thing it it did is it ran an internal tool called bash, right?
  现在，它做的第一件事是运行了一个名为bash的内部工具，对吗？

[13:02] So, basically, there's uh a set of internal tools that Claude code uses.
  所以，基本上，Claude代码使用了一套内部工具。

[13:05] There's bash, if you want if it wants to run a command, there's write to write to files, read, edit, grep to search file contents, um web fetch to to fetch from URLs, and
  有bash，如果你想运行一个命令，有写入文件，读取，编辑，grep搜索文件内容，嗯，web fetch从URL获取，以及

[13:19] There's a bunch of other ones as well, but those are kind of the main ones you're going to see.
  还有很多其他的，但那些是你将看到的主要的。

[13:22] So, it ran the bash tool to look at the contents.
  所以，它运行了bash工具来查看内容。

[13:24] It ran the LS command, saw the directory empty, and it saw I'm using node 24, so it can use dependency-free fetch, and then it used the right tool, right?
  它运行了LS命令，看到目录是空的，并且它看到我正在使用node 24，所以它可以使用无依赖的fetch，然后它使用了正确的工具，对吗？

[13:35] So, it used bash, then it used right.
  所以，它使用了bash，然后它使用了right。

[13:37] Now, it didn't actually create this file yet.
  现在，它还没有真正创建这个文件。

[13:40] As you can see, it's not over here in the in the explorer, but it's proposing this index.js.
  正如你所见，它不在资源管理器中，但它正在提议这个index.js。

[13:43] This is the diff.
  这是diff。

[13:46] So, anything in green is what it's going to add, and obviously it's all green because I just created the file.
  所以，任何绿色的都是它将要添加的，显然都是绿色的，因为我刚刚创建了文件。

[13:53] So, we have an API URL, which is the CoinGecko endpoint.
  所以，我们有一个API URL，它是CoinGecko的端点。

[13:56] We have an object of colors, so green and red.
  我们有一个颜色对象，所以是绿色和红色。

[13:59] So, basically it it looks like it's going to have the 24-hour change in green if it's up and red if it's down.
  所以，基本上它看起来会是24小时的变化，如果上涨就是绿色，如果下跌就是红色。

[14:06] Then there's a function to actually make the fetch, right?
  然后有一个函数来实际进行fetch，对吗？

[14:09] So, fetch top coins, making the fetch request here.
  所以，fetch top coins，在这里发出fetch请求。

[14:14] And let's see, we got a format price, a
  让我们看看，我们得到了一个格式化价格，一个

[14:20] Format change helper, a print table.
  格式更改助手，一个打印表。

[14:24] And then this this all has to do with just formatting the table.
  然后这所有都与格式化表有关。

[14:28] And then a main function where it runs fetch top coins and print table, and main runs down here at the bottom.
  然后是一个主函数，它运行获取顶级硬币并打印表，主函数在这里底部运行。

[14:34] So, that's fine for a single file, I think that's fine.
  所以，对于单个文件来说，我认为这没问题。

[14:36] Now, you have a couple options.
  现在，你有几个选项。

[14:38] You can say yes to approve it, and it will create the file.
  你可以说“是”来批准它，它就会创建文件。

[14:40] You can say yes, allow all edits during this session, and what that means is that from now on, it won't ask you this when it creates something.
  你可以说“是”，在此会话期间允许所有编辑，这意味着从现在开始，它在创建某些内容时不会再问你这个问题。

[14:50] It'll just It'll just do it automatically.
  它只会自动完成。

[14:51] Now, I would suggest if you're just starting to get into Cloud Code or a tool like this and just using AI in general, that you stick with the the default permission mode and just say yes.
  现在，我建议如果你刚开始接触 Cloud Code 或类似的工具，以及普遍使用 AI，你应该坚持使用默认的权限模式，然后说“是”。

[15:03] But once you kind of know what you're doing, you can, you know, you you can make it so it doesn't ask you every time.
  但是一旦你大致知道你在做什么，你就可以，你知道，你可以让它不要每次都问你。

[15:09] I can also say no and just cancel, but I'm going to say yes.
  我也可以说“否”然后取消，但我将说“是”。

[15:11] And then it's going to create that file.
  然后它将创建该文件。

[15:13] You can see we have index.js over here.
  你可以看到我们这里有 index.js。

[15:15] And then it's going to ask me if I want to run it.
  然后它会问我是否要运行它。

[15:18] Okay, so run the script to
  好的，所以运行脚本来

[15:22] verify the output and it's asking me.
  验证输出，它正在询问我。

[15:24] It's not just running it and I can choose this as well.
  它不仅仅是运行它，我也可以选择这个。

[15:26] Don't ask again for node scripts, but I'm just going to say yes.
  不要再询问节点脚本了，但我只是要说“是”。

[15:32] And it's going to run it.
  它将运行它。

[15:34] Not only is it going to run it and and you know, give the normal output of the table, but it's going to kind of give me a summary of of what happens.
  它不仅会运行它，而且你知道，给出表的正常输出，它还会给我一个关于发生了什么的总结。

[15:43] So as you can see the script works.
  所以，正如你所见，脚本有效。

[15:43] Index.js is created and verified.
  Index.js 已创建并验证。

[15:47] Gives me the output.
  给我输出。

[15:47] Shows me just uh some more some summarized points.
  向我展示一些更总结性的要点。

[15:53] Now, I could run this on my own obviously.
  现在，我显然可以自己运行它。

[15:55] If I open another terminal, I can run node index.
  如果我打开另一个终端，我可以运行 node index。

[15:57] That's how you run node scripts.
  这就是运行节点脚本的方式。

[15:59] And there it is.
  它就在那里。

[16:02] So it looks like everything's up today.
  所以看起来今天一切都准备就绪了。

[16:02] Looks like a good day.
  看起来是个好日子。

[16:04] But yeah, I can run it like that or let's close that terminal.
  但是的，我可以那样运行它，或者我们关闭那个终端。

[16:09] I can use something called shell mode here.
  我可以在这里使用一种叫做 shell 模式的东西。

[16:12] I can just say run the file, but it'll it'll kind of do this and give me all this summary crap.
  我可以直接说运行文件，但它会做这个并给我所有这些总结性的东西。

[16:16] So if I want, I can just do exclamation and then node index and it should run it just like
  所以如果我愿意，我可以只输入感叹号然后是 node index，它应该就像这样运行它

[16:24] just like it does in the the terminal.
  就像它在终端中一样。

[16:27] All right, so just know that you can use exclamation if you want to just use shell mode.
  好的，所以请知道，如果你想使用shell模式，你可以使用感叹号。

[16:30] Now I can hit question mark and it shows me a bunch of these shortcuts.
  现在我可以按问号，它会显示给我一堆这些快捷方式。

[16:34] So shell mode exclamation {slash} for {slash} commands.
  所以shell模式感叹号{斜杠}用于{斜杠}命令。

[16:39] So you already know that.
  所以你已经知道了。

[16:41] {at} So if you want to mention a certain file specifically, you can do like {at} index.js or or whatever.
  所以如果你想特别提到某个文件，你可以这样做，比如@index.js或者其他任何东西。

[16:47] Uh let's see what else we have.
  呃，让我们看看我们还有什么。

[16:47] {slash} btw.
  顺便说一下。

[16:49] So this is fairly new by the way.
  所以顺便说一下，这是相当新的。

[16:53] That's what it stands for I believe and it's for side questions.
  我相信这就是它的意思，它是用于旁问的。

[16:55] So basically if if Claude's working and doing something, but you think of something you else you want to say, which happens all the time,
  所以基本上，如果Claude正在工作并做某事，但你想说些别的什么，这种情况经常发生，

[17:03] instead of just escaping out and then asking and then having it continue where it left off, you can do {slash} btw and ask a side question, which I think is pretty cool.
  与其只是退出然后提问，然后让它继续之前的地方，你可以输入/btw并提出一个旁问，我觉得这很酷。

[17:13] And then let's see.
  然后让我们看看。

[17:13] We got shift tab will change the modes and I'll show you that in a second.
  我们有shift tab会改变模式，我马上会给你展示。

[17:17] Control O will show you verbose output.
  Control O会显示详细输出。

[17:20] You can toggle tasks with control T.
  你可以用control T切换任务。

[17:25] So, yeah, those are the main ones.
  所以，是的，这些是主要的。

[17:27] Obviously, you know, you can paste and cut and stuff like that.
  显然，你知道，你可以粘贴、剪切之类的事情。

[17:31] But, let's go ahead and go over the modes.
  但是，让我们继续介绍模式。

[17:34] So, shift tab, if I hit it, you'll see this changes to accept edits on.
  所以，shift tab，如果我按下它，你会看到这个变成了接受编辑。

[17:36] What that means is that it's go it's not going to ask me.
  那意味着它不会问我。

[17:41] It's just going to accept edits.
  它只会接受编辑。

[17:43] If I ask it to change something in this index.js and I have this mode enabled, it's just going to do it, right?
  如果我要求它更改此 index.js 中的某些内容，并且我启用了此模式，它就会直接执行，对吗？

[17:52] If I hit shift tab again, I can go into plan mode.
  如果我再次按下 shift tab，我就可以进入计划模式。

[17:54] Now, plan mode, it won't actually edit your code.
  现在，计划模式不会真正编辑你的代码。

[17:57] It's it's for planning, right?
  它是用于计划的，对吧？

[18:00] So, it's If you want to add a feature and you want to kind of query it and and ask its opinion or or maybe ask what you can do to make the app better, it'll go through plans, it'll ask you questions, and it'll ultimately create a markdown file, which I believe goes in your home directory in your dot cloud folder.
  所以，如果你想添加一个功能，并且你想对其进行查询并询问它的意见，或者也许询问你可以做什么来让应用程序更好，它会通过计划，它会问你问题，最终会创建一个 markdown 文件，我相信它会放在你的主目录的 .cloud 文件夹中。

[18:20] So, that's plan mode, and then auto mode is is fairly new, and this is like super
  所以，那就是计划模式，然后自动模式相当新，这就像超级

[18:27] accept edits mode, where not only does it not ask you, but it'll make decisions.
  接受编辑模式，在这种模式下，它不仅不会询问你，还会自己做决定。

[18:33] You can give it an overall goal of like creating some kind of SAS or something, and it'll basically just run for hours and make its own decisions.
  你可以给它一个总体目标，比如创建一个SAS之类的东西，它基本上会运行几个小时并自己做决定。

[18:40] So, it's a little risky.
  所以，这有点冒险。

[18:43] It's not something I would suggest if you're building like an important user-facing app, an enterprise-level app, but if you're building your own stuff and just messing around, then it's it's cool.
  如果你正在构建一个重要的面向用户的应用程序，一个企业级应用程序，我不会建议这样做，但如果你正在构建自己的东西并且只是随便玩玩，那它就很酷。

[18:53] So, let's hit it again, shift tab, and that brings me back to just normal mode, where it'll ask my permission.
  所以，我们再按一次，Shift Tab，这会把我带回到普通模式，在这种模式下它会询问我的许可。

[18:59] And you can see it just added a recap here, and I showed I think I showed you that earlier.
  你可以看到它在这里添加了一个摘要，我想我之前给你们展示过。

[19:02] There's a a recap setting in the config that you can set.
  配置中有一个摘要设置，你可以进行设置。

[19:05] You can enable or disable.
  你可以启用或禁用它。

[19:07] Mine's enabled, so it just gives me this node CLI that shows the top crypto prices, etc.
  我的已启用，所以它会给我这个节点CLI，显示加密货币的最高价格等。

[19:12] The next thing I want to talk about is settings and permissions.
  接下来我想谈谈设置和权限。

[19:16] So basically, you have custom settings that that will go in a file, and they can be either project-scoped or user-scoped.
  所以基本上，你有一些自定义设置会放在一个文件中，它们可以是项目范围的或用户范围的。

[19:22] So, a project-scoped means that
  所以，项目范围意味着

[19:27] it'll be a settings file in a .cloud folder in your project.
  它将是您项目中的 .cloud 文件夹中的一个设置文件。

[19:32] So, it would show right in here, and it only pertains to that project.
  所以，它会显示在这里，并且它只与该项目有关。

[19:35] And this scoping goes for not only settings, but also MCPs and skills and a lot of other things.
  这种范围界定不仅适用于设置，还适用于 MCP、技能以及许多其他事物。

[19:42] So, you want to understand that.
  所以，您需要理解这一点。

[19:44] Project-scoped is just that, your project.
  项目范围就是您的项目。

[19:47] And then you have user-scoped where it goes in your .cloud folder in your home directory, and whatever's in there will carry across all your projects.
  然后您有用户范围，它位于您主目录中的 .cloud 文件夹中，其中的任何内容都将应用于您的所有项目。

[19:59] Whether it's a settings file with permissions or a skill or whatever.
  无论是带有权限的设置文件还是技能，或其他任何内容。

[20:03] So, what I want to do is show you how to set a permission, and we do that with {slash} {slash} permissions.
  所以，我想做的是向您展示如何设置权限，我们通过 {slash} {slash} permissions 来实现。

[20:11] Now, this is this is kind of a crowded interface, so I'm going to make this a little bigger.
  现在，这是一个有点拥挤的界面，所以我将把它放大一点。

[20:16] So, basically, you have allow, ask, and deny permissions, and you might want to set like, let's say a get push.
  所以，基本上，您有允许、询问和拒绝权限，您可能想设置，比如说，一个 get push。

[20:26] You want it to always ask you before it makes a a
  您希望在执行 a a 之前始终询问您。

[20:29] get push command. So, what I'll do is

[20:32] use my arrow key and go down to the add

[20:34] new rule while it's set on Actually, I'm

[20:37] going to hit the right arrow cuz I want

[20:38] it to ask, and then go to add new rule,

[20:42] and then you're going to put the tool

[20:43] that Cloud Code uses. Remember I talked

[20:46] about the tools like bash and write and

[20:48] web fetch and all that. So, I'm going to

[20:50] say for the bash tool, when it runs get

[20:55] push anything, I want that to to ask me.

[20:59] Okay? So, I'm going to go ahead and hit

[21:01] enter. Now, it's going to ask about the

[21:03] scope. So, again, we have project and

[21:06] user scopes. Project is going to put it

[21:09] into a settings.json

[21:11] in a .cloud folder in my project. Now,

[21:14] you also have this option of local. So,

[21:18] what that does is it puts it in your

[21:19] .cloud folder in the difference is the

[21:22] local one you wouldn't commit and share

[21:24] with your team. You'd put You'd put this

[21:26] in a .gitignore because it's just for

[21:29] you. If you choose this option, then

[21:34] settings.json is not get ignored and

[21:37] your team your whole team anyone that

[21:39] uses the the repo can use it. And then

[21:42] you also have user settings where this

[21:44] this get push permission would be across

[21:47] all projects regardless. So, I'm going

[21:49] to choose project settings number two

[21:52] and it should create a .cloud folder and

[21:56] it has a settings.json. And if we look

[21:58] at that real quick, you can see this is

[22:00] just obviously a JSON object with

[22:02] permissions, ask, and have an array of

[22:06] of anything it needs to ask for and have

[22:08] get push.

[22:09] All right. So, another thing that I'll

[22:11] set sometimes is a deny for for removing

[22:14] any files or folders. So, if I go over

[22:17] to deny

[22:18] and add new rule

[22:20] and then for the actual rule, let's say

[22:23] bash. So, that's the tool and then the

[22:26] command, let's do RM. Let's say we don't

[22:29] want it to remove folders. So, we'll say

[22:31] RM RF star, right? So, if I hit do that

[22:35] and set that to project settings, then

[22:37] that should have been added to uh

[22:41] to this file here. Okay, so now I have

[22:43] deny any removing of any folders.

[22:47] So, that's how settings works. That's

[22:49] how scope works. And that's how

[22:51] permissions work. So, let's escape out

[22:54] of this.

[22:55] All right. So, now what I want to do is

[22:57] actually um

[22:59] use the the extension the VS Code

[23:02] extension. So, I'm going to exit out of

[23:04] this.

[23:06] And

[23:08] just clear this up.

[23:10] And yeah, we'll just close that. And

[23:12] now, if you want to use the extension,

[23:13] obviously, you have to install it. Let's

[23:15] see, does it need an update?

[23:17] I'm just going to restart this. So, this

[23:19] is the extension here. Just go ahead and

[23:21] install it. And then once you do that,

[23:23] you can just do command shift P,

[23:25] open up your command palette, and Claude

[23:27] Code open new tab.

[23:31] And there we go. So, this is the ex- the

[23:34] extension, which makes things

[23:36] a lot prettier, in my opinion. So,

[23:38] that's why I like to use it. It's

[23:40] things just look nicer, and it's easier

[23:42] to know what's what. So, this is our

[23:44] prompt area. We can also upload images

[23:48] or uh files, whatever we want. We can

[23:50] add contacts, meaning whatever files and

[23:52] folders. We can have it browse the web.

[23:55] Uh we still have the same permit um same

[23:57] modes right here. So, I can do shift

[23:59] tab, and it still changes to edit

[24:02] automatically, plan mode, auto mode, and

[24:04] regular mode. Now, what I'd like to do

[24:06] is refactor what we have here, right?

[24:09] So, this code here, it's all in one

[24:11] file. I would personally like to see

[24:13] this in separate modules. So, I have

[24:18] in the gist here,

[24:20] I have this prompt that I want to run.

[24:21] It says, "Refactor this for readability

[24:23] and maintainability. Split it into

[24:26] focused ES modules, an API module for

[24:29] the CoinGecko fetch, a format module for

[24:32] the price and change helpers, and a

[24:34] table module for the printing. Keep the

[24:36] output identical and don't add any

[24:38] dependencies."

[24:39] So, I'm going to grab that. And since

[24:42] I'm going to use ES modules, I want to

[24:44] create a package.json.

[24:46] So, obviously, you know, I could go

[24:47] ahead and run in the terminal npm

[24:49] install, but let's just tell it to I'll

[24:52] just say init a package.json

[24:55] JSON

[24:56] So, stuff like this, it's up to you if

[24:58] you just want to run the command. I

[24:59] mean, that's all it's going to do is is

[25:01] use its bash tool to run npm init. All

[25:03] right, so now that we have that, let's

[25:05] go ahead and paste in this refactor

[25:08] prompt. And it should use ES modules, so

[25:11] it should break it up, create maybe an

[25:13] API.js.

[25:15] Just know that if you're following

[25:16] along, you're probably going to get

[25:17] something a little different. So, it's

[25:20] going to look at the current code first,

[25:21] it used the read tool.

[25:26] And let's see. So, this is what it what

[25:27] it's going to give us, an API.js file.

[25:30] It's going to go through one by one

[25:32] every file. So, this will have the API

[25:35] URL, it has the fetch top coins

[25:37] function.

[25:40] And oh, it even takes in a limit

[25:42] argument. That was going to be something

[25:43] I added, but looks like it already did

[25:45] that.

[25:48] Okay, so we'll accept that. And then,

[25:49] let's see, this is format.js,

[25:52] which has the colors object, the format

[25:54] prices format change.

[25:57] And then, this is table.js.

[26:00] So, this brings in those formatters, and

[26:04] looks like it outputs the table, right?

[26:06] So, it's exporting print table.

[26:09] And then, it should go to the index.js.

[26:12] This is the entry point, so this is the

[26:14] diff. Everything in red, obviously, is

[26:16] going to get deleted. Green is going to

[26:18] get added, which is the two imports, and

[26:20] then the rest stays the same. We'll say

[26:22] yes to that. And notice it did create a

[26:25] source folder, too. So, it's it's

[26:27] unpredictable, so that's why it's good

[26:29] to just

[26:30] um pay attention to what's going on,

[26:32] rather than vibe coding.

[26:34] And it's going to also add type module,

[26:37] because in order to use ES modules in

[26:40] Node, you have to um

[26:42] add this.

[26:43] So, we'll say yes to that. Okay, it's

[26:45] going to run it.

[26:48] And looks like we get the same output.

[26:50] If I click on that, it shows me the full

[26:52] table here.

[26:54] So, the refactor works, and the output

[26:56] is identical.

[26:58] The code is now split. Yep, so did

[27:00] exactly what what I asked it to do. Now,

[27:02] before I go any further, I just want to

[27:04] talk a little bit about context. If you

[27:05] remember when I first ran Claude, it

[27:07] showed I had a 1 million token context

[27:10] window. And basically, that's Claude's

[27:12] ongoing memory. It's like temporary

[27:14] memory. And we can check it at any time

[27:17] with {slash} context. This is one of the

[27:19] commands you're going to use the most

[27:20] of. And this will show me what's been

[27:23] used. So, 28,000 tokens out of 1

[27:26] million. So, nothing, 3%. And of that

[27:29] 28,000, 9.7 thousand is actually from

[27:33] our messages, our prompting. Where the

[27:35] rest comes from system tools and skills.

[27:38] If you use MCPs, that will blow out your

[27:40] context. So, you just want to be aware

[27:42] of this at all times. You don't In my

[27:45] opinion, you don't want to let it get

[27:46] near this because it'll start just

[27:49] forgetting things and and just not

[27:51] making good decisions. It is better now,

[27:54] I admit, with the newer models than

[27:56] before Sonnet. I would say if you let it

[27:58] get to, which was then the 200,000

[28:01] max, uh it would really just turn into

[28:04] an idiot. It would forget things you

[28:05] just told it 2 minutes ago. So, what I

[28:08] do is I build feature by feature,

[28:11] usually. And every feature

[28:14] it will usually take like 200,000, maybe

[28:17] 300,000 tokens. And then once that

[28:20] feature is completely implemented, you

[28:22] know, I I I commit, I push it, it's done

[28:24] with, then I clear my context. Now,

[28:28] you do still want some stuff to be

[28:30] global and to always be there. And the

[28:33] way you do that is you create a

[28:34] claude.md file. And whatever is in that

[28:37] file, Claude loads when it's when it

[28:40] when the instance is is run, whether you

[28:42] clear it, it'll still be there, whether

[28:44] you open a new tab, it'll still be

[28:46] there, anything you put in that file.

[28:49] So, what I usually put is like co-

[28:50] coding conventions, information about

[28:53] the project, anything that I need Claude

[28:55] to always know. Now, I'm not going to

[28:57] create the Claude MD right now because

[28:59] I'm going to actually scrap this and and

[29:01] clone

[29:02] uh another project of mine and I'm going

[29:05] to create it there, but just know that

[29:07] that's one way to kind of

[29:09] keep your your global memory. And Claude

[29:12] also has a memory.md file that it it

[29:15] adds important things to as well. So, it

[29:17] doesn't just go totally blank when you

[29:19] clear. Now, another thing you can do is

[29:21] have some kind of global con- context

[29:24] vault and that's what I do here. I

[29:26] created this memcreate.dev

[29:28] where you can install this and it's not

[29:30] just Claude code, well, right now it is,

[29:32] but I'm going to add compatibility for

[29:34] Codex and other stuff, but basically it

[29:37] will give you these skills, these

[29:39] commands like /save, which will compress

[29:42] the current session into a structured

[29:45] log and it'll save it in a vault

[29:47] somewhere. I use my Obsidian vault, but

[29:48] it could be any file. And then when you

[29:51] want to load whatever it saves, you just

[29:53] simply run /load. So, and this is across

[29:56] all projects. If I go and open one of my

[29:58] projects right now and I say /load and

[30:01] then the name of the project, it brings

[30:03] in like everything that's been that's

[30:05] been put in that session. So, that's

[30:07] just another way. There's There's a ton

[30:09] of different things you can do. Like I

[30:11] said, the AI using AI is like the the

[30:13] wild west right now. There's no standard

[30:16] conventions or anything. Everybody just

[30:18] is inventing their own way of doing

[30:20] things and that's just mine. You might

[30:22] use do something totally different. And

[30:24] you don't need to use something like mem

[30:26] create or special skills or anything. If

[30:29] If you want, you can just say like

[30:30] summarize

[30:33] the

[30:34] summarize what we've done

[30:38] and put it

[30:40] into a let's say context. So, we'll have

[30:43] a context folder / sessions. dot uh md.

[30:49] All right, so now it's going to create

[30:51] the sessions log, right? So, it has

[30:54] the date, what was done. So, initialize

[30:56] project, refactored. That's really all

[30:58] we did.

[31:00] Um verification, the current structure.

[31:02] So, I'll accept that.

[31:04] And now we have a folder with that

[31:06] session md. Now, I can go ahead and

[31:09] clear my context,

[31:10] right? If I clear it and then I run

[31:13] context again,

[31:15] now I still have 19,000 tokens used

[31:18] because of the system tools and other

[31:20] things. But messages, you can see is is

[31:23] basically nothing, 137. So, that's

[31:27] that's a workflow that you can have is

[31:29] just to manually have it record the

[31:31] session. And then when I clear it, I can

[31:34] say, "Hey, you know, read read the

[31:36] session and and whatever." So, that it

[31:38] has an ongoing memory along with the

[31:40] cloud md.

[31:42] So, let's uh

[31:44] let's add one more feature to this. So,

[31:46] I'm actually going to copy this right

[31:48] here. So, this says make the number of

[31:50] coins configurable via a command line

[31:53] argument, default to five if no argument

[31:55] is given. And we should be able to do

[31:57] like node index.js 10 or or however many

[32:01] crypto coins we want to get. So, let's

[32:04] go ahead and paste that in. Okay, so it

[32:07] looks like it's going to open the

[32:08] index.js and it's adding this parse

[32:10] limit function.

[32:12] And in main,

[32:15] it's going to get the limit here and

[32:17] it's going to pass it into fetch top

[32:19] coins, which already has a limit. It

[32:21] already had a limit, remember? So, it

[32:23] shouldn't have to change anything there.

[32:25] So, let's say yes. And let's see, test

[32:28] the CLI with the argument. So, it's kind

[32:30] of it's giving us 10.

[32:32] So, now that works. So, it's as easy as

[32:34] that. And I mean, we saw every bit of

[32:37] code it wrote. I mean, I didn't go dive

[32:39] deep into it. It's something very

[32:41] simple, but that's how you should use AI

[32:44] just overall is is

[32:47] not writing the code yourself, right? I

[32:49] didn't write a line of code, but I know

[32:50] exactly what's happening. And that's

[32:52] that's what what's important, and you

[32:54] want to understand concepts. You want to

[32:56] understand overall architecture. You

[33:00] don't have to know the exact syntax

[33:03] anymore of certain things, but you need

[33:04] to know what is happening. What does it

[33:06] do?

[33:07] So, yeah, let's go ahead and clear this

[33:10] up. And I think what I'm actually, you

[33:12] know what? I'm just going to close this

[33:13] up because I want to clone another

[33:15] project.

[33:17] And I have this crypto dash project.

[33:19] This is actually, I believe this is from

[33:20] my React course.

[33:22] It's just a very simple

[33:24] UI that uses, I believe, yeah, the

[33:27] CoinGecko API. So, it's kind of like a

[33:29] just a web UI of what we just did. A

[33:31] little more advanced. It has like

[33:33] sorting and searching and stuff.

[33:35] But, I want to clone this. So, let's go

[33:38] ahead and grab that.

[33:40] And then I'm going to go to my terminal.

[33:43] And let's actually, I'll CD. dot dot out

[33:47] of that. And let's

[33:49] let's make a directory for this. And you

[33:51] guys can follow along if you want. Let's

[33:53] say crypto dash.

[33:56] And then I'm going to CD into crypto

[33:58] dash.

[33:59] And then I'll just run Claude. Oh,

[34:02] actually,

[34:04] yeah, cuz I want to I want to

[34:06] show you that Claude can just use Git.

[34:08] So, I'll run Claude here. And then I'm

[34:10] going to say, I want

[34:12] to clone this repo

[34:15] into this

[34:17] root folder.

[34:21] And then I'll paste it. Okay, so it's

[34:22] going to check the folder, sees that

[34:24] it's empty. Now, it's going to run this

[34:26] command here, Git clone.

[34:29] Say yes.

[34:31] Okay, so now we have that. And I'm going

[34:33] to just exit out of this

[34:35] because I want to go into VS Code. So,

[34:37] I'm going to open up code

[34:40] in this folder. All right, so now I have

[34:43] the project open here and I'm going to

[34:45] open up Claude. So, command shift P and

[34:48] new tab. So, I'm going to go ahead and

[34:50] run npm install. I'll just tell Claude

[34:52] to do it. I'll say oh, I can just say

[34:54] install

[34:56] deps.

[34:59] And you don't need any key or anything.

[35:00] If you guys want to clone this, you can.

[35:04] npm install. I'll say yes.

[35:13] Okay, dependencies are installed. Now, I

[35:15] could tell Claude to run the server, but

[35:17] what I'll usually do is just open a

[35:18] terminal myself and let's run npm run

[35:22] dev.

[35:24] Okay, and this is not like a Next.js

[35:27] project. It just uses V.

[35:29] So, let's open up 551 Oh, it opens up

[35:33] here.

[35:34] No, I want to open it up in the browser.

[35:39] Actually, we'll just close that. So,

[35:40] it's still running. I'm just going to

[35:42] close the terminal.

[35:43] And then let's go here.

[35:47] All right, so very simple project. I can

[35:50] filter like if I say bit, obviously, I

[35:52] just gives me my Bitcoin. And I can

[35:54] click on one of these. It takes me to a

[35:56] page like this.

[35:59] And I can sort and all that.

[36:02] So, I actually want to create a Claude

[36:04] MD file and I already explained what

[36:05] that is. It loads every time you you

[36:08] create a Claude instance.

[36:10] Right? So,

[36:12] let's see. If I go back to VS Code and

[36:15] no matter what, if I run {slash} clear,

[36:18] whatever is in that file will stay. Now,

[36:20] I can create the file manually or what I

[36:23] would suggest is running {slash} init.

[36:26] So, {slash} init, what it does is it

[36:27] looks at your current project and it

[36:30] creates a Claude MD based on what it

[36:32] thinks it should as far as your project

[36:35] files.

[36:36] So, you can see it's going to read my

[36:37] package.json.

[36:40] It's listing the components.

[36:43] Reading the read me. It's looking at

[36:44] app.jsx. So, it's basically going

[36:47] through my entire project to see what it

[36:49] should put in there. And this is a very,

[36:50] very tiny project. So, it probably won't

[36:53] put much. Probably just like the scripts

[36:56] to run or something like that.

[37:01] Okay, so this file provides guidance.

[37:04] Yeah, so it's just showing the commands

[37:06] to npm run dev so that Claude never

[37:08] forgets that.

[37:10] Um requires a .env file with two coin

[37:13] So, this actually does use CoinGecko

[37:15] APIs. It works without it, but you'll

[37:18] get rate limited quick. So, you can add

[37:20] API keys. That's right. Forgot about

[37:23] that. Shows the architecture. So, Vite

[37:26] and React 19. It's a single-page

[37:28] application.

[37:30] Okay, so this is showing quite a bit.

[37:33] Showing all the files and and what's in

[37:35] them.

[37:37] Styling is in a single global style

[37:39] sheet. All right, so I'll say yes to

[37:41] that. And it created that Claude MD. And

[37:43] I can put whatever I want in there and

[37:45] it will always remember what I put in

[37:47] there. Now, just to kind of give you an

[37:49] example, I have the project from my AI

[37:51] course.

[37:53] And let's take a look at the Claude file

[37:55] here. So, this is what I'll what I'll

[37:57] commonly do is have a very small Claude

[38:01] MD file, but point to other files. So,

[38:04] here I have four main files I'm pointing

[38:06] to, which are in my context folder. I

[38:09] have project overview, which ob- just

[38:12] what it sounds like. Coding standards,

[38:15] so like standards with TypeScript and

[38:18] Next.js cuz that's what what the the

[38:20] project is.

[38:21] AI interaction, So, things like, you

[38:24] know, be concise, get to the point, um

[38:28] don't lie, you know, stuff like that.

[38:30] And then a current feature file, because

[38:32] like I said, I develop feature by

[38:34] feature. So, I fill this file with

[38:36] whatever I'm doing, I implement the

[38:38] feature, and then I I, you know, commit

[38:41] it, and then wipe it, and put the next

[38:45] feature in. That's kind of my process.

[38:46] And again, I'll show you that in the

[38:48] next AI course.

[38:50] Um and just to show you kind of what

[38:52] those files look like. So, if we go into

[38:54] context,

[38:56] there's a lot of stuff in here, but only

[38:57] those four being loaded with the Claude

[38:59] MD. So, like coding standards, strict

[39:02] strict mode enabled, no any types,

[39:05] functional components,

[39:07] server components by default. This is

[39:09] all stuff I want Claude to know,

[39:12] regardless of of, you know, if I clear

[39:14] my context or not.

[39:17] Um and I put this in here because with

[39:20] the older models, it would always

[39:21] install and try to configure Tailwind 3.

[39:25] So, I had to specifically say this here.

[39:27] So, I briefly talked about plan mode,

[39:29] where it doesn't actually edit your

[39:31] code, but you use it to just plan out

[39:33] stuff. So, I want to give you an example

[39:35] of that. So, to change it, I can click

[39:37] here and choose plan mode, or I can just

[39:39] do shift tab and just cycle through

[39:42] until it says plan mode, and then I have

[39:45] a prompt

[39:47] in the gist here.

[39:49] All right. Now, this this project that I

[39:52] have cloned is part of a course, and

[39:56] when you make projects for courses, you

[39:58] want to teach certain concepts, and

[40:00] sometimes the result isn't exactly what

[40:02] you would do if you weren't teaching a

[40:05] course. So, there is actually a lot of

[40:07] prop drilling in this project, and I

[40:09] want to fix that. So, I want to use plan

[40:11] mode to to kind of

[40:13] to figure out how we can fix it. So,

[40:15] this says, "Look at the app.jsx." and

[40:18] notice I'm using the at symbol so that's

[40:20] a mention. I'm mentioning that file and

[40:22] let me know how we could refactor this

[40:25] project to not prop drill the home page.

[40:27] What are your suggestions? Okay, so I'll

[40:30] grab that and if we take a look at the

[40:33] file that I'm talking about

[40:36] and we come down

[40:39] to yeah, right here. So you can see all

[40:42] these props I'm passing in the home

[40:43] page. So there's

[40:45] many other ways that we can do this. So

[40:48] let's figure it out with plan mode. So

[40:50] I'm going to go ahead and paste this in

[40:53] and make sure I'm in plan mode.

[40:55] And while it's in plan mode, it won't

[40:57] change anything. It's not going to you

[40:59] know, edit any files or create any new

[41:01] files or anything like that.

[41:04] So it says I already have good context

[41:06] on app jsx and home jsx from earlier.

[41:10] Okay, so that goes to what we were

[41:12] talking about earlier. Let me quickly

[41:14] look at the remaining control components

[41:16] and understand the full prop chain.

[41:19] So it's looking at my filter input file,

[41:21] limit selector, sort selector and this

[41:24] is what it'll do. It'll actually ask us

[41:26] questions. So which refactoring approach

[41:29] would you like to plan for? Move the

[41:31] state down and have a custom hook and it

[41:34] says it's that's what's recommended. So

[41:36] it'll collocate all state in home page

[41:38] and extract a use coin custom hook for

[41:42] fetching. No new dependencies app jsx

[41:44] becomes pure routing. So that's one

[41:46] option. Another is to use the context

[41:49] API which is built into react. A little

[41:52] you know, a little bit more code.

[41:54] Zeus stand store. So that's using an all

[41:56] out, you know, context store which I

[41:59] don't want and tan stack query. So I

[42:02] could replace the fetch in use effect

[42:05] with use query. Server state lives in

[42:08] query cache. So these are some real

[42:10] options. I'm going to go with the

[42:11] simplest which is to move the state down

[42:14] and have a custom hook. So, let's submit

[42:16] that.

[42:17] So, now what it's going to do is write a

[42:19] plan up for the recommended approach.

[42:23] And it's putting this into a markdown

[42:24] file, as you can see right here.

[42:27] And this is going to go in your home

[42:29] folder, I believe. It doesn't get put

[42:31] into your project folder.

[42:34] Let's see. Remove homepage prop

[42:36] drilling.

[42:38] So, it just kind of gives us an overview

[42:40] of the changes. It's going to create a

[42:42] new hook called use coins, and that's

[42:44] where it's going to do the fetching

[42:46] from.

[42:48] And let's see. Remove all nine props.

[42:56] Shows us what is going to be untouched.

[42:58] So, all the components like filter

[43:00] input, limit selector, that's all going

[43:02] to be un- un- touched. Verification.

[43:05] It'll run npm run lint.

[43:08] npm run dev. Okay. So,

[43:12] we can say yes and auto accept, yes and

[43:16] manually approve edits, and no keep

[43:18] planning. Or, we can tell it to do

[43:20] something else. So, I'm going to say

[43:22] auto accept, and that should bring us

[43:24] out of plan mode.

[43:26] So, see now it doesn't say plan mode,

[43:28] because now it's going to implement that

[43:30] that plan. So, now as you can see

[43:32] there's a hooks folder with that use

[43:34] coins.

[43:35] And then it's bringing that hook into

[43:37] the homepage, which you can see right

[43:39] here.

[43:42] And it's going to get rid of all the

[43:43] props for the homepage, cuz we're no

[43:45] longer going to be passing those in.

[43:48] And it's going to run lint and build.

[43:51] So, start the server, curl homepage, and

[43:54] try. So, I'm going to say no to this,

[43:55] cuz I already have the server going.

[43:58] In fact, I'll just say I have

[44:01] the server

[44:03] running, and I will test.

[44:07] Okay, it says the refactor is complete.

[44:10] Lint and production both pass, so let's

[44:12] open up

[44:14] I'm just going to restart the server

[44:16] here.

[44:22] Okay, and

[44:25] go back to the project.

[44:29] And there we go. So, we have all of our

[44:31] coins. If I click on one, so everything

[44:35] still works. I mean, there's there's not

[44:36] too much to test. It's very simple.

[44:39] But now our project is a little cleaner,

[44:41] right? If we look at the app.jsx

[44:46] and we look at these routes here, we no

[44:48] longer have that home page where we're

[44:50] passing in all that stuff. Okay? So,

[44:52] that's just an example

[44:54] of kind of using plan mode and and using

[44:57] that to refactor. Now, let's see what

[44:59] else I have here in the gist. So, I

[45:02] wanted to add a favorites feature.

[45:06] So, just to add just to add something. I

[45:08] mean, I know we just did a refactor, but

[45:10] let's let's add a new feature to the to

[45:12] the project. So, once again, I'll go

[45:15] into plan mode.

[45:18] And it says I want a features a

[45:20] favorites feature that lets us star

[45:22] coins from the list, filter to only show

[45:25] favorites, and persist with local

[45:27] storage. How would you implement this?

[45:30] So, it says this is a new task, so I'll

[45:32] overwrite the old plan. I already know

[45:34] most of the code base. Let me check coin

[45:36] card and the style sheet since this is a

[45:39] star since the star button will live

[45:41] there.

[45:43] And by the way, if this were a real if

[45:44] this were a real you know, I was going

[45:46] to keep this, I would have made a commit

[45:48] with the refactor.

[45:51] Okay, so let's see.

[45:54] User wants to mark coins as favorite

[45:56] changes, so there'll be a new file. So,

[45:58] it's going to create a new hook called

[46:00] use favorites.

[46:02] And it'll have a storage key with some

[46:04] state.

[46:05] So, favorites and set favorites. Use

[46:08] effect, it's going to set the storage

[46:11] key in local storage.

[46:14] And we'll have a toggle

[46:16] to toggle that value, bring it into the

[46:19] home page.

[46:22] And then in the coin card, it's going to

[46:24] add the star.

[46:27] Yeah, so and then CSS will add a star

[46:29] button class.

[46:33] And then all this stuff is all

[46:34] untouched. All right, so I'm going to

[46:36] auto accept. And that means that I'm

[46:39] letting it do it. It gets out of plan

[46:41] mode. So, it's showing me the diff of

[46:43] the home page. You can see it's bringing

[46:45] in use favorites, the new hook. It's

[46:47] adding the piece of state.

[46:49] And we have the toggle here.

[46:52] And we're adding it to the filter.

[46:55] So, show favorites only.

[46:58] And then adding the coin card.

[47:03] So, coin card is now going to get an is

[47:05] favorite and it's also going to have an

[47:07] on toggle favorite prop passed in.

[47:11] And then the CSS.

[47:13] So, I mean I'm seeing everything that's

[47:15] being done, right? Some people are just

[47:18] so against AI cuz just cuz I'm not

[47:20] typing this out. I know exactly what's

[47:22] happening.

[47:24] So, we're going to run lint. And this is

[47:26] a tiny project. I realize that. It's

[47:28] It's when you get into really large

[47:30] enterprise projects where AI can really

[47:33] be a problem.

[47:35] So, let's see. It's been implemented.

[47:37] Let's check it out.

[47:40] There we go. So, we got our our stars

[47:42] here. Let's say we want Bitcoin

[47:45] and I don't know, Solana.

[47:47] So, those are favorited and

[47:50] if I filter, if I click this, it shows

[47:53] my favorite only the favorites.

[47:57] So, that easy to to create that feature.

[47:59] I know it's simple, but it would have

[48:01] taken taken me a hell of a lot longer to

[48:03] actually type all that out. So, the next

[48:05] thing I want to look at are skills. A

[48:07] skill is basically a reusable workflow

[48:09] that you teach Claude once and it

[48:12] remembers forever. And skills are used

[48:14] in in tons of AI tools. It's not just a

[48:17] Claude code thing.

[48:18] So, and it's not just Claude code, you

[48:21] can also use it in Coda. In fact, you

[48:23] can see right here, if I go to skills, I

[48:26] have all these skills, my morning

[48:27] briefing, which says generate Brad's

[48:30] morning briefing, a one-page snapshot of

[48:33] today's calendar, last session's outcome

[48:35] and pending actions, what's active in

[48:37] projects and current state, any email

[48:40] items needing attention. So, I just type

[48:42] good morning and it runs the skill for

[48:44] me. And these are just markdown files,

[48:46] right? If I go to manage skill, you can

[48:48] see

[48:49] um this is just a markdown file right

[48:52] here.

[48:53] And I mean, you can manually write these

[48:56] if you want, but you can just tell

[48:57] Claude to write it. So, what I'm going

[48:59] to do is go back to the gist here, and I

[49:03] have a um skill here to handle get

[49:06] commit messages. So, it says create a

[49:08] project scope skill called skills as

[49:11] slash

[49:14] commands.

[49:15] So, the workflow is check that there are

[49:17] stage changes within get diff staged. If

[49:21] nothing is staged, stop and tell me to

[49:22] stage first. Read the staged diff.

[49:26] Generate a commit message in this

[49:27] format. So, it'll be the type, scope,

[49:30] the short a short subject, bullet of

[49:33] what what changed, and a bullet of why,

[49:36] and then run get commit with that

[49:38] message. And the different types will be

[49:40] feature, fix, refactor, chore, and so

[49:43] on. Um trigger when I say write a commit

[49:46] message, generate a commit. So, I don't

[49:48] have to run that slash command. I can,

[49:51] but I can also just say write a commit

[49:53] message or generate a commit and it'll

[49:55] it'll automatically know to load that

[49:57] skill. So, let's grab this.

[50:00] And we're simply going to run this as a

[50:02] prompt. So, we'll go ahead and paste

[50:04] that in. I also want to point out I said

[50:06] project scope skill. That's important

[50:09] because skills have they pay attention

[50:12] to scope just like settings and

[50:14] permissions, just like MCPs, and project

[50:17] scope means it's going to install it

[50:19] it's going to work for this project

[50:21] only. I could have said user scope and

[50:23] it and this would then work across all

[50:25] my projects.

[50:27] Okay, so this is the markdown file it's

[50:29] going to create. So, basically just

[50:31] everything I told it.

[50:34] So, let's say yes to that.

[50:37] And then it where it's going to put it

[50:39] is going to be my dot Claude folder

[50:41] under skills, you can now see commit

[50:44] message.

[50:45] And every skill is always going to the

[50:47] file is always going to be called

[50:48] skill.md.

[50:50] Okay, the folder is is what identifies

[50:53] it, but the the specific file will

[50:54] always be be skill.md. Let's see, two

[50:57] details worth noting, the description

[50:59] front matter includes your trigger

[51:00] phrases, so the skill activates on those

[51:03] naturally, and the slash command works.

[51:07] I already mentioned that.

[51:09] So, what I want to do now is actually

[51:11] clear my context just to to know when I

[51:14] make this commit, it goes off of the

[51:16] skill.

[51:17] So, let's run slash actually, I'll just

[51:19] say Yeah, I'll just say write a commit

[51:23] message.

[51:24] And that should run the skill. Yep, so

[51:26] right here, commit message skill. So, it

[51:28] knows to run it. So, it's not rigid like

[51:30] standard commands. You don't have to do

[51:32] slash something exactly, you just

[51:35] basically say what you want and it it

[51:37] picks it up. It knows if it should use

[51:39] the skill. Now, remember in the skill I

[51:41] said tell me if nothing is staged, and I

[51:43] haven't run get add anything, so it says

[51:46] nothing is staged, stage your changes.

[51:48] So I'll go ahead and just

[51:51] and just to show you I can run it

[51:53] just open a terminal.

[51:55] I mean I don't have to use, you know,

[51:57] Claude for for freaking everything. I'll

[51:59] just say get add

[52:02] get add all.

[52:04] Okay, so now I have my changes staged

[52:06] and I'm going to say once again, this

[52:08] time I'll use the actual command. I'll

[52:11] say commit {dash} msg. Now it doesn't

[52:13] show up because you

[52:16] one one when you create it you have to

[52:17] open up a new Claude instance for it to

[52:19] show up here. Okay, so it's it's not

[52:22] recognizing it because I didn't run a

[52:23] new Claude tab, but I'll just say write

[52:27] a commit message. Okay, so this looks

[52:29] like the format that I specified. So

[52:32] feature, that's the type the scope home

[52:36] add favorites with local storage

[52:38] persistent and then our points add use

[52:41] favorite hook, extract coin fetching

[52:44] into use coins. All right, so we'll say

[52:46] yes to that and there we go. So now it's

[52:48] been committed. So that's just a very

[52:50] simple example, but you can create

[52:52] anything into skill. If you have a

[52:53] certain way you want to create

[52:54] components or or absolutely anything

[52:57] that you do repetitively. If you find

[52:59] yourself doing the same thing over and

[53:01] over then create a skill for it. For my

[53:03] devsheets.io website where I have a

[53:06] whole bunch of different types of sheets

[53:08] for different frameworks and stuff, I

[53:10] have a validate sheet skill that will

[53:13] reach out to

[53:15] um to the documentation and actually

[53:16] uses an MCP called context seven and it

[53:19] will make sure that everything is right

[53:21] and it'll look for for updates. If

[53:23] something in the framework is updated,

[53:25] it'll add it to the sheet, things like

[53:27] that. So the next thing I want to talk

[53:28] about are MCPs which stands for model

[53:31] context protocol and there's all kinds

[53:33] of MCP servers and it allows Claude and

[53:36] not just Claude, but pretty much any AI

[53:38] tool to reach out to other services. And

[53:42] some of the the ones that I use are

[53:45] Contact 7, which gives the most

[53:47] up-to-date documentation on frameworks

[53:50] and all kinds of stuff. And the reason

[53:53] that that's very helpful is because

[53:55] obviously models are behind a little

[53:57] bit, and you want to get the most

[54:00] up-to-date information, so using that

[54:02] MCP allows them to do that. Another one

[54:04] I use a lot is Neon's MCP, which will

[54:07] allow my AI to directly interact with my

[54:10] Neon databases and make queries.

[54:13] And then Playwright, which is what I

[54:14] actually want to work with now, allows

[54:18] basically allows Claude to open the

[54:20] project up in a browser and run

[54:22] end-to-end tests or even just look at it

[54:25] and give you an opinion on the UI or

[54:27] something like that. It's just a way for

[54:28] it to actually see your project. And I

[54:31] use Playwright all the time on on my

[54:33] main machine.

[54:34] But there's MCPs for like Google

[54:36] services, for Slack, for just about any

[54:39] popular service you can think of.

[54:42] So, to install an MCP with Claude, let

[54:45] me go back to my gist here, you can run

[54:48] a command like this: Claude MCP add, and

[54:52] then you can specify the scope, so dash

[54:54] S user, meaning the user scope, so it's

[54:57] available on all projects, the name of

[55:00] it, and in this case we we're going to

[55:01] add NPX in the Playwright package. So,

[55:05] let's grab that, and that's going to be

[55:07] run in a terminal, not not in um

[55:11] not in Claude's interface. So, I'll open

[55:13] up my terminal, and let's go ahead and

[55:16] paste that in.

[55:18] And let's run that.

[55:20] Okay, so my it already exists, I already

[55:22] have it installed, so I should be able

[55:24] to use it. Let's just straight up ask.

[55:27] I'll say, "Do you

[55:28] have access to the Playwright

[55:35] MCP?"

[55:38] Playwright MCP?"

[55:38] Let's close that up.

[55:42] Okay, so it says no, it isn't connected

[55:43] to this session. You know what? I might

[55:45] have to restart this. I might have to

[55:48] open up a new tab. So, let's actually do

[55:50] that. Do you have access to the

[55:53] Playwright

[55:56] MCP? Yes. Okay, so now it does cuz I

[55:58] restarted the session.

[56:00] So, basically I can have it just open my

[56:03] project up in a browser and run some

[56:05] tests. So, I'm going to grab this

[56:08] which says use Playwright to open the

[56:10] project and then click the star icon on

[56:13] the on the first coin in the list. Then

[56:16] click the favorites filter. Tell me if

[56:19] the star the starred coin is the only

[56:22] one showing and take a screenshot.

[56:25] Which I just I think is amazing. If you

[56:27] think of like where we were a couple

[56:29] years ago to be able to do this now, I

[56:31] think it's crazy.

[56:33] So, let's go ahead and and let me just

[56:34] check the

[56:37] Yeah, so I'm just going to unfavorite

[56:38] everything here.

[56:41] Okay, so now

[56:42] let's run this. I already have the

[56:44] server running, so I'll tell it that.

[56:47] I already have it running. Now, what

[56:49] it's going to do is ask for permission

[56:51] for different kinds of tools. Like this

[56:54] one is called browser navigate. So, MCPs

[56:57] have their own set of tooling. So, I'm

[56:59] going to say yes to that.

[57:00] Now, it's opening this, right? And it

[57:03] should click the star, the first star.

[57:07] Now, it's going to ask permission for

[57:08] it.

[57:10] So, browser snapshot. Let's say yes to

[57:12] that. I'm just going to say allow

[57:14] always. Okay, so it's running

[57:16] Playwright.

[57:18] And get that browser back.

[57:22] Yep, so you can see it clicked the star

[57:23] and now it's just showing Bitcoin. Now,

[57:25] it's going to take a snapshot and it'll

[57:27] create this {dot} Playwright folder. If

[57:29] you're going going you're probably going

[57:30] to want to get ignore that. Yes, it

[57:32] works as expected after starring the

[57:34] Bitcoin, the first coin, and checking

[57:36] the favorites only filter, Bitcoin is

[57:38] the only coin showing. So, that is

[57:40] freaking awesome to me. That's still

[57:43] amazing. I do that stuff all the time,

[57:44] but it still amazes me.

[57:47] So, yeah, that's MCPs, and that's play

[57:50] right. All right, so this video is

[57:51] longer than expected as usual, but I

[57:54] wanted to just talk about sub agents

[57:55] real quick. So, a sub agent is basically

[57:58] a separate Claude session that gets spun

[58:00] up to handle a specific task, and then

[58:03] it reports it back to your main thread.

[58:05] And what's great about sub agents is

[58:07] they have their own context window. So,

[58:09] when I run {slash} context, and you see,

[58:12] you know, the used up tokens, it doesn't

[58:15] get added to that. At least the the

[58:17] whole thing doesn't. What does is what

[58:20] it comes back with, which is just simply

[58:21] just a summary of of what it finds. So,

[58:24] you can create a sub agent that will

[58:27] um basically look for dead code, or look

[58:30] for

[58:32] parts of your code it can optimize.

[58:34] That's really where I find it useful is

[58:36] to just make your code base better. So,

[58:39] what I want to do is create a sub agent.

[58:41] There are actually built-in ones.

[58:43] There's one called explore that's used

[58:46] just for that to kind of explore your

[58:47] your your code and come back with

[58:50] findings. So, I do have a prompt here to

[58:53] use the explore agent. It says, "Use it

[58:55] to map the data flow in this project.

[58:58] Where does the coin data come from? What

[59:00] components consume it? How uh how does

[59:03] state move through the app after

[59:06] uh after our recent refactor? Report

[59:09] back with a summary." So, this will use

[59:12] a built-in sub agent called explore. So,

[59:14] let's try that out. I'm going to go

[59:16] ahead and run that.

[59:19] Now, whatever it does within this

[59:20] explore agent is in its own context.

[59:24] So, it says, "A lot launch an explore

[59:26] agent to map the data flow across the

[59:28] code base. So, all this stuff it's doing

[59:30] right now, reading package.json, reading

[59:33] use favorites, that's in its own

[59:35] context. Okay, so this is basically the

[59:37] report that it gives back and this is

[59:39] what goes into our main context. So,

[59:42] here's the data flow map. Um one

[59:45] headline finding, the refactor

[59:47] moved all state out of app.jsx,

[59:50] where the coin data comes from. So, it

[59:53] has our hook, use coins, the coin

[59:55] details page, the coin chart component,

[59:59] where the state lives, which is in

[01:00:00] app.jsx.

[01:00:02] Um how the data moves down through the

[01:00:05] home.jsx, passes filter, limit, sort by.

[01:00:09] Just gives us a a summary. So, anytime

[01:00:10] you want to know anything about your

[01:00:12] code, you want to use a sub agent, so

[01:00:15] you don't add that to your context. Now,

[01:00:17] you can also, in addition to using the

[01:00:20] built-in ones, you can create your own.

[01:00:22] So, I have this last prompt here that

[01:00:24] says create a project-scoped sub agent

[01:00:27] called code reviewer. It should review

[01:00:29] the current uncommitted changes in this

[01:00:31] project and check for things like dead

[01:00:34] code or unused imports, console.log

[01:00:37] statements left in, missing key props on

[01:00:41] lists in React, um accessibility misses,

[01:00:44] and so on. So, anytime you want to not

[01:00:47] only check things, but, you know,

[01:00:49] optimize your code, sub agents are great

[01:00:51] for. So, I'm going to go ahead and run

[01:00:53] this.

[01:00:56] And again, I I specified I want it to be

[01:00:59] project-scoped, so it should get put in

[01:01:01] here in the projects.claud folder. If it

[01:01:05] were user-scoped, it would be in my

[01:01:07] home.claud folder. Okay, so this is it

[01:01:10] and it's just a markdown file.

[01:01:11] Literally, everything you do is a

[01:01:12] markdown file. So, your read-only code

[01:01:16] reviewer. Okay, so that's important,

[01:01:17] it's not going to make any changes, it's

[01:01:19] just to report. Your scope is to review

[01:01:23] only the current uncommitted changes.

[01:01:25] So, it's actually not going to go

[01:01:26] through the entire code base, just your

[01:01:28] uncommitted changes.

[01:01:31] Which do I even have any? I'm not sure.

[01:01:33] I don't even think I have any.

[01:01:35] Um but yeah, let's go ahead and accept

[01:01:37] that.

[01:01:39] And now you can see there's now an

[01:01:41] agents folder in my doc cloud folder

[01:01:43] with that code review markdown file.

[01:01:46] Yeah, it looks like all we have is

[01:01:47] playwright stuff for uh for uncommitted

[01:01:50] code.

[01:01:52] But let's just try it. We'll say review

[01:01:53] my code. So, right here, agent

[01:01:57] review uncommitted changes.

[01:02:00] And again, it has its own context

[01:02:02] window, which I think is is the greatest

[01:02:04] thing about sub using sub agents. So, I

[01:02:06] think it saw that I had no uncommitted

[01:02:09] code, and it's actually adding this

[01:02:10] here. So, it did say if there are no

[01:02:12] uncommitted changes, say so and stop. Do

[01:02:15] not review committed code instead. Now

[01:02:17] it says if there's no uncommitted

[01:02:19] changes, say so and stop. And then

[01:02:22] non-code artifacts like screenshots from

[01:02:25] playwright do not count as reviewable

[01:02:27] changes. So, what happened was it went

[01:02:30] to do that, right? Review my uncommitted

[01:02:32] code, and it sees all I have is like

[01:02:34] playwright screenshots. So, it decided

[01:02:37] to actually change. It learned from that

[01:02:40] and changed its own markdown file to now

[01:02:43] say, you know, ignore those playwright

[01:02:45] screenshots. So, I'll say yes to that,

[01:02:47] and now it's probably just going to tell

[01:02:48] me I have no

[01:02:50] uncommitted changes.

[01:02:52] Let's see. If you make some changes in

[01:02:54] source and say review my code again,

[01:02:56] you'll get the real severity group

[01:02:58] report. But I'm not going to do that cuz

[01:02:59] this video is getting way too long. But

[01:03:01] the point is you know what sub agents

[01:03:03] are, and you know what that you can do

[01:03:05] with them. You know, they they have

[01:03:06] their own context. All right. So, again,

[01:03:09] this video was a lot longer than I had

[01:03:11] planned. I always plan to make it like a

[01:03:13] a quick guide, but there's just too much

[01:03:16] to say and and and teach. So, hopefully

[01:03:19] you guys enjoyed it. Let me know if you

[01:03:20] did and I will see you next time.