Heidelberg AICurriculum

Codex CLI Full Tutorial: Build Your First AI Image Generator from Scratch

Leon van Zyl ·2026-05-11 ·2 min read

Summary written by us from the video's transcript. The video, and everything in it, is Leon van Zyl's work.

Learn how to use the Codex CLI to scaffold, design, and implement an AI image generation web app with Next.js, including setting up a database, creating a custom design system, planning with sub‑agents, and integrating OpenAI’s image model.

Takeaways

  • The Codex CLI can scaffold a full Next.js app with authentication and database in one command.
  • Design systems are defined in `design.md` and enforced by the front‑end design skill, with automated Playwright testing.
  • Planning mode lets you outline features; sub‑agents execute tasks in parallel while respecting rules in `agents.md`.
  • Permissions may need manual adjustment, and token usage can be managed by tweaking reasoning level or disabling tests.
  • Integrating OpenAI’s image models requires only an API key in `.env`; the generated UI supports uploading reference assets for thumbnail creation.

Project Setup with Codex CLI

Create a new Next.js project by running `codex create gendik-app@latest .`. The scaffold includes user authentication, Postgres, Drizzle ORM, and other essentials. Start the database with `docker compose up -d`, apply migrations via `npm run db migrate`, and optionally inspect tables using `npm run db studio` which shows accounts, sessions, users, etc.

Open the generated folder in VS Code for easier navigation and run subsequent Codex commands directly from the editor.

Design System Creation

The `.agents` folder contains pre‑installed skills like *front‑end design* and *Next.js*. Edit `design.md` to define a custom UI; the tutorial clears the default file and asks the agent to redesign the homepage for an AI thumbnail studio, setting dark mode as default.

After the agent generates components it tests them with Playwright, takes screenshots, and updates `design.md` with the new system so future component creation follows the same style.

Planning and Sub‑Agent Workflow

Switch Codex to *planning mode* to outline features such as a dashboard page. The agent asks clarifying questions and produces an implementation plan, which is saved in a new `plans` folder for later reference.

When ready, exit planning mode, pull the stored plan, and instruct the agent to execute it. The main agent splits work into parallel sub‑agents, each handling parts of the task while Playwright tests changes before they’re committed.

Handling Permissions and Token Limits

If sub‑agents stall, adjust permissions with the `permissions` command (e.g., grant full access). Tokens can be conserved by removing the testing section from `agents.md`, though testing improves reliability.

The tutorial notes hitting the five‑hour limit on a ChatGPT Plus plan and suggests lowering reasoning level or upgrading the plan to continue.

Integrating OpenAI Image Generation

Add an OpenAI API key to `.env` as `OPENAI_API_KEY`. The scaffold supports OpenRouter, but the tutorial removes it to call OpenAI directly for image generation using the new *GBT‑image‑2* model.

Implement backend logic on dashboard pages to accept reference images (avatars, assets) and generate thumbnails via the OpenAI API.

Final UI Adjustments and Deployment

After functional integration, test uploading avatars and assets, generating thumbnails, and ensure loading states appear during generation. Refine the homepage to be a marketing landing page without direct image creation capabilities.

Commit all changes (e.g., `git commit -m "working dashboard"`), push to GitHub, and verify responsiveness across devices using browser dev tools. The final app includes a sleek dark‑mode UI, responsive design, and stock images generated by Codex itself.