00:00All right, so to get started, first thing first, we're going to install claw code onto our local machine

00:02So we're going to copy this command here for our npm

00:06Make sure to have NodeJS 18 and above installed

00:08And here we're just going to run this on our terminal

00:10So once we have this installed, we're just going to navigate to our project and start using cloud from there

00:15Okay, so back to terminal

00:17Now we can just type in cloud since I have already CD into a project

00:21And here I can set up our terminal style for the text

00:22And I'm just going to stick with the dark mode for simplicity

00:26And then here we are prompted to select a login method

00:27So, I'm just going to choose the clock code account with the subscription, which is only 20 bucks per month for the pro plan

00:34So, I'm going to use that for this demonstration

00:36Once we authenticate oursel, then we can start to set up our terminal setups

00:40So, here we're just going to say yes for the use recommended settings for claw code

00:43Now, we can be able to grant access for claw code to read files inside of this folder

00:47So, we're going to say yes to proceed

00:48And now, we can see that we can start to use claw code officially in our terminal for this project

00:54Now, we can also use claw code inside of our visual studio code with cursor

00:57So here inside of my Visual Studio Code, I'm just going to open a terminal

01:01And here I can be able to do claude

01:03And now we can be able to start use cloud code inside of our VS code here

01:07And to get started, first thing first, we're going to press enter to continue

01:09And then because this is a new codebase, we also need to use claw to initialize this project

01:13So in this case, we're going to use the /nit command

01:16And this will basically initialize the codebase by having claw to read through every files inside of our project

01:21So let's try to initialize our project using this command

01:26And what's really cool about this is that it start to list out the tasks that they're going to do

01:29First thing first, it's going to explore the project structure, the readme file, analyze the main applications, architecture, and then it start to create the claw.md file

01:38All right

01:38So now you can see that has made some progress for this to-do list

01:41And right now it's asking us permission to edit our claw.md

01:42And in that case, I'm just going to say yes

01:47Okay

01:47So now you can see that we have our cloud

01:48MD file generated

01:48And pretty much every time when we open a new chat session with clock code, it uses this file as kind of like a system message or the instructions or memory about this codebase

01:58You can see that these are some core important things about our codebase

02:01So our accentual commands, our database, our architecture, our text stacks, also things about our database schema, our authentication, app structure, state management

02:10Uh there's a lot of details going on here

02:12It's a full stack application

02:14It pretty much lists out everything that AI needs to know about this project

02:18So pretty much whenever we start a new conversation, it will feed this MD file into the large language model to be able to have context about what this project is about

02:27All right, so now let's start using claw code inside of our terminal

02:31So the first command we're going to use is /mod, which we can be able to view which AI model we're using for our clock code

02:36And here you can see I only using the sonet 4 because I am using the pro plan

02:40But if you're using the max plan or different plans, you can actually change different models here

02:43All right, so the next basic thing we're going to talk about is the files referencing

02:46So how do we reference file inside of our claw code? So what I can do here if let's say if I want to reference the readme file I can just drag it here and it will basically just paste the file path to the chat

02:56So we can be able to reference this file inside of claw code

03:00And if we don't want to do this we can also do the other way where we can be able to do at and we can also use at symbol here to reference files much more easier

03:06For example, I can also reference a file for source and I can also reference file inside of that directory as well

03:11for example, slash lip folder/s schema and I can be able to reference different files here

03:16But then you might be asking, what if I take a screenshot for something and I want to use that image inside of a cloud code

03:22So if I were to take a picture of this thing right here and I can just drag it here and you can see it basically paste the path for the screenshot and I can ask what is this? And then here I'm just going to grant access to let it read this file and then it's going to read the screenshot and tell you exactly what this is

03:38And it also works if you copy an image

03:40So if I were to copy this image in my clipboard and instead of using commandV on Mac, I'm just going to use controlV and this will basically paste the image from my clipboard onto this chat input

03:49So here I'm just going to say what this is and here I'm going to ask claude and you can see that claw gives you the answer which is the clot logo

03:57Now you can also select the code use that as a context when you interact with claw code

04:00So for example, if I were to select this line right here and I want claw code to explain what this command does

04:05Now here you can see I have one line selected

04:07So I'm just going to ask what does this mean in package.json and claw code knows exactly what we select

