This course is designed to take absolute beginners and transform them into masters of clawed code in just 60 minutes. Taught by a former senior software engineer from Amazon and Microsoft. The material requires no previous technical or developer experience. Throughout the lessons, you will learn the fundamentals of the platform, including how to set up your environment, manage project file structures, and execute autonomous tasks using goals. Additionally, the curriculum covers how to connect remote tools using the model context protocol, integrate version control with GitHub, and successfully deploy your built applications. In this video, I'm going to take you from absolute beginners all the way to masterclaw code in 60 minutes. And the prerequisite for this video is you don't need to be a developer or technical person here to follow along. All you need here is just a laptop that's working and also a claw subscription here to follow on this video. Now, just a quick intro about myself. My name is Eric and I used to work as a senior software engineer working at companies like Amazon and Microsoft. And I have used Clawo here to build my own startup called Booker.ai I where I use it to building my entire applications all the way from developments, marketing, operations, and so much more. Now, before you click away thinking that there's just another Clock tutorials online, well, here's exactly why it's not, here's the things we're going to cover in this video. So, we're going to start talk about exactly how to install CL code onto your local machine. Then, we're going to go over the basics, the fundamental of claw code. Then, we're going to explore things like the file structures, what are the files that claw code generate. We're also going to talk about the claw MD file context slash commands and also git right how we can actually manage our version controls here for our projects and most importantly how can we have clco here to connect it to our MCPS and CLI tools that connected to the applications that we're using day-to-day like Jira Slack and so many more and we're also going to take a look at how to actually have clock here to deploy application that we built in this video and lastly we're also going to cover the FAQ which is the frequent asked questions that I have gathered from different YouTube videos on this topic and also my entire school communities as well as my personal experience on what I wish I knew before I start using claw code. So those are the things we're going to cover and most importantly what are the latest updates from anthropic themselves on how to better using claw code. We're going to package that all together in this video. So those are the things we're going to cover in this video. I'll make sure to put the timestamps in the description below so you can actually check it out. With that being said, if you're interested, let's get into the video. All right. So to get started, first thing first going to talk about is how can we install our claw code onto a local machine before we're going to get into where can we use it. So if you want to get started with claw code here you can see simply just going to Google search the clock documentation and you can see that we have our quick start right here which tells you exactly how you can install claw code onto your local machine. So right here you can see simply just going to click on the native install which is the recommendation and based on your operating system because I'm using the Mac OS operating system here. So I'm just going to copy this command right here and just going to click on copy and open our terminal right. So simply just going to do the command spacebar if you're using Mac and you can see that we have our terminal right here. So simply just going to choose the first one terminal and once we have that open we're just going to paste what we just copied and just going to click on enter. And here you can see it's going to install it onto our local machine. Okay. So once we have our clock code fully installed, the next we're going to worry about is where can we even use it. So the first option we have is use our claw code instead of a desktop app. Simply just going to toggle onto claw code in the desktop app and you can use it right away. But the problem here is that it's less flexible which means that there's not a lot of customizations and you certainly unable to explore all the features that claw code really offers, right? is really really for people who are non-technical here just want to use the basic feature of claw code to get things done. But if you are technical and you want to get more control, explore all the functionality the clock really offers, then there's also the ability here to use the terminal, right? But as we all know, terminal here doesn't give you the best user interface, which is really hard to navigate for some people. So that's why my recommendation is using a IDE which stands for integrated development environment which means that you still have the ability here using terminal instead of claw code in the IDE but you also has the ability here to view and see all the files that has changed inside of a better user interface compared to terminal. So that's why in this video I'm show exactly how you can use cloud code inside of a VS code right or IDE. So in that case let's take a look at how we can install this. Now to install it, simply just going to Google VS Code or Visual Studio Code. And you can see that we're navigated to the download link. Simply just going to click on this link right here. And it's going to download it onto your operating system. So because I'm using Mac OS, so it says that download for Mac OS here. But if you're using Windows, then it's going to says download for Windows. So it's simply just going to download this onto your local machine. And once you download it here, you can see if I were to open it, here is what it looks like. Now, quickly just want to go over what are some shortcuts, what are some customizations that you can do with VS Code. So, for example, if you do like command minus, it will just minimize the code, right? And if you want to do command plus, it will just zoom in a bit more for your current Visual Studio code. And currently, you can see if I want to see all the files here, I can simply just going to click on explore. And you can see that currently we haven't open folder yet. So, what we had to do first is we're going to open our folder. And the reason why we want to open a folder here is because we want to creating our own projects and we want to make sure that all the project stuff, all the files are all kept in a organized folder. So what we're going to do here is I'm going to click on open folder here and simply just going to navigate to my desktop folder here and just going to click on create folder here. We're just going to give a name. Let's just call it Eric Tech folder. Right? It could be your whatever project you're trying to create. You're just going to give a name for that folder and just going to click on create. And then here we're just going to click on open. And now you can see we're open this folder right here. But you can see that on the left we have our explorer which can be to see all the files that we have inside of this current folder. So if I want to create a folder or create a files here inside of this folder I can do to say okay well this is a txt file. This is here you can see that I create a file inside of this folder called hi.txt. And here inside of the txt file I can also type in any text. Save this. Right. Commands S that means it will save the file. And if I were delete this and open it again, you can see that high is still there. And if I want to delete it, simply just going to click on this file and just going to do a command delete. Or you can just rightclick and just click on delete and it's going to delete that file out of that folder that we have. So whatever you're trying to modify here in your file directory is also going to reflect that inside of your current machine as well. Okay. So that's basically the correlation there. And the most important part is how can we use our claw code inside our VS code. So I'm going to get to that very soon. But before we wanted to go further, what I want to talk about now is you might be wondering or see all the videos that I have done on YouTube channel like how can I get this solarized light theme, right? Whatever theme you're using, I'm using a different theme as this. But how can I change different colors or customization for this? So what you can do here is that you can click on this gear icon right here and click on themes. Okay. and just click on color themes right here. Simply you can choose whichever themes you want. So my preference is I like solarized lights. Yours could be different. You can click and play around and see which one you like the most. So I'm just going to click on solarized lights. That's my preference for my VS Code, right? For my visual editor. And you can see that this will basically change that to solarized lights, right? So it doesn't have to stick to the black background if you don't want to. So now what I want to talk about here is how can we start our claw code session inside of our VS code. So right here you can see on the top right there is this icon. So if we were click on this toggle panel icon you can see we have our open our terminal here. So that's exactly how you can open your terminal. Simply just going to click on this icon here. Right? If you want to get the keyboard shortcut that's going to be control back quote and or back tick or if you were to do the control back tick again that will open your terminal right away. Okay. So if you want to uh minimize this, if you want to actually minimize it, you can scroll or in this case minimize that a bit more. Right? So that way if you want to create any files here like for example this is a um let's say this is just a documentation for example I can just type in a docs on the top and the terminal let's say if I were to start claw code and the terminal here is at the bottom. Okay. So that gives you a better visually way for you to see the files and also visually to see the claw code session. So if you want to see the claw code or in this case start your clock code session simply just going to type in claude and this will start your clock code session here. So what you see here is you can see this is your prompt window right this is where you can do the stars input prompts and here you can see this is the model we're using and we're going to talk about how you can get the status bar in a second but you can see that this is basically the place where you can type in any prompts you have. So if I were to say hi for example and what's going to happen here is that it's going to do some thinking and now you can see it says hi Eric how can I help today? So here you can see that's exactly how you can get your response right so you have your input you have your response how long it took how much token has consumed and also what is the percentage of the context window that we have consumed so far so you can see that now we can start to using claw code inside of VS code terminal and we can also to see the files that we have created inside of our current folder that we have so let's try to do a simple example here so I'm just going to say I want you to use the current folder here to creating a simple file called example and just putting some random text inside of that file. So now if I were to give this prompt to claude and what now cla can do that's different compared to just our normal GBT or claude app is that now Claude can be able to creating stuff inside of our current folder. Right? So now you can see we have our example file inside of our current folder called Eric tech folder is called the example. And here you can see we have some random text like I just said uh inside of this example file right here. So now you can see our clock now is able to have access to our folder structure and be able to writing things on our behalf. So what we can do now is if you want to delete the file like I said just going to do uh click on this right or you can just select all of them like just do command all or command a and just do command delete and this will delete both of those files inside of our current directory. Okay. And really quickly, if you want to terminate your current clock session, simply just going to click on this trash icon and it's going to terminate it. Or the other way you can do this is you can just do control C. Right? If you're using Mac, just do control C two times and it's going to terminate it. So now you can see we're back to the current terminal session. Right? Before we're in claw in a terminal, but now we're exit out of claw. And now you can see we're in the current folder of our terminal. So now if I want to clear a terminal, simply just going to do clear. And now you can see our terminal here is fully clean. And if I want to type in clot or start cloud again, simply type in cloud again. And now you can see we're back in a new session. And if you want to resume the previous session that we just have, just type in slashres, right? So make sure to add a slash and type in resume. And you can see it says resume a previous conversation. Simply just going to click on enter this. And now you can see the previous session that was happened 50 seconds ago. You can see this was the instruction that we just gave. Right? So if I want to resume that session, simply just going to click on return or enter. And now you can see we're back in the previous conversation that we just had. So let's say your computer here randomly shut down. Or let's say if you want to resume that session, simply just going to do the same thing. Slash resume back to the previous session that we just had. Okay. So that's pretty much how you can be able to use claw code and how you can start it, how you can terminate it. So the next thing I'm going to take a look at is the permission on how you can be able to use claw code here with different permissions here. So first thing first we're going to do here is I'm going to close this by clicking on the trash and restart a new session. So I'm going to do control back tick and here you can see we're open our terminal and just going to type in claude. And now you can see we're in a brand new claw session. So now what I want to talk about here is basically the permission mode instead of claude. So what you see at the bottom here, you can see we're at the auto mode. So if I were to do shift tab again, you can see we have our menu mode on, we have our accept edits, we have our plan mode, and we're now back to the auto mode. And now if I were to exit out of the clock session and just going to type in claude dangerously skip permission, you can see that we also have additional permission called bypass permissions. So you can see that there's a lot of permission here. And which one do you choose and what are they do? So if we look at this table that I just created here, you can see that these are all the modes that we have in claw code. So first we have our plan mode. Plan mode basically means that it plan things before it does the executions. It doesn't do any edits on your current files or running any scripts. It basically just going to look at all the files we have try to do some planning on exactly what it needs to do before it's going to do it right and you you're the one who is going to approve the plan before it does the executions. For example, let's say if I want to do a complex refactorings or code reviews, plan mode here is really good for that, right? Or let's say if you want to plan things for, hey, I want to build a new application from scratch, then plan mode here is really good for that. And we also have our accepted mode, which you can see here that it now have the ability here to edit things, right? Be able to let's say if you want to create a file or like a program, it can be able to create those things. But let's say if you want to try to run any commands, then it might requires your permission to do so. And instead of a clock session, if I were do shift tab, you can see that we have our except edits, which is right here. Okay, so that's exactly what the accept edits does. And the next one we have is the auto mode. So if I were do the shift tab again, you can see we have our auto mode right here. And what it does here is that it will automatically accept edits for the code. That's exactly what the excepted does. And same for the auto. But you can see that for auto mode here, it can automatically run bash script now. So instead of just asking you constantly every single time can you approve this to run the script then it will automatically have another layer like a safety AI here to review the script that is about to run. If it really requires you to take a look like requires human and loop then it's going to notify you. Okay. So it's kind of like a a AI classifier here that will classify depends on the permission level there. Okay. Then the last thing we have here is the bypass permission which is if I were to do shift tab again you can see we have our bypass permission and what it does here is that yes it has the ability here to autoedit but when it comes to running bash scripts it will just go unrestricted which means that let's say if you're currently running this in a virtual environment or like a test environment then you can just go with this option because there's no sensitive like a really important information on this environment you can just have like a bypass permission mode here to run it then it's going to just run unrestricted. it without having AI here to actually take a look to see if this batch script is safe to run or does it have any side effects. Right? So this is basically different permission modes inside of a cloud code. And what we're going to do now is we're going to use the permission mode for the plan mode and just try to use it to plan out exactly we want to build. So let's try to do it for this current application we're trying to build. Let's say we're trying to build a design system here for the ranking system where we have our S tier, A tier, Btier and so much more. And here you can see at the bottom we have bunch of elements where bunch of whatever it is that you're trying to rank. We want to try to build out like like a ranking system for our application. So in this case I'm going to take a screenshot of it. Okay. So you can see take a screenshot on the right. And we're just going to drag that image right here. Okay. So you can see this the basically the image file path for the image that we just um took a screenshot of. And the other thing you can see here that we're just switch over to the plan mode. And what we're going to do now is we're going to using a skill. So if we do the slash command and just type in goal and what this slash command does in claw code is allows AI here to work autonomously and what that means is before when we have to give it a prompt to claw code claw just give you the regular output but now if we were introducing / goal which means that claw is going to run this in a loop until your requirement here is met right so what it does here behind the scene is after you submit the prompt to claw code and instead of just give you the output after generated what's going to happen here is that it's going to have a evaluator that will evaluate the output based on the initial requirements that you specified. And then what's going to happen is it's going to basically evaluate it and let's say if it doesn't match with the requirements, then it's going to send the feedback back to claw code here to fix it and generate the output again. And then once we have our output here is fully met with the requirements that it evaluates, then we're going to send the result here back to you and then you can be to take a look at it. And this way the accuracy here is much more higher compared to just regular prompt and the output on the other side. So now you know exactly how the slash go works. Let me show you exactly how we can use that inside of a claw code. All right. So now to use this instead of a claw code, the first thing first we're going to do here is to gather all the requirements for the condition. So you can see here that I switch over to plan mode, right? We all did. And the next thing we're going to do here is we're going to have AI here to actually plan things a bit more to gather around what is the requirements that we're going to build for his applications. what is the expectation once we define that then we're going to execute it once we have all the requirements are defined inside of a plan so I'm just going to say hey based on what we have inside of our current application right so you can see I have attached a image of what the application look like right now and I also will give you the link for where I got this application from and what I want you to do here is I want to build a clone version of this where I want you to extract every features that this application have all the image assets all the functionalities I want you to play around with it and then I want you to put that into a plan before we're going to use the /go goal here to execute it in a loop and autonomously until this fully application here is completely cloned. Right? So I want you to take a look at it and come back with a clear plan on exactly how this going to work. Okay. So now you can see I'm just going to wrap up with this prompt and we're just going to also come over to the other application here and I'm going to copy the link paste it over to claude and we're just going to submit this have claw code here to clone this application here. Okay. So now you can see we have sent this over to Claude and now Claude is going to compile a bit more and let's just take a look at what it does at the end. Okay, so back to Clco here. You can see now Clawo has triggered the user question here. So first I'm going to minimize the file explorer and right here you can see the first question that we have is the text stack. So I'm going to zoom out a bit more. You can see it says I have fully reverse engineered the reference app. And so it has basically take a look at it. Here is the static HTML page using some technical terms that you probably never heard of it. That's fine. So here you can see the first question we have asked is what text actually we use to build out this tier list application. So here you can see we have our NestJS react. We have our Facebook vanilla clone and we also have our NestJS sortablejs inside of it. So it doesn't really matter which option you choose. I'm just going to choose the first one here. So we're just going to use NestJS plus React. These are just bunch of front-end framework here that will basically help you to building applications which we will talk a little more about in our channel and also our school community for system designs and what text stack you use for different types of uh system. You can also scroll down here to see exactly what the file structure look like if you choose the second option or third option. So I'm just going to choose the most popular which is the first option for now. And once we're going to choose that option, the next question is the email gate. So it recognized that the application here has the email subscription feature in the back end. So should we keep just the pure client tool or should we also including the email gate. So in this case we're just going to choose the first option here just to skip uh skip the gates just keep it minimal here. The third one here is what content should the top tier uh list use. So in this case we're just going to use the same sets of system designs like we have in the app as well. And then the fourth option here is the fidelity bar. So in this case, should we be able to make it just functional or should we make it like pixel perfect, right? So functional, you can see here, this is exactly the condition um that the AI here is going to loop until it's just going to satisfy the condition, right? But the goal here is that it's not going to be pixel perfect. And the other one here, you can see it's going to be pixel perfect. the it might it must match with exactly like what we have in the screenshots and it must be having the same fonts the same style and the difference here should no longer be greater than the 2% right so that's basically the pixel perfect we're just going to choose that option and just going to submit the answer here and once we submit the answer here you can see claw code here just put together a plan and here let's try to view the plan here so here is the entire plan for system design tierless app self-improving built loop and here you can see this is the entire context text. So currently we're building a drag and drop kind of system here. So this is basically the entire context about what we're trying to build and here is the expectation. So here is the decisions what it just ask right so exactly what we're trying to build. So it also laid out exactly what kind of libraries we're going to use for the drag and drop. The email gate here we're going to skip it. The content here we're going to use exactly like what it mentioned inside of the web applications. And here you can see these are the reference for the uh architectures. And then here is the exact design tokens. So those are like the design system like okay what kind of typography we're going to use the button. Here you can see the plemo here is going to extract that and put into a plan which is much more visual for us to see. And then most importantly, you can see the data model here, the content. So what kinds of data uh structure that's going to be stored inside of our application. So don't need to worry about that if you're not really technical. But you can see that it just builds out like a list with a bunch of object inside of it. And here for each object has ID and color. And then furthermore, you can see that we also have our build plan. So exactly what the file structure look like. So let's say if you're not really satisfied with the plan here, you want to actually, you know, make some modifications. What you can do is you can just using the down arrow here and just going to scroll down to number four and just say things like hey I want to actually make some modifications right based on this I want to actually pull all the images locally first for all those uh system designs icons or those tools I want to pull it locally first before we actually go into dispatch and try to build out this entire application right or spin up the entire loop so you can see that this is the entire prompt I'm just going to submit that and you can see that now claw code here is going to take that feedback that I just gave and creating a new plan based on this. Okay. So now you can see that we have our new plan here is fully generated and let's take a look at the top here. So we have our new plan. Everything are all the same except this time we are going to pull in the latest images first. Right? So if I were to open the sidebar and I go to the public, you can see these are all the SVGs for all the uh images that we have extracted from that platform. So first we extract those images first. then we're going to build this. It's much more accurate. It's much more easier because now AI is won't be able to guess, right? Exactly. Oh, where do I get those elements from? Now we have them inside of our local machine, right? So it's able to pull that. So in this case, I'm going to say yes and bypass permission, which means that now we're going to have AI here to actually start building it. Now the other option you can do here is you can also click on refine with ultra plan. So you're going to have like claw code here to open like a web app and just going to have it to create like a wireframe for you before you're going to go over that. Maybe in another day or another video here I'm going to go over that option. But for now we're just going to go with bypass permission which we're going to have AI here to start building it and start looping it until we have a better result. All right. So once we have our clock here fully finished building, you can see that it has spin up a dev server here which is currently running at this link right here. Now, keep in mind that this link here is only local only. So, if you were to send this link to someone else or a friend, they won't be able to access that. This is only available for your local server. So, if I were to copy that link and just going to navigate to a browser and I'm just going to paste that link right here, you can see that this is what the actual application look like. So, you can see that this is the exact clone version of this and all the application here. I can be able to put that to a tier. I can be able to put that in S tier. And I can be able to put that in a B tier. Whatever tier that I want. I click on reset. I can reset everything. But you can see that this is pretty much everything, right? So all the entire application, all the features simply laid out inside of this web application here. Okay. So you can see it just clone that applications has all the features inside of it, which is really cool. Okay. So now you know exactly how we can use the permission mode instead of claw code and also using the /go. The next thing we're going to take a look at is how we can be using skills inside of a claw code. Now, you probably heard of this claw skills before. And essentially what claw skill does is you can think of it like a workflow or a guide or SOP that teach or instruct claw code on exactly what to do, right? It doesn't matter if it's claw code or any other large range model. It will basically give instructions to claw code or to your large range model on exactly how to do things. And take my personal experience as an example. Here you can see I have a skill called fix ticket skill and essentially what it does is automating the entire bug fix pipeline. So any softwares or any SAS application you build there's going to be bugs right and essentially what we do here for you know any software developer teams is they have a project tracking board where they log all the bugs that they have maybe like a camman board or like a system where they keep track of all the issues. So you can see that these are the steps, nine steps in total. And we package that into a workflow that can actually have AI here to follow. And I have a video here on my channel here talk about this entire workflow right on this channel. But if you want to see the actual video, you can check out this video right here. But essentially what you can do with this workflow here, you can see is first we have AI agent here to read through the ticket calling maybe Jira or maybe like Linear or GitHub or whatever it is where you store the ticket and try to read through exactly what this ticket is about. Then we're going to have our QA which is our playright browser automation here to actually open the browser open that app and see exactly if we can replicate that issue. If we can then it's going to spin up multiple agent here to do research on this entire ticket. Now don't worry about multiple agent here in a second. Just worry about that this is like one of the actual workflow step is to do research on exactly why that bug exists. And then we also have the implementation here to actually do the fix. We have multiple agent spin up here to actually do the review. And then the next step here you can see we have our QA which is using the same playright browser automation here that can actually help us to verify to see if that really fixed it. And eventually here as you can see it's going to commit things onto GitHub which is version control right you can think of it like GitHub is kind of like Google cloud or one drive kind of keeping track of all the version of your application right or in this case store this stuff in your cloud or in this case in the remote. So you can see we're just going to commit this and push it and eventually here we're going to have it to deploy onto a production platform. Maybe it could be Versell, Firebase hosting, Hostinger, whichever platforms you're trying to do for your hosting. Then we're just going to have it to deploy there. And eventually here you can see we're going to have a Jurro here to move that ticket into the QA column where we're going to have a human here to review that process. And you can see that this entire process here is all built using skills, right? Teaching AI here how to read tickets. Teaching AI here using the right tool here in this case playright to actually control in the browser. How to actually do the research, how to do implementations, right? Maybe each step calling its own skills, right? Its own subsklls. And we have a master skill here that package everything all together. And you can see that's exactly how we can do it, right? There's three different four different stages. Understand, fix, ship, hand off to the right person. Here you can see this entire process here is all packaged using a single skill called fix ticket. And the most important part is that you can be able to creating that skill to make it reusable. And as someone can run it, it can be able to repeat that process to follow to understand, fix, ship, hand off. And that repeatable process here can be delegated to a skill which you can think of it like a SOP that AI agent here is going to follow to execute that. Now without getting too deep into the skills here, what I want to talk about in this video specifically is where can we installing skills? How can I use it and where can we be able to find more skills that are already available out there? So here you can see what you're looking at is a repository that anthropic themsel created. It's called front end design skills that was created by anthropic themsel. So what this front end design skill does is it will basically improving whatever application you're currently building or about to build that basically improving its design for the UI. Okay. So you see exactly what the current UI look like right now already. And what I want to do here is I want to throw in the front end design skill which is a front-end SOP that would teach AI agent here to make it less you know give you like a fresh design of this make it less like AI slop right. So, what we're going to do here is we're just going to come over to the skill, right? This is the skill that we're going to install. And let's take a look at how we're going to install the skill onto our current claw projects. And to do so, first thing first going to do here is we're going to navigate back to our claw code. And I'm going to open a new clock terminal here. You can see and just going to type in claw dangerously skip or in this case, just type in claw is fine. And I'm going to switch over to using auto mode here. And I'm going to zoom in a bit more. Here you can see we have our plugins. So if I were to enter this, you can see that currently we're in a discovery. We're can installing any plugins we want. You can see that we have our front end of design plugins, which is exactly the same as this one right here. So what we're going to do here, if you want to select this, we're just going to click on spacebar. But you can see that for this front design skill, right, it's simply just a MD file that teach AI here on exactly how to do it. And if you want to view all the skills that are available like how we can be able to find skills online, simply just going to click on this skills.sh SH where you can see all the skills that are available for any AI agents, right? So if you're using codeex or if you're using openclaw or any other AI agent here, you can use this skills.sh here to view all the skills that are available for AI agents here. Right? So there's tons and tons of skills here. U so if you scroll down here, you can see the second option, the most second popular option here is the front end design skill. And what we're going to do here is we're going to navigate back to our claw code and simply selecting this by using spacebar and click on enter. And here you can see it give you a description on exactly what this skill does. So here you can see we're prompted with a couple option here. Either we can install it for yourself in a user scope which is globally in your local machine or it can install it inside of this current project which means that anyone who forked this project or cloned this project can be able to actually use it or the other way here you can just install it for you inside of this current project only which you can see that there's a couple option we can do here. So I'm going to choose the second option here which will basically install it for all the collaborators uh collaborator here who have cloned this repository. So we're just going to click on enter here to actually install it. So once we have the front end design skill installed, you can see we can just simply just type in /reload plugins to actually apply the changes. Um so in this case I'm just going to copy the reload plugins right here. Paste it. Click on enter. Now you can see we get a refresh or reload the plugins. So now if I type in front end design, you can see we have our front end design skill inside of our code and claw code session. All right. So once we have our claw code front end design skill here is fully installed. The next thing we're going to take a look at is how we can trigger this. So one is we can using natural language here. If I were to say a prompt for example uh you can see if I were to say hey I want to trigger this in using the front end design skill you can say using simple natural language it's going to trigger that skills if I were to enter this. Now the other option you can do this is you can just specify the skill itself like using a slash command using slashfront of design and let's say if I want to hey I want you to renovate this entire application you can see that we're going to trigger the front design skill here for this and basically you can see this is the entire application we're just going to renovate it using our front of design. So if I were to open my landing page for example for the current system design stack you can see that this is the current system design stack that we have right now. So in this case, I'm going to have it to re-rennovate using the front of design skill inside of a claw code. Okay. So first thing first, you can see that it triggers the user question here to ask me some clarification questions for what kind of things we're going to redesign. So here I'm just going to answer those question here and just going to continue forward. Okay. So now you can see we have the front end of design here is fully renovated the entire application. So here you can see the typography is different. the background here. You can see now we're using like I guess like grid or canvas or something. But you can see that we have still the functionality working, right? I can still be able to drag that on onto a specific one, but it has a even better selector, I guess, uh compared to the previous one. And you can see that I can move that over to another one, reset it, no problem. And pretty much it changed pretty much the entire style of the entire application, which is exactly what we try to do, right? just just try to re renovate the entire UI for the entire application. But we can do this with a front end design skill, a skill SOP or instructions that teach claw code exactly how we can actually achieve this. And that's essentially how the skill actually works. And like I said, if you want to install more skills, simply head over to your skills.sh and you can see there's tons and tons of skills for that. So for example, the other skills that I really like is Versail React best practice. So follow this whenever you're trying to build your front-end applications like React or NGS with the best performance optimization rules. Right? So you can see that contains across 70 rules um priority by impact to see how we can building application here with the best practice. So what we can do here is I just copy this link for this web page right here and just come over to claw code and say hey I want you to install this skill right here. And what's going to happen here is that claw code is going to install ining this skill onto your local machine. So the next time when you run it, you simply just type in /verell for something and it's going to start to use it right away. Okay. So now you can see the skill here is fully installed. So it's called the versel react best practice. And if I were scroll down here, you can see this is project is already installed. So if I want to do like a quick reload plugins. So if I were reload this and if I were type in first cell uh react best practice you can see that we have the skill here is showing which basically help you to building application here with the best performance optimizations whenever you're using react or NexJS as the front-end framework. Okay so that's exactly how you can installing skill here play around with it and try to installing skills that you actually really want or actually really needs. Right? anything that you're trying to do. Maybe you're trying to do this for financial purpose or trying to do this for marketing or maybe things like you're trying to building applications, right? There's tons of skills for that, right? So try to play around with this installing one skills. Comment down below what's your favorite skills that you find that's really helpful and why you think that's is really helpful. Make sure to comment down below for this video. Okay, so that's exactly how you can use these skills here inside of your AI agents. Now before we want to move on to the next section, I just want to quickly talk about the file structures that we have in our current folder. So you can see that there's so many folders and files here and you might be wondering okay what do they do and are they really needed? Are they really necessary? So what I want to show you here is basically like how you can identify what is which right so if you look at the MD file files with MD file that's basically documentations if I were to open this this is basically the markdown format of that file right so basically any documentation or written documentation will be stored inside of the MD file those are markdown format and if I want to view this right the reason why we put this markdown format you can see if I were to view this in an MD file this is what it looks like we have our headings we have our uh maybe descriptions bullet points but if We'll open the MD file here. You can see that we have put like a hash front of it. Right now these are markdowns. You can see there's also JSON format. Those are package.json. Those are basically the dependency list. So list of dependencies and commands uh that the application relies on. That's going to be the dependence uh the the package.json package log here really don't need to worry about too much. These are only things that is going to be generated uh every time when we're actually going to install everything that we have in our dependencies. And furthermore, if you want to scroll up here, you can see that we have a couple folders here. So what public folder does is basically all the public assets, right? Any logos, any images will actually belong in the public folder. And here is some rules, additional rules. Here you can see there's the no modules. So what no modules does is every time when you're installing those dependencies from our package.json, those dependencies, it's going to creating all those no module here inside of it. So all the libraries that install it's going to store in here. This is really temporary. That's why you can see instead of the git ignore file, get ignore is basically like things that the version control here is actually going to ignore. We're going to talk about version control here later on in this video. But you can see that for git ignore here, all the dependencies, everything that we're going to ignore from our version control, right, is actually going to be stored here. For example, no module here is one of the dependency we're going to ignore every time we're going to commit it or in this case add it to our versions, our version control. So no module here. You can see just just think of it like a bunch of um libraries that we're not going to use in our application, but it's really just like for all the libraries that we that our application here depends on, it's going to be stored inside of a node module, right? So you don't really need to touch that. It's really really rare for people to actually touch what's inside of no module here. Okay. Uh the the other thing we have here is the library. So library you can think of it like anything that uh we're trying to write like for example like a comment um configuration file or like just like standard kind of like not really components but just like libraries that's going to be used in our applications maybe like creating a rectangle for something like that right maybe like a function that our current application needs uh furthermore there's also the evaluation the eval here is really created by the slash goal here that to evaluate to make sure that our application here is actually meeting the standard for the requirements. So this is also like a really temporary file here uh temporary folder that AI agent here creates which we can actually delete uh after the job is fully complete. And then furthermore you can see there's also our components folder. Now what components does is like everything that you see inside of components is whatever those small component that you see in your application. So if I were to open for example the actual application itself you can see every component that you see right. So anything like for example this card here, this uh icon here, right? This uh you know bottom sidebar here or this button, those are all components, right? We basically breaking down this entire application here into components. For example, the info panel here. If I were to click on one of the thing, you can see this entire info panel. This is a component itself. And we can basically creating those small components and pieces them all all together. It's kind of like Lego pieces. You piece them all together into bigger applications. So this why that's why we have components folder here which contains all those smaller pieces here u those custom components that can be reusable. So if I were to click on a different one you can see we're using the same component here to render a different element here right so those are the components folder here and furthermore to in order to put all the components all the library stuff like the functions all together that's where the application folder comes in so you can see the application folder you can see there's the page.tsx tsx which is rendering the entire homepage and the homepage here is going to render the slashtier list and that's going to be slashtier list right here which is this page right here okay and this is the entire react component here so without going too much deeper into the code basically I'm just showing you exactly like what this folder structure look like after you have AI agent here it's building applications creating bunch of skills maybe trigger like a slashgo here to building something you actually want to understand exactly what what's actually going on in your folder structure right That's exactly what I want to show you right here. Right. And then furthermore, if you want to close all those tabs, simply just going to click on rightclick and click on close all. And pretty much we can close all of them. And that's we're going to take a look at here. You can see there's also some folder here that start with a dot in front of it. And those folders are hidden from the view by default. So your operating system here hide those folder so that your main uh directory here stays clean. So that means that those dot folder here doesn't really do anything with your current application. is mostly for uh hidden or those private folders that your application here might not use it really often. So things like the playright mcpcps or the net folder here though the net here you can see is rel related to the nestjs framework and the playright here is really related to the playright automation testing framework. So those are really private for those tools only and let's say we're currently using claw code you can see that those two folder are related to claw code. So for example what we just talked about here is installing skills right the skill that we just installed is called versel react best practice. So if I were to open claw folder here you can see there's the skills folder and if I were to expand that you can see that we have our versel react best practice and that's exactly the skill that we just installed. So if I were to open this and click on the agents.md file you can see that this will gives you the description of this entire skill. Sorry this the skills.md file will give you the description of this entire skill. So name, descriptions and the entire rules and everything else. So you can see that it actually referenced to this folder called rules folder which contains like 70 rules about you know the best practice for using Versell uh with React for building applications right so those skills are stored inside of the skills folder inside of theclaw folder but notice here that there's also the agents folder and you also notice that there's an arrow that points to it. Whenever there's arrow pointing to somewhere else, that means that this folder here is a reference folder. Which means that this folder here doesn't really belong to the claw folder, this folder here just reference u this versel react best practice somewhere else, right? So if I were to open the um agents folder, you can see that we have another versell react best practice and that's basically the source of truth which means that the versel react best practice skill instead of claw folder is referencing the aagents folders versus react best practice which basically means that everything that we put in the agents folder is going to be universal for all the AI agent frameworks but anything that we put forclaw folder is only specific for claw code only. So for example inside of claw folder there's the settings.json and that setting.json here is the configurations for claw code only but you can see that it's not referencing any other folders that we have. So you can see that this is the universal skills is universal for all the agents but setting here is only specific for a particular AI agent framework here. Okay. So those are the difference here why we have agents folder and the one why we have an claw folder. So the other thing you can see here there's also the agents.md and also the cloud MD that's the same thing why we have MD file that's going to be our system prompts. So you can see that let's say if I were to have a cloud MD here you can see currently it's referencing the at agents.md. Let's say if you want to add a system prompt here specifically for claw code then you're going to add it inside of the claw MD file here. And let's say if you want to make it universal for all the AI agent frameworks, then you're going to add that inside of the AI, sorry, the agents file right here. So you can see that one of the system prompt that I put here is I want you to respond in emojis going forward. And system prompt is different compared to prompts, right? Every time when you send a prompts, it's going to look at the system prompts for AI agents. So whatever your rules that you put here instead of the agents MD or the claw MD, right? If you're using cloud code, then it's going to sync that in your AI agents. So if I were to say hi for example with that system prompt in mind you can see that now AI agent here is only going to respond in emojis going forward and if I want to remove that you're simply just going to remove the text and now AI agent here is going to you know not respond in using emojis right so those are the clear difference here and pretty much what we can do here is that like like I said right if you want to have any system prompt here inside of all the AI agent framework that you're going to use in the future right just put in the agent styd if you have a rule tools that you want to use only available for claw code then just going to put it inside of the claw MD file here. Okay, so that's basically the system prompts right which is the MD file here and we also have went over things like package.json, right? So things like that and also there's some file configuration file that you don't really need to care at the moment right now. There's also different folders we have gone over and also the folder that start with dot. So pretty much those are the file structures that we have and now you know exactly what the structure look like for the folder especially when you're creating applications. Let's take a look at the next part for this video. Okay. So once we have talked about skills, goals and also the permission mode. The next we're going to take a look at is our context. Now what is context? Why is it important and why should we even care? And here you can see if I were to head over back to claw code you can see that below the input box we have our status bar. And you can see that what this status bar does is it will basically give you the percentage of how much token it has consumed out of the entire context window session and also how much token we have consumed so far. Now if you don't have this that's completely fine. I'm going to show you exactly how you can get it. But essentially what you can do here is that if you type in slashcontext right so if you type in like slashcontext in your uh terminal right inside your claw code and just going to enter this it will basically show you a map of your current context usage for your current context window and this number here is basically a clear match of exactly what we have in our status bar. So you can see that we have consumed 19% of the contact window and also 180,000 here for the tokens that has consumed which is roughly around the same for how much token we have consumed here. Right? So it's very very similar here. And furthermore you can also be able to see the estimates for the token usage by categories. Is it because of the system prompts skills memories messages you can see large portion of it is actually coming from the message that we're sending back and forth with claude. And essentially what context window means is basically the total tokens that we can consume in the current context window. In other word is like this current chat histories that we have interacting with claw code the total tokens that we can consume is 1 million. And currently we have consume only 19% of it. So that's exactly what context usage or context window means. And you can see that that's exactly what this stat number here inside of our status bar showing here. Okay. So basically just provisioning or in this case monitoring our current context usage. Okay. So now you know exactly what context window means and you may be wondering okay why do we need to monitor this right? Why do we even need to care? Well here is the problem that we want to introduce is the context one and what it means is the longer that we talk to claw code right the higher the input tokens the lower the performance for the large model. So what you see here for the chart here is the input length for the tokens, right? The higher the token means the higher tokens we have chattered with claw here back and forth or the number of context window here start to go higher, right? Because what you just saw here is like 19%. If it started going up to like 50%, like 80%. You can see that the performance of the accuracy of those model here start to go down, right? You can see that claude Q1 open AI or Gemini whichever model you're using the longer that we're using it for the lower the accuracy that it start go down right and that's the problem of the context rot that we're trying to provision or that we try to monitor. So that's why by having a monitor like this, okay, we're currently at 19% here for the context window. That's good. But once it reached to 50%, we can see that in the status bar down here rather than just every time just typing /context to see the actual usage limits or the usage token, I can be able to see it inside here, right? instead of the status bar every time when we talk to claw code and let's say if it reached to a certain threshold maybe like 50% the good number here is always 50% if it goes above that then we should definitely want to either start a new thread or started running like slash compact here and try to summarize the existing conversation that we have and try to make it lower right so let me show you example here if I were do slash compact here and you can see what the slash command do is free up the context by summarizing the conversation so far but keep in mind that if you were to run /compact, it doesn't just keep everything that we have in this current conversation. It will summarize it, right? And if it were to summarize it, there's going to be some important information here that might get lost along the way. So, if I were do /compact, for example, and you can see that currently has a progress bar here to actually compacting this entire conversation. So, if I were to compact this, notice the actual contacts here is actually going to go lower. So now you can see that if I were to do the compact and here you can see we're now lowered down to 7% for the total contact window. And of course we want to get the full prompts on how I was able to build this entire status bar where you see the context percentage. What you can do here is that I will make sure to put the link of description below where you can get the full prompts simply just going to paste it to claude or claw code and just going to have it to build that for you inside of your clog or terminal. So, like I said, if you want to get the full prompt that I used to build the entire status line, make sure to check it out in a link in the description below so you can actually get it. So, we talked about context, skills, goals, and also permission modes. The next thing we're going to take a look at is our slash commands that we have instead of a claw code. Now, you can think of slash command and claw code are built-in shortcuts or userdefined triggers that can start with a forward slash. So, we just talk about skills. So, that's basically defined triggers that can start with a forward slash, right? Any things like the versel react best practice is a skill or maybe like a fixed ticket workflow that start with a forward slash that's also a skill right but you can also treat that as like a shortcuts like some default shortcuts that actually claw come with so you can see that there's some built-in commands that we can use from claude like for example if you want to clear or reset the current sessions right wipe the current conversation context start from a uh a fresh context in this case we can also do that with /clear so if I want to reset it all we had to do here is I'm just going to type in slash clear and it's going to start a new session here with an empty context. So if I were to do this and now you can see we're back to zero for the context window with a new fresh start of the conversation. Uh what are some other popular commands? So you can see there's also compact. We also talk about that, right? You can summarize the older conversations. So those are shortcuts that clock has built in, right? There's also the MCP. We're going to talk about that later on in this video. There's also model here. You can if you want to switch to most powerful model like the Fable 5 model, you can also do that. So if you do like model here. So currently you can see we're using Opus 4.8 for the model. But if you want to change the model, simply just going to type in /model here. And now you can see we can change the model here to fable sonet 5 uh haiku or whatever model we're using, we can change it here. Uh furthermore, if you want to actually go down, there's also skills and custom commands. We talked about that already. it usually live inside of claw folder or the agents folder that we just went over. Okay, so you can pretty much see that we can be able to use the slash command here to basically use the built-in commands that claw offers or if you want to creating a skill, right? Creating a workflow, reusable workflows that can be defined in markdown or scripts, you can also trigger that as well, right? And the other one that you can do here outside of it is the rewind. So let's say if I want to rewind or reverse back to the uh previous conversation, right? So if I were to do resume again and I'm going to resume this from let's say another conversation for example right resume from summary or resume from full session as it is I'm going to choose the second option so currently you can see we're at 26% for the context window here and now if I want to rewind back to you know this entire conversation this entire conversation here probably has like three or four conversation back and forth right so if I want to do like type in rewind and this will basically restore the code and also the conversation to a previous point. You can see if I were to enter this, this will basically um revert the changes that claw code has done and it's going to revert back to that checkpoint. Okay? And that's how you can be able to revert back to specific parts inside of the conversation here. And the other one that you see here is also the plugins that we just saw, right? The one that we just used. And if you were to type in this, you can also explore all kinds of plugins that we have inside of our discovery. So those plugins are come by default from Enthropic themselves. And we can literally just search them. And if you want to actually learn more about it, you can just click on enter and just try learning more about it. Is it actually really the right one for you? Right? For example, the claw code uh plugins official, right? So it's a toolkit for developing claw codes plugins including several expert skills covering hooks, MCP and so much more. And you can see that these are all the skills that we have installed previously from different projects that I have worked with. So let's say if I want to manage it, for example, let's say if I want to delete the telegram one, I can simply just going to click on enter right here. And you can see we have the option here to uninstall one. Okay, so that's exactly how you can manage your plugins. And the other way you can do this is if you want to uninstall a skill that you have already installed, you can simply just delete that folder. So inside of the agents folder, like I just said, right, we have our skill that was just installed just recently for the Versel React best practice. If I don't want a skill, I can just right click on that folder and just going to click on delete and it's going to delete that entire skill. And then after that, you're just going to restart your claw code and that skill is no longer be there. Okay, that's how you can delete a skill or deleting a plugins here instead of your clock code session. So those are pretty much the most popular SL commands that comes by default from clock code and also we have talked about context skills/goals and permission modes in this video. The next we're going to take a look at is our version controls. Now we talked about briefly of rewind, right? So like how you can rewind the conversations and rewind the changes, but there's got to be a better way to do it, right? There got to be a better way to do your version controls where you can actually to see all the versions that we have for current projects or folders, right? Because let's say if you have mult multiple team members working on in the same projects or let's say if you restart your computer that session might be gone, right? And you actually want to revert back to a specific change that was done last week. Then that's really where version control really comes in. And if you actually want to set up version controls, the simplest and the most cheapest way that you can do this is using GitHub. So you can see here that I have navigated to github.com. It is free. Simply sign up with git and you can be able to actually have accounts and keeping track of all your project here either privately or publicly. Okay. So what you can do here is let's say if I were to take mine for example, right? So here you can see I have a project created called loop maker. Yours could be you know Eric tech folder whichever project you create. You created a repository here inside of GitHub. And you can see once you create a repository you can see let's say if I call it loop maker right whatever project I have and you can see if I were to click on the commit section this is my entire commit tree which is different versions that I have for this entire projects. So for each version here I give it a specific name on exactly what I changed in that version. For example if we were go down this is the oldest version that we have. So the oldest version here is scuffle the entire loop maker repository right and then the second version here you can see is the terminal UX renderer and then the third one you can see it gives a specific name and if I want to click into it to see exactly what change I made I can also see the changes here now how do you see this well the green section here is the things that are being added and the red section which on the left is going to be the things that are going to be deleted right now there's nothing that's deleted so far but if I were to pick a commit here to show you example you can see I should be able to well these are all the changes that are being added but usually if there's going to be a red section on the left that's usually the changes that are deleting well pretty much you can see like this file right here these are the things that are being added this file right here these are the things that are being added right you can also see uh the display the rich difference right so you can see the actual markdown here right so you can see the actual change here inside of the difference uh furthermore if you want to actually creating different branches so the current branch we're in here is main branch But if you want to actually create in different branches, you can also do so. So let's say if you have like the one change that actually consistent in single branch. If you want to you know create a different change like maybe like a beta version or like a version two of that you want to create a different branch you can also do that as well right and you can also committing things on top of it. So the good thing about this is let's say if you tomorrow let's say if I want to you know uh want to revert back to changes that are being worked on maybe like June 18th right if I were to scroll down maybe like there's some changes that were done like uh many weeks ago then I can be able to copy the commit ID pass it to claw code say hey I want to revert back to that specific version of [clears throat] that you know get commits right and simply that's how you can be able to you know control the versions that you have in your current projects now let's try to set it up and show you exactly how you can actually do is. So, currently I don't have any um folder or in this case a repository inside of GitHub for this project yet. But let's say if I want to do create one, I'm just going to open a new terminal here and I'm going to just type in claude uh and I'm going to commit in this case create a repository for this entire folder. So, I'm going to say, hey, I want you to take a look at this entire folder here and I want you to create a repository, a private repository here for this project. Um, and just going to commit the changes here. Okay. So, I'm just going to tell Clawco here to create a repository. And you can think of repository here is kind of like a project, right? Any project that you have, you want to create a project in your version control, that's going to be a repository. So, whatever that we have right now with the current folder, we want to put that inside of a project in GitHub to add that as a version control. So, let's try to take a look to see if it's actually able to do that. So, here you can see it's going to take a look at the current folder first and then try to set up a project. Now, specifically, you can see I put it like a private repository. You can actually change that to public if you want to. For example, inside of my GitHub account, you can see if I were to go to my uh repository here called Loommaker, there's actually this one you can see is public. So, if I were to click on my profile here and just going to go to repository, you can see I can select public for the type for the repositories. And these are public that can be seen by anyone. So, that's exactly what it means when creating a private repository. So basically just creating a repository that's inside of GitHub here that's only seen by me. Okay. So currently it's just running some command here to create a repository. Let's wait for a bit until it fully completes. Okay. So now you can see we have the repository here is fully completed. Right. So what we have committed here you can see uh 133 files here in one initial commits. So the entire NexJS applications the images the playrs for the evaluations and also the documentations. things that we I have exclude here you can see is the existing ignore no modules the NexJS so like I said before right those are the things that are not really relevant for our projects so those dot folders and also no module here are not going to be relevant for every time we're going to you know deal with the project like coding project here usually going to not commit that and you can see that if we were to look at the color for those fog explore you can see these are all grayed out right and the ones that are committed are not grayed out. Okay, so the grade out ones are be part of the get commits. So they will not be committed if there's any changes that are inside of that folder. Okay, so that's exactly what it means. And you can see there's no MV file here or CQ queries exist anywhere in the folder. So nothing sensitive went up. So oneup means basically like added onto the version control tree, right? So nothing are being added into the version control because we don't want to commit any sensitive information in the cloud, right? And one heads up here is that the default branch is master branch. So that's what the git ignit give you uh locally. So you can also be able to you know rename this to main branch whatever it is. But master branch basically means that this is the current branch that we're in and we only have this one branch and that's the source of truth for all the versions that we have. Right? All the versions that we have is stored inside of this master branch. Okay. So if I were to go to my repository here, I'm going to switch over to private now. And now if I were to refresh here, okay, you can see we have a repository called system design tier list. And if I were to click on this, you can see this is all the changes that we have in the current repository here. Okay. So whatever that we have in the current folder is called system design tier list. Okay. And you can see if I scroll down, there's our readme file which contains all the you know project data that we have in our current projects. And furthermore, you can see all the skills that we have created is all committed here. Okay. And if I want to see all the commits, right? Like I said, the uh the so far we have only one commits, which means that we have only one version of our current projects, right? So if I were to see the commits, you can see that was the initial commits that we added. So now let's just say we're going to make some changes, right? So let's say uh if I want to delete this evaluation folder. All right, I'm going to delete this. You can see that inside of our uh source control icon, you can see that there's seven changes that are changed, which means that there's actually seven things that are, you know, uh actually being changed inside of our current folder. So, if I were to open this, you can see that these are things that are being deleted. And what I can do here is I can manually just say, hey, you know, um deleted the eval, which means that this is the commit message that we're going to commit onto this version, this new version of this project. So if I were to stage all the changes, commit it and sync the changes and what happened is that it's going to push that change onto the cloud right onto the GitHub here uh that for this repository. So now if I were to refresh this you can see that we have a [snorts] new commit called deleted eval okay and that delete eval here basically delete the entire eval folder that we just did. Okay and that's the new version here. So now if I were to go to like code, you can see we no longer have that eval folder here in that source of truth version. Okay. So that's exactly how you can add your version control system here inside of your project. And like I said, the benefit of this is providing a complete historical records of all the modifications and also you can have many user here to edit the files simultaneously without overwriting each others. And if you actually want to add in more users, simply just going to go to the repositories that you have. Click on settings here and you can see that there's a section called collaborators working adding more people here inside of this repository where they can be able to commit things onto the same repository. And also you can be able to restore all the changes that happened in the past. Okay, so that's basically the version control here in a nutshell. And just a couple more things that you can see here that inside of the source control for VS Code, there's also the commit tree here inside of here. So let's say if I want to revert this back this change copy the commit ID just pass it to claude say hey I want to revert this change that we did here can you do that right let's say if there's so many changes in your git version controls you can just copy that ID paste it to cla say hey I want to revert back to the change and claw code is going to revert back to change based on whatever commit ID that you specify okay so that's exactly how you can be able to manage your version controls inside of your claw code all right so by now you pretty much have all the basics down for how to use claw code the next thing we're going to take a look at is how people to level uh by having clock over here to take control of the apps or tools that we're currently using day-to-day. For example, let's say you're currently using Jira to manage your project board or let's say you're currently using Universell to deploy your applications or let's say if you're using Stripe to creating products for your e-commerce store or let's say if you're using Facebook, right, to creating Facebook ads or creating Facebook communities, right? How can you actually have Clawo here to take over that, right? To help you to automate those tedious process where you have to click into different steps here to actually get to what you want, right? How can you have clawo here to control those applications that you're already using today? And that's really comes with the tools that claw code here can be able to call and honestly you're already using right now which is GitHub and GitHub is one of the tools that comes by default with claw code that claw code can be able to actually call to commits creating repositories to manage the branch all those kind of things are already come by default. But there's also a lot of tools here that aren't come by default that we can actually install and add it to claw code to actually make claw code here really really powerful and to actually have our AI agent here to connecting those tools is using a protocol called MCP and you can see that MCP stands for model context protocol which stands between the AI agents right our claw code and also our tools right any apps we're currently using day-to-day Facebook Shopify e-commerce or whatever software we're using day-to-day. These are the gateways that connects the AI here with all those tools that we have. And you can think of MCP is kind of like a USB port for your artificial intelligence. Before MCP developer have to write custom code, right? Custom script that can have AI here to call those script like Google Drive, GitHub or local database to actually have AI agent here to give hands to manage those. But now with MCP we can standard this so that the MCB client is our AI applications where you're chatting with like claw code desktop app or your claw code AI agents right and the MCB server is a lightweight program that allow AI here to reading those local files right access your database or searching data on the web or connecting to maybe like Stripe or PayPal or people to connect to Slack or Jira whichever softwares or apps you're using day-to-day you can have AI here to actually use it and that's basically how MCP works. Now MCP isn't just only one tool that have AI agent here to control right you can also have the ability here to control using CLI tool and how we can be able to have AI here to connect it is also the other way to do it and essentially what it does is kind of like a command line where you open your terminal here you type in a text simply you run a program or run a script to interact with a third party software you can also have AI agent here to interact with those apps apps or services through the CLI as well. But the point here is that it doesn't matter if it's MCP or CLI. Those are the tools that we can have AI agent here calling third party applications on our behalf. And believe it or not, apps like Stripe has CLI and they also have MCPs where we can have our log function model here to connect to. And even Google here also has released their CLI where we can have our AI agent here to connect that as well. And if you want to get in more about like how you can actually have your Google workspace to connect it to your large function model, you can check out this video right here. Or let's say if you're using goh high level a lot, you can see that go high level also has their MCP, right? How to use the go high level MCP here and simply just follow documentation and you can connect your MCP with your large model. Or let's say if you're currently using Verscell right for deploying your application and you're scared to running commands in your terminal and you want to have your large model here to do it like deploy your application to Verscell you can also using the Verscell MCP and you can see that Verscell here also has CLI tool which you can also have your large model here to connect your Versell with the terminal right through the CLI tool. So there's actually many ways that you can do this. So in this video I'm going to demonstrate to you how you can actually use the Versell CLI or in this case the MCP to actually connect it to your logic model here to deploy your current application to Verscell. Now first thing first we're going to do here is we're going to sign in with Verscell just creating a new application here and it's actually completely free and you can see that once I have my project for my Verscell you can see currently I already have my existing project in there and what I'm going to do here is because I already have my Versell connected. So what I'm going to do here is I'm going to come over to my project here inside of my VS Code and simply I'm going to clear the current session that we have and I'm just going to ask do you have Versell CLI or MCP in your current system where I can actually deploy the current application onto Verscell. So I'm just going to ask that inside of my current application but if you don't have one simply just going to come over to documentation for connecting Versell to MCP or you can also copy the documentation for Versell CLI link over to claw code. And you might be wondering, okay, what's the difference between CLI or MCP? Which one should you really use? Right now, CLI tool stands for command line interface, right? Let's AI here to actually execute any shell commands in a terminal. MCP provides a standardized secure bridging connections between AI to remote tools and data. So, CLI tools relies on AI generated running terminals in your local environment, which is highly token efficient. So let's say if you want to save tokens that using CLI here is the best option but if you're using MCP that basically have a standardized protocol here exposing tools that are limited to AI agent here to use right so let's say if you want to controlling how many tools the AI agent want to give access you can use MCP but that definitely shines in security here because you have control over what tools to ask uh to give AI agent here to access to and also have the ability here to have a better team environment let's say if you have a bunch of team members here to actually work on it then MCB tool here is the best option because you can actually set the authentication boundaries and the audit trails using MCP server because it's a server by the end of the day that you can keep track of all the requests being made and however though it consumes more tokens be compared to just using the CLI because the tool here for the schemas are constantly loaded into the AI context window and that's exactly why MTP here actually consume more token but if you want to go for like security then MCP is definitely the option if you want to go for token efficiency then token efficiency here is going to be CLI tool. So in terms of which one to use like I said if you're looking for speed or token efficiency CLI is the best option but if you're mostly focusing on like a team environment where you want to build multiple tenant for the AI agents here or managing access control and authentication then definitely using the MCP here is the best option and now if I were to go back to cloud code you can see that yes we do have both the CLI and also the MCP is fully connected in my local machine. Now if you don't have that connected simply just copy that documentation link paste the claw code and let it connect it for you. Once you connected log into your versell then what we're going to do here is just going to say I want you to create a brand new project in my versel account using the CLI tool here to actually uh connect or in this case deploy this application on there. Okay. And in this case I'm going to send this request and let clock here to figure this out. All right with just a few seconds now you can see that we have our applications completely deployed on our cell. So, if I were to copy this link, right, and I'm just going to go over to a browser. Going to paste that link right here. And now you can see we have our system design tier lab here is fully deployed. And it's actually a link that I can actually to use it right away. Okay. And this is everything is usable. I can also resets. Everything looks pretty good. And now if I were to go back to versel for dashboard, you can see that this application here was deployed 15 minutes ago. And you can see this is exactly the uh projects right that was deployed. And if I want to dis this this and if I want to actually unemploy this or in this case like delete this I can click on the settings here and just going to go back right and click on delete project right here or the other way you can do this here is I can just tell claw code say hey I want you to delete this project okay can you delete this project right now and it's going to have the ability here to do so in this case we're going to have claw code here to actually delete this project so that it's not really available to the public so is able to do that so In this case, it's going to remove the versel project that I just created. Let me first confirm exactly what's there. So, I deleted the right thing and nothing else. So, here you can see we're flagging here before I act. Your account here has three projects. Two are already the live properties that I didn't create. So, the book zero and also the lead magnet which is true. And it's going to find the right one here to actually go ahead and delete. And now you can see we have the application here is fully deleted now. And your other two project here is untouched which is good. And now if I were to head over to versel, you can see we only have two projects left here. And now if I were to navigate to the link, you can see it's showing deploy not found. So 404 here. Okay. So now you can see we can have our AI here to have the ability to connect it to any application tools and help us to act on our behalf. Okay. Really powerful here. All right. So that's exactly how you can connect your tools into your claw code. So the last part we're going to go over here is the frequent asked questions that people have with claw code. So the first question we have is what are the skills and MCPs and agents? How are they different? So skills like I said earlier in this video is you could think of it as your SOP, right? Your workflows that you want to repeatably do it every single time when you're using clock code. MTPs is kind of like tools, right? You want to connect it to your tools like Slack or Jira or sales, whatever tools you want to have clock access to to be able to use it. Then that's what MTP is for. agents is specialist agents with specific personalities or specialties that you give AI agent here for. Right? You can create your own AI agent here for. Now, obviously, we haven't gone over AI agent here in this video like sub agents, but basically you can think of sub agent here as kind of like your specific rule, right? Your specific specialties or personalities on how this AI agent here will behave. And what you can do here is that you can use a agent here, right? following a specific skill and the skill here can using or calling different MCPS. Okay, that's the relationship here. So you can think of like agents as the agents that we're going to you know do the executions and each agent here can have his skill has his own skills how many skills that you want to actually trigger and after trigger skill and in the skills you can also have the instruction to say calling this tool right calling this MCPS or calling the CLIs that's exactly the relationships between those three terms and the next question we have is is claw code really for beginners yes that's true is really for beginners that's why we have a video like this to make it really easy for anyone to be able to use claw code installing PS code installing open their terminal here typing clot and start using all the feature that claw code really offers and you will start to see the difference between using the desktop version versus in the terminal because there's so much customizations that you can add in the terminal that clock desktop version here doesn't have. Okay. So if you really want to experience all the functionality that clock really offers then clock terminal here is the way to go. And the third question we have is how does it compare to codeex and gemini? Now in my opinion here they all using different models. If you're using claude then you're using claw code. If you're using codeex then you're using GBT. If you're using Gemini then you're using Gemini CLI or anti-gravities right? But the key difference here is that they're all the frameworks like claw codeex or even uh anti-gravity here. They're all frameworks. The model is actually the engine that really powers those frameworks. But if you're talking about the frameworks here like the these uh claw code is a framework. Codeex is a framework. You can literally use any models right using those frameworks to actually powers it. So those are just frameworks and in terms of framework wise I personally believe that claw code is the best because definitely has a lot more features right compared to things like codecs or anti-gravities things like ultra code or dynamic workflows or even things like building out the entire orchestrations right where there's also a lot of plugins that claw code really offers that other framework doesn't really really have and you've seen so many videos on YouTube where you can be able to run clock over free where you can actually swap claw code right as a framework and just swap the models that cloud code really calling here to maybe things like open routers or things like local models here that you can literally use inside of claw code. So there's so many videos on there um you can actually follow but personally I think that if you're talk about the framework then definitely claw code is the best because it definitely has a lot more framework compared to things like codeex and gemini. Okay, so that's my take on this. And then the fourth one we have is is should we use CLI desktop app or VS code? So there's actually a chapter in my video here talk about you know should we use CLI or should we use desktop app right so if you actually go back to that chapter you can see my take on that and then the fifth question is do we need git or github so if you need version control for your project let's say if you want to roll back for certain versions let's say this is actually a project that you want to maintain and work along term then definitely adding version control here is going to be really beneficial because let's say if we have clock here to actually deleting something that we not supposed to delete Right? And somehow that we don't have a version to roll back. Then having git and github here is going to be really critical. Okay. And it's also free. So you don't really need to pay anything here to actually use it. Uh the other thing we have here is is $20 plan here really enough. Now my honest take for this is that if you're a beginner who are just learning started learning claw code, then that's more than enough. But if you're trying to use this every single day, I'm gonna be upfront with you here that it's not going to be enough because $20 plan here is really easy to actually go out of limits every five hours, okay? And you had to sit there and wait until you're actually going to use it. So my recommendation is this. If you want to stay under this budget and you don't want to upgrade anymore, what you can do here is you can consider using two option here. One is local model if your computer is really strong. The other one here is you can be able to connect your claw code with open router where you can have different model here like deepsek rightse v4 pro here is really cheap but it's also really powerful and you can use those model here as your some substitution for some of the model that you have maybe you want to substitute sonnet here with deepc4 pro and maybe using uh opus here for maybe like uh go or gro whatever model that you find online that's really powerful that's also within a reasonable amount of price that you can actually pay for it. Okay. And what you can do is you can use that, try to combo that and substitute with your $20 pro plan. Okay? That's how you can be able to actually have claw code to stay in your right budget when you're running. Okay? So that's my recommendation. And if you actually want to go even further, what you can do here is that I do have video talk about how you can save your usage with your claw code. Okay? So there's a video right here. You can check it out where I talk about what are the tips uh that you can actually save your usage tokens, right? how it is that actually works. So you can follow that video right here. And moreover, I do have a video coming up very very soon. What are the skills that can help me to actually save tokens whenever using claw code? That video is coming out very very soon. So make sure to subscribe to this channel and I'll make sure to let you know once that video is released. The next question we have is how do you stop losing context? Again, I do have a video in my channel to talk about how you can actually control the usage, right? Let's say if you're always getting like, oh, 100% usage. Well, here's how you can actually solve that. in this video right here. You can check it out. And the last or in this case, the eighth question here, is it safe to run on my machine? Yes. So, in this video, we talk about the permission section. I highly recommend you to rewatch the permission section that we have. And essentially, we talked about there's different five or four different permission mode. Setting the right permission mode here is going to help you to make sure that when clock is going to run, it's going to run safely on your machine. Okay. And the other question we have is, do you need cursor to use it? Right? Do I need cursor to use it? know uh you can use cursor you can use anti-gravity you can use vs code those are all idees okay but you don't need cursor to run claw code you can simply just use vs code for this cursor you can think of it like IDE but has AI functionality built into it what you can do is you can use vs code and using the vs code terminal to start with claw code right so it doesn't have to be using cursor you can use vs code you can use anti-gravity right all the same you know they all of them has terminal all of them can allow you to edit the files. But my preference here for beginners, if you want to start small, starting simple, start a minimal, then VS Code here is the best option for you. Okay. And the other question we have or in this case the last one is won't this all be outdated in a month? So my question, sorry, my answer here for this is no because I made videos on claw code for over more than a year now. Okay, since it was released last year, I started making video on this and the stuff that I teach since then is still valid even though the cloud has dramatically updated right has the opus model here released you know before they only use have the sonic model but now they have opus model they have obus 4.8 eight maybe fable 5 there's so many model has released and there's so many changes in claw code but the foundation stuff is still the same right so even though you learn this video maybe next month maybe next year there's new feature coming out it's still not going to be outdated because there's these things are the fundamentals right you still need to know this before you actually know or try to learn about like altra code or try to learn dynamic workflow building loops right you still need to know the foundation before you actually know those features so that's why this video here. It's so fundamental here. I don't think it's going to be outdated in a month or in a year. Okay, so pretty much those are my answers for my frequently asked questions here that I gather online. Uh if you do find those questions here and answer here helpful, make sure to comment down below. And if you have more question here, make sure to comment down below and I'll make sure to answer that. All right, so that's pretty much it for this video. And if you do found value in this video and you actually want to go even further and master AI agents, automations, building real SAS application that you can actually use and ship, then you can check out in our school community called Eric Tech AI builders. All right, so pretty much that's it for this video. And if you want to get a full video course on how you can actually build a master claw code, I do have a class inside of my school community where you can master that. And most importantly, we do have weekly live calls and also live Q&A here where I can help you to master everything inside of Claw Code, building AI agents, automations, build your SAS products, and actually to sell that at the end. Now, obviously, there's so many things that we haven't gone over for claw code like the ad advanced topics like agents, skills, specific development frameworks or how to run claw code for free and also things like knowledge graph or local AI, claw designs. There's so many things that we haven't gone over yet. So that's why in my next coming video, I'm going to package that into another video here for the intermediate on how you can be able to level up your clock here with different levels.
Generated algorithmically for Search Engine
Indexing.