# Table of Contents

- [Getting Started Guide for Bolt.new - Bolt](#getting-started-guide-for-bolt-new-bolt)
- [Discussion Mode - Bolt](#discussion-mode-bolt)
- [Maximizing Token Efficiency: How to use less tokens - Bolt](#maximizing-token-efficiency-how-to-use-less-tokens-bolt)
- [Welcome to the Bolt.new Help Center - Bolt](#welcome-to-the-bolt-new-help-center-bolt)
- [Office Hours - Bolt](#office-hours-bolt)
- [Prompting Effectively: How to talk to Bolt - Bolt](#prompting-effectively-how-to-talk-to-bolt-bolt)
- [User Spotlight Recordings - Bolt](#user-spotlight-recordings-bolt)
- [How to Create Mobile Apps - Bolt](#how-to-create-mobile-apps-bolt)
- [Figma Integration with Anima - Bolt](#figma-integration-with-anima-bolt)
- [Authentication - Bolt](#authentication-bolt)
- [Database - Bolt](#database-bolt)
- [Manual Deployment - Bolt](#manual-deployment-bolt)

---

# Getting Started Guide for Bolt.new - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

How to Use Bolt: Tips & Tricks

Getting Started Guide for Bolt.new

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

This document represents a _starting point_ to help those interested in using Bolt to build their next application! Reviewing this document _before_ you start using [Bolt.new](http://Bolt.new)
 will be the most beneficial in helping you get the most out of using Bolt. However, if you’ve started already building, this document should still prove as a helpful guide to get the most out of Bolt!

That being said, many of you are builders and learn best by doing, and if that’s you, please feel free to start building on [Bolt.new](http://Bolt.new)
 now!

[​](#what-is-bolt%3F)

What is Bolt?
--------------------------------------

[Bolt.new](https://Bolt.new)
 is an in-browser AI web development agent that leverages StackBlitz’s [WebContainers](https://webcontainers.io)
 to allow for full stack application development. The application presents users with a simple, chat-based environment in which one prompts an agent to make code changes that are updated in real time in the WebContainers dev environment.

Bolt supports many of the most popular web langauges and frameworks, as well as integration with [Netlify](https://netlify.com)
 for deployment and hosting; [Supabase](https://supabase.com)
 for database, auth, and file storage; and [Expo](https://expo.dev)
 for mobile application development.

Screenshot taken of bolt.new landing page

It’s important to call out that we consider Bolt a _tool_ to help users build full stack web applications. It will require smart prompting by the user and some understanding of web development (either through experience or research) to build more complex applications!

[​](#how-does-it-work%3F)

How does it work?
----------------------------------------------

To start building with Bolt, users prompt Bolt by telling it what they want to create. In the example below, you can see that you can start an app with as few as 5 words!

However, users can improve the performance of Bolt as well as get better results by giving Bolt details and specificity on what they are looking to build. In the below example, the user clicked the  icon to create an enhanced prompt, but users can feel free to use their own words to provide as much detail as possible.

Prompt quality is one of the **best** ways to ensure that you are using Bolt most effectively. The more specificity you are able to provide Bolt, the better your results should be!

### 

[​](#what-is-an-llm%3F)

What is an LLM?

LLM stands for Large Language Model. Bolt generates code by leveraging [Anthropic’s Claude 3.5 Sonnet LLM](https://www.anthropic.com/news/claude-3-5-sonnet)
, which provides robust [programming performance](https://www.swebench.com/)
. OpenAI’s ChatGPT is another popular LLM that you may have heard of or used yourself.  
  
**Note:** Customer data from [Bolt.new](http://Bolt.new)
 is never used to train Claude 3.5 Sonnet or 3.7 Sonnet.

Without getting too detailed, LLMs essentially work as a very smart autocomplete. It doesn’t necessarily ‘know’ information, but based on all of the training information it has been fed, it is able to generate ‘new’ thoughts based on patterns that it detected during training.

In the case of Bolt, the LLM is helping you generate code that aligns with your prompt, based on similar applications with similar specifications that it has been trained on.

We’ve actually used an LLM to help come up with the explanation in this section of what an LLM is!

### 

[​](#what-are-tokens%3F)

What are tokens?

Understanding tokens and token usage is a critical piece of ensuring that you use Bolt effectively.

A simple definition of tokens:

> Tokens are small pieces of text

“I”, “love”, “cats”, “!” are all examples of a token!

LLMs process text as tokens, analyzes them, and then predicts the next token(s) to generate a response.

**Token limits**: LLMs can only handle a certain number of tokens at a time and the total includes both:

*   the input you give (e.g., a long question or document)
*   the output it generates (e.g., the response, or the code you get back)

**Costs:** if you’re using an LLM through a paid service (like you are with Bolt), costs are often calculated based on the number of tokens processed. Fewer tokens = lower cost.

In this table, you can find a _rough_ guide for estimating token costs for code tasks:

As you can imagine, the larger and more complex your app grows, the more expensive (both from a token perspective as well as literal costs) it will become!

Please note, the costs can grow very quickly, so please refer to this helpful learning material to ensure you don’t waste tokens unnecessarily!

[Maximizing Token Efficiency: How to use less tokens](https://www.notion.so/Maximizing-Token-Efficiency-How-to-use-less-tokens-13fd971055d680059deefd017314ffd3?pvs=21)

### 

[​](#how-much-does-it-cost%3F)

How much does it cost?

current as of Jan 7, 2025, may be different upon viewing pricing page today

current as of Jan 7, 2025, may be different upon viewing pricing page today

Important to note regarding token usage. **Tokens on a subscription plan do not rollover month to month.** If you are on the Pro 100 plan and only use 20 million tokens, upon your next billing cycle, you will go back 55M tokens, NOT 75M tokens.

However if you purchase extra tokens as as token reload, those _will_ rollover into the new month as long as you are on a paid subscription.

### 

[​](#can-i-really-build-a-full-stack-application-with-bolt%3F)

_**Can I really build a full-stack application with Bolt?**_

Yes! Below you will find examples of many users who were able to successfully build, deploy, and launch using Bolt!

If you go to the [Video Tutorials](https://www.notion.so/Bolt-new-Help-Center-134d971055d6806ab43af53c850aedc1?pvs=21)
 section of our Help Center, you can find many use cases of users that have successfully launched their applications through Bolt!

While we continue to improve deep integration with services for authentication (e.g. OAuth) and database (e.g. Supabase), resolving errors that arise when using these services often requires additional technical research (such as through official documentation or another LLM) into the problem.

[​](#using-bolt-%E2%80%9Ccorrectly%E2%80%9D)

Using Bolt “correctly”
----------------------------------------------------------------------

Bolt, like any other LLM really boils down to _prompting_ effectively to get Bolt to do what you need / want it to do. Again, Bolt is simply a tool that developers and non-developers alike can use to build fully functioning applications, and learning how to prompt effectively is using your tool most effectively!

We **highly** recommend that you spend about 1 hour or more reading through the content found here on [Prompting Effectively: How to talk to Bolt](https://www.notion.so/Prompting-Effectively-How-to-talk-to-Bolt-13fd971055d6801b9af4e965b9ed26e2?pvs=21)
 as well as doing _more external research_ on prompt engineering, a subject that continues to grow as far as tips and tricks daily.

[​](#do-i-need-to-know-how-to-code%3F)

Do I need to know how to code?
------------------------------------------------------------------------

The short answer: no!

However, you do need to be very clear with Bolt about:

*   **what** you want Bolt to do
*   **how** it should feel for a user of your web application
*   **what** _success_ looks like

Keeping principles like these in mind when prompting Bolt will increase performance and improve your chances of successfully building through Bolt.

We _**highly recommend**_ users to do research on LLMs along with technical issues that they run into outside of Bolt as LLMs have the potential to run into error loops and cannot auto-resolve all issues.

[Overview](/docs/introduction)
[Discussion Mode](/docs/discussion-mode)

On this page

*   [What is Bolt?](#what-is-bolt%3F)
    
*   [How does it work?](#how-does-it-work%3F)
    
*   [What is an LLM?](#what-is-an-llm%3F)
    
*   [What are tokens?](#what-are-tokens%3F)
    
*   [How much does it cost?](#how-much-does-it-cost%3F)
    
*   [Can I really build a full-stack application with Bolt?](#can-i-really-build-a-full-stack-application-with-bolt%3F)
    
*   [Using Bolt “correctly”](#using-bolt-%E2%80%9Ccorrectly%E2%80%9D)
    
*   [Do I need to know how to code?](#do-i-need-to-know-how-to-code%3F)

---

# Discussion Mode - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

How to Use Bolt: Tips & Tricks

Discussion Mode

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

### 

[​](#what-is-discussion-mode%3F)

What is Discussion Mode?

Bolt.new Discussion Mode offers project-specific insights without generating any code. This feature leverages [Gemini 2.0 Flash](https://deepmind.google/technologies/gemini/flash/)
 with [search grounding](https://cloud.google.com/vertex-ai/generative-ai/docs/grounding/overview)
, enabling the model to dynamically access both our support documentation and sources from the internet. Discussion mode provides high-quality, up-to-date answers about the wide range of technologies you use in building your application.

### 

[​](#key-features)

Key Features

*   **Project context awareness**: Every discussion message includes your project codebase for context-aware responses, as well as the 6 most recent messages.
    
*   **Search grounding**: When the AI answers a question, if necessary it pulls in real-time, up-to-date information from trusted sources like Google Search instead of just relying on what it was trained on. This helps ensure the answers are accurate, relevant, and not outdated. When a search has been conducted, the source(s) will be displayed at the top of the response.  
      
    For example:
    
    *   If you ask about the **latest Stripe API updates**, the AI won’t just rely on old knowledge, it will **search for the latest documentation** and give you a more reliable answer.
    *   If you ask about **a bug in a popular library**, it can check forums or support pages for the most recent solutions.
*   **Quick Action buttons**: After every discussion mode response, users can take immediate actions such as:
    
    *   “Implement this plan” (auto-switches to Build Mode to apply changes)
    *   “Show an example”
    *   “Refine this idea”
    
    The exact quick action buttons are contextual and will vary based on your project and what you are discussing.
    
*   **Non-code discussions**: Allows users to debug issues, receive tool recommendations, and get product or project strategy guidance without generating code. No code is generated in Discussion Mode.
    
*   When in Build Mode, if an error is generated, you have an option to discuss it first and debug, before fixing.
    

### 

[​](#how-to-use-discussion-mode)

How to use Discussion Mode

In the Bolt prompt box, click the chat icon to toggle between Discussion Mode and Build Mode.

Next, start your discussion! Think of Discussion Mode as having a smart teammate who you can talk things through with. It’s excellent for weighing trade-offs, trying to debug something, or when you just need a second opinion. Discussion Mode gives you space to do that—with full awareness of your project—without jumping straight into code.  
  

Sources that Discussion Mode uses are displayed at the top. You can click any of these to read the source material in more detail. At the bottom of the response are **quick action** buttons. For example, clicking “Open package.json” opens the respective file in the editor:

Since Discussion Mode has the entire context of your project, there are a wide range of use cases, such as:

*   Debugging assistance
*   Recommendations on tools, libraries and APIs
*   Product/project decision-making
*   Suggestions on how to improve design
*   Suggestions for new features
*   Understanding and integrating external APIs
*   Generating implementation plans for later execution
*   Use the Inspector tool to highlight a component within a page, and discuss potential changes

For example, if we ask how to add real-time data in Discussion Mode, Bolt provides us a plan:

Here, the quick action buttons give us the option to implement the plan:

Which will switch Bolt back to Build Mode to generate code.

[Getting Started Guide for Bolt.new](/docs/getting-started)
[Maximizing Token Efficiency: How to use less tokens](/docs/maximizing-token-efficiency)

On this page

*   [What is Discussion Mode?](#what-is-discussion-mode%3F)
    
*   [Key Features](#key-features)
    
*   [How to use Discussion Mode](#how-to-use-discussion-mode)

---

# Maximizing Token Efficiency: How to use less tokens - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

How to Use Bolt: Tips & Tricks

Maximizing Token Efficiency: How to use less tokens

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

Please review the content below carefully. If it does not resolve your issue, we encourage you to explore our [Education & Tutorials section](/docs/introduction)
 before reaching out to [Support](/faqs/support)
. If you need us, we’re here to assist you and will do our best to help! 

We purchase [tokens](https://docs.anthropic.com/en/docs/resources/glossary#tokens)
 from Anthropic, defined by them as: “the smallest individual units of a language model, and can correspond to words, subwords, characters, or even bytes (in the case of Unicode).” When users interact with Bolt, tokens are consumed in three primary ways: chat messages between the user and the LLM, the LLM writing code, and the LLM reading the existing code to capture any changes made by the user.

**Our goal is for Bolt to use as few tokens as possible to accomplish each task.** As such, the team is hard at work [continuing to ship](https://github.com/stackblitz/bolt.new/issues/678)
 product changes that increase token efficiency.

Below are a number of tips you can currently implement to maximize token efficiency:

*   **Avoid Repeated Automated Error “Fix” Attempts**
    
    Continuously clicking the automatic “fix” button can lead to unnecessary token consumption. After each attempt, review the result and refine your next request if needed. There are programming challenges that the AI cannot solve automatically, so it is a good idea to do some research and intervene manually if it fails to fix automatically.
    
*   **Add Error Handling To Your Project**
    
    If you find yourself stuck in an error loop, a useful strategy is to prompt the AI to enhance error handling and implement detailed logging throughout the problematic area. The AI excels at inserting robust error logs, even at a granular level, such as between functions or key steps. These logs provide valuable feedback that the AI can use to better understand the root cause of the issue. The additional logging provides more precise information when the error occurs again. With this detailed feedback, the AI can make more accurate adjustments to fix the issue.
    
*   **Leverage the Rollback Functionality**
    
    Use the [rollback feature](https://x.com/stackblitz/status/1844839379270836266)
     to revert your project to a previous state without consuming tokens. This is essentially an undo button that can take you back to any prior state of your project. This can save time and tokens if something goes wrong with your project. Keep in mind that there is no “redo” function though, so be sure you want to revert before using this feature because it is final: all changes made after the rollback point will be permanently removed.
    
*   **Crawl, Walk, Run**
    
    Make sure the basics of your app are scaffolded before describing the details of more advanced functionality for your site.
    
*   **Use Specific and Focused Prompts**
    
    When prompting the AI, be clear and specific. See [here](https://support.bolt.new/Prompting-Effectively-13fd971055d6801b9af4e965b9ed26e2)
     for more information on prompting most effectively. Direct the model to focus on certain files or functions rather than the entire codebase, which can improve token usage efficiency. This approach is not a magic fix, but anecdotally we’ve seen evidence that it helps.
    
*   **Reduce the Size of your project**
    
    As your project grows, more tokens are required to keep the AI in sync with your code. Larger projects (and longer chat conversations) demand more resources for the AI to stay aware of the context, so it’s important to be mindful of how project size impacts token usage.
    
    This could be accomplished by breaking a large app into smaller chunks, and glueing it all back together outside of Bolt later. For example, separate backend and frontend into separate projects is a common developer pattern. This could be challenging for less experienced developers.
    
*   **ADVANCED USERS ONLY: .bolt/ignore**
    
    In every bolt project, if you open it in StackBlitz you can edit a file called .bolt/ignore, and in this file you can list out any folders or folders that should be excluded from the AI context window. For example, here is our vite react starter’s ignore files: [https://stackblitz.com/edit/vite-shadcn?file=.bolt%2Fignore](https://stackblitz.com/edit/vite-shadcn?file=.bolt%2Fignore)
    . Any files listed there will be completely invisible to the AI, and will clear up space in the context window. You’ll need to edit the .bolt/ignore file in StackBlitz and then reopen the project in bolt for the changes to take effect. Please note: hiding files from the AI can have unintended consequences as it is no longer aware of your entire project. This approach is very powerful, but is only recommended for advanced users who can make informed decisions about what can safely be excluded, and understand/resolve issues that may arise from this approach.
    
*   **Advanced Strategy: Reset the AI Context Window**
    
    If the AI seems stuck or unresponsive to commands, resetting the AI context window can help. To do this, you will open your and fork your project in StackBlitz, followed by reopening the forked project in Bolt.
    
    1.  With your project open in Bolt, click Open in StackBlitz at the top-right of page.
    2.  In StackBlitz, click Fork at the top-left of the page. This will create a fork of your current project.
    3.  Rename this project as you see fit.
    4.  Return to the StackBlitz dashboard by clicking the lighting bolt icon at the top-left.
    5.  Open your forked project. Then click Open in bolt.new.
    6.  You should now see your forked project open in Bolt without the previous chat history.

[Discussion Mode](/docs/discussion-mode)
[Prompting Effectively: How to talk to Bolt](/docs/prompting-effectively)

---

# Welcome to the Bolt.new Help Center - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

Education & Tutorials

Welcome to the Bolt.new Help Center

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

Please review the content below carefully before reaching out to [Support](/faqs/support)
.

[​](#education-%26-tutorials)

Education & Tutorials
------------------------------------------------------

[Getting Started Guide\
---------------------](/docs/getting-started)
[Maximizing Token Efficiency\
---------------------------](/docs/maximizing-token-efficiency)
[Prompting Effectively\
---------------------](/docs/prompting-effectively)
[Mobile Apps\
-----------](/docs/how-to-create-mobile-apps)

[Getting Started Guide for Bolt.new](/docs/getting-started)

---

# Office Hours - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

Office Hours

Office Hours

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

[​](#live-here-on-youtube)

Live [here on YouTube](https://www.youtube.com/@boltdotnew)
.
-------------------------------------------------------------------------------------------

1

Bolt Office Hours: Week 1

2

Bolt Office Hours: Week 2

3

Bolt Office Hours: Week 3

4

Bolt Office Hours: Week 4

[Figma Integration with Anima](/docs/figma)
[Overview](/docs/users-spotlight)

---

# Prompting Effectively: How to talk to Bolt - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

How to Use Bolt: Tips & Tricks

Prompting Effectively: How to talk to Bolt

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

Please review the content below carefully. If it does not resolve your issue, we encourage you to explore our [Education & Tutorials section](/docs/introduction)
 before reaching out to [Support](/faqs/support)
. If you need us, we’re here to assist you and will do our best to help!

[​](#prompting-q%26a%3A)

Prompting Q&A:
------------------------------------------

How can I automatically enhance my prompt?

[https://x.com/sulco/status/1846922673739153580](https://x.com/sulco/status/1846922673739153580)

I only want Bolt to modify a specific file(s), what do I do?

Right-click the file(s) of interest in the Bolt code editor and select [“Target file”](https://x.com/stackblitz/status/1854205385344999477)
 to have Bolt only make changes to those file(s).

I don’t want Bolt to modify a specific files(s), what do I do?

Right-click the file(s) of interest in the Bolt code editor and select [“Lock file”](https://x.com/stackblitz/status/1854205385344999477)
 to prevent Bolt from making changes to those file(s).

What is a simple example of a ‘good’ prompt?

There are many ways to prompt Bolt to get it to do what you want, but this [example](https://twitter.com/paulgosnell/status/1879544688820273571?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1879544693991883167%7Ctwgr%5E0a32d15e2a0b47338daee94e9b7286d13c821175%7Ctwcon%5Es2_&ref_url=https%3A%2F%2Fsupport.bolt.new%2FPrompting-Effectively-How-to-talk-to-Bolt-13fd971055d6801b9af4e965b9ed26e2)
 is a good one to consider when trying to decide if you are prompting ‘well.

### 

[​](#prompting)

Prompting

*   User created prompting [guide](https://www.notion.so/1371ce6babea808ba6ded876e75e5921?pvs=21)
    
*   Begin Broad and Refine
    
    *   Start with general architecture, including framework
    *   Add individual components and features
    *   Work in details in each component with small, specific prompts
*   **Use Specific and Focused Prompts:**
    
    When prompting the AI, be clear and specific. Direct the model to focus on certain files or functions rather than the entire codebase, which can improve token usage efficiency. This approach is not a magic fix, but anecdotally we’ve seen evidence that it helps. Some specific prompting strategies that other users have reported as helpful are below, and a ton more can be found in the  [comment thread below](https://github.com/stackblitz/bolt.new/issues/678#issuecomment-2460475629)
    

> If you have specific technologies you want to use (IE Astro, Tailwind, ShadCN), say that in your initial prompt.Mention Specific Code Segments or Classes: When possible, refer to specific divs, classes, or functions to guide Bolt to the exact place where you want the changes made. You can do this manually in chat or by highlighting the relevant code in your project and [using the “Ask Bolt” functionality](https://x.com/stackblitz/status/1846953280972509616)
> . Use the Prompt Enhancer function: The better the prompt, the higher quality of the output — bolt․new can help you improve your prompts automatically with the [prompt enhancement feature](https://x.com/sulco/status/1846922673739153580)
> ! Be Specific About What Should Remain Unchanged: Mention explicitly that no modifications should occur to other parts of the site.Batch multiple simple to explain instructions into one message. For example you can ask Bolt to change the color scheme, add mobile responsiveness, and restart the dev server safely all in one message.

*   \*\*ADVANCED FEATURE: \*\*`.bolt/prompt`
    
    If you open a Bolt project in SB you will find the following `prompt` file:
    
    [.bolt/prompt](https://x.com/peachpanther/status/1860110256053059962)
    
    Here, you can add custom instructions for the AI. For example, here is our Vite React starter prompt file:
    
    [https://stackblitz.com/edit/vite-shadcn?file=.bolt%2Fprompt](https://stackblitz.com/edit/vite-shadcn?file=.bolt%2Fprompt)
    .
    
    Any instructions listed there will be taken into account on each prompt inside Bolt. You’ll need to edit the `.bolt/prompt`file in StackBlitz and then reopen the project in Bolt for the changes to take effect.
    

[Maximizing Token Efficiency: How to use less tokens](/docs/maximizing-token-efficiency)
[How to Create Mobile Apps](/docs/how-to-create-mobile-apps)

---

# User Spotlight Recordings - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

User Spotlight

User Spotlight Recordings

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

### 

[​](#bolt-tutorial-for-beginners-with-the-bolt-ceo-eric-simons)

Bolt tutorial for beginners with the Bolt CEO Eric Simons

### 

[​](#how-to-turn-your-idea-into-an-app-in-minutes-with-bolt-new)

How to Turn Your Idea into an App in Minutes with Bolt.new

### 

[​](#building-an-app-from-scratch-with-bolt-new-full-beginners-guide)

Building an App from Scratch with Bolt.new (Full Beginners Guide)

### 

[​](#build-a-%241m-app-using-only-ai%E2%80%94no-code-needed-bolt-new-tutorial)

Build a $1M App Using ONLY AI—No Code Needed (Bolt.new Tutorial)

### 

[​](#how-i-built-a-pay-to-use-dating-app-with-bolt-new%2C-chatgpt%2C-%26-make-com-stripe-%2B-firestore)

How I Built a Pay-to-Use Dating App with Bolt.new, ChatGPT, & Make.com (Stripe + Firestore)

### 

[​](#how-to-build-a-%2410%2C000-website-in-30-minutes-ai-%2B-no-code)

How To Build A $10,000 Website In 30 Minutes (AI + No Code)

[​](#user-spotlight)

User Spotlight
--------------------------------------

### 

[​](#how-to-build-a-saas-using-bolt-new-use-the-lapp-framework)

How To Build a SAAS using Bolt.new (Use the LAPP Framework)

[Overview](/docs/office-hours-recording)
[Database](/docs/database)

---

# How to Create Mobile Apps - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

How to Use Bolt: Tips & Tricks

How to Create Mobile Apps

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

The instructions below will help you get your app to your users. If you would rather learn by watching a tutorial you can do that right here:

### 

[​](#prerequisites)

Prerequisites

In order to get your app delivered to your users make sure you have each of the following:

*   Node LTS and Git
    
*   Expo Account → expo.dev
    
*   **Apple Developer account:**
    
     To create one, see 
    
    [Apple Developer Portal](https://developer.apple.com/account/)
    
*   **Google Play Developer Account:**
    
     Must have a paid developer account. For details on setting one up, visit the 
    
    [Google Play sign-up page](https://play.google.com/apps/publish/signup/)
    

### 

[​](#intro-to-eas)

Intro to EAS

[EAS (Expo Application Services)](https://docs.expo.dev/eas/)
 is a cloud service for Expo and React Native apps, built by the Expo team. This guide shows you how to use EAS to build and deploy your project efficiently.

### 

[​](#install-eas-cli)

Install EAS CLI

Use the Expo CLI tool to interact with EAS from your terminal. Install it by running:

    npm i -g eas-cli
    

After installation, log in to your Expo account:

    eas login
    

Follow the prompts to complete the login process.

### 

[​](#download-your-project)

Download Your Project

After building your app with Bolt, download the code and open it in your favorite IDE (e.g., VS Code, Cursor). Then, open a terminal and install the project dependencies by running:

    npm install
    

To ensure all dependencies are up to date, run:

    npx expo-doctor --check
    

This command validates the project’s dependencies and prompts you to fix any issues it detects.

### 

[​](#setting-up-eas-in-your-project)

Setting up EAS in your project

Before continuing, this is a good time to update your app’s name if needed. Open the `app.json` file and update the `"name"` field. For example:

    "name": "Shopping List"
    

Also, update the `"slug"` to match your app name. Keep it lowercase and replace spaces with dashes. This value cannot be changed later. For example:

    "slug": "shopping-list"
    

To initialize a new project in EAS, open a terminal and run:

    eas init
    

The CLI prompts you to select the account that should own this project. After making your selection, press **Enter** and confirm the project creation.

### 

[​](#configure-eas-build)

Configure EAS Build

EAS Build is one of EAS’s services, providing cloud-based app building. In your project’s terminal, run:

    eas build:configure
    

This command configures both Android and iOS projects. After the configuration, you should see something similar to the screenshot below.

### 

[​](#deploying-web-app)

Deploying web app

After you configure EAS Build, you can start deploying. Deploy the web version first.

In your terminal, run:

    npx expo export --platform web
    

This command generates a `dist` folder in your project’s root directory containing the web app bundle.

Next, run:

    eas deploy --prod
    

Select a preview URL for your project and press **Enter** to deploy.

That’s it! now you can share your production URL with friends.

### 

[​](#deploying-ios-app)

Deploying iOS app

You need an Apple Developer account for this step.

In your terminal, run:

    eas build -s
    

Select `ios` as the platform. This command builds your app and submits it to the Apple App Store. If this is your first time running it, EAS will also:

*   Create an app in your Apple Developer account.
    
*   Set up an internal TestFlight group and add the build to it.
    
*   Add members from your Apple Developer account to the TestFlight group.
    

When the build is ready, you should receive an invitation email from TestFlight to start testing your app.

Follow the CLI prompts. In most cases, you can press **Enter** to accept the defaults. If you want to learn more about each step, refer to the [EAS Docs](https://expo.dev/eas)
.

### 

[​](#deploying-android-app)

Deploying Android app

You need a Google Play Developer account for this step.

In your terminal, run:

    eas build -p android
    

This command triggers a production build for Android. Once the build is ready, follow the instructions in the CLI to download it.

Next, go to your Google Play Console account and:

1.  Create a new app.
    
2.  Set up a new internal release group.
    
3.  Add testers.
    
4.  Upload the build from EAS to the internal testing group.
    

At this point, you can add more testers and share the testing link with them.

### 

[​](#conclusion)

Conclusion

At this point, you should have a deployed website, and your native app should be distributed for internal testing across the App Store and Google Play.

When you’re ready to go to production, fill in your app’s details on each store and send the build for review. Once approved, your app will be available for the world to download.

[Learn more about deploying your app](https://docs.expo.dev/deploy/build-project/)
.

[Prompting Effectively: How to talk to Bolt](/docs/prompting-effectively)
[Figma Integration with Anima](/docs/figma)

On this page

*   [Prerequisites](#prerequisites)
    
*   [Intro to EAS](#intro-to-eas)
    
*   [Install EAS CLI](#install-eas-cli)
    
*   [Download Your Project](#download-your-project)
    
*   [Setting up EAS in your project](#setting-up-eas-in-your-project)
    
*   [Configure EAS Build](#configure-eas-build)
    
*   [Deploying web app](#deploying-web-app)
    
*   [Deploying iOS app](#deploying-ios-app)
    
*   [Deploying Android app](#deploying-android-app)
    
*   [Conclusion](#conclusion)

---

# Figma Integration with Anima - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

How to Use Bolt: Tips & Tricks

Figma Integration with Anima

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

### 

[​](#getting-started)

Getting Started

On the [bolt.new](https://bolt.new)
 homepage, click “Import from Figma”:

Next, paste a Figma frame URL into the text field and click “Import Figma frame into Bolt”:

### 

[​](#figma-frames)

Figma Frames

You must link to a [Figma frame](https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma-Design)
. Right-click the frame > Copy/Paste as > Copy link to selection and then paste this URL into Bolt as above: Alternatively, prepend the Figma frame URL with bolt.new:`https://bolt.new/figma.com/...`

### 

[​](#making-the-design-responsive)

Making the Design Responsive

You can use Figma’s auto layouts and Anima’s breakpoints to make the design responsive as [described here](https://support.animaapp.com/en/articles/6431384-create-responsive-designs-in-figma)
.

For best results, it is important to follow Figma best practices in Anima as [desribed here](https://support.animaapp.com/en/articles/6300035-figma-best-practices)
.

Alternatively, you can prompt Bolt to make the design interactive.

[How to Create Mobile Apps](/docs/how-to-create-mobile-apps)
[Overview](/docs/office-hours-recording)

On this page

*   [Getting Started](#getting-started)
    
*   [Figma Frames](#figma-frames)
    
*   [Making the Design Responsive](#making-the-design-responsive)

---

# Authentication - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

Video Tutorials

Authentication

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

[​](#use-supabase-in-your-bolt-new-app%3A-a-6min-guide)

Use Supabase in your bolt.new app: a 6min guide
----------------------------------------------------------------------------------------------------------

[​](#adding-user-authentication-to-your-bolt-new-app)

Adding user authentication to your bolt.new app
--------------------------------------------------------------------------------------------------------

[Database](/docs/database)
[Manual Deployment](/docs/manual-deployment)

On this page

*   [Use Supabase in your bolt.new app: a 6min guide](#use-supabase-in-your-bolt-new-app%3A-a-6min-guide)
    
*   [Adding user authentication to your bolt.new app](#adding-user-authentication-to-your-bolt-new-app)

---

# Database - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

Video Tutorials

Database

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

[​](#use-supabase-in-bolt)

Use Supabase in Bolt
--------------------------------------------------

[​](#build-an-instagram-clone-with-bolt)

Build an Instagram Clone with Bolt
------------------------------------------------------------------------------

[​](#how-to-add-a-database-to-your-bolt-app)

How to add a database to your Bolt app
--------------------------------------------------------------------------------------

[Overview](/docs/users-spotlight)
[Authentication](/docs/authentication)

---

# Manual Deployment - Bolt

[Bolt home page![light logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/dark.svg)![dark logo](https://mintlify.s3.us-west-1.amazonaws.com/stackblitz/logo/light.svg)](https://support.bolt.new)

Search or ask...

Search...

Navigation

Video Tutorials

Manual Deployment

[Home](/home)
[Guides](/docs/introduction)
[Integrations](/integrations/overview)
[FAQs](/faqs/overview)
[Bugs & Features](/bugs-and-features/overview)
[Community & News](/community-and-news/overview)

[​](#netlify-tutorial-%E2%80%93-drag-and-drop-deploys-on-netlify)

Netlify Tutorial – Drag and drop deploys on Netlify
------------------------------------------------------------------------------------------------------------------------

[Authentication](/docs/authentication)

On this page

*   [Netlify Tutorial – Drag and drop deploys on Netlify](#netlify-tutorial-%E2%80%93-drag-and-drop-deploys-on-netlify)

---