--- title: "How to get started with vibe coding." description: "A plain guide to vibe coding your first web app: what you need, the one prompt to paste into Claude or ChatGPT, and going from idea to live app on Cloudflare for free." url: "https://web.popcomputer.com/vibe-coding" updated: "2026-10-30" --- # How to get started with vibe coding. Vibe coding means describing what you want and letting an AI write the code. To build a real web app that way you need three things: an AI that can work on your computer, a starting point it understands, and a free Cloudflare account to put the app online. This guide goes from the first prompt to a live address. ## What you’ll need - A Claude or ChatGPT subscription. We recommend Claude with Opus 5.5. - An AI to work with: Claude, ChatGPT, Claude Code or Cursor. One that can run commands on your computer, such as Claude Code or Cursor, does the most for you. - A [Cloudflare account](https://dash.cloudflare.com/sign-up). The free plan is enough. - Node.js and Bun, the tools that run your app. Your AI checks for them and installs them once you say yes. ## Step 1: Copy the setup prompt The [setup prompt](/#install) tells your AI where the framework’s docs are, how to make your app from the template, and how to check its work. Copy it from the home page and paste it into your AI. ## Step 2: Say what you want Finish the prompt’s last line with your idea. Say who uses it, what they do and what they see. You don’t need technical words: “a tracker for our van bookings, where drivers book a day and the office sees the week” is plenty. Start smaller than you think. The [CRM example](/examples#crm) came from three sentences. ## Step 3: See it running Your AI makes the app from the template and starts it on your computer, at an address like my-app.localhost. Sign-in, accounts and a database already work. It runs the checks and shows you they pass before it builds anything new. ## Step 4: Build one page at a time Ask for one thing, try it, then ask for the next. After each change your AI runs the type check, the lint rules and the tests, and fixes what they report. If something looks wrong, say so in plain words, or paste the error you see. ## Step 5: Put it online When you’re ready, ask your AI to deploy. The first time, your browser opens to let it into your Cloudflare account. It checks the new version answers before making it live, and gives you the address. Your app and its database run on Cloudflare’s free plan. ## The best way to build a web app with Claude Code Claude Code works on your computer: it reads your files, runs commands and can check its own work. It builds best with rules to follow, checks to run and one thing to do at a time, which is what [a framework built for coding agents](/coding-agents) gives it: - Rules it reads first. The template’s CLAUDE.md loads the framework’s own, which name one way to do each task, so Claude Code isn’t left to invent its own sign-in or database code. - Checks after every change. One command runs the type check, the lint rules and the tests, and each message says what to use instead, so Claude Code can fix what they find. - A fence it can’t climb. Turn on the [agent fence](https://github.com/PatrickOgilvie/popcomputer-web/blob/main/docs/agent-fence.md), and a hook refuses Claude Code’s commands that skip the checks, and asks you before it deploys. - One change at a time, each tried in the browser before the next. [The examples](/examples) show what Claude Code built from the template, and the prompt it was given, word for word. ## Hosting an app built with AI for free Your app and its database run on Cloudflare’s free plan, and a free account is all the first deploy needs. Past the free plan, the paid one is $5 a month, and [what a web app on Cloudflare Workers costs](/cost) works out the bill as you grow. [The free plan](https://developers.cloudflare.com/workers/platform/pricing/) includes: - 100,000 requests a day for your app’s pages and form posts, reset at midnight UTC. Its images, scripts and styles are served free, and don’t count. - Up to 10 ms of computing time for each request. Time spent waiting on the database doesn’t count. - Up to 10 [D1 databases](https://developers.cloudflare.com/d1/platform/limits/) of 500 MB each, with 5 million rows read and 100,000 written a day. - An address on workers.dev, served over HTTPS, or a domain of your own. - Time Travel, which can put your database back to any minute in the last 7 days. ## Tips that save time - Keep each request to one thing. - When something breaks, paste the exact error, not a description of it. - Ask your AI to explain a change you don’t follow. It usually knows. - Commit when something works, so you can always get back to it. - Read [Vibe coding safely](/vibe-coding-safely) before you put anything private online. ## Questions people ask ### What’s the best way to build a web app with Claude Code? Give it a starting point with rules it reads first and checks it runs after every change, then ask for one thing at a time and try each in the browser. The @popcomputer/web template gives Claude Code both, and [the examples](/examples) show what it built, with the prompts it was given. ### How do I host an app built with AI for free? Put it on Cloudflare’s free plan: 100,000 requests a day and a database of up to 500 MB, for nothing. An app made from the template deploys there from a free account when you ask your AI to deploy. ### Is vibe coding free? Hosting is: your app and its database run on Cloudflare’s free plan. You’ll need a subscription to an AI such as Claude or ChatGPT. ### How long does a first app take? The [examples](/examples) each took Claude Code between 15 and 30 minutes, from one prompt. Your first will take longer while you learn how to ask. ### What can I build? Web apps that work on computers and phones: internal tools, customer portals, booking forms, blogs, dashboards. [Build your own app](/build-your-own-app) has ideas. ## Read next - [Can you vibe code safely?](https://web.popcomputer.com/vibe-coding-safely) - [Build your own internal tools, apps and software.](https://web.popcomputer.com/build-your-own-app) - [A web framework built for coding agents.](https://web.popcomputer.com/coding-agents) - [What does a web app on Cloudflare Workers cost?](https://web.popcomputer.com/cost)