dgiBc4-LSrM

Let's learn how to use ChatGPT Codex

Watch on YouTube ↗

Transcript

[00:00] chat GBT codeex. Let's find out as fast as possible how we can start leveraging this new tool provided by OpenAI. See if it's any good. Let's go ahead and jump into this video. Welcome back, yo. Let's check out the new Chad GBT codeex here. So, you're going to open up your sidebar, click codeex. This will then open up a page like this. From my understanding right now, it's available on the plus plan and the pro plan. I'm not too sure if it's available on free yet, but let's learn how we can actually connect our GitHub to this. Do a PR together and see if this AI model is actually good at coding. Connect GitHub. As a quick side note, if you want to learn how to start using GitHub within

[00:31] 10 minutes, and I show you as if you have zero knowledge on GitHub as a platform, check out the description down below. I show you everything you need to know fundamentally. We're say continue with GitHub. You're going to make sure you choose your relevant account. I'm going to say authorize CH GBT connector. So, what I'm going to do for now is I'm going to give it access to all my repositories. And as I said before, check out the other video if you want to know what a repo is. But for now, I provide a free repository for an actual backing app. Uh on this channel, if you're not familiar with this channel, I've done a whole series showing you how to build out a front end of an application of AI, but also the backend,

[01:01] which seems to be an underserved market on YouTube. So, we're going to connect this to our actual backend app, which is free code. So, for now, I'll just say all repositories, install and authorize. And the repository I want to create this environment with will be my actual backend app. I'm going to allow the agent to have internet access. I'm going to say on here. So, it looks like as a starter of codeex here, it gives us some potential tasks to do. So, we'll do all three together and see how it approaches it. So we have different things such as coding things for fixing bugs, explaining the codebase as if I was a newcomer and going through the codebase itself. So I'm going to say start task. So this is actually pretty cool. What

[01:33] it'll do is while it does a task for you, it's going to just work in the background. So we can just offshoot multiple tasks. So you might be asking yourself, Corbin, why does codeex have to connect with GitHub? Why isn't it just an AI model that's fine-tuned for coding? The reason is because GitHub is a version management control. It allows us to put the code in the cloud. is very fundamental for software development. And that's why, to be honest with you, that GitHub video that I referenced earlier is doing really well right now when it comes to traffic is because this is just part of the game, right? For you to code with AI, you need to know how to

[02:04] use a cloud deployment like GitHub to store your code in the cloud. Real quick summary, you got branch A. Think of branch A like just a version of your code, your entire repo, all your code, your front end and your backend. But then you create a separate branch that we call branch B. Branch B is an exact duplication of branch A, but then we start making changes to branch B. Do this, do that. And if we ever run into issues of branch B where basically we go down a rabbit hole, it's completely horrible. The code, the app, everything breaks, we can revert back to branch A

[02:35] and be fine. We're starting at V1 again. But if we go down branch B, everything is good. We added a new page, maybe we added a contact page, it works perfectly. Then what we do is we merge to branch A. And now the A branch is updated with the most up-to-date code. I hope that makes sense. So while it does this, let's kind of jump around here. So we have the ability to dictate when using codeex. We have the ability to actually select the branch we want to work in. So right now we'll just work in main. Typical software practice. You want to work in a separate branch. You don't really want to be pushing towards

[03:06] main. But for now, not that big of a deal. Then we have our underlying repository, which is for this cat fe, which is my name, and then actual Beckin app. This translates to you as an individual, whatever your profile name is. So that's coffee fuel bump. I love coffee. And then the repository here, name, which is actual backend app, which has all my code here. Nice code, free code. You can basically grab all this code. Just look me up on GitHub or check out my series here. But this right here was creating a landing page together using AI. So for example, we go to homepage.js. We got all of our relevant

[03:38] code here. What's cool is that when it's running a task, we'll be able to understand what it's doing, such as running a command currently looking through a specific file. But let's check out a finished version of a task. So proposed task for a codebase improvement. I click this. So you'll notice when we click into a task, it'll give us that JGBT UI that we know, but it has a ton of context, right? It has the entire repository in the code associated with that. So it's able to give us very very laser lasered in answers. Can I speak today? I don't know. So for example, it found a potential bug, which is kind of cool. Look at this. We can actually start a task to fix said bug. Obviously, you'd

[04:09] want to confirm whether it is a real bug or not. So we're going to try one of these tasks. Let's go ahead and just see how these other ones finished up. So, we got locate and fix critical bug. I clicked this and it found a critical bug in the way we're naming stuff. So, that was actually referenced in the earlier bug here. But what is really cool here and I'm actually kind of excited. This is actually really cool is that it will automatically see if you want to create a pull request. So, we're going to create a pull request here. See if this works. So, as I described earlier in our situation, we have branch A, branch B. We're now creating a pull request here

