📱

Get Our Mobile App

Take your business learning on the go!

Download on the App StoreGet it on Google Play

Getting Started with Codex (Full Setup + First Project Tutorial)

Code With Arjun8:40

Transcription

In this video, I'm going to show you how you can set up Codex onto your system and start by coding. Let me go onto my browser and search for Codex and just go to this first link from openai.com. And here you see the option for download. So, just simply click on download. So, this will download the DMG file. Simply click on install, double-click onto it, and drag and drop onto the applications. So, this will install the Codex.

So, let me open the Codex and click on open. So, it's showing welcome to Codex. You can either continue with ChatGPT or enter your API key. So, since I have the subscription of ChatGPT, I'll continue with ChatGPT. Continue with Google and simply click on continue. So, this is the basic UI of Codex. You can integrate with other IDE like Cursor or Antigravity. But for now, let me show you the simple way to work from here.

So, for that, you just need to click on add a new project from here. And let me create a new project and just call it demo app and click on create, click on open. So, this will open this demo app here and you can remove the other applications which are existing here. And here, so you can start asking. So, create a basic React application and simply click on enter. So, it'll start writing a code for you. So, you can see I'm setting up a basic React application. So, for that, you need to have Node and NPM installed. So, you can start doing uh code from here. But I'm just showing the basic configuration you can do. So, let's wait for this to complete.

So, it's creating the index.html and even if you see here on demo app, so it has created a lot of files already here. Uh you just need to do NPM install and it's doing it itself. So, you don't need to do anything. So, do you want to download the React and Vite dependencies? Okay, I want to do it. So, it it sometime asks you permission as well. So, it says it created a basic application and I didn't close the package.json and all these. So, let's say I run the application and let's see what it does. Do you want to allow starting on local? Okay, so I just want to do it. So, now it says the app is running on localhost 5173. So, it has already opened here basic React application. And now we can do whatever change we want to do.

So, I'll just say create a basic website for Code with Arjun Programming YouTube channel with blue theme. This is just a basic prompt, but you can always make in-depth prompt to give it a little more tasks. But I'll just say this and click enter. So, let's see what it does. After this is completed, so I will show you how you can integrate the Codex within the Cursor so that you can use it within that IDE. So, let's wait for this to complete and I'll show you that as well. So, it says it it has updated the basic theme. So, let's see. So, you know, it has done a pretty good job. Uh videos, community. So, you can always uh go further and, you know, ask it to do amazing thing.

Okay, so I'll be working in the same project, but now this time I will show you how you can use the same Codex from Cursor. Or later, I will show you on the Antigravity as well. So, first let me go into Cursor and let me integrate within the Cursor. On Cursor, let me simply open the project since it is on the desktop. So, I'll just open this demo app. On left side, so you'll be able to see this extension here. Just click on that. And here, you just need to search for Codex and click on install. So, this will install the Codex into the IDE. So, let me close this one. And if you see here, there's already sign of Codex here. So, sign in with the ChatGPT again. Click on open. So, this will open the browser. Again, continue with the Google and continue. So, now if I go into this Cursor here, so you can already see. So, it has been signed in. Let me click on next and click on next, click on next. So, this will open the chat box here. So, from here now you can start writing.

So, okay. So, you just click here. If I want to make some changes on this demo React app, so on this Cursor, so let's say make the application more modern including some videos to display from YouTube and make it responsive. So, I'll just copy some of the YouTube videos links from my YouTube channel. Copy and paste So, this should be good enough. So, let's click enter and let's see how it does the changes. So, you can see I have confirmed the small white app, so I can move quickly. So, you know, it takes some time again. So, now you can see so this has made some changes. So, let me go onto the browser again and see what are the change in it it did. So, it took some of these videos here and it did pretty good job at the bottom, but here, so the texts are not looking good. So, you know, we can always make some changes. So, but this this part is good, the picture video.

So, I'll again go and integrate into the Antigravity so that, you know, you guys know how to integrate in all these IDE so that you can make changes with these one. So, I just want this text to be little smaller. I don't want this to be this much longer. So, let's see. So, I'll go to the Antigravity again, show you how you can integrate on Antigravity as well. So, it's the same way. So, go to extension, just search for Codex. So, you see 3 million installs. So, just click here. So, this would install the Codex. So, once this is installed, so it should come around here. So, you see on Codex. So, I like this one better because you can open the explorer and go on desktop and open it. At the same time, you can use the Codex as well. So, you see can use it here as well. Since I have logged in, so it automatically logged in into my Antigravity as well. But otherwise, so the procedure is similar.

So, here again, let's say uh so, this text, learn more on development through videos, which is coming from here. I don't like this text this big. So, I'll just say make this smaller and concise. I would say the div containing this pasted here is also too long. Make it user-friendly in desktop view. So, let's click enter and let's see what it does. It's going to find the the hero copy of in the app and tighten the headline and soft copy. So, let's see in Chrome so what it is doing. So, it has updated some of the things here. So, let me go onto the Chrome here and see. It says it did, but it didn't. So, let me grab the screenshot from here. Copy and paste it here the screenshot. It's it's still there. Fix it. So, let's see what it does. Okay, I think it says it fixed now. Yeah, at least somehow it's fixed, but I wanted it to be more smaller. You know, you can always go back and forth and make some changes, give some good prompt. The prompt I'm doing is is not a good prompt I would say. So, you can always go with the good prompts. Make it more smaller and more modern text. So, now it's it's pretty much looking a good website, you know.

So, just for getting started, so I just showed you how you can uh install Codex onto your system and integrate with Cursor and Antigravity. And for the other IDE, just the same procedure to install the extension and just to get it started with the Codex. So, you can even continue doing from the Codex application itself, but, you know, there are some limitation like you cannot open multiple terminal from here. Uh you know, there are a lot of issues within that one, but you can still go with this one. So, thank you so much for watching. If you like the video, be sure to like, share, and subscribe. I will see you guys on the next one.