Okay then gang, in this lesson we're

going to step away from Codex cloud to

look at the Codex CLI tool which is

still a part of the same Codex product.

It's just another way of working with

Codex. So the Codeex CLI is a coding

agent just like Codex Cloud is but this

time we run it locally on our computer

from the terminal and we can ask it to

make changes to a project locally on our

computer this time instead of remotely

like we would on Codeex Cloud. Now, if

you've ever used Claude Code before,

it's basically Codeex's version of that.

And the good thing about the CLI tool is

that we can just spin it up in any

project locally on our computer to make

code changes within that project. So,

let's try installing this then, and

using it within the same project, but

this time in our local version of the

repo. So, I'm on the Codex docs right

now, which I will leave a link to down

below the video. And down here you can

see that we can install the codec cli

npm or with brew if you're on a Mac. I'm

going to copy this first command then

and in my terminal I will paste in and

then hit enter to install it. Now before

we start using the codec cli I want to

say one thing. This product is quite

obviously still undergoing a lot of

development and changes. So there might

be a couple of things which are

different if you're watching this video

sometime in the future. But on the whole

I think the core functionality should be

roughly the same. Also, support on

Windows directly is considered

experimental at the time of recording

this video as well. It does still work a

lot of the time, and in fact, I'm using

Windows to make some of this course, but

there could be some glitches. In

particular, I've noticed buggy behavior

when it comes to using MCP servers with

codecs on Windows. You can also run

Codex in WSL on Windows 11, which some

people have said gives you a smoother

experience. I've personally not had any

major issues running Codex CLI on

Windows yet, aside from the MCP stuff,

but you should be aware that support is

experimental at this stage. So maybe

only use it on throwaway projects for

now. So then once it's been installed,

we can open a project in a code editor.

I'm using VS Code, but the editor

doesn't really matter because we'll only

be using Codex CLI from within the

terminal, which means you don't even

really need an editor. But I like to

have mine open to see firsthand the code

changes that Codeex is making. So I'll

be using VS Code's integrated terminal

to run Codeex. But again, you could use

a different terminal if you want. The

important part is that you navigate to

the correct working directory to the

root of your project folder within the

terminal. Once you're there, the first

thing we need to do is log to the Codex

CLI, which we can do by running the

command codeex login. When you run that,

it's going to open up a browser and ask

you to authenticate using your chat GPT

account, which I'm currently doing off

screen. But when you've done that, you

should eventually see a little success

message in the terminal which says

you're now logged in. Okay. So next, we

can just run the codeex command to start

a codec session within this project. And

when we do this for the first time in a

folder, Codeex wants to know if it can

work in this folder without asking for

approval or whether we should approve

edits and commands each time. I'm going

to select the first option so I don't

get bombarded as much every time it

wants to make edits to a file or run

commands. All right, so now we can go

ahead and start asking Codeex to do

things for us. Now, you'll see these

different commands at the top of the

session right here, which Codeex is

telling us about. And we're going to

look at those commands in the next

lesson. But for now, let's just ask it a

simple question like, can you give me a

brief summary of this project?

And by the way, you're also going to see

this message right here that says MCP

client for playright failed to start,

program not found. So, you know, like

before when I said that on Windows I've

been having trouble with MCP servers.

Well, this is an example of this because

I tried to get the MCP server playright

to work on Windows and I was having

trouble with that. So, this is not going

to show in your terminal, only in mine.

Don't worry about that for now. Anyway,

now I'm going to kick off this by

pressing enter.

And along the way, you will also have to

allow permission for certain things like

this to run a command.

All right, so now Codex is finished. And

along the way, I did have to give it

permission to run certain commands on

Windows PowerShell. And I think this is

one of the areas that it definitely

feels smoother on a Mac than it does on

Windows because again, it is

experimental on Windows. But it's still

done the job and it's given us a project

overview right here. So it's picked up,

it's a next application using React.

We've got different landing pages, we

have the pair creation routes, we have

client side form logic, we use Tailwind,

etc. And it also picks up on how we test

different things as well. And then

finally, it gives us these next steps.

So it tells us how to run the

application and how to test the

application as well. Okay. So now let's

ask it to work on something for us. But

before we do, I just want to make sure I

move to a new branch so that I'm not

messing up the codebase. So in a new

terminal, I'm going to run git switch

with the C flag to create new branch.

And I'm going to call this refactor

slashbtn

component.

All right. So then we can switch back to

the codec session and we're going to

give it a task to do which is going to

be something like can you make a

reusable button component and use it to

replace the buttons currently on

