Transcription
The way we've always written code just ended. A new way begins today. The recent changes OpenAI has made to Codeex mark a sea change in engineering. A fundamental shift in the way software will get built. By the end, you'll not only understand Codeex, what it is, and how it works, but also how to unlock its potential to scale yourself. This isn't about small efficiency gains. It's about scaling yourself from one developer to many.
Okay, let's talk about this hot take of mine. I really honestly believe that we're about to go through a monumental change in the engineering perspectives. That doesn't mean we're going to get rid of old engineering. Old engineers will be needed, but I think there is a new version of engineering coming and that's not just using agentic coding tools to do the work. It's really well beyond that. It's changing the process. It's changing our relationship with what part of the responsibilities we hold inside of these systems. And I think the changes to Codeex that OpenAI has made really start to shine a light on being able to do this kind of work more holistically.
Let's take a look at the different moving parts very briefly. We're using GitHub as the repository, the place where all the code lives. That's our ground truth. Codeex has lived in ChatGPT for a while now. And so I'll call this maybe cloud Codeex. You might hear me say that or web Codeex or something like that to try to differentiate where you are. There's another one which is kind of the desktop version. We've seen this for a while. Codeex CLI is the local version of Codeex. So this is the local Codeex. We have the cloud Codeex. And then we also have some actions that can run on GitHub. So these are the three major things that they have announced and that they're offering on the desktop. There's also an extension to our editors. If you're using Visual Studio Code or some variant like Cursor, you can get a panel that pulls Codeex out.
But what I want to say before we close on this, if you kind of are understanding that great, I can use Codeex in the cloud, I can use Codeex on my machine and I can use Codeex in GitHub. Just imagining those are essentially the same object. And if we imagine Codeex that we have on our desktop, they're using that same engine in all of these locations. So it's the middle model is very simple to say, oh, there's only Codeex CLI all the way down. It's just Codeex CLI I kick off and view it from the web from ChatGPT or Codeex CLI actions that can do PR reviews and a couple other things on GitHub. Got it. Or Codeex CLI on my desktop where I'm either using this pull out panel that's the extension in VS Code or I drop all the way down to terminal and kind of put those things in directly and watch what it's doing there. So it's the same exact thing across the board. That's the mental shift that I want you to kind of get into because that starts to free you up from having to worry about how these are different because intentionally they're not different.
Okay. So, here's a fun little application. It's a little playground application that I put together for myself and a couple friends of mine. Today, what we're going to actually look at is a couple of the things that it offers. This is the front page. I want to put maybe below the fold down here some popular list. The detail page itself shows a certain amount of information. And I feel like this looks pretty good, but it doesn't feel playful enough. So, I'm going to get the fonts to be changed a little bit. I also feel like back here on the homepage, I kind of feel like this logo should be sparkling a little bit. It should kind of spit off sparkles every now and then just for fun, right? It should be a fun, playful experience. You're looking at video games after all.
So, we're about to take a step over to ChatGPT version of Codeex. And imagine that we're at the bus stop or we're laying in bed going, "Oh, you know, it would be great. Sparkles, of course. Of course I don't I don't know why I didn't think of sparkles. Let's just ask the system to do it while I sleep."
So in ChatGPT as I was mentioning over here on the left panel above Sora and your custom GPTs link and if we jump in directly into Codeex here we go is as we jump into Codeex you have the task that you might put to it. Imagine this in Codeex CLI or any other editor. This is where you're just asking for the change and then you have kind of what repository or what code base you're pointing at. This is that GitHub integration and then what branch. We'll look at branches in a second because they become critically important. So all right in this place we want to make sure that we're going against the correct uh repository essentially. You can go into manage environments. I've already added our game genie environment. So we'll go against game genie and what we will ask for is the sparkles behind on the homepage uh behind the logo at the top. I will push that in as code down here. You can see it creates a new task. Let's move into this task just to take a quick look that you get to watch what's going on inside of this request. Imagine yourself actually inside of Codeex CLI or cloud Codeex or anything else. This is kind of what would be streaming past you.
Okay. And here it is. It's now moving in and kind of taking a look moving around the different files, those kinds of things. And what you see this view log button will allow you to actually look through pretty much everything that it's doing inside of this container all the way up to the point where it was kicking everything off and getting everything started. This really really is the same view that you might expect from working with it locally. You do have just like you do in Codeex CLI on your desktop a a kind of a conversation point here. You can always just feed into it and ask it to adjust a little bit if you need to. So there really still is a semi-inactive in almost the exact same way as you have on your desktop. A semi-interactive point of conversation here very much like maybe they're running Codeex CLI behind the scenes.
Let me set up our other requests at the same time. All right, firing off the next request, which is a pretty big one. Talking about the fonts, I really don't expect this one to work very well, mostly because it's an older application and I don't think there's enough separation about where the body font is and where the title font is. So, we're going to be using three different fonts suddenly across the application. We'll see how well it does.
All right, and the last one I'm going to kick off is the sparkle anywhere. Now, here is the first moment I will say that things get into contention. We have one of these requests already out there trying to do sparkles behind the the logo on the front page. If you recall, this one also needs to do sparkles. And this is the moment when you're doing this kind of engineering that you need to be cautious. I can't say here, go find the sparkles that we're using in the application because that doesn't exist yet. Somebody's cooking on it. That's in some developer lab. It's not really on that GitHub repo that we were talking about. And that's where a little bit of this challenge comes from. Knowing what you can ask for, when you can ask for it when you're building asynchronicity into your development workflow. That really starts to change the way that you can ask for things in what order they can be asked for. So, what I will do here is just ask for a sparkle effect. And later, if I like both of them, I'll get them married together so that they're using the same thing. That's easier than waiting for one to finish and then coming back and using just that sparkle effect here.
Okay. Down here on our computer back to local. Things feel much faster. This loop cycle that we're seeing from what happened in the cloud version of Codeex. We can do the same thing of course here as we're used to. Whatever you might need to do, you can just do it locally. Get the response back. But what's important to describe here? Well, I mean, I did give it a very strange request to explain things to me. Life, the universe, and everything. Okay, so let's ask it to explain the use of the API for games. Okay, whatever.
So down here, what's really important to see is this is the exact same pattern that we're actually seeing in cloud Codeex. It doesn't quite feel like it because you feel a bit more invested. It feels like you're deeper in the loop, but in reality, I have this area where I can type in more information and it will go into a queue and pull that information once it's or request once it's done with the previous request. Very much like I can do basically on Codeex on the web. So it really is basically the same framework that's occurring here that's occurring on the web. There isn't as much difference as you might imagine.
Okay. And pulling up Cursor or Visual Studio Code or something like that. You can go and install the extension here for Codeex. And once you install the Codeex extension, you will get in some way a tab that you can pull out that will be a side panel for Codeex very similar to the panel you're used to seeing. uh for Cursor or something like that. The important factor here is I am now using basically the Codeex CLI that we were just in in terminal. I'm using that here. In fact, I am directly using that. They've created an API mechanism or a transport between this panel and an actual instance of Codeex CLI. That's really the unlock is they're starting to say just to drive this panel, we'll start in a CLI right behind it and we'll just communicate back and forth what's going on.
So if we ask here what how we use the API, we get to see the general exploration that's actually going on inside of Codeex CLI behind the scenes. This is the important button that I wanted to display to you, which is on this left side. You can see it says local. First, let me clear what we just got back and go back to what is ostensibly the chat history. So this is the previous versions of chat that I've had with Codeex CLI, but it's not just local chats. You'll see a few of them here have the little cloud next to them. These were cloud systems or cloud requests that we pushed up previously in ChatGPT if you recall. Now, we've just asked how do we use the game API. If we clicked into that, we'd see what we just escaped. But if we look into something like adding the Google fonts for texts, this is what happened inside of that request, which is a pretty large request. As you can see, a bunch of different files had to be updated. These are all the different files. You can come in and see the diffs here. I collapse this. Maybe you can see that there are diffs back here. Um, and you can look through each one of these changes. You can open the files. You can look at the different changes here in this panel. So, it's a really pretty good experience. You can see this button at the bottom that says apply changes and continue locally.
Now, this is a pretty exciting button, but it really means, okay, they've made some changes in the cloud. How do I start looking at those? How do I start interacting with those? This is our first return path to the human in the loop. So, first we need to jump back up to the cloud and take a look at what the output up there in Codeex looks like so that we can better understand what's going on down here.
All right, here we are in Codeex web once again. And what we were just looking at is this job here, add Google Fonts. If I go into it, it will look of course the same if not at least very similar to what we were just looking at uh in the other panel. It's just another representation of the same information of course. And what do we have up here as options? We could continue having conversations here and it could continue working on this change locally if we didn't like what it looked like or we wanted to go further. This is just like Codeex CLI of course that's what we've been pushing in on is this is the same thing and I can continue if I like. I can also create a PR up in this top corner. We'll talk about that in really just a moment so that you better understand this pattern because I believe this is our future actual pattern. So we're going to do two things. We're going to look at one of these jobs as a PR and another of these jobs we're going to pull the files down into the editor that we were just looking at. So I will say the Google fonts that we're looking at is a complex enough one that I'm going to create a PR out of. When I hit create PR, it goes and spins and thinks about it and then tells me click here to view the PR.
Okay. And now it's created a PR and you'll see the link here or the name of the PR that it's created. It's created it under its own name as add Google fonts for text styles. Okay, it's great. It's kind of an understandable PR that I'll be able to see when we go back to GitHub in just a second. So, let's take a look at what it means to create a PR for just a second.
Okay, I think a lot of you have an understanding of GitHub and kind of the Git flow itself. But for those that don't, because this is the new engineering step and I think that this is an opportunity for many people to come into our tent, I wanted to very briefly, if possible, cover the Git flow concept. There's a couple terms here. You're going to have to go look them up. If I don't go deep enough, I just can't cover it all. It would just take too much time. So, basically, we call kind of versions of your software in the Git environment a branch. So, we have a main branch. It's the default name that we use. So, we just typically talk about one being the main branch. And that branch as you make changes will get commits. So as you make a change and you say I want to save these changes. This is a good state. We create a save point if you will. We call those commits in the Git world. So each one of these commits as you move along just keep creating these little dots essentially if you want to think of them as save points on your journey in this branch.
Okay. So that's good. We've gotten to the end of this. We've made all these changes. We can back up at any time and go back to one of those save points and check out all of the files as of that moment. That's the actual of course value. So what happens when another developer comes in and wants to make changes to our application or even better if that main line actually represents production and you don't want to keep making changes to it. You'll see this in a second. You saw those arrows that were kind of pointing upward doing this continuous delivery. I'll talk about that in a second. If your mainline is a representation of production, meaning every time something happens there, it's reflected in production, you don't want to check anything until you're really, really done. But you might still want the save point. Very common pattern. We create a subbranch. And this one is going to be called my change. So I just kind of branched off of main at a given point and said from here I'm going to create my own branch and start making my own changes. So these changes do not disrupt main. Main stays stable. Everybody else can come out and pull out their own branches and also work at at any rate they like with the copy of main from that first dot that they're all being peeled out of.
Okay. And I've now reached a point where I've checked in all of the code that I'm happy with. It feels like I'm at the right place. But I need to get this back onto main because I feel like it's passed the test. What I end up doing is creating this thing called a pull request. Now you'll hear merge request, pull request. The concept is we're trying to merge our branch back into the main branch. And to do that, GitHub introduced this concept of a pull request. Kind of a workflow to allow other people to review the change to look at it. Once that pull request is approved by yourself or whomever, this branch can be merged back into main. And as you see the moment main gets changed in a continuous delivery environment which is a very common pattern and certainly the future of this kind of technology it automatically will go to production because you've passed all the tests that need to be made before it goes up. So this is a very standard kind of flow.
If we're in this state this starts to clarify I hope for some of you what just happened on the the um ChatGPT interface which is it created a branch out of our changes. So it just peeled out a per a pink line from our blue line and created one dot saying here are some changes.
Okay, back in our project here the request that we had in ChatGPT or Codeex in the cloud. We could certainly put in more requests if we want that would keep updating the files and then we would be able to push or update our PR. So those don't get set in stone once you create a PR. I just wanted to cover that to make sure that you understand it's not a completely final step to say create a PR. You'll be able to update them if needed, but really general practice is once you're done with your changes, you create a PR. In our case, that's where we're going to stop and pretend like that's the end of using cloud, but you could continue.
Okay, so let's view the PR that was created. So, this opens the PR, but what's important to us about this pull request at this moment is I'm not ready to merge this back. I don't want to put this back into the main branch and ship it because nobody's seen it. Now, this is one of those crunchy moments that I was talking about. This whole process, this new engineering process that I'm really saying is the the new thing coming, and I really do believe it's the new thing coming, still has some really crunchy parts. One of those parts is where we get reinvolved. So far, I put off the request. I put off a bunch of them. They finished in the cloud. I go and click some buttons and say, "Yeah, make some PRs out of these things." I might have four PRs sitting over here. And then now what? I can just come and say, "Approve, approve, approve, and just pray that they were done correctly." or I can take a look at them. And so that's the dual flow that we're going to be running here for a second. So what I'm going to say is just remember that we have the add Google fonts for text styles sitting here and we'll pretend like we're going to take a look at that, but that's in a second. Let's first do one that we can pull down direct.
Now we're back into the the Codeex web environment and I want to take a look at this create sparkle effect for logo component. I just want to kind of pull this down and take a look at it. So let's give that a shot. Back down in here in Cursor, we're going to use this panel over here. What we want to do is look for create sparkle effect for logo component. All right, this is the file that we were looking up at in the cloud has those same changes. What do we want to do here? Instead of creating a PR and figuring all of that out, let's just apply the changes and continue locally. I will point out I'm currently on the main branch. If you remember the main branch thing, I'm just sitting on the main branch. Don't have any changes here. And so what I will do is I will pull these into my local environment. All right, changes applied. Okay, so these changes are now in our main. You can see main has been changed. If I come into the panel over here and go to um our source control panel, then you can see the four files that have changed. So this is so far great. Hey, by the way, while we're sitting here, cuz we might not come back, let me point out this graph down here. This looks very much like the graph we were just looking at and learning from. If you don't know anything about Git, then at least maybe you can start to puzzle through, oh, this is why one of these branches off and there's all these changes in some subbranch before it merges back in. Just thought I'd point that out.
Okay, so here we are. We've pulled these in. We got to rush through this. Let's take a look. These have been applied. We now need to go and take a look. And remember, it's just with this logo up here. And if you look very, very, very closely, it does have a little bit of magic to it. I think it's a very cute curious reaction that they've created. So maybe we want to amp that up a little bit. But this was the first pass of what it came out with. Pretty cute.
Okay. So what I want to point out here is we pulled these changes down if you recall. So basically what we said is we put all of our work on the cloud from cloud Codeex. Let it do all the cooking of that first request. Then we came down here and said, "Oh great, let's pull them locally. Now they're in the branch that I was sitting in." So they've just been kind of dropped on top of the branch that I'm sitting in. In this case, it happens to be main. And great, they look pretty good. I'm happy with it. Depending upon your workflow, I'll say maybe get into one of those Git workflows where you're doing subbranching. But if you don't and you just want to work in your main branch all the time, which is very common, especially in earlier projects, then this would be the point that you might go back and say, "Okay, this was good. Let me commit these changes." Those become values that are actually on the main branch. But what happens to this project up in GitHub? No. No. But what happens to this project up in ChatGPT?
Okay. So up here in basically the ChatGPT cloud Codeex that we've been looking at, this project doesn't know that you've pulled those files locally. So you've applied all of these changes to a local environment. But up here, it really doesn't know. So that becomes a management step that you might need to take. If you want to cook things in the cloud and then come back and archive these changes, then that's fine. But here's my test. What I'm going to do is I'm going to ask this for a much bigger effect. Let's give it a shot. If we could let that cook here in the cloud as well. All right, please make the effect much bigger and bolder and more often. Let's let it cook. And now it's off and cooking.
While that's cooking, what I'm going to do down here is I'm going to revert these changes so that whatever we just applied is no longer within this new main environment that we're sitting in. We want this to be cleared up. And that way later we can pull them all down again. But this is just basically me saying, "Okay, clean up. I don't want those right now." Not a bad process. Now everything's back in the cloud as the the the source of truth. So we don't have to worry about this one anymore. I want to take a look at one of the ones that we've created the PR for. If you recall, we created a PR here. So, we added add Google fonts for text styles. I want to go into this branch basically or what we call check out this branch. So, now I'm sitting inside of this branch. I will restart my server. Well, even better process. I should probably install anything that it came with new and then restart my server. And then let's go take a look at what it looks like. And we no longer have magic, of course.
Let's take a look at one of our games. Oh, this is fantastic, by the way. So, I added a title font, if you recall, a body font. So, this is a creative body font. It's not the standard body font. And I also added a voice font. I thought this one might really get it. Let's see what it does. Oh, come on. Codeex boy, you guys are crazy good. I mean, I literally cannot say enough about this. This floored me. Okay. So, okay. Give me a second. Okay. All right. This legit staggered me a little bit. This is a relatively complex change that I asked for. I literally had no hope that it would work. I thought I would have some errors here that we might be able to run the PR review on, frankly. But this is kind of fantastic.
So, now let's try the very last thing that there is to try out with all of this Codeex workout stuff. Let's take a look at using the Codeex kind of PR reviewer. Now that we have a PR, right, this is the nice moment. We can come down here now and say what I want to do is Codeex review this and I hit commit or comment and I've asked Codeex which is one of these things that's been added since I connected ChatGPT to this repository. It now knows this at Codeex basically bot and that Codeex will come back and take a look at this and say okay it's taking a look at it it's running its review. So let's let that run its review.
Okay our sparkle dude says he's done. What I'm going to do is I'm going to come back and say let's move back to main and I can come to the logo sparkle effect as we did before. And since we're not sure if it got it right, what we're going to do with this one is just once again we'll pull down the files, apply them locally and take a look and see how the sparkle effect looks. All right, we know this path. We're going to apply them. We come back and well, we definitely have a bigger, stronger effect. Can't say I'm in love with it, but it is the effect. I think I might have to work with it a little bit more before I say this one's ready to be done.
All right. And to completely square this circle or circle this square or whatever we might be doing with squares and circles, uh, we come back and we look at the review that Codeex did, it came back and it says, "Didn't find any ma major issues." So, this thing's just saying, "Yep, this font work that you did, it's all good to go." And I'm going to pretend that's a good enough review for me. I will just merge this pull request, confirm, push it in. At the end of this, it says I can delete this branch. I will do that to keep my environment nice and clean. And what we end up with is all those changes are actually back on the main branch. So if we pull these new changes that just came in now main has been updated. No, not you. Yeah. And we come to a game, we should have our new fonts. So now this is in main and it'll be shipped out to both Vercel and Netlify as you saw and other places that this thing is hosted. So, this is just kind of that full circle of how you might work with all of the different moving parts.
Okay, so that was a lot. I get it. That's a lot. I really wanted to show you the full life cycle of how you might work in this disconnected way. The thing that I didn't cover specifically, but I hope you can start to see is where we split off four requests at once. That's the moment you get to scale you. Right now, you might be using some of these agentic frameworks to help you write code and you're much much faster at writing code, but you're still kind of in that loop. It's kind of a human included loop. That makes you a bottleneck. What we need to be able to do is create a lot of those at the same time. So, if we can create 10 changes at the same time and you only get involved at the end, like we just saw, I was never going to do all of these ideas and I did them over lunch. So, this is a really neat way of saying I can fire off all these requests. They just sit there until I can bring them down, take a look at them, approve them, move them through the other traditional flows. Those traditional flows need some work. They work, but they're a little bit crunchy to deal with. Find one that you're comfortable with that you kind of like. I advise going into subbranches if you can. It really will save you one day that you're very happy that you're doing things on subbranches. Um, but if not, put things into main. Just make sure you're running really good tests. Find a path that you like to work and use these tools to really expand what you can do. Immediately you can be 10 engineers. And that's really what's going on here is amazingly for the first time they've tied all the tooling together in a way that's elegant enough to say any one of us immediately can become 10 engineers. We've heard the promise. This is really the very first step in that direction and it's available to you for $20 a month. Come on.
All right, well, I hope you like this. I know this was a little bit long and I probably had to jump a bunch of things together. I apologize about that. Um, but I wanted to show you as much of this full life cycle as I possibly could. If you like this kind of content, your subscriptions, believe me, really, really help this channel explode. Y'all have really been showing me some love lately, and I do appreciate it. I wanted to say that. So, thanks for coming along the ride on this one, and I'll see you in the next.