Recipe 002

Vibe Coding for ChatGPT Subscribers: Codex Is Already in Your Plan

You already pay for ChatGPT — and that same subscription includes Codex, a coding agent that lives inside VS Code. Fifteen minutes from install to an app you can click.

Start Cooking is a three-part series for people who already pay for an AI chat subscription and want to taste vibe coding before reading any theory. This is the ChatGPT edition — if you subscribe to Gemini or Claude instead, jump to your edition.

Here's the thing most ChatGPT subscribers don't know: the $20 you already pay every month includes Codex — OpenAI's coding agent. Not a chatbot that pastes code for you to copy. An agent that opens a folder on your computer, writes files into it, runs them, and fixes its own mistakes while you watch.

No API key. No extra bill. You just haven't turned it on yet.

What you'll have in 15 minutes

A folder on your computer containing a real web app — files an AI wrote while you watched — running in your browser. That moment is the whole point of today. Understanding comes later; taste comes first.

The setup

1. Install VS Code. Grab it from code.visualstudio.com and install with all the defaults. It's free, and it's the kitchen everything else plugs into.

2. Install the Codex extension. In VS Code, press Ctrl+Shift+X (Mac: Cmd+Shift+X) to open Extensions, search for Codex, and install "Codex – OpenAI's coding agent". One check before you click install: the publisher must be OpenAI — there are look-alike extensions.

3. Sign in with ChatGPT. A Codex panel appears on the right-hand sidebar (if you don't see the icon, restart VS Code — this trips up almost everyone). Click sign in, choose your ChatGPT account, and your browser opens to finish the login. That's it — your existing subscription now powers the agent.

4. Open an empty folder. File → Open Folder → make a new folder somewhere friendly, like Documents/first-dish. This folder is your countertop: Codex will only cook inside it.

Before you type anything

Look at the bottom of the Codex chat box: there's a mode switch. Agent (the default) means Codex can create and edit files in your folder on its own, but asks permission before touching anything outside it or the network. That's the right setting. You'll see it ask before doing anything spicy — that's normal, and it's your hand on the stove dial.

Now cook

Paste this into the Codex panel and press Enter:

Create a single file called index.html containing a complete little web app: a digital fortune cookie.

- Show a cookie in the middle of the page that cracks open with a fun animation when clicked, revealing a random fortune.
- Write 20 original fortunes about technology, building things, and beginner's luck.
- After showing a fortune, offer a "one more cookie" button.
- Warm, cozy design. Everything — HTML, CSS, JavaScript — must live in this one file, no external libraries.
- When you're done, tell me exactly how to open it and what to try.

Now watch. Codex will narrate what it's doing, and a file called index.html will appear in the file explorer on your left — an AI just wrote that onto your actual computer. When it finishes, find index.html in your folder and double-click it. Your browser opens. Click the cookie.

That thing you're clicking? Nobody wrote it but you and a sentence.

What just happened

You described an outcome; the agent decided the how — wrote the structure, the styling, the logic, and 20 fortunes — and put it all in one file you can open, share, or break. Open index.html inside VS Code and scroll through it. You don't need to understand it. You just need to notice that it's yours, on your disk, editable by the next sentence you type.

Second helpings

Ask Codex, in plain words, for changes — one at a time:

  • "Make the cookie look more realistic and add a crumb explosion when it cracks."
  • "Add a button to copy the fortune to my clipboard."
  • "Keep a counter of how many cookies I've opened, saved between visits."

One request per message, look at the result, then ask for the next thing. That loop — describe, taste, adjust — is vibe coding. Everything else is seasoning.

Cooking with a different subscription? The same recipe exists for Gemini subscribers (Antigravity) and Claude subscribers (Claude Code) — same fortune cookie, different kitchen.

Hungry for more?

New recipes land in your inbox as they leave the kitchen. No spam, unsubscribe anytime.