The vibe coding stack: from prompt to a live app (2026)
The six layers every AI-built app needs, from the tool you prompt in to monitoring after launch, the three common ways to assemble them, and how to pick one for the app you actually want to ship.
Key Takeaways
- A live app has six layers, not one. Where you prompt, where the code lives, the database, sign-in, hosting and monitoring. The AI tool you chat with usually covers only the first one or two.
- There are three common ways to assemble them. An all-in-one builder that includes everything, a coding agent plus separate services you wire together, or a coding agent connected by MCP to a platform that runs the backend for it.
- The handoffs are where projects stall. Copying keys between dashboards, setting environment variables twice and debugging a deploy you didn’t write are the steps beginners give up on, not the prompting.
- Count the bills before you build. A do-it-yourself stack of Claude Pro, Supabase Pro and Vercel Pro is $65 a month at list prices before usage. An all-in-one platform is usually one bill, but you trade some flexibility for it.
- Pick by who will maintain it. If you will read logs and fix deploys yourself, any stack works. If you want the agent to do that, choose a stack where the agent can reach every layer.
Quick-Start Prioritization Framework
| Layer | What it does | Typical choices in 2026 |
|---|---|---|
| Where you prompt | The chat or agent that writes and changes code | Claude Code, Codex, Cursor, an app builder’s own chat |
| Where code lives | The files and their history | A Git repository, or the builder’s project store |
| Database | Data that survives a refresh and a second device | Postgres (Supabase, Neon, built into a builder) |
| Sign-in | Accounts, sessions, who can see what | Supabase Auth, Clerk, a builder’s built-in auth |
| Hosting | Runs the frontend and backend at a real address | Vercel, Netlify, Replit deployments, a builder’s hosting |
| Monitoring | Tells you when something breaks | Server logs, an error tracker, uptime checks |
Most vibe coding advice stops at the prompt. You type a description, an agent writes code, a preview appears, and everyone moves on. But a preview isn’t an app. Something has to keep the code, store the data, sign people in, serve the pages to the world and tell you when it breaks. Those jobs are the stack, and you’re choosing one whether you think about it or not. This guide names the six layers, shows the three ways people assemble them in 2026, with real prices from each vendor’s own pages, and explains where each approach makes sense. This site is published by Floot, which is one of the options below; we describe the alternatives as their own documentation does.
The six layers of an AI-built app
Every option in this guide is a different answer to the same six questions. Naming them first makes the rest easy to compare.
1. Where you prompt
This is the tool you talk to. It might be a terminal agent like Claude Code or Codex, an editor like Cursor, or the chat box inside an app builder. Its job is to turn your description into code changes and, increasingly, to run commands and check its own work.
It’s the layer people compare most, and the one that matters least for whether the app actually goes live.
2. Where the code lives
Code needs a home with history, so you can see what changed and undo a bad change. For coding agents that home is a Git repository, usually on GitHub. App builders keep code in their own project store, and most of them also keep checkpoints or versions you can roll back to.
3. The database
Anything that must still be there tomorrow, on another device, belongs in a database on a server. Postgres is the common default: it’s well documented and every major model writes reasonable SQL for it. The failure to watch for is an agent quietly saving data in the browser’s local storage because nobody asked for a database. The demo works; the second device sees nothing.
4. Sign-in and permissions
Accounts mean password resets, sessions that expire, sign-in with Google, and rules that decide which rows each person can read. The last part is where small apps leak data, so it deserves its own layer in your head even if one product provides it.
5. Hosting
Hosting serves the frontend, runs the backend code (usually as serverless functions now), and gives the app an address with HTTPS. It also means a repeatable deploy, so a new version replaces the old one without breaking people mid-session.
6. Monitoring
After launch, you need to know when requests fail. At minimum that means server logs you can read. Better is an error tracker that groups exceptions and an uptime check that emails you. The useful question for a vibe coder is whether your agent can read those logs too, because then “it’s broken” turns into a fix instead of a screenshot you paste into chat.
Way 1: an all-in-one app builder
Builders such as Replit, Lovable, Bolt and Floot put all six layers behind one account. You describe the app in their chat, they write the code, provision a database and auth, and publish to their hosting.
What you get
The shortest path from idea to URL. Replit’s documentation, for example, says its Agent “writes code, sets up infrastructure, and tests the result,” that every Replit app comes with a database by default, and that Agent creates checkpoints you can roll back to. Lovable’s plans include Lovable Cloud for hosting and a built-in backend. Bolt’s pricing page lists hosting and unlimited databases on every plan.
What to watch
Each builder has its own credit or token system, and complex apps can burn through it. You also work inside that builder’s chat, so if you already like Claude Code or Cursor, you’re switching tools. Check how you’d leave: Lovable’s plan docs list Git sync on all plans and code download on paid plans; other builders document export differently.
Way 2: a coding agent plus services you wire together
This is the classic developer stack. You prompt in Claude Code, Codex or Cursor, keep the code in GitHub, use Supabase for Postgres and auth, and host on Vercel or Netlify. Each piece is best-in-class and swappable.
The handoffs
The agent writes the code for every layer, but someone has to create the Supabase project, copy its URL and keys, paste them into Vercel’s environment variables for preview and production, set up Google sign-in in two consoles, turn on Row Level Security, and add DNS records. Agents increasingly do some of this through CLIs and MCP servers, but in practice the human ends up shuttling values between tabs.
The bills
At list prices on 2026-11-11: Claude Pro is $20 a month (or $17 a month billed annually), Supabase Pro starts at $25 a month, and Vercel Pro is $20 a month with $20 of included usage credit. That’s $65 a month before any usage charges, as our own arithmetic. Free tiers exist, but Vercel’s pricing page says Hobby is “for personal, non-commercial use,” and Supabase pauses free projects after one week of inactivity.
The security step people miss
Supabase’s docs say plainly: “Enable RLS on every table in an exposed schema.” If the agent adds a table and forgets a policy, the public key your frontend ships with can read it. Nothing visibly breaks, which is why it gets missed.
Way 3: a coding agent connected to a platform by MCP
A newer pattern keeps the agent you like and gives it a platform it can drive directly. The Model Context Protocol describes itself as “an open-source standard for connecting AI applications to external systems.” When a platform exposes an MCP server, the agent can create the database, add tables, turn on sign-in, read logs and publish as tool calls, without you copying anything.
How it works in practice
You add the platform once. In Claude Code the documented form is claude mcp add --transport http <name> <url>, then you sign in. From then on, a prompt like “add a bookings table and only let each customer see their own bookings” becomes a migration, an access rule and a preview link in the same session.
Where Floot fits
Floot is a platform built for this pattern, and it also works on its own. It builds full-stack web apps (React frontend, serverless endpoints, Postgres) from plain-English descriptions, either in Floot’s own editor or from ChatGPT, Claude, Claude Code, Codex and Cursor through Floot’s MCP server. Every change shows up in a live preview.
Each app gets its own Postgres database, its own sign-up and login (email, Google, Microsoft) with roles, file storage, email sending and receiving, web and phone push, scheduled jobs and background tasks, realtime updates, and checkout and subscriptions through Floot Payments, which runs on Stripe. Floot can also build native iOS and Android apps and submit them to the stores.
What to watch
You’re choosing a platform’s structure. A Floot project is organized as pages, components and backend endpoints, so code from elsewhere gets adapted to that shape rather than running unchanged. If you need an unusual runtime, a long-running server process or a specific cloud provider, a do-it-yourself stack gives you more room.
Side by side
Prices are entry list prices on 2026-11-11 from each vendor’s pricing page. Every option adds usage charges as traffic grows.
| All-in-one builder | Agent + services, wired yourself | Agent + platform over MCP | |
|---|---|---|---|
| Where you prompt | The builder’s chat | Claude Code, Codex, Cursor | Claude Code, Codex, Cursor, ChatGPT, Claude |
| Who sets up database and auth | The builder | You, with the agent’s help | The agent, through the platform |
| Accounts and bills | One | Three or more | Agent plan plus one platform |
| Flexibility | Within the builder’s stack | Highest | Within the platform’s stack |
| Example entry cost | Lovable Pro from $25/mo; Replit Core $20/mo; Bolt Pro $25/mo | About $65/mo (Claude Pro + Supabase Pro + Vercel Pro) | Floot Pro $25/mo, plus your agent plan |
| Best for | Beginners who want one place | Developers who want each piece swappable | People who like their agent but don’t want to run infrastructure |
How to choose your stack
Three questions settle most cases.
Does the app save anything or have accounts?
If not, any static host will do and you can skip most of this guide. If it does, you need a database, sign-in and a backend, and the choice below matters.
Who will fix it at 11pm?
Be honest. If the answer is you, and you can read a stack trace, the wired-together stack is fine and gives you the most control. If the answer is “I’ll ask the AI,” choose a stack where the AI can see the logs and change the infrastructure, not just the code.
Where do you already work?
If you live in Claude Code or Cursor, switching to a builder’s chat is a real cost. If you’ve never opened a terminal, a builder or a platform you can drive from ChatGPT or Claude is a gentler start.
Common mistakes when assembling a vibe coding stack
These come up again and again, whichever way you assemble the layers.
Choosing the prompt tool and ignoring the rest
People spend a week comparing models and an afternoon on hosting. The app’s reliability depends far more on the database, auth rules and deploy process than on which model wrote the first draft.
No database because nobody asked for one
Say “store this in a Postgres database” in the first prompt. Then test on two devices before you show anyone.
Secrets in the frontend
Any key in browser code is public. Payment keys, admin database keys and third-party API keys belong in backend code and environment secrets only.
No way back
Before launch, know how you’d undo a bad change to code (Git or checkpoints) and to data (backups or point-in-time restore). They’re different problems with different tools.
Free tiers past their terms
Read the plan terms before charging customers. Some free plans exclude commercial use, and some pause idle projects, which looks like an outage to your first users.
Frequently Asked Questions
What is a vibe coding stack?
It’s the set of tools that turns a prompt into a live app: the agent or builder you prompt, where the code is kept, the database, sign-in, hosting and monitoring. Some products cover all of these; others cover one layer and you combine them.
Do I need GitHub to vibe code?
Not if you use an app builder that keeps its own versions. If you use a coding agent like Claude Code, Codex or Cursor on your own computer, a Git repository is strongly recommended so you can see and undo what the agent changed.
Is Supabase plus Vercel still a good stack?
Yes, for people comfortable with dashboards and environment variables. It’s flexible and widely documented. Budget for both paid plans if the app is commercial, and enable Row Level Security on every exposed table.
What is MCP and why does it matter for my stack?
MCP is an open standard that lets AI tools connect to outside systems. If your hosting or database platform has an MCP server, your agent can set up and change infrastructure directly instead of only writing code you then deploy by hand.
Where does Floot fit?
Floot covers the database, sign-in, backend and hosting layers, and you can prompt it from its own editor or from ChatGPT, Claude, Claude Code, Codex and Cursor through its MCP server. It’s free to start; Pro is $25 a month.
What’s the cheapest way to get a real app live?
Start on free tiers to prototype, then expect one or two paid plans once real users arrive. Compare the total of all bills, not the headline price of the AI tool.
Sources
- Model Context Protocol, What is the Model Context Protocol (MCP)?, 2026 https://modelcontextprotocol.io/docs/getting-started/intro
- Anthropic, Connect Claude Code to tools via MCP, 2026 https://code.claude.com/docs/en/mcp
- Anthropic, Claude pricing, 2026 https://claude.com/pricing
- Supabase, Pricing, 2026 https://supabase.com/pricing
- Supabase, Row Level Security, 2026 https://supabase.com/docs/guides/database/postgres/row-level-security
- Vercel, Pricing, 2026 https://vercel.com/pricing
- Replit, Agent documentation, 2026 https://docs.replit.com/replitai/agent
- Floot, Pricing, 2026 https://floot.com/en/pricing