How to vibe code a live app for free

TL;DR. You need two free things: an AI tool (Claude, Cursor, or ChatGPT all have free tiers) and a host that speaks MCP (Hatchable). Connect them with one config line, describe your app in plain English, and the AI deploys it to a live URL. Total setup: about five minutes. Total cost: zero dollars.

What "vibe coding" means here

Vibe coding is the workflow where you describe an app in plain English, let an AI write and run the code, and accept the result without line-by-line review. You iterate by describing what feels wrong, not by editing code. See What is vibe coding? for the long version; this article is the practical how-to for actually shipping a vibe-coded app to a live URL.

What you need

Two free things:

1. An AI coding tool. Any of Claude Code (terminal), Cursor (editor), ChatGPT Desktop, or Codex. All four have free tiers sufficient for building small apps. If you already use one, use that; if not, Claude Code is the simplest to set up for this workflow.
2. A host that speaks MCP. Hatchable is free for personal and commercial use on the Personal plan. You do not need a credit card.

That is it. No accounts on other services, no Docker, no DNS setup, no build config files.

Step-by-step: from idea to live URL

1. Install the AI tool (if you do not have one)

   If you are picking one fresh, Claude Code is the quickest. From a terminal:

   npm install -g @anthropic-ai/claude-code
   claude login

   Log in with your Anthropic account. The free tier is enough for typical vibe coding sessions; the paid tier ($20/mo) raises the message limits.

   Already using Cursor or Codex? Skip this step. The rest of the guide shows the Claude Code flow — the equivalent steps for Cursor and Codex are in our Cursor guide and Codex guide.

2. Get a Hatchable token

   Open hatchable.com. On the homepage you will see a code block with setup commands for several AI tools. Click the Copy button next to the Claude Code snippet. The copied command already contains a fresh token; you do not fill anything in.

   No signup form, no email verification. The token works immediately.

3. Register Hatchable as an MCP server

   Paste the command into your terminal. It looks like:

   claude mcp add --transport http hatchable https://hatchable.com/mcp \
     --header "Authorization: Bearer YOUR_TOKEN"

   Claude Code registers the server immediately. Verify with claude mcp list — you should see hatchable listed as connected.

4. Start a session in an empty folder

   Make a new directory for your project and start Claude Code there:

   mkdir my-first-app
   cd my-first-app
   claude

   The working directory matters — Claude treats it as the project root. Starting fresh avoids the AI getting distracted by unrelated files.

5. Describe the app

   Type a prompt that describes what you want. Be specific about behavior; be loose about implementation. For example:

   "Build a habit tracker on Hatchable. Let me add habits with a name and a color. Show a monthly grid with a checkmark for each day I completed the habit. Save everything to the database. Use a warm cream background with serif headings and an orange accent."

   Claude will propose a plan — what files to create, what tables to add, what the UI will look like. Approve it.

6. Let Claude work

   Claude will call Hatchable's MCP tools in sequence:

   • create_project to register your project and pick a subdomain
   • write_file to write the HTML, JS, and any API routes
   • run_migration to create the database tables
   • deploy to push the app live

   The first time each tool runs, Claude Code will ask for permission. Accept. After a few minutes (2-5 for a simple app), Claude prints your live URL: something like https://my-first-app.hatchable.site. Open it. The app is running.

7. Iterate by describing changes

   Something not right? Tell Claude what feels off:

   "The header looks cramped — give it more breathing room and make the habit names a bit bigger. Also the streak counter under each habit should show the current streak, not the total days."

   Claude edits the files, redeploys, and the live URL updates. No manual build step, no manual deploy. You did not open the code editor.

Effective vibe coding

Five things that separate smooth vibe coding sessions from frustrating ones:

1. Be specific about behavior, not implementation.

Good: "Show the habit list sorted by most-recently-completed, with the most active habits at the top." Bad: "Use a useState hook and add a sort callback to the array." The AI is better at implementation than you are; where you add value is describing what the finished app should do.

2. Give visual direction up front.

Default AI output is visually generic. If you want a specific aesthetic, say so in the first prompt: "warm cream background, serif headings, generous whitespace, orange accent color." The AI will honor it throughout.

3. Iterate in small steps.

"Make it better" is hard to act on. "The dates look cramped against the left edge" is easy. Ship changes one at a time rather than bundling five requests into one message.

4. Read the code only when something feels off.

If the app looks right and works right, you do not need to read the code. If the app is slow or does something wrong, look at the specific part that is likely the issue. Let Claude walk you through it.

5. Keep scope narrow per session.

Vibe-coding a 20,000-line project in one session is much harder than vibe-coding a 200-line one. If the app grows, break sessions by feature: one session to add auth, another to add notifications, another to add an admin panel.

A worked example

Here is what the full transcript of a real vibe-coding session looks like, abridged. The app: a small tool for tracking books I want to read.

Prompt 1: "Build a reading list app on Hatchable. Let me add books with a title, author, and why I want to read it. Show them in a list with a button to mark each one as 'read' or 'abandoned'. Keep the design simple — cream background, serif headings, single column layout."

Result: Live URL in 3 minutes. App works. UI is clean.

Prompt 2: "The button row at the bottom of each book feels heavy. Make them smaller text links instead, aligned to the right."

Result: Redeployed in 30 seconds. Looks better.

Prompt 3: "When I mark something 'read', show me a little note below it asking what I thought. Save the note too. No rating, just a free-text field."

Result: Schema migration + UI change + API route. All of it handled by Claude in 90 seconds.

Prompt 4: "Add a second tab at the top for 'read' and 'abandoned' so I can see my history separately from my current queue."

Result: Tabbed interface. Deployed. Done.

Total time: 15 minutes. Total cost: $0. Total code I read: zero lines. The app is live, working, and shareable with friends.

When things go wrong

Common failure modes and fixes:

Claude says it cannot reach the MCP server. Run claude mcp list. If Hatchable is missing, re-run the claude mcp add command from the homepage. If it is listed but red, your token may have expired — Hatchable tokens last 30 days of inactivity. Get a fresh one from the homepage.

The app looks broken in the browser. Tell Claude what you see. "The page is blank; the console shows an error about useState is not defined." Claude reads the error, finds the bug, redeploys.

The deploy says 'project over quota'. Anonymous (unclaimed) Hatchable accounts get one free project. If you already have one, either claim the existing account (click the claim prompt the next time you visit the live app) or generate a fresh token for a brand-new anonymous account. Claimed accounts can have unlimited personal projects.

Claude stopped before finishing. If you hit the free tier's per-message limit mid-build, wait for the reset or continue in a fresh session. Claude's free tier is usually enough for 3-5 full app builds per day.

What happens next

A few things you might want to do with your freshly vibe-coded app:

• Share it. The URL works for anyone you invite as a collaborator. For now, the app is private to you and invited collaborators; you can share freely with people you trust.
• Claim the account. Next time you visit the live app, you will see a claim prompt. Adding an email lets you log in to manage projects and keep them long-term.
• Publish to the open web. If you want strangers to find the app through search engines (or attach your own domain), upgrade to Pro ($12/mo) to unlock public publishing and custom domains.
• Build the next one. Each Hatchable project is independent. Open a new directory, run claude, describe a new app. Repeat.

The loop — prompt, deploy, iterate, share — is short enough that building small tools for yourself becomes a habit rather than a project. That is the actual shift vibe coding enables: the cost of "I wonder what X would be like as an app" drops from "weeks of contractor work" to "a Saturday afternoon."