How to deploy an app with Claude Code

TL;DR. Install Claude Code, add Hatchable as an MCP server with one command, then ask Claude to build and deploy your app in plain English. You'll get a live URL in a few minutes. The whole flow is free — bring your own Claude subscription.

What this gets you

By the end of this guide, you'll have a working app deployed at https://your-project.hatchable.site, with:

• Static files served from a CDN-backed URL
• A Postgres database attached to your project (no setup)
• File storage for uploads / generated assets
• Auth you can turn on per-route
• Zero config files, zero build pipeline to learn

Claude Code does the coding. Hatchable does the hosting. You describe what you want.

What you need

• Claude Code installed. npm install -g @anthropic-ai/claude-code, then claude login to connect your Anthropic account. Free-tier Claude works; a paid plan just gives you more messages.
• Node.js 20+. Required by Claude Code itself.
• A Hatchable token. Free, no signup form — grab one at hatchable.com by clicking Copy on the Claude Code snippet. The command includes a fresh token.

Step-by-step: from prompt to live URL

1. Add Hatchable as an MCP server

   Paste the command from hatchable.com — it looks like:

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

   This registers Hatchable with Claude Code. Verify it worked with claude mcp list — you should see hatchable in the output. (Stuck? See our full MCP setup guide.)

2. Start a Claude Code session in an empty directory

   Make a new folder, open it in your terminal, and run:

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

   The working directory matters — Claude Code treats it as the project root. Start fresh so Claude isn't distracted by unrelated files.

3. Describe the app

   Prompt Claude in plain English. The more specific you are about what the app does, the better the first draft. Example:

   "Build a habit tracker on Hatchable. Let me add habits with a name and a color. Show them on a grid with a checkmark for each day in the current month. Save everything to the database. Make it look clean — warm, cream background, serif headings."

   Claude will respond with a plan (what files it'll create, what tables it'll add to the database, what the UI will look like) and ask for your approval to proceed. Approve it.

4. Let Claude work

   Claude will call Hatchable's MCP tools in sequence — typically:

   • create_project — registers a new project on Hatchable and picks a subdomain
   • write_files — writes your HTML/CSS/JS and any API routes
   • run_migration — creates the database tables
   • deploy — pushes the current project state to live

   Each tool call may prompt you for permission the first time (Claude Code's default). Accept them, or launch with claude --allowedTools "mcp__hatchable__*" to pre-approve all Hatchable calls.

5. Open the live URL

   When Claude's done, it'll print the live URL — something like https://my-first-app.hatchable.site. Open it; you're looking at the app Claude just built and deployed. Takes 1-3 minutes end to end for a simple app, 5-10 for something more involved.

What if something breaks?

Claude can't find the Hatchable tools

Exit Claude (Ctrl+D), run claude mcp list — Hatchable should be listed as connected. If not, re-run the claude mcp add command with a fresh token from the homepage. Hatchable tokens expire after 30 days of inactivity.

Deploy fails with "project over quota"

Unclaimed anonymous accounts get 1 free project. If you've already deployed one, either claim the existing account (click the claim prompt the next time you visit your live app) or generate a fresh token. Claimed accounts can have unlimited personal projects.

The app is live but looks broken

Open the browser DevTools console and tell Claude what error you see. Claude will read the error, find the bug, and ship a fix. This iteration loop is the whole point — you're not supposed to read the code; you're supposed to describe what's wrong with the running app.

I want to edit code myself

Everything Claude writes lives in your project directory on disk. Open it in any editor, change what you want, then ask Claude to deploy the changes (or run claude mcp call hatchable deploy directly if you prefer).

What comes next

• Share it privately. By default your app is personal — accessible only to you. Add collaborators from the Hatchable console to let specific people in.
• Make it public. Upgrade to Pro ($12/mo) and the app can be published to the open web with a custom domain.
• Build another. Each Hatchable project is independent. Start a new Claude Code session in a new directory and repeat.