Vibe coding with Claude: from prompt to live URL

TL;DR. Vibe coding with Claude means describing the app you want and letting Claude write, deploy and fix the code while you judge the result in a browser. Connect Hatchable once (a connector at https://hatchable.com/mcp, OAuth sign-in, no API key) and Claude can take a prompt to a live URL at your-app.hatchable.site, with a database and sign-in already there. The free plan is unlimited private projects and one published app, no card.

Vibe coding with Claude: three places it happens

Claude shows up in three surfaces that matter here, and all three can use the same Hatchable connector. Details about Claude's surfaces and plans below are based on Anthropic's public help pages as of August 2026; check Anthropic for current details.

• The Claude app (web, desktop and mobile). Connectors are added from the Connectors page in settings. As of August 2026 Anthropic lists custom connectors using remote MCP as available on the Free, Pro, Max, Team and Enterprise plans, with free accounts limited to one custom connector. No terminal involved: you chat, Claude builds, the URL comes back in the conversation.
• Claude Code (the terminal). The same connectors, plus a folder on your machine and a CLI. It suits longer builds. Signed in with a Claude account, it picks up the connectors from the Claude app, and it also accepts a one-line add.
• Claude Cowork (the desktop agent). Anthropic describes Cowork as bringing Claude Code's agentic capabilities to knowledge work beyond coding. As of August 2026 it is offered on paid plans (Pro, Max, Team and Enterprise) in the desktop app on macOS and Windows, with web and mobile in beta, and it uses the connectors already on your Claude account. It fits when the app is one step in a larger task, say turning a folder of CSV exports into a small dashboard.

Connect Hatchable to Claude, once

1. In the Claude app: add the connector

   Open Settings, Connectors (on some plans it sits under Customize, Connectors), choose Add custom connector, name it Hatchable and paste https://hatchable.com/mcp. Click Add, then Connect on the Hatchable row. A tab opens on hatchable.com for OAuth; approve it and your free account is created in the same step. The connect Claude how-to has a button that opens the connectors page with the URL pre-filled.

2. Or in Claude Code: one command

   claude mcp add --transport http hatchable https://hatchable.com/mcp

   On first use Claude Code opens an OAuth tab to sign you in; if it lists the server as needing authentication, type /mcp inside Claude Code, pick hatchable, and finish the sign-in in the browser. Check it with claude mcp list, remove it with claude mcp remove hatchable. The Claude app and Claude Code share the connectors list, so adding Hatchable in either place sets up both. See the Claude Code how-to, the longer MCP server guide for scopes and troubleshooting, and deploy from Claude Code if you already have a project in a folder and only want it online.

3. In Cowork: pick it from the connectors

   Cowork uses the connectors already on your Claude account, so once Hatchable is added it is available from the connectors menu when you start a task. Nothing extra to install.

A complete walkthrough: prompt to live URL

The example is a reading list: it exercises every step (a table, a form, sign-in, publishing) without being interesting enough to distract. Swap in whatever you actually want.

1. The first prompt

   Claude needs the behaviour, not the implementation:

   "Build a reading list app on Hatchable. Let me add books with a title, author and a line about why I want to read it. Show them in one column, newest first, with a button to mark each one read. Cream background, serif headings. Put it live."

   Claude creates a project, writes the files (HTML, JS, SQL, TOML), deploys, and replies with a URL like https://reading-list.hatchable.site. Claude Code asks permission before each Hatchable tool call the first time; accept them. Open the URL and use the app before you read anything else.

2. Iterate in plain language

   Describe what feels wrong, one thing per message:

   "The list is cramped. More space between books, and make the title the biggest thing on each row."

   Claude edits the files and redeploys. You did not open an editor. That loop (look, describe, reload) is the whole of vibe coding with Claude.

3. Add a database table by asking

   Every project has its own private Postgres database, so a schema change is just another ask:

   "When I mark a book read, let me write a short note about it. Store the notes in their own table and show them under the book."

   Claude writes the migration (real SQL, a real table), the API route and the UI change in one pass, then redeploys.

4. Add sign-in by asking

   Sign-in for your app's users is built in (email-code login and passkeys, with Google sign-in available), so:

   "Only I should be able to add or edit books. Add sign-in with an email code, and make the list read-only for anyone else."

   No auth provider to set up, no keys to paste. Claude turns it on and gates the edit routes.

5. Publish

   Projects start private, visible to you and the people you invite. When it is ready for the open web, open the project in the Hatchable console and switch Visibility from Private to Open to web. On the free plan you can publish one app this way, no card; it carries a small "Built on Hatchable" badge and keeps its hatchable.site address.

6. Put it on your own domain (Builder)

   Custom domains come with Builder, a flat $12 a month, which also removes the badge and lets you publish unlimited apps (five custom domains plus email domains are included). In the project's Settings, under Domains, enter books.yourdomain.com, click Add Domain, and add the DNS record it shows you; Hatchable verifies the DNS and provisions TLS. Details are on pricing.

Six example prompts for vibe coding with Claude

Each of these gets a first working version from a single message. Narrow the nouns to your situation.

1. "Build a booking request page for my salon: service, preferred date and time, name and phone. Email me each request and show the client a confirmation."
2. "Build a kanban board for a team of four with backlog, doing and done columns, drag and drop, and sign-in so only we can see it."
3. "Build a link-in-bio page with my six links, a short bio and a dark theme. No database. Publish it."
4. "Build a feedback board where customers post ideas and upvote them. Anyone can read; posting needs an email-code sign-in. Send me a weekly digest of the top ten."
5. "Build an internal wiki: pages in markdown, search, edit history, and sign-in limited to our team."
6. "Build a small dashboard that reads the CSV I upload each Monday and charts revenue by week. Keep every upload so I can compare months."

The kanban board and the wiki make good Claude Code sessions because you will keep adding to them; the sixth is Cowork-shaped because it starts from files on your desk.

What makes Claude's first draft better

Be specific about behaviour and loose about implementation: say what the screen shows and what happens on a click, not which framework to use. Give visual direction in the first message, because defaults are generic. Keep asks small; "make it better" is hard to act on, "the dates are cramped against the left edge" is easy. In Claude Code, start in an empty folder. And read the code only when something feels off; the point of vibe coding is that using the app is the review (the longer argument is in What is vibe coding?).