How to Use Claude Code 2.0 (Step-by-Step Tutorial)
Claude Code TutorialsFresh📅 2025-10-03
Tutorial Overview
┌─────────────────────────────────────────────────────────────────────┐
│ SETUP WORKFLOW │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 1. Prerequisites │
│ │ │
│ ├──► Install required software │
│ │ • Node.js / Python / etc. │
│ │ • Code editor (VS Code, Cursor) │
│ │ │
│ ▼ │
│ 2. Configuration │
│ │ │
│ ├──► Get API keys / credentials │
│ ├──► Set environment variables │
│ │ │
│ ▼ │
│ 3. Initialize Claude Code │
│ │ │
│ ├──► Run setup commands │
│ ├──► Verify installation │
│ │ │
│ ▼ │
│ 4. Ready to Build! │
│ │
└─────────────────────────────────────────────────────────────────────┘What You'll Learn
- Core concepts explained
- Step-by-step implementation
- Practical examples
Transcript
[00:00] All right, so Anthropic just released their latest model, Sonnet 4.5. And according to their article, Claude Sonnet 4.5 is the best coding model in the world right now. And in addition to the model, they also released a major update to Claude Code CLI and the new extension for VS Code. And both the CLI tool and the code extension include a bunch of very cool features which we'll look at in this video. All of these updates compared with this new model is super powerful. So in this video we'll
[00:32] do a full crash course and we'll cover everything from setting up cloud code, creating custom commands, creating sub agents and setting up MCP servers. We'll also have a look at a bunch of hidden features like checkpointing and background tasks. And we'll compare the differences between the CLI tool and the new VS Code extension. By the end of this video, you'll know exactly how to use the new Sonnet 4.5 model with Claw Code 2.0 in your new or existing
[01:02] projects. To get started, I recommend downloading and installing a code editor like VS Code. Of course, you can use Claude Code in the terminal without a coding editor, but I think it makes it way easier to use Claude Code within a code editor where you can see the files being changed. Also from my initial testing, it seems like this IDE extension also works in all the VS code forks like cursor. After installing VS Code, simply go to open folder and open a new folder on your machine. You should
[01:34] be presented with something like this. Now there are basically two different ways in which you can use Claude Code. You can either use the CLI tool or you can use the VS Code extension. I will be demonstrating the differences between the two in this video. First, let's start with the extension. In VS Code, go to extensions. So, in the search bar, simply search for Claude Code and then look for this extension and install it. And afterwards, you should see an icon
[02:05] like this, the Claude Code icon. When you click on this, it will open up this Claude code window. And this will give us access to our coding agent. Initially, we will have to sign into our Claude account. To do that, enter front slash and from this list, select login. You can now choose your billing type. Either you can sign in with your existing Claude code subscription and do take note you need one of the paid plans to continue. Alternatively, if you just want to go with a pay as you go plan,
[02:36] you can select anthropic console. You will then have to provide an API key and it will be built for your usage. I honestly think the cheapest solution here is to go with your cloth subscription. Simply click on this subscription option. You will then be asked to open this URL. Then click on authorize and we can now close this window. And you should now be able to use claude code. So let's just say hey. And if everything was set up correctly, you should receive a response. Cool. But
[03:08] let's also have a look at setting up the Claude Code CLI tool. In your code editor, go to the menu terminal and click on new terminal. For a shortcut, you can also click on this toggle panel button or click on control and tilda on your keyboard. In order to install claude code, in order to install claude code, all you have to do is run the following command. npm install-genthropic-i/cloud code and press enter. And by the way, if
[03:40] you ever wanted to manually update cla code, all you have to do is run that same command with at latest. But usually this is not required as claude code will automatically update itself. In order to start cla code, all you have to do is run the command claude. And now we can use claude code in the terminal. This might seem similar to the extension, but the CLI version actually includes a lot more commands and features. Now, as a little side note, if you are using Windows, there's actually two different
[04:10] ways to run Claude code. And contrary to popular belief, you do not have to use WSL to run Claude. I just ran Claude code on my machine without the need for WSL. But I feel that I do have to mention that I actually get more functionality out of Claude code in WSL, specifically on checkpointing. And I will show you the difference later on in this video. But just know you don't have to use WSL. But to be quite honest, it's not that hard to set up. You can simply use chat GPT to walk you through the
[04:42] process of installing Ubuntu and running through all of these WSL steps. Afterwards, you will see WSL listed as an option in your terminal window. And of course, all you have to do there is run the installation command. And you can start Claude Code by running the command claude. And now we can authorize this folder. And there we go. Now we can use claude code in WSL. So irrespective of which installation method you followed, you're now ready to use claude
[05:12] code. All right. So let's go over the basics of using claw code. In the IDE, you can change the different modes by holding shift and pressing tab. You can see we now switch to accept edits on, which means claw code will make changes to the project without asking our permission to do so. When we press shift and tab again, we go into planning mode. And in this mode, Claude Code won't make any changes to your project. This is perfect for just having a conversation about the solution you're trying to implement or maybe asking questions
[05:43] about the code base. When we press this again, we have no mode set. And in this mode, cloud code will ask our permission basically for everything it's trying to do. Now I do want to mention that cloud code will still ask our permission if it needs to run certain commands or access the network. If you want claw code to run without ever asking your permission to do so, we can simply exit out of claw code. Then we can run claude dash dash dangerously skip permissions. When we
[06:15] run this, we're now in the special mode called bypass permissions mode. Cloud code will now run without ever asking your permission to do so. On the topic of modes, by default, cloud code is not in thinking mode. If we want to enable reasoning, we can do so by pressing tab. And this will switch thinking to on. If we press tab again, thinking will be switched off. So for very simple tasks, you can just disable thinking and get a way faster response and use fewer
[06:46] tokens. Now let's have a look at using the extension. Currently we are on ask before edits mode. We can change the mode by pressing shift and tab. So that will switch to edit automatically planning mode and ask before making any edits. In this mode, we don't have a yolo mode. So the agent will still ask for permission to execute certain commands. But in this mode, it will make changes to your codebase without asking your permission. Unlike the CLI, you don't have an option to toggle thinking
[07:16] mode, but you can force thinking simply by adding something like think hard at the end of your prompt. We can include images in our prompts in both the extension and the CLI tool. To demonstrate this, I added this image to the project folder. So, we can add this image to the chat in a few different ways. For the IDE, it seems like we actually can't drag and drop it into the chat. Maybe this is different on Mac, but on Windows that doesn't seem to work. We can reference the file by
[07:46] typing at and selecting that image. We can reference any other files in the project using the add symbol. Then we can ask, please describe the image and we get this correct description back. What you can also do is grab a screenshot. So let's grab all of this and control paste it into the chat window. And of course, you can ask a question about this image. In the CLI tool, we can actually drag and drop this image and hold shift and let go of the
[08:19] mouse button. That will add the image to the chat window. Alternatively, we can also reference the image using this add sign and we can simply select our image. Or of course, we can grab a screenshot, copy it, and then press alt and v to paste in the image. In order to go to a previous conversation in the extension, you simply click on this dropdown and here you can see all your previous conversations in the CLI tool. What you need to do is press front slash and go
[08:52] to the command resume. When you press enter, you will see your conversation history and jump back to any conversation. An important concept in cloud code is memories. This is how you can give the agent context about your project and text stack as well as very specific instructions it needs to follow in the CLI to add any memories. We can type the hash sign and now we can add any memory like refer to me as Leon. Now we can select user or project memory.
[09:24] User memory spans all of your projects. And if we want this memory or rule to be specific to this project only, then we can select project memory. This will create this cloth.md file. And if we look at the contents of that file, it simply says refer to me as Leon. So now when we start a new conversation, all of these rules will be pulled into this context. So let's say hey, how are you doing? And look at that. Now the agent is greeting me by my name. And of
[09:56] course, this does work in the extension as well. You just can't add any memories using the extension. So if I type hash, nothing actually happens. But if we say, hey, what's up? The extension is also referring to me by my name. This file is extremely valuable. This is really how you'll guide your agents behavior, its tone, and understanding of the underlying project. Now, let's make changes to an existing project. But before we do that, I do want to show you
[10:26] that you can view your usage of cloud code in a few ways. In the CLI, you can type the command slashcost and if you were using the API, it will show you the actual cost of the session. But since we have a subscription, our usage is included. But we do have limited usage which resets every 5 hours. So to view our usage on our subscription, we can go to the Claude website, click on our profile, go to
[10:56] settings, click on usage, and here we can see that so far we only used about 5% of our plan. And this will reset in about an hour and 15 minutes. Right, let's set up a basic project. I'm going to open up a new terminal and run npx create next app at latest and period. This will simply create a boilerplate Nex.js project. Right now that Nex.js has been installed, we can see if everything is working by running the command npm rundev. Then we can go to
[11:29] localhostport 3000. And that gives us the standard Nex.js template. So let's say we wanted to ensure that our application is using shad CN components. We could enter a command like please review the homepage to ensure it is using shad CN components. I'm just going to switch to plan mode because I don't want to make any changes. I just want to do a review. Let's send this prompt. Okay, the agent is now checking the homepage for us. And finally, we get the final result saying if we scroll up, it
[12:02] says this homepage is not using shadian components. And this is what we found. All right. So, I'm actually just going to exit out of this. So, let's say I add more pages to my website. And at some point I want to run that review again. Now I might want to use that exact same prompt again. So what I can do is press CtrlR and this takes us into search prompt mode. Now we can enter a search term like shad CN. And there we can see
[12:32] a preview of that prompt that we used previously. If I press enter, we will immediately execute this command. But of course I don't want to review the homepage every time. So all I have to do is press tab and now I can make edits. So maybe I wanted to review the contact us page as an example. So searching prompts can be very useful. But if you are planning to reuse a prompt in your project, then there's actually a better way than searching for it. What we can do is create custom commands. In the
[13:04] root of your project, create a new folder and call it dot claude. Then create a folder underneath that called commands. And now let's create a new file for our shad cn review prompt. I'll just call it shad cn d-review. Md. First let's add a description for this command. So add three dashes followed by the word description and colon. Now we can enter anything we want like checks any page for shad cn
[13:35] components. Then let's add a goal section. And in here we can say check if a page contains shout cen components. We can also pass arguments into these commands. For instance, the page name should be dynamic. So all we have to do if we want to pass custom arguments is add a section like user input with this very special value that contains a dollar sign arguments. So any dynamic
[14:06] arguments passed by the user will be injected into this placeholder. Cool. Let's save this file and then back in claw code. And I think we actually have to exit out of claw code for this to be picked up. So let's start cla code again. And now when we press front slash we can see our custom command now shows up along with the description that we gave it. So I'm just going to press tab to add the command to the prompt window. And now we can reference any page we want. So we can just press at and let's
[14:38] search for our homepage which is this file over here. And all we have to do then is press enter. And of course we can use all of these custom commands in the extension as well. So in the extension simply type front slash and we can search for our custom command. We can tag any file we want and this will work as well. Another really cool feature is the ability to create checkpoints. This allows us to rewind all of the changes back to a previous message. So, let's say something like
[15:11] change the background to purple. Let's run this. And in a second, our web page will change from black to purple like this. And this is really an eyes sore. So, what we can do now is of course we can go to version control and painfully try to back everything out. Or alternatively in the CLI and this only works in the CLI tool. We can enter the command rewind. When we run this, we can see this message history. Like on this one,
[15:42] we can see that four lines were changed and four lines were removed. If I press enter on this change, it will ask us what we want to do. Do we want to restore the code and the conversation to that state? Or should we only restore the conversation and leave the code untouched? or do we only want to back up the code? Let's select option one. This will truly take us back to that previous state just before we send this instruction. And if we go back to the website, the background changed back to black. And by the way, you can also
[16:13] press double escape to access the rewind menu as well. Let's have a look at another very cool feature and that is background tasks. Cloud code can run long running processes in the background. things like running the dev server, running bold commands, extracting data, etc. that will free claw code up to continue with other work. So, as an example, let's run something like please run the build command in the background. So, in a minute, you'll actually see a background process being spun up. So, we can now
[16:45] see this background task is actually running. And if we're fast enough, we can actually enter front slash and bashes. And here we can see the bolt command is actually running. And if we press enter, we can see the current state of this process. And in fact, it seems like the bolt command actually failed. Huh, interesting. So what we can do is press escape to go back to our agent. And now we can say, please check why the bolt command failed. And the agent is now retrieving the output from
[17:16] that bash command. So although the job ran in the background, the agent still has access to all of those logs. And yes, you can have multiple background jobs running at the same time. Let me show you. So let's say please run type check, lint check, and the bolt command as background tasks. Okay, cool. Let's send this. And look at that. We now have three background tasks running. So it changed back to two because one of them completed. But of course we can see all the detail around those tasks by going
[17:47] to front slash bashes and we can see this type check job is done. Llinter still seems to be running and build is still running as well. Now finally we can cancel any job we want. So while it's running all we have to do is press K and that will change the status of this process to killed. Now let's move on to one of the coolest features of Claude code and that is sub agents. By default, we're using something called the general agent. This poor agent is
[18:17] kind of the main driver of everything we do, and it's trying to make sense of the project structure, all of the project rules, and the conversation history. Now, if you weren't aware of this, news flash, everything comes down to context windows. The more context you throw into a conversation, the worse the output is going to get. So, it's always a good idea to start new conversations with smaller and focused context. And that is kind of what sub agents do. So, you can create a specialized agent that only
[18:49] focuses on one specific type of task. Your general agent will then simply call the sub agent to implement some change. That sub agent will have its own context window and once it's done with its tasks, it will simply respond to the general agent with a basic summary of its changes keeping the general agents context clean. Well, let's have a look at creating our first sub agent in the CLI tool and we have to use the CLI tool for this. Run the command agents. Here
[19:20] we can see the built-in agents like the general purpose agent that I was referring to. Let's create a new agent and I'll create it at project level and we can manually configure it or get cloud code to generate the system prompt for the agent for us. For this agent, let's do something like this agent is responsible for writing the text or copy of this app in a Shakespearean style. They send this. Then we can select all the tools that it will have access to. I'll just say continue. We can select the model for this agent and we can even
[19:52] pick a specific color. This color will show up during the conversation. Now we can review the prompt and press enter to save this. And now we can see our project agent over here. Cool. Let's actually go back. I'm going to create a new chat. And now let's actually get our Shakespearean agent to change this main page. All right. So to trigger a sub agent, there's basically two ways to do that. the general purpose agent will be intelligent enough to realize that this sub agent is available and hand the task
[20:23] over to that agent or we can also force it by saying get the and we can use the add symbol and we can type agent and in this list we can see all the available sub aents including our Shakespearean copyriter. So I'm going to select this and say to rewrite the text on the homepage. Let's send this. All right. So the main agent is simply going through the project structure and now it's
[20:54] saying it's going to invoke our sub agent. And look at that. Now we can see the sub agent is writing and it's using that blue color that we selected earlier. Now at this stage the sub agent is building out its own context and its own conversation history. And our general purpose agents context is super clean and lean. If we wanted to see what this agent is up to, we can press Ctrl and O and this will show its current process. Or we can press Ctrl and O to hide all of that detail. All right, so
[21:25] our sub agent is done. And now the general purpose agent is continuing. And of course, if we go back to our project, all of our text was indeed changed. And sub aents are just incredible. You can actually build out as many as you want and each sub agent can have a very specific set of tools and instructions to really optimize its behavior. We can also give our agents superpowers by assigning MCP servers. There are many different servers out there, but effectively it's a fantastic way to provide tooling to our agents. For
[21:57] example, Shaden is a really popular component library. It provides all of these out ofthe-box components that we can add to our application. But very few agents or LLMs have upto-date training on what components are available and how to use them. So what the SHAT CM team did was to expose an MCP server that provides all the tools an agent can use to list all the available components and retrieve up-to-ate documentation for installing and using those components.
[22:28] And luckily they also give us instructions for installing MCP servers. So all we have to do is copy this command and then let's run it in the terminal and all this will do is create this mcp.json file, preload it with the shad cn server. Now personally I won't run a command to do this. I'll simply manually create this file and add any MCP servers I need in my project. Either way if you're using Mac or Linux, this should work on Windows. This will only work if
[23:00] you are using WSL. If you're running CL code without WSL, what you have to do is change this from npx to cmd and under arguments add / c and npx. So it looks something like this. So then if we open up claude, you should see this message saying it actually found this mcp server file. So let's select option one and all of these MCP servers should now be
[23:31] loaded. We can check this by typing front slash MCP and here we can see that chat CN server. We can also see context 7 and that's because I added context 7 as an MCP server on my user profile. And by the way, in the IDE, when we press front slash, we can actually go to MCP. And here we can also see all of the attached MCP servers. So let's actually test this out. Let's say, please replace all of the components on the homepage
[24:02] with suitable Shad CN components. Use a chat and MCP server to retrieve all the available components that can be used along with up-to-ate documentation and installation instructions for installing Shad CN and the components. All right, let's run this. And now we can see the agent is asking our permission to run this MCP tools. I'll just select option two and I'll just say yes to all of these prompts. And by the way, you can show and hide to-dos by pressing Ctrl
[24:33] and T. So, this will hide all the to-dos or if I press Ctrl and T again, we can see our to-do list and the agent is currently installing all of the Shaden components that it retrieved from the MCP server. By the way, and cool, the agent is done. And here we have our page using Shad CN components. You can also add MCP servers by running the following command. Claude MCP add followed by the name of the server then dash dash and
[25:04] after these double dashes you will pass in the command which in this case was npx followed by the arguments which in this case was shad cen at latest followed by another argument which was mcp. So when we run this, we get this message saying that this MCP server was added using the standard IO transport. If you ever wanted to use a different type of transport, all you have to do is after add, you can add the transport
[25:35] flag with d-t transport followed by either standard IO, which is the default by the way. So we don't have to specify that. But if we wanted to access SSE, all we have to type is S SSE or HTTP. We can also provide the scope for an MCP server by adding - S after the MCP server name followed by the scope which can either be user which means this MCP server will be available to all of your
[26:05] projects or we can set the scope to project which will create this MCP.json JSON file and add a server to this file. And if we wanted this MCP server to only be available locally, in other words, it won't affect other developers working on this project, we can simply add local. So if I ran this command using the scope of project, it will tell me that this MCP server already exists in this file. Hooks are incredibly powerful. During
[26:36] our conversation with Claude code, certain events are triggered like the start of a new conversation, maybe the end of a tool call, or an event could also be once the agent completes its work and generates the response back to the user. Claude Code allows us to hook into those events to do some custom stuff. One common use case is to play a sound when Claude Code completes its task. I've already created a video showing exactly how to add a sound using hooks. So, in this video, I actually wanted to do something very different.
[27:07] Coding agents can sometimes take a long time to complete its tasks. So, I want to be able to walk away, go baby walk in the garden, do something else, and receive a notification on my phone once Claude code is complete. So, how do we do that? First, let's start Claude. Then, let's add front slash and let's call the hooks command. Here you can see all the available events pre-tool use, after tool use, where notifications are sent, when the user submits a prompt,
[27:38] the start of a session, right before cloud code concludes its response. So what I want to do is on the stop event. So when cloud code actually wraps things up, I want to fire off a message to my phone telling me that cloud code is done. So let's add a stop event and let's add a new hook. And now we can add any shell command to this hook. So to keep this fun and interesting, I created this workflow in N8N. It's a very simple workflow. It's got a web hook so that we can call this workflow from outside of
[28:10] N8N. And all it does is send a telegram message to my Telegram bot. So I'm not going to show you how to set up all the N8N stuff as I've got plenty of videos on N8N as well. But do let me know down in the comments if you would like me to create a detailed video on integrating in it with claw code. Right. So what I'm going to do is simply activate this workflow. Then I'm going to simply grab the production URL. And since I'm absolutely crap at writing shell commands, I'm just going to ask chat GPT
[28:41] to do it for me. Hey, please create a shell command that will use PowerShell to call an NN web hook. This is the web hook URL. Then I'll simply paste in that address and send this. Then I'll simply paste in the command that it generated and let's press enter. I'll just set this to project settings and that created the settings.json file. And in here we can see that this will trigger the stop hook and it will call our N8N endpoint. So in cloud code I'm just
[29:11] going to press escape. Then to make sure everything takes effect, I'm going to say exit. Then let's clear the chat. Let's call Claude again and let's say how are you doing and cool I just received a notification from telegram and claude code is saying hey your recent changes are complete now of course this is a really simple example we can extract all the messages from the conversation as well and pass those to telegram but again I didn't want this video to be too long so please let me
[29:42] know if you would like to see a dedicated video on integrating cla code with telegram so speaking of running claw code in the background. You can even use cloud code while you're asleep. What we can do is integrate cla code into GitHub. I'm actually going to deploy this project to GitHub. So, I'm going to publish this branch. Then, I'm going to sign into GitHub. And after signing in, I'm just going to change this to cla code tutorial. I'll just make this a private repo. And afterwards, we can see our project on
[30:14] GitHub. Then what we can do in cloth code is run the command install GitHub app. So let's run this. Let's press enter to continue. And then going through the setup process, we have to select the repositories that we want to give Claude code access to. So I'll search for my repo claude code tutorial. Then let's save this. And now back in claude code. Let's press enter. And let's press enter again. Let's create a long live token. And afterwards you'll see this page which is actually trying
[30:45] to merge something to the master branch. We can simply go ahead and create this pull request. Then let's click on merge pull request and again confirm merge. And now we can delete this branch. What this means is we can now make changes to our codebase without being behind our IDE or computer. Since GitHub is simply a website, we can access it from anywhere. Then all you have to do is go to issues, create a new issue, and let's say something like let's give it a title like logo change and in the description
[31:17] we can say please change the logo on the homepage to an SVG image representing the Claude code logo. So something like that. Let's click on create. Cool. So we now have this issue and all we have to do is tag at Claude and let's say please make this change. Let's send this and there we go. Claude is actually implementing this change now and Claude Co just created this to-do list so we'll be able to track its progress. By the
[31:48] way, we can also click on view job run to see exactly what Claude is doing behind the scenes. This is such a convenient way to make changes when you're traveling, out and about, or just before you go to bed. It's really cool. Thor just completed all of these changes. So, let's click on create pull request. Then, it's already populated everything for us. So, let's just click on create pull request. Let's go ahead and merge this change. Let's confirm the merge. And now, we can delete this branch. So, this means back in our
[32:20] project, all we have to do is click on this little sync button to pull down all the latest changes. You can also sync the changes from the source control tab by clicking on this button. And our dev server is still running. So, let's view the website. And cool. It wasn't exactly able to recreate the logo, but I think you get the point. It's such a convenient way to make changes in the background. I really hope you enjoyed this video. If I missed anything, please let me know down in the comments. Also, please consider hitting the like button and subscribing to my channel. Check out
[32:52] my other content over here, and I'll see you in the next one. Bye-bye.