I Shipped a Website Update Without Opening an IDE (Codex + GitHub + Vercel)

In this video, I am going to show you the power of OpenAI codeex, which lets you update your website without ever touching the code, having to open text editor, uh having to have your development environment on your computer. This is especially handy when you use this website version of codec because this website right now I'm accessing from my laptop for the demonstration purpose but you could access this from your mobile phone as well or maybe tablet device. You can actually make changes uh anywhere you are on the go. So on the left side we are looking at the codeex website and this is where I can prompt the change that I want. I am connected to my coding repository uh connected to my website lashtrada.com. So this is a live site that you can see on the right side. I'm just showing the tablet uh size view and I am going to make a request for an AI to change an update and by interacting um within here it's going to run through some pipelines where I can actually get all the updates done just by prompting. So let's see where I can change. I actually wanted to change this free AI resources. By the way, you should check it out uh if you are trying to do more with AI. I have a a website where you can start uh uh getting started on B coding and this is also a YouTube video where you can learn more about the prompting. But I noticed that sometimes you want to just click on this card itself to get a link versus knowing um to click on these things. So, the change I want to make um could either be the entire card is clickable, which probably is easier um or I could make these uh link more obvious by having a uh underlining link. Uh let's actually prompt to see if I can make this entire card clickable to just open the website as opposed to knowing that this is clickable. So, because it's already connected, I'm just going to assume the AI knows uh what I'm talking about. I don't need to explain or type the URL on my website. I can just go straight imprompting and say under free AI resources uh let's make the entire card clickable uh for voya.io IO and prompt engineering course so that users don't have to find the um clickable link within the card and I am already connected to to my environment. uh this is just a one-time process you do. You connect to the repository sets you have and then it essentially creates I think this virtual machine uh on their end that downloads the code runs the website and it seems to know um that I am running my website on Nex.js and it seems to know how to access the mpm package. Now that's that's a little bit technical. Uh once this is set up by a developer uh in your team uh you you shouldn't have to worry about it too much that you'll be set up. Then I am making the change on the main branch which is uh what's going to be uh easily deployed to the production site. And here you can ask for a couple different versions. Uh since I'm not asking for visual change, I don't really need to have versions. If you ask AI to maybe uh come up with some interesting design options, then maybe this design comes really handy. Um while I'm talking, I'm just going to click a submit and it essentially sends a request to the AI. So it starts a container. container is just a virtual machine that is running and hosted by OpenAI and it's going to just spin up uh just just a computer somewhere in the cloud essentially and it's going to start making changes. It's going to first download the information about the website from the connected repository. So, you do need to give a GitHub permission the first time you work on this. And then there you go. Downloading the repository. Uh, I guess I can just click on it and see what it's doing. It's downloading the repository. It is setting up the environment. And this part can be a little bit long. Um, I think um because I have not requested a change uh since maybe a few days ago uh when I was playing around with it. Uh it needs to start this runtime which just runs the website. And once that's done, it's going to shut down at the end. Okay, there you go. So, it has made a change. It made changes. So, it made it um just looking at the HTML, it changed from just a block of the information to wrapping that information with the anchor link. So, in the visual uh preview, it actually doesn't make it really easy to see. Uh if you actually let tell it like, hey, change the text, it then make it then that would make it a little bit easier to see the change. But um I am going to just create a PR. That means it's going to create a request to change. So what it did is it creates a pull request on my GitHub account. Uh this is acting on behalf of me. Codex has created a PR so that I can uh keep track of all the changes he made. uh the commits that it made is exactly same as the the diff that it was providing uh within the codeex editor and inside here I can scroll down to a section uh created by burcell burcell is a hosting service for nexjs nex.js JS is a framework uh of the website that I'm using to code this. So essentially Bristol detected that I made a change and then created a preview that I can take a look which is kind of cool right because I use OpenAI codeex to ask it to make a change and when I approve the change the Brazil creates this preview environment where I can just see the change and it creates a temporarily URL that is not visible to public. I have to log in in order to see the change. So, this preview is also saved from public eyes. And it made a change where I can now click on this entire card to open up the website instead of having to click on this uh exact text. Uh because it might not be obvious that you have to do that, right? So, I love the change and I'm going to go back to the PR and say great, everything is great and there's nothing that broke. And if everything looks good, I am going to merge the change back to the main branch. And what's going to happen is that it's going to kick the process off again. uh this time instead of creating a preview instance it's going to create the uh change to the production and after maybe a minute or so I should be able to uh see the change that I made. So okay I am back uh the pipeline has finished running. I am back to my main website. This is not a preview. This is a production website and I see that these links are now clickable. Uh, I just noticed that AI also made it so that when you hover on this card, uh, it it kind of shows a subtle hint that you're hovering over this element and voila, everything works. So to to recap, essentially all I did was prompt the change that I wanted to make and as soon as everything is connected through GitHub, the Bristol deployment, those are just one time uh, setup. Uh all I need to do is just access internet uh log to the Codex website and ask for the changes. And that was really easy. Everything just worked perfectly. And if I wanted to like I can just go through um making changes or maybe saying, "Oh, you got it wrong. I need to fix it." Um but yeah, this this is really cool. Uh this is really useful. I can see the use case where maybe I'm out and about. Maybe I found a typo right before I am um speaking at an event and I want to point everyone to my website and you know I want to fix a typo or maybe I wanted to put a link to the deck which often um uh people ask for. So, I might say, "Okay, add this deck link to my website so that when I point people to my website, they can quickly download and maybe after the event is over, after a little while, maybe I'll just remove the link because I don't really need all these decks uh visible from my website after the conference." Uh there are so many use cases that you can think of. And you can see that this is not just changing the text. You can change the functionality of the website. You could even change the design of the website. In fact, I was able to add this uh dark mode you see right on here uh just using the codeex uh again without ever downloading uh and using my coding editor. Uh and even if I could uh it's kind of good to know uh that I have more options to make changes to the website and this would even make it um so that non-technical person uh once everything is set up again uh you can request to make a change pre uh you can merge a request and that that's a power that's a power to the non tech um founders non tech creators uh especially working alongside with the tech um tech coworker, tech founder, uh they they don't need to be bothered. They can focus on more important work while you can focus on making changes to marketing website that is very low risk to change. So, uh let me know if this was useful. Let me know if you want to see more complex case. Um, there's just so many cool things you can do with it and give it a