04:15And here you can see it give us an explanation on what each of those commands does for the code that we select

04:19Now to access clock code of course we can actually do this in a terminal

04:22But the other way we can do this which is using command escape

04:24So if we were to do this it will automatically start a clock hole session inside of our code editor

04:29And now without having us to type in claude it will basically start our clock ho session inside of our editor

04:35So all we have to do just use a shortcut which is the command escape or we can click on this icon here for claude and this will basically start multiple claw code sessions inside of our code editor

04:44All right so next thing we're going to talk about which is the custom commands inside of a claw code

04:49So if I were to do slash here you can see that these are all the commands that we can use

04:52But we can actually create our own custom commands here based on our development process

04:57For example, let's say if I want claw code to write unit test for us for react components

05:00Instead of just saving the prompt, reusing that the same prompt every single time, we can actually put that prompt into a MD file and then we can let clock to use that command that we create and be able to instruct it to create that unit test every single time

05:14So for example, I'm just going to first let clock here to create a custom command for us

05:18And this command is going to help us to create our unit test for React components

05:21So here's the basically the prompt

05:25Basically, I want the clock code to create a custom command to create our React component unit tests

05:28And this unit test should be able to cover the happy path, the edge case, the air handlings and etc

05:34So we're going to uh enter this and let cloud code to create the custom commands for us so that we can be able to reuse it inside of our project

05:42So here you can see start to list out the to-dos and first is going to examine the do.cloud/comand structure to see what are the commands that we have and then we're going to analyze the project setup for the testings and the patterns

05:54So it's going to searching for the patterns and reading through the test file that we have inside of our project to see how we write tests, right? And then it's going to searching for the config file for the chest and also looking for the package to see if we have the right package installed on our project

06:08And the last step is basically creating that custom command

06:12So here you can see it has created this and this is basically the title for this command

06:15And now you can see these are the instructions on what are the things that we need to worry about when creating our tests

06:20And then here at the bottom you can see that we also have the arguments

06:22So that's going to be our file reference, our selected code

06:26Anything that we want to write our unit test for, then we're going to pass it here

06:30Right? So that's going to be the argument

06:31So now if we were to save this inside of that folder, we have our command here

06:35So now if I were to select a code, for example, this loading components in our React project

06:39Now what we can do is we can be able to reference this

06:43So if I were to do slash, you can see that we have our command and this is going to be the same title that we put for our uh MD file here

06:52So we can use this command here and reference the file

06:54So that's gonna be the file reference on where that file is located

06:57I want basically want claw here to write this unit test for this component

07:01So if I were to run this, so right now you can see it starts reading this component right here and it start to look for the package.json the just setup

07:07Now it start to create a comprehensive test suite for loading components which is pretty cool

07:10All right

07:12So now you can see that it creates the test and I can drag it here to full screen

07:15All right

07:15So let's try to take a look at this test

07:17So you can see that it first loads up the components, right? It uses the React testing library here to test the uh React components

07:24So here you can see we have our happy path and then there's also some edge cases which is very detailed and there's also component structure test and it also checks for accessibility which is also pretty cool as well

07:34So let me just try to save this and now you can see that it saves the test inside of our test folder

07:38So now what we can do is we can be able to run the test

07:41Now you can see that's what exactly asking us to do is to run the test to verify the changes

07:45So let's run this and see what happens

07:47All right

07:47So now you can see it started to run the test and here you can see if we were to scroll down it started to run into error because it found that the just configuration is not handled for TypeScript and JSX

07:57So it started to create that just doconfiguration file here

08:02And then we can see that once the file is created it started to rerun the test again

08:05And here you can see that it founds another issue which we can see that the just environment jsdom is missing

08:12So it's going to install this package and rerun the test again without having us to do anything

08:16And then here you can see it found another issue for the react handle the white space incorrectly

08:22So it's going to fix it by itself

08:23And now you can see it runs the test again

08:25And here you can see we have all the tests are now passing

08:27And at the bottom here it gives you a summary for each test

08:31And I also have verified this change myself

08:33So if I were to run npm run test in my terminal and you can see that all the test has passed

08:37All right

08:38So the next thing we're going to talk about is multi- aents

