Guides / Prompting and shipping

Vibe Coding With ChatGPT: Canvas, Codex and Building Apps From ChatGPT

How to vibe code with ChatGPT: quick prototypes in chat, Codex for real codebases, and building a hosted app with a database from ChatGPT using Mythex.

Mythex Team · 2026-11-01 · 5 min read

You can vibe code with ChatGPT in three ways. Ask it in chat for a small app and preview it in canvas; hand tasks on a real codebase to Codex, OpenAI's coding agent; or connect an AI app builder such as Mythex so ChatGPT can build, host and publish a full app with a database. The first is fastest for a single-page tool, the second suits developers, and the third gets you a live app with logins and data without leaving ChatGPT.

Here's how each works, a prompt for each, and where each one stops. If you want the background on the term, read what vibe coding is.

Option 1: ChatGPT chat and canvas

For a quick tool, just ask. ChatGPT writes the code, and in canvas it can show simple HTML and React pages so you can click around and ask for changes.

Write a single-page tip calculator with inputs for bill amount, tip percentage (buttons for 10, 15, 20 and a custom field) and number of people. Show the tip and the amount per person, updating as I type. Make it look clean on a phone.

Good for: calculators, simple games, landing page drafts, and learning. Ask "explain this file like I'm new to coding" and you'll learn quickly.

Where it stops: there's no backend. Nothing you enter is saved for other users, there's no login, and to share it you'd copy the code somewhere and host it yourself. The moment you say "and save it so my team can see it," you've outgrown chat.

Copy-paste vibe coding

Many people start by asking ChatGPT for code and pasting it into files on their computer or a hosting service. It works for small static sites, but it breaks down quickly. Each change means finding the right file, pasting the right part, and hoping nothing else depended on what you replaced. If you catch yourself doing this more than a few times, move to one of the next two options.

Option 2: Codex for a real codebase

Codex is OpenAI's agent for software work. You give it a task in plain language, and it works on a repository: it reads the code, makes changes across files, runs commands and tests, and gives you the result to review. OpenAI offers it in ChatGPT, as a command-line tool and as an editor extension; check OpenAI's site for which plans include it and the current limits.

A task-style prompt suits it best:

In this repo, add a CSV export button to the Orders page. It should export the currently filtered orders with columns date, customer, total and status. Add a test for the export function and run the test suite.

Good for: developers and technical founders with an existing project who want an agent to take whole tasks off their list. It works with your stack and your conventions.

What you still handle: where the app runs, the database, secrets, deployment and domains. Codex changes code; it isn't a host.

Codex and Mythex together

Codex can also connect to MCP servers, including Mythex's. Add https://mcp.mythex.ai/mcp as a custom MCP server in Codex, approve access on Mythex, and Codex can work on a Mythex project in its cloud sandbox, with the preview, database and publishing handled by Mythex. Our post on building Mythex apps from Claude, Cursor or Codex walks through it.

Option 3: Build a full app from ChatGPT with Mythex

If you want to stay in a ChatGPT conversation and end up with a real, hosted app, connect Mythex. Mythex works inside ChatGPT as an app: ChatGPT talks to Mythex's tools over MCP, the open protocol that lets assistants use tools hosted elsewhere (what MCP is).

Once it's connected, ChatGPT can create a Mythex project, write the code in a private cloud sandbox, start a live preview, add a database and file storage, and publish the app to a public URL. Results come back with a link so you can open the project in Mythex and watch the preview.

How to connect

1. In Mythex, open Account settings and copy the MCP address.
2. In ChatGPT, add Mythex from the apps or connectors settings using that address. ChatGPT's menus change from time to time, so follow OpenAI's help page for adding an app if the names differ.
3. A Mythex page opens: sign in and choose Allow access. There's no key to paste.
4. Start a conversation and mention Mythex in your request.

Connecting works on any Mythex plan. The sandbox tools — building, previewing, publishing — need Mythex Pro ($25 a month), and sandbox time and hosting come from your Mythex credits. Your ChatGPT usage stays on your OpenAI plan.

A first prompt to try

Use Mythex to build a job application tracker for me. I add applications with company, role, link, date applied, status (applied, interview, offer, rejected) and notes. Show a board by status where I can drag cards, and a simple chart of applications per week. Save everything in a database and protect it with a login. Start the preview and give me the link.

Then, one change per message:

In the Mythex project, add a reminder date to each application and highlight cards whose reminder is today or overdue.

Publish it and send me the live URL.

Good for: people who already plan and think in ChatGPT and want the result live, with data that persists, without learning hosting. Because it's an ordinary Mythex project, you can carry on in the Mythex chat at any point.

Which option fits what you're building

Prompting habits that work in ChatGPT

• Name the tool when you want it used. "Use Mythex to…" makes it clear the request is for your project, not a general answer.
• One change per message. Long lists of edits produce long lists of side effects.
• Ask for a plan before big steps. "Before changing anything, list what you'll change and wait for my OK."
• Paste exact errors. The full error text is worth more than any description.
• Ask what changed. "Summarise your last three changes in plain words" keeps you oriented when you aren't reading the code.

More are in our vibe coding prompts cheat sheet.

Keep it safe

• Never paste real passwords or API keys into a ChatGPT conversation. If your app needs a key, store it in the project's secrets. Mythex's tools only ever report secret names, never values.
• Before you publish, check that users can't see each other's data, and that no key ended up in code that runs in the browser. Our guide is vibe coding safe? lists the checks with prompts you can paste.

Using Claude as well? The companion guide covers vibe coding with Claude and Claude Code. For a model-by-model view, see ChatGPT vs Claude vs Gemini for building apps.