📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Codex от ChatGPT, это уже революция написания кода, или еще нет?

Александр, айти-наставник22:05

Transcription

Well, friends, hello everyone. Let's talk about Codex. And while the whole world is talking about Claude and Llama, for some reason I'm talking about Symphony and will be talking to you about Codex. Of course, I will tell you about Code, but for now, let's talk about Codex. I want to tell you about my experience, what I liked, what I didn't like, and whether it can be used at all. So, if we look at the main page, we will see some Codex here, which can be downloaded, that you can work in the terminal, and it is available for some VS Code, Cursor, Warp, but not for the very PHPStorm that I work with. Therefore, my first experience was based on working with the terminal. And it looked like this. We launch Codex in the terminal. And essentially, we have a prompt window available, in which we write what we want to do. We ask it: "Help, write, do, create tests, logic, analyze my project, suggest." In general, everything that we did with ChatGPT, only now it is wrapped in such an agent called Codex. As you can see, in my version, less than 20% of the weekly limit that was available remains. Therefore, I use it quite actively to understand if I need it at all. And right away, I'll say that yes, I need it. Subsequently, I of course moved away from the terminal and tried the desktop app directly. And it's much more interesting. And what is the difference between them? In general, they do the same thing, but the global difference is that the desktop application, of course, shows me a list of projects. I can open it for you, but I will have to blur it, because there is a work project here. But nevertheless, I can switch between projects. Whereas when I open Codex in the terminal, it is tied to this specific project, which is logical in general, but it wasn't entirely obvious and visible that it, it turns out, stores a list of these threads, it stores all this history, and you can switch between them. Yes, and from the terminal after it exits, there is a hint here that you can return to the previous dialogue, call Codex resume and specify the cache of the very previous session. And in principle, this would be equivalent to me returning to the same tab on the desktop version. The problems I most often encountered in the terminal version were that it constantly bothered me with confirmations, whether I wanted it to execute a particular command. And since I often asked it to run tests, to double-check its work, it constantly needed access to execute those very commands, which in the desktop version is solved thanks to this wonderful switch default permission or full access. Although in fact, even in the latest versions of Codex, the terminal version also seems to have been allowed to grant full permissions, but in the terminal, it was very terribly inconvenient to constantly allow it before that. The word in your home folder has a subfolder called .codex, which is by default invisible, and it contains all the basic settings that they project into the desktop version. What was interesting here was that there are default rules, which in fact are all those allowed commands that I asked it to execute. Here you can notice that I allowed it to run docker, and it asked me several times, yes or no. Running some tests with or without coverage. And in fact, nowhere will you find this setting from an interface perspective, not even the desktop one. But I understand that if I write some new command here, it will automatically become allowed. This is, of course, not a great solution, but it's a solution. That is, there is still some provision for permission, for some rules, after all, it is present. Yes, it's very inconvenient to use right now, but it exists. The skills folder is empty. I don't quite know what SQLite is. I haven't figured out vendor imports yet. Codex Global State JSON is a list of all those projects and threads that are present in the project. That is, it simply stores them in JSON format. The agent, as you can see, is a file with zero size. Here we can by default write some system instructions that will be applied to all your projects. In short, a basic global instruction. A js JSON file, in which your Open AI key for your account is located. And config is probably the most interesting part, where all the settings are hidden. In the config file, you can see a list of all those projects to which there is access and trusted level, trusted and untrusted. A little lower, you can notice the MCP servers that are connected to this Codex. Yes, they could be added via the terminal, but of course, it's much more convenient to see them, use them, enable/disable and configure them. Exactly through the desktop application. I will also show and tell you about this. Among the MCP services that I have connected servers to is Codex 7. I think everyone has heard about it 10,000 times. This is the replenishment of your knowledge base through a regular rake. This is Figma, this is Notion, this is Playwright. Figma and Notion require no explanation, and Playwright is a plugin that is a server that allows, in general, to enable a Chrome browser instance, and in it it performs some manipulations, looks at something, takes screenshots, analyzes a particular page. That is, it can start a browser for some of its actions. And I also connected two additional MCP services for myself. This is Case Case, God knows how to pronounce it correctly. In general, this is a service where we store test cases in projects. And another interesting patient is Jira. With Jira, I initially wanted to install this repository, this project, which, in general, should have given us full access to Jira. I installed it, I tried to connect it, but, firstly, it has absolutely the wrong environment variables. Secondly, it doesn't work in the correct stdout, error format, so it's unclear where it outputs all the output that the project needs. And in fact, yes, maybe it works for Claude, because it was written somewhere here that MCP product support both Claude data center deployments. That is, nothing is said about Codex here, and by default it doesn't call it. Therefore, as you can see, based on the launch command, the decision was made to write our own MCP server. And in fact, I didn't write it, but Codex itself wrote it. It tried to launch the server that it didn't launch. It figured out the reason why it's not launching. It understood that the credentials are correct and there is access to Jira. It tried to access the necessary information via REST, find some ticket, read the information. And then I tell it: "Buddy, since you have the full picture, maybe you should write your own MCP server?" And it did. Yes, it put it in the folder of my project, where, in general, this server shouldn't be, and I'll move it out of here. But as a fact, that it wrote it and can now use it and it's valid, well, that's really a bomb, a rocket. In general, with the presence of Notion, which has some description from a business analyst, from a system analyst, a description of some feature, the presence of Figma, which has the design, the presence of Jira, which has the task described additionally, the presence of test cases, all this Codex turns into an excellent programmer replacement machine, because it has all the knowledge base that it can manage and solve tickets, and it solves them. I would like to tell you about several problems I encountered when doing some tasks with the help of this Codex, so that you simply understand the nuances you might encounter. So, you see, there is Poplar Articles. This is a block of popular articles that I had. And in fact, it wasn't active. I decided to try letting Codex write that component for me. It wrote it. It was empty, something didn't work somewhere. In the end, it got it working. It did everything itself. It made this component, it wrote this twig, it looked at the markup. I told it: "Do not create any new classes, because they are already, in principle, all written in static markup." I pointed it to the static markup, gave it Figma so that it would also look there, and it did everything. But at the same time, look, there is such a line, which is already my refinement. No complaints about it. It did everything perfectly, brilliantly, it works. But is it working optimally? No, not optimally, because this item was actually located by him here in the loop. It was here in the check and somewhere else in the code. If you are not aware of how a twig component works, then this this item is nothing more than a call to a method within the component get items. Here is that very component. Here is that very get items method, which it also wrote. In principle, never mind, there are no global complaints about it, but look, it calls a service from which it gets items. And every time we refer to this method within Twig, every time this service is launched, consequently, repeated database queries are executed. And, as you understand, this is not optimal. Therefore, the correct solution would be to move this items into a separate temporary variable and use it in both the first and second cases. Could it have been left as it was written initially? Yes, it could. But what about critical thinking? How to check? How to worry about your project, product? That is, if you don't care about performance, of course, you could have done it like that. The next problem is the quiz generator, on which, in principle, I wrote almost all of the frontend with the help of this Codex. Well, rather, Codex wrote with my help, or I with Codex's help. Interpret it as you wish. But it has flaws, and here is one of them. It created two variables for some reason. Okay, there's is_submitting, I understand that it uses it somewhere further, but it created a submitting_url variable for some reason, which, firstly, it uses only once in its life, and secondly, why do I need this variable if it should be written in the very form that we are sending? You have the tag form, so put it in the action. Why do you need this submit as a variable, as a constant? In general, in the end, the next problem is how it processes requests in these controllers. I had some empty index action, the main page. And then it started to stick into it. Yes, according to my task, of course, I told it: "Take that request that is sent from the frontend, call an SQL command based on it." All this comes as JSON. There is some meta-information, there is some prompt. And, in general, I asked it to automatically process, collect, understand, forgive, release all this. What did it do? If it's a POST request, fine, okay. Because indeed, my page can be opened by both GET and POST. Let's make a payload an array. Then check if the content type is JSON, then we take the payload and decode it. If not, then take the request. Why? If it could have been greatly simplified. Accordingly, having an array afterwards. From this array, we extract the input, we extract the meta from it. This whole part is also complicated. It could have been greatly simplified. Well, and in general, this method is heavily overloaded. There is a lot of unnecessary stuff here that I wouldn't need. I would directly take the request.all, which independently processes JSON or not JSON. It will always return me an array of all my parameters. It will do the JSON decoding itself. It will take everything I need from there. Additional checks here. Is it a string, is it not. Is it an array, is it not. In general, yes, it could have been left like this, but if I specified the meta key in the request.all, I would get the meta array, and I wouldn't need to check if it's an array or not. If I made a get string from request.request, I wouldn't need to check for is_string, that is, all this is greatly simplified. Well, and look at my interpretation of exactly the same code. Thanks to him for doing it. I just shortened it, made it simpler, smaller. We take the payload from the request. This payload already has get_string and all. Inside, it's already validated whether it can be not an array or not a string. If it's not a string or not an array, then what I need, I will get an exception, and I won't go anywhere further. The next problem, I asked it to fix a bug when my dropdown, which comes via AJAX after a POST, no longer opens, because it needed to call another handler to, in general, hook into the newly created DOM. So, it understood what needed to be done. It understood that Dropdown needed to be called, but it called it in the wrong place. I didn't need it at the moment of page load. At the moment of page load, I don't have a problem with dropdowns. And when I moved it to this place, where the problem was, it was solved by itself. I told you that we have test cases that are stored in a separate system and there is an MCP service that allows us to access them. And then I decided to ask it: "Use the MCP for test cases. Look at this test case. How well is this test case constructed, is it good?" It looked at it, answered, found inconsistencies. Here, here, there is some typo. It found some problems, that this test should not check for branding color and okay, but we need it that way, so don't pay attention. It suggested what could be improved, and in principle, it has access to improve it. I sent it the errors of this test case, it went and fixed them. Then it went and ran them independently, looked, ran again. As a result, I got so carried away that I told it: "Let's do the next test case." It went, did it, ran it, launched it and said that everything is fine. Then I tell it: "Let's do the next one." Then I tell it again: "Let's do the next one. Next, next." And then suddenly, for some reason, after 725, although it had done 724, 723, twenty-second before that, it says: "Well, let's do the next one, 732. Where did this chain get lost? Why thirty-second?" I say: "No, let's do the twenty-sixth, seventh, and so on, and so on." And again the twenty-sixth. Okay. As you understand, I got tired of constantly asking it to run, and I write to it: "Let's analyze each time after writing, check, write the next test. If the test fails, fix it and continue again." And it started doing them further. And it did the twenty-eighth, ninth, thirtieth, thirty-second, and thirty-third. Then I went about my business, came back and thought: "Well, let it go and analyze which test cases we have, which we don't have tests for, what is written in that system, but not automated in the code, and it made me a whole dump of those test cases that we need to cover." As you understand, further efforts will be directed towards covering the uncovered relative to Jira, when I tried to connect the project that I showed you, it, in principle, started up. It appeared in the settings. Let me show you what it looks like in the settings. There are general settings, in which it asks: "What to open if you need to click on a file?" And as you can see, here again is my personal pain, there is nothing from JetBrains-like projects here. Then some configuration, and we are interested in MCP servers. Here you see everything that is connected. And here is Jira. And there was Jira before, connected by that project variant. But even despite the fact that it is connected and Codex likes that it is connected, that is, it sees it, it sees that about 40 or 80 functions are loaded that it can use. When trying to use them, it couldn't do anything with them. And then we tried, tried, tried, tried, tried to analyze why it didn't work, what was wrong with it. And in the end, I tell it: "Well, go and write everything yourself, friend." And it went and wrote. Preliminarily, of course, it got access to the task, it read its information, but it got it through the regular REST API. Somewhere here it was written, yes, here it is. Make a bypass request directly to the Jira Rest API with the same token and extract the task fields. It got the information and after it got it, why not do it? Here is the documentation. If we can write our own API, what's the difference, it's a regular curl request, then here are the methods you could implement. And it went to do it independently. And that's great. It can write its own MCP services that can help it in its work. Isn't that excellent? Again, returning to the settings, as I told you, it seems like there are settings, it seems like you can open configuration files here, look at some licenses, set up MCP servers, adjust something there. Okay. But again, the very rules I talked about, which are in its folder, cannot be edited here. Before recording this video, I decided to try giving it Figma and asking it to create an empty markup. It did ask me what stack was needed. HTML CSS, React Next Vue. I say: "Let's use plain SCSS with HTML." That is, no frameworks, no libraries, just let's do it raw and see what happens. It went, looked, found these pages, took a screenshot of these pages, created the markup, showed it and gave me the result. Is it good? Well, let's look together. So, here is the design it had at the input. It had an icon, a menu, plus signs, and this kind of empty page, on which there is nothing. You must agree, there are few elements here, and there is not much to do. And now the result we got. Look what's different. Well, the icon is clearly different. And for some reason it decided to make an SVG here. Even if it likes SVG, why not take that very area from Figma, select that very area and take it. A similar question I have for this picture, but it's clearly different, don't you agree? You have this area of 128 by 120 or even maybe smaller, but it doesn't matter. You can make a picture out of this. What's the problem? Here, pay attention, there is a separator, two separators. Look here, there is only one separator. Let's also look at the arrow and the indents. Look here at the arrow and the indents. Well, that is, it's night and day, right, approximately, of course, something somewhere here somehow was. What is this artifact of an incomprehensible solar system? OR something. Well, like, this is not in the design. Where did you get it from? How did you come up with it? Friends, I know that there is such a section in Codex as Skills, which allows you to add, among other things, Figma implementation Design and Notion Capture, Knowledge Base, anything. Despite the fact that in the first version I simply connected the MCP from Figma, which I already had there, and it tried to work with it. Skills are something similar that complements those very MCPs, that is, it's a description of additional annotations, additional, I don't know, instructions for the system prompt, which allow you to work more precisely with Figma. And even despite this, that I added this Figma implementation Design, I added this Skills, I repeatedly asked it to re-markup taking this skill into account. We see that it worked on something, took some screenshots, opened that very browser, compared, and in the end it says that it understood the task, like finalizing the markup. It did everything there. And we see the result here, which it unfortunately tried to attach here, but something clearly didn't work out for it. Now let me show you the second result. It didn't get any better with the second result. Yes, the icon appeared, yes, the logo of this messenger appeared, but some unclear indents, why are they so crooked? Let me, maybe you can't see it, but it's clearly visible here that the button is not on the same level as the text. Some unclear variant of a dropdown with this up-down arrow switcher. The picture also didn't fit in here for some reason and in general it moved somewhere. Here in the original design, it is visible that the entire background is white. By what witchcraft did you shove a gray design here? Where did it come from? In general, this tool is still unclear to me. We will figure it out further. For success to be inevitable, whether it's Claude or Codex, you should preferably write files that will help it study your project. This can be either a README file, in which you will write, or it can be an Agents file. Describe everything here: the project stack, the database, and the version of this database, and the framework, and the version of this framework. How your Gulp, Vite, anything, Next.js will be built, describe all of it. If you have some architecture with some layers, describe it in the same way. It will try to follow it, or at least it will know that it exists and will at least rely on it when generating. If you have any pipelines, like mine, then describe all variations of these pipelines. Plus, I additionally described a more detailed pipeline in a separate file. I will now show you how to reference it. Any nuances, anything that can be additionally useful, and you want to save during the current dialogue, ask it to save it in its knowledge base, in particular, in agents. Always remember about the context length and in principle about the context parameter, that it exists. Therefore, so as not to clutter your file, agents or any other junk, make references to adjacent files. In particular, if I was talking about pipelines, so that I have a broader understanding in Codex about my pipeline, what exactly is done in each step, I ask it to read a separate file, in which each step is described, and it is clear what is at its input, what is at its output. Similarly with the database. Some projects are small, with 5-10 tables, some have 100 tables. And it's clear that if we shove everything into one file, it will all be a mess. Therefore, my recommendation: ask it to create a separate document file with the structure of your database based on your database. Here is an example of my file, how it looks. In essence, it's a list of all the same fields and their data types. Based on your table, it can generate entities for you, it can supplement some migrations, or, conversely, having your entities, you will tell it: "Go, update my database.md file." But all this gives it context so that it knows what your project is, what is happening in it, what entities, what interactions between them. The more context you give it, the higher the probability of your success. So, friends, is this a revolution or not? Considering that I've been working with this for a couple of weeks, I can definitively say that it's an excellent option. It definitely speeds up development. Yes, it has some flaws, yes, there have been different models that have changed during the time I've been trying to get along with it. Yes, there are some quirks with different MCPs, yes, there are some quirks with Figma, with Jira, but in most cases, if you overcome all these barriers, then this is a tool. It really allows you to speed up your development. Of course, you need to think critically about what it does, whether it does it correctly. I rolled back many versions of code that it generated for me. I tried to change its prompts, I tried to change its instructions. I gave it basic instructions for the project within the project. Of course, I did a lot to help it. And yet, it still allowed itself to be stupid. But I am still incredibly happy that I started using such a product. And I highly recommend it to you. If you liked it, give it likes, write comments, and see you in the next video. Bye. M.