BUILDING SOFTWARE
Best Vibe Coding Tools for Building and Shipping Apps
Compare Lovable, Bolt, Replit Agent, Claude Code, Cursor and v0 by project type, code handoff, limitations and cost questions before choosing your build route.
On this page
Find your next step
9 resourcesVibe Coding Projects with Documented Builds
Browse documented vibe coding projects by output or builder. Open the live project and the original maker account to see what the build covered.
Read more
Lovable vs Bolt for Building the Same App
Decide by the app you need to ship and the services you will maintain afterward. Both offer GitHub integration; moving source code still leaves data, identities and deployment to account for.
Read moreBest Claude Code Skills for Design and Development
Compare Claude Code skills for interface design, UI review and development planning. Check their sources and scope, then follow the client-specific installation guide.
Read moreBest MCP Servers by Task and Access Scope
Compare Context7, Supabase, Playwright, Figma and Stripe MCP by task, connection, access scope and usage requirements. Choose the server that supplies your missing context or action.
Read moreVibe Coding Tech Stack for Shipping a Small App
A stack is a set of responsibilities: who stores the data, identifies the user, collects payment and runs the app. Choose those boundaries around the first complete customer journey.
Read moreLovable SEO Checklist for Published Apps
Check the published page before adding a rendering workaround. Lovable’s newer and older stacks have different native rendering paths; the next work is useful content, clear URLs and links that lead to them.
Read more
21st.dev React Components: Try One in an Existing Project
Choose a 21st.dev component, check its own setup instructions, and review the files before using it in your project.
Read more
Magic UI Components: Pick and Install One React Component
Choose a Magic UI component for a real screen, check the current or legacy installation path, and try it in your existing React app.
Read more
React Bits with Tailwind or CSS: Choose a Source Variant
Pick a React Bits variant for your JavaScript or TypeScript project, install one effect, and check that the copied code matches your stack.
Read moreLovable
BoltFrom a product task to a working app
01Start with a new app, existing repository or interface task.
02Compare each tool’s documented workflow and what remains outside code handoff.
03Use the same complete trial before judging speed, cost or fit.
Start with one practical task
Pick a small app with one working interaction. Compare how each route handles the first working preview, source handoff and deployment. Count the manual work needed for the second edit as well as the first generation.
Best vibe coding tools by the work you need to do
Start with the project you have: a new web app, an existing repository or an interface prototype. This shortlist compares documented workflows and the checks that can change your choice. It does not assign speed scores or claim that one tool is best for every project.
| Tool | Good starting task | Working environment and handoff | Check before choosing | Cost questions |
|---|---|---|---|---|
| Lovable | Turn a natural-language brief into a web app | Builder workflow with documented GitHub integration | Confirm backend integrations; source handoff does not move data or secrets | Check current plan limits and the backend/hosting the app needs |
| Bolt | Build a JavaScript web app; evaluate its documented Expo route for mobile | Browser builder with documented GitHub integration | Check the target runtime and integrations; a web preview is not a mobile release | Check current build limits and deployment requirements |
| Replit Agent | Start and iterate on an app in a browser workspace | Agent workflow inside the Replit development environment | Confirm the supported stack, app configuration and production deployment path | Check what the selected plan includes for agent work and hosting |
| Claude Code | Change an existing repository and verify a small implementation | Repository workflow using project instructions and available development tools | Review the diff and run the project’s checks; code changes still need a deployment path | Check account usage limits and external service costs |
| Cursor | Edit an existing codebase while keeping its project context | Code editor workflow; project and personal skills have documented scopes | Check local versus remote skill and dependency availability | Check the current account plan and model usage rules |
| v0 | Explore an interface or app starting point from a prompt | Use the documented generation and integration workflow | Check whether generated output fits the existing stack, data and accessibility needs | Check current generation limits and the deployment services required |
Choose the workflow before the tool
For a prompt-first web app, compare Lovable and Bolt around the project you want to own: backend choice, code access and deployment workflow. For an existing repository, choose an agent workflow that can follow its conventions and verify changes in context.
| Task | Starting point | Check first |
|---|---|---|
| Build a new web app | Lovable or Bolt workflow | Backend, export and hosting fit |
| Work in an existing repository | A repository-aware coding agent | Project instructions and a small verification task |
| Improve an interface | Design skills and UI resources | Existing tokens, accessibility and narrow screens |
| Connect external context | A task-specific MCP server | Client support and access scope |
Use the same small trial to choose between tools
For a new app, use one journey such as collecting a form response and reading it back. For an existing repository, use one bug fix or interface change. Keep the required screens, input, data and success condition the same across candidates.
- Inspect the working result, error handling and permissions, not only the preview image.
- Review source changes and confirm how the next developer can continue the project.
- List the database, identity, secrets and hosting steps that remain outside code export.
- Compare plan limits and the effort required to correct the result; record observations before calling a tool cheaper or faster.
Build one complete user journey
Define an input, an outcome and the states between them. For a form product, that might be creating a form, receiving a response and exporting the result. Work through errors and permissions before adding adjacent features.
Learn from products with build records
A product gallery is useful when you can connect the resulting app to a maker account and a concrete use case. Explore the apps collection for the task, platform and original build context; AI-assisted creation does not imply that the product itself has AI features.
A few more details
Which vibe coding tool should I start with?
For a new app, compare the builder route against the required platform, backend and code handoff. For an existing repository, start with the editor or repository agent that fits the project’s instructions and runtime. Verify one complete user journey before committing to a larger build.
Does a low-cost plan include everything needed to launch?
Check the current plan at the publisher, then list the app’s hosting, database, identity and other service needs. A tool’s subscription and the operating cost of the resulting app are separate parts of the decision.
Sources & maker notes
Related guides & projects
View allVibe Coding Tech Stack for Shipping a Small App
A stack is a set of responsibilities: who stores the data, identifies the user, collects payment and runs the app. Choose those boundaries around the first complete customer journey.
Read moreBest Claude Code Skills for Design and Development
Compare Claude Code skills for interface design, UI review and development planning. Check their sources and scope, then follow the client-specific installation guide.
Read moreBest MCP Servers by Task and Access Scope
Compare Context7, Supabase, Playwright, Figma and Stripe MCP by task, connection, access scope and usage requirements. Choose the server that supplies your missing context or action.
Read moreVibe Coding Projects with Documented Builds
Browse documented vibe coding projects by output or builder. Open the live project and the original maker account to see what the build covered.
Read moreLovable vs Bolt for Building the Same App
Decide by the app you need to ship and the services you will maintain afterward. Both offer GitHub integration; moving source code still leaves data, identities and deployment to account for.
Read moreLovable Alternatives by Code Handoff and Hosting
The right alternative depends on what is pushing you away: interface work, the development environment or control after deployment. Bolt, v0 and Replit cover different parts of that move.
Read more