08:39So we can have multiple concurrent coding agents running to perform a task

08:43So here you can see I have created another custom command called UI design variations

08:46And if you were to look at this, you can see that it basically try to generate different types of variations for the UI design

08:53So I basically provide a react component

08:56It's going to generate multiple different versions for this component

08:59But most importantly, I tell it to use concurrent task agents to run for parallel generations for all variations here

09:05So we have multiple sub aents concurrently running for a task

09:09So here inside claw code, I'm just going to use this custom command

09:11And here we're just going to use the UI design varations

09:14And here I'm just going to find a component

09:16So back to the project here

09:18I just want to show you quickly that this is a simple dating application where users can be able to find their ideal match through this platform using the match features, the like features, the filter features, and they can also message the people, which is a really simple dating application

09:30And if you're curious on how I built this application, you can check out this video right here where I made a full video on my YouTube channel on how to build a dating app like this

09:39But enough said

09:39Let's take a look at how we can be able to redesign this navbar right here

09:43So back to claw code

09:45We're just going to specify the location

09:47In this case, the component itself is from the navbar

09:48And there is a component called top navbar here

09:51So here I'm just going to reference the file here

09:54And let's run this and see how this going to work

09:56All right

09:56So first it's going to read this file

09:58Then it start to create a to-do list

10:00Then it start to launch the multitask agent concurrently to generate the designs

10:05All right

10:05So now you can see that it has created all five designs and each design has a name

10:08So we have glass, corporate, compact, outline, gradient, which is pretty cool

10:13So here you can see it asks us permissions to write the file

10:17So I'm just going to say yes to this

10:19And then here it's going to write each of those file inside of our navbar folder

10:22So here you can see inside of navbar we have our five nav bars here

10:26Right? So now what we can do is we can be able to change the place where we use the original navbar to the new navbar that we created

10:32So in that case, let me go to top nav here and let's find where it uses this

10:36So it's being used in the layout.tsx

10:38So inside of our layout.tsx, what we can do is we can be able to select the file

10:43So in that case, the topnavglass.tsx

10:47And here I'm just going to change the source from topnav to topnav glass

10:48All right

10:51So now you can see if I were to come back to the web app, this is what it looks like

10:53So we can be able to change to different tabs here, which this is what it looks like

10:56And here, let's try the compact version for this

10:59So if I were to refresh

10:59Okay

10:59So this is the compact version

11:01So let's try with another one, which is the gradient version

11:05So if I were to save this and now you can see this is the gradient version

11:08But basically you can see that we can use sub agents here to run task concurrently inside of our clock code to achieve what we want to build

11:13And by the end of this we could just choose whatever version we like and stick to that

11:17And before moving forward one thing that I always want to stress about is to make sure to use version control to save the versions that you have

11:23Now inside of my kit control you can see that for each versions that it generates I basically commit those changes one by one making sure that I put detail commits for each changes that clock code made

11:33And if I satisfied with the version, I will basically add it on to the branch tree

11:36All right

11:36So now you can see I have commit those changes

11:38And let's moving on to the next one

11:39All right

11:40The last one we're going to talk about in this video is going to be the yolo mode

11:42So whenever we try to execute something, we often get like ask for permissions for editing things

11:47If you want to use the yolo mode instead, which means that it will not ask permissions every time when I try to edit the files

11:54In that case, what we can do is if I were to stop the clock session and I can simply just do claw dangerously skip permissions

11:59And by having this running, it will bypass permission mode so that it will not ask us for approval before committing things

12:05And that's why the last tip that I gave you, which is the doing version control, which is so important because every time when claw code make a change, let's say if it's doing something that's not what it's supposed to do, then we can always revert back to previous working version and be able to continue our claw code session from there

12:19Always to make sure using version control whenever you're dealing with claw code here

12:22So for this part, if you want to use bypass permission mode, you're just going to do yes, accept

12:27And now if I were to ask anything and now you can see that here at the bottom it says bypassing permissions

12:32So every time when I try to ask cl code to do something it's not going to ask us for permissions again

12:38All right

12:38So that's pretty much how we can get started with claw code and some tips that I use for using claw code

12:41So if you found value in this video, please make sure to like this video, consider subscribe for more content like this

12:48But with that being said, I will see you in the next video.