[04:41] to confirm whether or not we want to merge to branch A. So, viewpool request. Whoa. Okay. Okay. This is awesome. So, it made the PR. It gives really good notes. I mean, one thing is software, I mean, maybe it's just me, but when you create new branches or you create like little PRs, like you'll write notes down, but look how like look how good these notes look, right? It gave us exactly what it's doing and what's in the PR. If you want to see what's changing in the PR, you can do files changed. So you can just see exactly what's changing in the

[05:12] code. Coming back over here though, I can go ahead and merge this pull request. So if I hit merge pull request, it's going to take this code here and merge it to main. We're taking branch B and we're coming to A. Merge pull request. Confirm merge. And then typically when you do a PR like this, you just hit delete. And if we go back to actual backend app, you'll notice that it has merged that pull request from codeex. I am actually pretty impressed so far, y'all. This is really cool. So what we can do here as well is coming back we can actually push real code merge real code and you'll even get the notification of everything that's

[05:43] associated with this new merge. So as you see here is merged. We can also just like have it do task. So explain codebase structure next steps. This is really good for when you download repos that are public. You can get more context about the repo. For this example since we use a reactbased front end it told me that the source file is react front end app.js JS sets up through react router with protected routing and Google Analytics interjections. This is a very fancy way of saying how we actually render the page to a domain. Eg like /home/c contact. It knows that we

[06:15] use Node.js in the functions as well as Python functions and even goes as far as giving us descriptions of each function. So generate completion takes a user's prompt, calls OpenAI's API, stores the assistant answer and fire store and returns it. Wow, this is this is extremely impressive than what it used to be, y'all. So, now that you see the typical workflow when it comes to task, let's do a task together. What I'm going to do is I'm going to reference a specific file. And by doing that, I'm going to go to the repo just in GitHub. Go to like unoff page here, homepage.js. And to reference this page,

[06:45] I'll just simply copy this line. I'm going to go ahead and say, okay, for this file, provide the homepage. I can say homepage.js or give a path if you want to be more specific. But let's make your life easy. Just copy some code from there. typically the one that's starting at the const up here and you'll be good to go. I want to add a section that is an about me section and have it describe James Smith, the developer behind the site, and you fill in the gaps. Now, there is a choice between code and ask. So, we'll do an ask question for the next one. For now, we're going to hit code. So, while that's actually working on that, let's do a version of this that's an ask question or prompt. So, instead of copying the line like this, so you can copy direct lines of code.

[07:17] You can always just copy the path up here which is useful to know as that gives you a way to directly communicate with codecs for a specific file. So if I come over to our Python functions which is our backend here we go to main.py we have some functions here. I guess you would assume there's going to be functions in a function file but here we have an API request for openi here and what we could do is simply ask a question for this. So I'm going to do is I'm going to copy the path. I'm going say okay for this file how would I change the model used in the open AI

[07:48] call and where did you ask? What's cool here is that we can start generating multiple tasks at once. Just boom boom and boom and get going. And what's really next level is the ability for us to essentially do this with different branches if we want to. So I might make a more in-depth tutorial on Codeex here that's a little bit more complex. Wanted to kind of just give a fast overview of the platform. For now though, let's check out both these outputs. See what we get. So we got our answer for the changing of model. I'm going to click it. And what you'll notice is that it was able to grab the correct line here of chat completion. And the current model that is used in the code is GBT4.

[08:20] So coming over here, scroll down. You'll notice it right here. Line 47. That's the code in the cloud. And then coming over here, it identifies the way we change it is simply changing that line right there. Pretty cool. That's actually pretty useful if you want to know very specific things within a file. And coming over here, it was actually able to create some code here. So add an about me section of the homepage. to click it and we walk through that similar flow of creating a pull request and then merging it. So I was able to give the relevant CSS associated with it and the irrelevant JS about it. Now to be honest with you, okay, no it has an about me right here. Okay, for a second

[08:51] there I thought I only put a link but it actually does have an about me and it was able to get context of James Smith and fill in the gaps for with years of experience building full stack applications and James combines modern JavaScript frameworks of cloud technologies so on and so forth. I will say that I'm actually pretty impressed by this. I will have to do a more in-depth video on this topic. I'll make sure I leave the 10-minute GitHub video in the description down below along with another GitHub video I did that describes more about PRs and how to actually do that functionally within VS Code Winerf. But the same logic could be applied here. Without further ado, make

[09:21] sure to leave a like if you felt like you learned something. Make sure to subscribe here. Those are two random videos. That is my face. That is also my face. I'll see you in the next