Every great product begins as a single idea—often fragile, sometimes urgent. This article opens with that moment: you have a concept and a drive to make it real. The guide maps a clear path from concept to deployed project so readers feel steady progress at each checkpoint.
Readers will learn how natural language turns into working code, why agent choice matters, and how Bolt Cloud removes hosting and database friction. This practical guide focuses on fast iterations, preview-driven design, and recovering with version history.
We present real examples and actionable tips for development and for when to edit code directly. By the end, ambitious professionals will know how to bring ideas into tangible apps—without getting stuck on infrastructure.
Key Takeaways
- Follow a stepwise process from setup to deploy to see measurable progress.
- Understand agent trade-offs to balance speed, tokens, and quality.
- Use Preview and Code View for rapid iteration and precise edits.
- Leverage Bolt Cloud to avoid hosting, domain, and database overhead.
- Examples show auth, data storage, and UI updates without extra setup.
- Publish quickly to a free subdomain, then add a custom domain if needed.
What Is Bolt.new and How It Works Today
This platform turns plain-language prompts into live applications that run as websites, web apps, or mobile apps. The process is conversational: describe a goal, the system interprets intent, and working code appears in preview or code view.
Who it serves: non-coders find a low-friction path to shipping; experienced developers keep control by editing the generated code and bringing preferred frameworks. Teams can switch between prompt-driven edits and manual coding as needed.
The cloud environment removes common friction. Databases, hosting, and domain management are provisioned together so builders do not juggle external services. Clear prompts yield more accurate results, while iterative prompts refine UI and backend logic.
Agents overview: Claude Agent vs v1 Agent
Choose an agent based on goals: production readiness or rapid prototyping. The right agent saves time, tokens, and rework.
| Agent | Best for | Speed | Token efficiency |
|---|---|---|---|
| Claude Agent (4.5 variants) | Production-quality builds, fewer errors | Moderate | Lower efficiency |
| v1 Agent | Rapid ideation and layout tests | Fast | High efficiency |
| Cloud services | Deploying sites and full-stack applications | One-click | Managed |
- Core workflow: conversational prompts to code for web and mobile applications.
- Typical examples: landing pages, e-commerce sites, CRMs, and SaaS tools that evolve through iterations.
Setting Up Your Workspace and Account
Creating an account and configuring the interface are simple moves that unlock a smooth development flow.
Sign up with Google, GitHub, or email; no credit card is required. This quick account process gets builders into a project without setup friction.
Create your account and sign-in options
Choose a sign-in method and follow the prompts. Access is immediate, so teams can start the first step of building an app in minutes.
Tour the interface: chat, preview, code editor, and project controls
The interface groups the main tools into clear panels. Use the chat box to write prompts. The Preview pane runs the app instantly.
Switch to Code View for precise edits in the built-in editor. Project controls include Version History and Publish, giving tight control over changes.
Choosing your agent for speed, quality, and token efficiency
Pick Claude Agent for production-grade output—opt for a Claude 4.5 model when you want more capability or speed. Choose v1 Agent for fast, token-light prototypes.
Turn on display token usage in General settings to watch consumption per prompt and keep iteration budgets predictable.
- Quick tip: Use the interface search to find files, then edit in the editor without leaving the project.
- Plan scope: Define a minimum viable scope to guide agent choice and keep the first step focused.
| Agent | Best for | Speed | Token use |
|---|---|---|---|
| Claude 4.5 | Production-quality builds | Moderate to fast | Moderate |
| v1 Agent | Rapid prototyping | Fast | Low |
| Managed Cloud | One-click deploy and hosting | One-click | Managed |
Write Your First Prompt and Generate a Working App
Start simple and specific: describe the core feature set you want so the system can infer UI, auth, and storage and return runnable code.
Example prompt to build an app from scratch
Begin with a clear, outcome-oriented request. For example: “Build a pet name picker app with dropdowns for animal and category, email sign-up and log in, and the ability to save favorite names.”
Submit via the arrow and sign in if prompted. Expect working results in a few minutes for modest scopes; larger feature sets may take more time.
Understanding results in Preview and iterating with prompts
Use the Preview page to test the user flow: pick an animal, choose a category, and generate names. Verify that auth appears and that favorites persist.
If you find UI quirks or minor errors, describe the symptom and desired fix in plain language—this often saves time versus immediate coding edits.
- Step: Start with one core flow so the first build app delivers value fast.
- Step: Test in Preview, then tighten prompts to refine UX or data flows.
- Tip: Enable token usage display to monitor token consumption while iterating.
For deeper prompt strategy and a guided course on phrasing, see the prompt engineering course.
Bolt.new Tutorials
This section lays out a hands-on sequence that turns a simple goal into a running app.
Beginner flow: step-by-step from idea to app
Start with one clear goal, run the first build, check the result in Preview, and iterate. This short cycle helps a maker validate the concept quickly and reduce wasted effort.
Using the Select tool to target changes on the page
The Select tool lets you click an element—like the site title—and apply a precise edit via a prompt. In the Pet Name Picker example, auth and a favorites database appear within minutes.
Managing changes with natural language prompts
Write prompts that explain the issue and the desired outcome. Be specific to save tokens and avoid rework.
Quick reference
| Action | Tool | When to use |
|---|---|---|
| Rename site title | Select tool | Targeted UI change on a page |
| Fix form validation | Chat prompts | Behavior tweaks without code |
| Recover earlier state | Version History | Undo risky edits |
Combine prompt-driven edits with quick code touch-ups. For guided walkthroughs and short videos, see the video walkthroughs.
Token Usage Explained and Controlled
Token consumption maps directly to the system’s effort: reading your files, reasoning about changes, and composing new code.
How tokens are used — The platform consumes tokens when it reads the project, thinks through edits, and builds updates. Plans price access by token use, so small changes typically cost less while complex builds take more time and tokens.
Turn on Display token usage in chat from General settings to monitor consumption per message. Check the Subscription panel to see remaining allocation and avoid surprises.
- Write concise, specific prompts and batch related edits to save tokens.
- Use light iterations for UI tweaks and reserve heavier passes for feature-level work.
- Test incrementally in Preview — catching issues early saves time and tokens.
- Choose the right agent: fast trials or higher-quality passes to improve final results.
| Change Type | Typical Token Cost | Recommended Action |
|---|---|---|
| Small UI tweak | Low | Single prompt, quick Preview test |
| Multiple related edits | Moderate | Batch prompts, one build step |
| Structural or new feature | High | Plan, run focused builds, validate incrementally |
Editing, Version History, and Restoring Changes
A clear version history turns risky experiments into safe, recoverable steps. Builders gain fast control when edits don’t go as planned. The interface stores snapshots so teams can review prior states and move confidently.
Access version history from the project title menu. Open a previous state in Preview, then click “Restore this version” and confirm to revert. This step undoes visual or functional changes without chasing scattered edits in code.
Why use it: the history creates an internal record of your project’s evolution and complements external version control when you pair the workspace with GitHub for backups and collaboration.
- Browse prior states, preview them, and restore when an iteration breaks the app.
- Undo risky changes faster than unpicking many edits; regain momentum in a single step.
- Name checkpoints as milestones so the project timeline stays navigable.
- If you spot errors after a change, restore the last stable version, test, then retry a focused fix.
Make a habit of creating a checkpoint after major merges or layout shifts; it’s lightweight insurance that keeps control tight and rollbacks predictable.
Code View for Precision and Zero-Token Edits
Precision editing in the code editor lets teams fix a bug or tweak UI without invoking the agent.
Click the code view icon to open the editor. Use the search box to jump to a string — for example, “Pet Name Picker” in App.tsx — make the change, and click Save.
Direct code edits consume zero tokens. Toggle back to Preview to validate immediately. This workflow preserves token budgets while giving tight control over critical parts of the app.
“When you need a surgical fix, nothing beats opening the file and correcting the line.”
- Use the editor for targeted fixes, refactors, or to resolve local errors.
- Use prompts for broad UI or feature rewrites that benefit from generative language.
- Document non-trivial edits so teammates understand the rationale later.
| Action | Best tool | Why |
|---|---|---|
| Change text or style | Editor | Precise, zero token cost |
| Major UI rethink | Prompt | Fast conceptual iterations |
| Fix runtime errors | Editor | Direct debugging and control |
Databases, Authentication, and Data Management in Bolt Cloud
When an app needs storage, the platform spins up a managed database automatically so teams can focus on features.
The cloud creates a database the moment your project requires persistent data. Builders can inspect tables, review activity logs, and view edge functions that run server-side logic.
Authentication is built in: enable sign-up, login, and user management without wiring third-party services. Secrets management stores API keys and env values so code stays clean and secure.
What to look for in the Console
- Tables and schema: review and adapt the data model as features evolve.
- Activity logs: trace operations and spot errors fast.
- Edge functions and secrets: centralize server logic and credentials for safety.
If you need external access or advanced workflows, claim your database and connect it to Supabase. For details on claiming and settings, see the cloud database settings.
Tip: Keep the schema aligned with user flows to avoid migration surprises later.
Hosting, Domains, and Publishing Your Project
Publishing should be the least painful part of development. A clear, repeatable flow helps teams ship demos and iterate quickly. The platform turns a tested build into a public website without extra provider sign‑ups.
One-click deploy to a free .bolt.host subdomain
Use the Publish action to push a live URL in seconds. This free .bolt.host address is ideal for previews, demos, and early user feedback.
Custom domains for Pro: managing domains inside Bolt
Pro accounts can connect custom domains directly from the project settings. DNS and domain options live beside your project so teams avoid context switching.
What the platform handles for you
Hosting, infrastructure, and publishing are centralized: builds, certificates, and deploy pipelines are managed in one place. That reduces coordination with external services and saves time.
- Deploy in seconds for fast feedback loops.
- Keep domain and DNS controls next to the project.
- Follow a short checklist: smoke-test in Preview, confirm key flows, publish, then validate live.
Ship smaller changes more often — the process lowers risk and improves the development experience.
Integrations, Tools, and Workflow Tips
Connecting a concise set of integrations keeps teams focused and moves a project from prototype to production without rework.
GitHub for backups and collaboration: link the repository to back up your project and enable pull-request reviews. Pair PRs with the platform’s version history for traceability and clear audit trails.
Design and platform extensions: import Figma assets to speed UI fidelity. Use Expo to extend an app to mobile, and integrate Stripe for secure payments and billing features.
- StackBlitz WebContainers power an in‑browser dev environment—fewer local setups and consistent builds for every developer.
- Agree on a lightweight workflow: prompt big changes, edit code for precision, create checkpoints, then push to GitHub and publish.
- Treat integrations as levers: add only what advances immediate goals to avoid overhead and confusing data flows.
For applications that span web and mobile, align shared components and data contracts early to reduce later refactors.
Conclusion
This guide gives a clear path so teams can move from concept to a live project with confidence. The article maps a repeatable workflow: prompt, preview, refine, edit code, and publish.
One concise step at a time keeps development fast and predictable. Use agent choice and token visibility to balance speed and quality. Rely on Version History and Code View to recover or make precise fixes.
Integrated databases, one-click hosting to a free subdomain, and domain controls reduce ops work. As you scale, lean on GitHub for collaboration, Figma for design, and tools like Stripe or Expo to extend capabilities for your apps.
Make sure to keep iteration cycles tight and maintain coding hygiene—this is the best way to bring ideas into reliable, production-ready apps.
FAQ
What is the quickest way to start building an app on Bolt.new?
Sign up, create a project, pick an agent, and write a clear prompt describing your app’s purpose and main screens. Use the preview to view the generated UI, iterate with focused prompts, and switch to Code View for precise changes when needed.
Who should use Bolt.new — non-coders or developers?
Both. Non-coders can assemble working apps through prompts and visual tools, while experienced developers benefit from the integrated code editor, version history, and GitHub integration for advanced customization and control.
How do agents differ — Claude Agent vs v1 Agent?
Claude Agent prioritizes conversational understanding and nuanced prompt handling, while v1 is optimized for speed and deterministic outputs. Choose based on the balance you need between quality, latency, and token use.
How do tokens get used when the platform reads, thinks, and builds?
Tokens are consumed during prompt processing, model reasoning, and when generating code or content. Reviewing long project files or iterating frequently increases token use; monitoring token display helps manage costs.
Where can I turn on token display to monitor costs in real time?
Enable token display in chat or project settings. The interface shows token counts per message and per generation so you can spot expensive iterations and adjust prompts or agent choice accordingly.
What strategies maximize token efficiency while iterating?
Summarize context before requests, send only diffs rather than full files, use concise prompts, select the faster agent when appropriate, and move small, deterministic edits into Code View to avoid model reprocessing.
How does Version History help manage mistakes?
Version History snapshots let you inspect past states, compare changes, and restore earlier versions. It gives a safety net for experimentation and supports collaborative workflows by tracking who changed what and when.
When should I use Code View instead of prompts?
Use Code View for exact edits, performance-critical tweaks, and zero-token changes that don’t require model insight. Use prompts for broader UI, content, or behavior changes where the agent can generate code or iterate quickly.
How does Bolt.new handle databases and authentication?
The platform can auto-create an app database and scaffolds authentication flows. You can inspect tables, logs, edge functions, and secrets in the dashboard, or claim the database and connect externally (for example, to Supabase) if desired.
Can I connect my project database to Supabase or another provider?
Yes — you can claim your internal database and configure external connections, including Supabase. The dashboard provides connection details and migration options to ensure continuity of data and auth.
What hosting and publishing options are available?
Projects can be deployed with one click to a free .bolt.host subdomain. Pro plans allow custom domains and DNS management inside the platform. The service handles hosting, SSL, and basic infrastructure concerns so teams can focus on product.
How do I add third-party tools like Stripe, Figma, or Expo?
Use the integrations panel to connect services. Stripe is supported for payments and subscriptions, Figma helps import designs, and Expo enables mobile builds. Follow each integration’s guided setup to exchange keys and configure webhooks.
Does Bolt.new integrate with GitHub for backups and collaboration?
Yes. GitHub integration enables repository backups, branch-based collaboration, and restores. It’s recommended for teams that require audit trails, code reviews, and CI/CD workflows.
What are WebContainers and how do they power the dev environment?
StackBlitz WebContainers run Node environments in the browser, offering fast local-like development without remote servers. They speed editing, preview, and testing inside the platform while keeping iteration fluid.
How do I claim or transfer ownership of a project or database?
Use the project settings to claim ownership or transfer projects. For databases, claim via the database panel to export credentials and connect externally. Follow the prompts to ensure access and permissions are updated correctly.
What is the Select tool and how does it help with UI changes?
The Select tool highlights elements on the page so you can target edits with natural-language prompts. It converts visual selections into precise instructions, reducing ambiguity and accelerating targeted iterations.
How can I manage changes made by prompts to avoid unintended edits?
Work in branches or snapshots, preview changes before publishing, use the Select tool to scope edits, and rely on Version History to revert if necessary. For critical code paths, prefer manual code edits and pull requests.
Are there best practices for writing prompts that generate reliable apps?
Start with a concise objective, list required screens and data models, provide examples of inputs/outputs, and break requests into small, testable iterations. Include constraints like performance or token limits when relevant.
How does the platform surface logs, edge functions, and secrets for debugging?
The dashboard offers logs and monitoring panels showing execution traces, function invocations, and error output. Secrets are centralized in a secure section; use them in runtime while keeping values hidden from collaborators as needed.
What options exist for teams and collaboration workflows?
Teams can use GitHub integration, shared projects, role-based permissions, and comment-driven reviews. Version History and branching help coordinate multiple contributors and preserve an audit trail for changes.
How are deployments rolled back if a published change breaks the app?
Use Version History or GitHub rollbacks to restore a prior state, or deploy a stable branch. The platform’s publishing controls and logs help identify the faulty change and recover quickly with minimal downtime.
