The Rundown

In this guide you will learn how to vibe code like an adult. Instead of vibe-coding until you run out of tokens, use this system + the Codex app to build a website brick-by-brick each day.

Who This Is Useful For

• Entrepreneurs who need to ship a landing page and blog yesterday without hiring a dev.
• Semi-technical Managers tired of wrestling with the command line and Git.
• Codex Users ready to graduate from single prompts to automated assembly lines

What You Will Build

A team of Codex agents that build react apps for you while you sleep. Spoiler alert: the key is to think modular and plan for parallel tasks.

What You Need to Get Started

• A Mac computer
• ChatGPT Plus ($20/month) or higher

Step 1 New React App

Let’s get started by scaffolding a new react app.

Run this in your terminal to create a new react app with vite:

$ npm create vite@latest vite-react-app -- --template react

💡Pro tip: If you don’t use Vite, you can you NextJS, Create React App, etc. instead. If you have no idea what we’re talking about, ask AI to help you.

You’re probably wondering why we don’t use the Codex app for this… It’s because by default the Codex app runs in a sandbox that can’t use these commands. And this way also keeps your Codex sidebar tidier as you’ll see in step 2!

Step 2 Codex Setup

Get the Codex app here > open the app > sign in.

Click Open Folder (cmd + O or ctrl + O) and select the folder you just created.

You should see something like the screenshot below.

Click “Create git repository” in the bottom right. This helps your agents keep track of what they are all working on!

💡Pro tip: You can login with Github by opening the terminal (cmd + J or ctrl + J) and running gh auth login . This will allow Codex to publish code to Github for you.

Step 3 First Prompt

Let’s have Codex make a plan for us. Click the plus button and toggle on plan mode.

Send this prompt: Create a modular PRD (in markdown) and execution plan for a professional boilerplate SaaS website. The project must be built using a "Parallel Factory" workflow where multiple agents can work on separate pages simultaneously without file conflicts. Phase 0: The Designer Agent (Global Infrastructure). Then parallel agents should create components and pages for a landing page, blog, about page, contact us page, pricing page and privacy page. The only agent that can edit the main App.jsx is you.

Pro Tip: You can see your PRD and other files by clicking Open > Open in and picking your IDE.

Step 4 Phase 0

Create a new thread and tell the agent to get started on Phase 0 of the app. You can tag the PRD file with the @ sign.

💡Pro tip: You can click the commit button in the top right to save an agent’s progress. These act like “checkpoints” that help other agents understand what’s going on. Codex will even auto-generate a commit description for you!

Step 5 Starting up the factory

Now we can start up our agents for each page! Open a thread for each page mentioned in the PRD and tell them to get to work!

💡Pro tip: Instruct your agents to open new feature branches for each page.

When you’re done, have your main “foreman” agent review each feature branch and merge it into your codebase.

You can launch a preview of your website from Codex.

Click the “play” button in the top menu and enter:

npm install

npm run dev

Now you can preview your app by pressing the play button.

Step 6 Automations

You can click “Automations” to have agents review your work every hour, day, etc. This is what makes the Codex app so powerful. You can schedule daily commit reviews, bug hunters and even feature builders.

Instead of vibe coding in a multi-hour sprint and running out off tokens, try dropping in your PRD and flipping on these automations:

• Daily feature builder agent that builds the next thing on the PRD
• Commit review agent that checks the feature agent’s code each day
• Bug hunter that looks for bugs each day and fixes them

Going Further

If you click “Skills” in the sidebar you can install a bunch of useful tools for Codex in one click!