different pages. It should be able to

accept a bg color and a handler function

as props. So then we can hit enter and

let codeex do its thing. And by the way,

when we work locally with Codex using

the CLI or with the VS Code extension,

which we'll see later, that doesn't

automatically add the task to Codex

cloud. It just works locally within this

project on my computer, right? And

that's why I'm doing this work on a new

branch. Now, as it works on this task,

it is going to ask me to approve some

code changes that it makes as it tries

to make them. And there might be several

different approvals all within this same

task. So, for the sake of this video,

I'm just going to approve all the

changes as they happen. And then at the

end, we're going to look at the

resulting code.

All right, then. So, that took a little

while, but eventually we got there. And

I did have to approve a few things along

the way. So, you can see right here, the

changes have been summarized. It said

it's added a typed reusable button that

accepts a background color, an optional

text color, and click handler while

preserving other button props. We've

wired the new component into the pair

creation form and we've introduced

shared button styling hooks. All right.

So, if we take a look over here as well,

if I close this off, we can see the

components folder and we can see that

new button component inside here. Now,

I'm not going to go through this line by

line. But just in general, yeah, we have

this button function and then the button

template down here. All right, it looks

okay at a glance. We have some changes

in the app folder as well. So the CSS

file, I'm sure, for styling the button.

And then also in this form, we can see

down here hopefully somewhere a new

button component. Let's have a look. If

we go down to the template, can we see

the button anywhere? Should be at the

bottom of the form, I guess. Okay. Yeah.

So, we're using that new button

component right here as well. So, now

let's preview this in the browser.

All right. Now, thinking about this, we

shouldn't actually see any noticeable

differences because I've not asked it to

redesign the button or anything like

that. I've just asked it to extract the

button and put it in its own reusable

component. So, it should look the same.

And it put that in the form. So, if we

scroll down, well, yeah, it looks the

same. And does it still work? Well,

let's try clicking on it. And yeah, we

still get that same feedback. And in

fact, I think it's updated the error

feedback as well. So, it has done

something extra which I didn't ask it to

do, but sometimes AI models do this kind

of thing. Anyway, I'm happy with this.

It all looks good. Okay. So, just very

quickly, I also want to show you how to

manually add context to the CLI tool by

referencing files for it to look at.

Now, by default, Codeex can

automatically scan your codebase and

read all the files. But by manually

adding the file to the context, you're

giving Codeex a big hint about where the

work should be done, and it keeps it

more focused and on track, I think. For

example, if I needed some code changes

and I knew those changes needed to be on

the homepage, then I could add that file

to the context to let CEX know. To do

that, then we could just use the at sign

and start typing the file. And when we

do that, Codex is going to start a fuzzy

search to list all the possible file

paths. And we can just key through these

and hit tab on the one that we want to

add as context. When we do that, we see

that whole path added to the prompt.

Under the hood, the contents of that

file gets added to the prompt as

context. So then I'd just like to write

my prompt as normal, asking codeex to do

something for me in this file. For now,

I'm just going to delete this prompt

because there's something else I want to

show you. And that is how to add images

to context as well. Now, we can do this

by dragging an image file into the

terminal. And when we do that, we'll see

a path to the image right here. So this

image is of the Flutter logo and I want

to ask Codeex to look at this image and

make two new theme colors in the CSS

file based on the blues in this logo. So

I'm going to paste this prompt in which

says can you look at this Flutter logo

image and make two new theme colors in

the global CSS file called blue one and

blue 2 based on the two blue colors in

the image. I'm also going to add the

global CSS file as context to avoid any

confusion by using the at sign again.

And then I'm going to start looking for

that CSS file until I see it down here

in the options. Then I'll key down to

add that file. All right. So now I'm

going to send this request off and see

what happens.

All right. So it says it's done those.

So let's take a look inside source, then

app, and then into globals.css.

And yeah, we can see those two new theme

colors right here. Flutter inspired

blue. So, it's done that successfully.

Okay then, my friends. So, that's the

basics of using the Codex CLI locally in

a project to make code changes. And

again, it's important that you manually

use local branches when any coding agent

like codec starts making those changes

because if not, you're going to find

yourself in a world of mess with your

codebase before you know it. Now,

typically what I'd do now is commit

these changes. If I'm happy with them,

then I'd push this feature branch up to

GitHub where we can review it and then

merge it into main. Not going to do that

on camera because this is not a version

control course and I want to keep the

focus on codeex itself. Anyway, in the

next lesson, we're going to continue

using the CLI tool and explore some of

the built-in commands that we can use

with