Vibe coding examples: live apps you can open right now

TL;DR. The most useful vibe coding examples are live apps you can open, not screenshots of a chat. Below are twelve real ones from the Hatchable directories, grouped into personal projects, small business sites and internal tools, each with the prompt-shaped ask that produces something like it. Every one was built by describing the app to an AI and letting it write, deploy and fix the code.

What makes a good vibe coding example

Vibe coding is describing what you want in plain language, letting an AI write the code, and judging the result by using it rather than reading it (the long version is in What is vibe coding?). So a useful example has to be something you can open, click around, and compare against what you would have asked for. Every example here is a real listing in the Hatchable app directory or site gallery. Where a listing shows a live demo, the demo is linked; otherwise the listing page is.

If you came for vibe coding project ideas rather than finished apps, read the asks. Each one is the shape of prompt that gets a first working version out of Claude, ChatGPT, Cursor or Codex, and each narrows to your own situation by swapping the nouns.

Personal vibe coding projects

Small, single-purpose, built for one person. These are the classic starters because the cost of getting them slightly wrong is nothing, and the first working version usually arrives inside ten minutes.

• Link-in-bio page. A polished one-page profile with your links and a choice of six themes, no database needed. Listing: Link-in-Bio.
  Ask: "Build me a link-in-bio page with my five links, a short bio and a dark theme, and put it live."
• URL shortener. Your own short-link service with click analytics, on a domain you control. Listing: URL Shortener.
  Ask: "Build a URL shortener where I paste a long link and get a short one, and show me clicks per link."
• A notebook your AI writes to. A notebook with its own MCP endpoint, so the useful parts of a conversation get saved instead of scrolling away. Listing: Notebook MCP.
  Ask: "Build a notebook app with an MCP endpoint so Claude can save notes into it from any chat."

Small business sites and tools

Public-facing, with a form or a booking ask somewhere, and usually a reason to end up on a real domain. Most of these live in the site gallery, and each site listing has an "Open the live demo" link.

• Restaurant website. A dark, editorial design for restaurants that take the food seriously. Listing: Marrow. Live demo: site-marrow.hatchable.site.
  Ask: "Build a website for my restaurant with the menu, opening hours, a map, and a reservation request form that emails me."
• Photography portfolio. A near-silent portfolio that puts every pixel behind the photographs. Listing: Selene. Live demo: site-selene.hatchable.site.
  Ask: "Build a photography portfolio with a full-bleed gallery, an about page, and a contact form."
• Law firm website. A parchment-and-navy design for law firms that argue in plain English. Listing: Sterling. Live demo: site-sterling.hatchable.site.
  Ask: "Build a law firm site with practice areas, attorney bios, and a consultation request form."
• Therapist practice website. A warm, quiet design for therapists and counseling practices. Listing: Solace. Live demo: site-solace.hatchable.site.
  Ask: "Build a site for my counseling practice with services, fees, and a confidential contact form."
• Live chat for your site. A chat bubble that answers from your docs, with a human one click away. Listing: Live Chat.
  Ask: "Build a live chat widget for my site that answers from my help docs and lets me take over a conversation."

Internal tools

Used by a team, usually behind sign-in, often with an AI agent as a second user. This is where vibe coding ideas stop being toys: the tool replaces a spreadsheet or a subscription, and nobody outside the company ever sees the code.

• Kanban board. Tasks and roadmaps in columns, and an AI agent can move the cards too. Listing: Kanban Board.
  Ask: "Build a kanban board for our roadmap with backlog, doing and done columns, and sign-in for my team."
• Team wiki. An internal wiki your team writes and your AI agent keeps up to date. Listing: Team Wiki.
  Ask: "Build an internal wiki with pages, search and edit history, and sign-in so only my team can read it."
• Press outreach desk. Press outreach grounded in what each journalist actually wrote recently. Listing: Press Outreach Desk.
  Ask: "Build a press outreach tool that tracks journalists, stores their recent pieces, and drafts a pitch for each."
• AI visibility tracker. Tracks your brand's visibility across ChatGPT, Claude and Gemini, and how it changes week to week. Listing: AI Visibility Tracker.
  Ask: "Build a tracker that asks ChatGPT, Claude and Gemini a set of questions each week and records whether my brand comes up."

Two more from the directory worth opening if those are close but not quite it: Feedback Board, a public board where customers post ideas and vote on what you build next, and Google Ads MCP, which gives an AI agent audited read and write access to a Google Ads account.

How these get built

The workflow is the same for every example above. You connect the AI you already use (Claude, ChatGPT, Cursor or Codex, among others) to Hatchable's MCP server at https://hatchable.com/mcp. It is an OAuth sign-in, with no API key to paste. From then on that AI can create a project, write the files (HTML, JS, SQL, TOML), deploy, and hand back a live URL at your-app.hatchable.site. You never provision anything.

Every project gets, the moment it is created, its own private Postgres database, file storage, sign-in for the app's users (email-code login and passkeys), email sending and receiving, scheduled jobs, and its own MCP endpoint so other AIs can call the app. That is why a one-line ask like "add sign-in for my team" or "email me each reservation" is enough: the pieces already exist and the AI wires them in. Setup is one short page per tool; the Claude version takes about a minute, and ChatGPT, Cursor and Codex have the same.

Cost: the free plan is unlimited private projects and one published app, no card. Builder is $12 a month for unlimited published apps, badge removal and custom domains (details on pricing). There are no message credits or per-prompt fees; your own AI subscription writes the code. The step-by-step version of a first build, from connecting to a live URL, is in How to vibe code a live app for free.