Bolt QuickStart guide

In this step-by-step guide, you’ll learn how to build, edit, and publish an example Pet Name Picker web app. You can follow along in your own browser window, or use the prompts as a springboard for your own ideas. If you’re already familiar with how to build an app in Bolt, you can skip this guide and read our article on Planning your app.

​

What you’ll need

• A Chrome or Chromium browser (Opera, Brave, Edge, Vivaldi, etc.)
• 10–15 minutes

Note that Bolt will build your app a bit differently from what you see in this guide. You’ll be able to follow along step by step, but your individual results will vary slightly.

​

Part 1: Build your app with your first prompt

You’re about to see Bolt in action for the first time. Follow these steps you’ll have a working app in just a few minutes!

1. Open Bolt.new in a new tab.
2. In the chatbox, paste this prompt:
   Build a pet name picker app with dropdowns that allow people to choose animal types (e.g. dog, cat, bird, lizard, etc.) and name categories (e.g. cute, celebrity puns, movie inspired, etc.) Create user email sign up and log in functionality and the ability to save favorite names when logged in.
3. Click the blue and white arrow to submit.
4. Sign in or sign up (Google, GitHub, or email:no credit card required). You won’t see this step if you’re already logged in.
5. Complete the survey.
6. Wait approximately five minutes while Bolt creates your app.
   Because your prompt includes features such as sign-up, login, and favorites, Bolt needs to set up databases, which takes a bit more time. Apps without database features usually build faster.
7. Try it out in the Preview window. Pick an animal, pick a category, and generate a name.

​

Understanding tokens

Bolt uses large language model (LLM) technology to process your prompts and build your site. You don’t need to know the technical details, but it’s helpful to know that LLMs work on a token system, and Bolt’s free and paid plans are based on them. Think of tokens as a measurement of Bolt’s efforts. Bolt “uses” tokens when it:

• reads
• thinks
• builds

The bigger and the more complex your website or app, the more tokens it will take to build it. The next step we’ll take in this guide is to determine how many tokens we used to build the first iteration of our app.

​

Part 2: Check token usage and turn on token display in chat

Check how many tokens your initial build used, and turn on the option to display token usage in chat. This helps you see how many tokens each of your prompts uses.

1. Click your profile icon in the top right of your screen, then click Subscription.
2. View how many tokens you have remaining to calculate how many tokens your build used.
   In the example video above, there are 196k tokens remaining, meaning the build used 204k. (Free accounts offer 2.5 million tokens monthly with a 400k per day limit.)
3. Next, click General under the Personal Settings menu.
4. Toggle on Display token usage in chat.
5. Look above your chatbox to view your remaining tokens, which should match what you saw when looking at your subscription information.

​

Part 3: Try out your app by signing up and saving favorites

Now that your app is built and you have a handle on how tokens work, take a moment to explore what you’ve created. Start by testing the sign-up feature. Use some sample information to create an account and make sure everything works as expected. Once you’re signed in, try saving a few favorites to see how your app handles user data.

1. Click the Sign Up button.
2. Create an account using some dummy data.
3. Generate a few names and mark them as favorites.
4. Scroll down to check that your favorites were saved correctly.
   If your favorites aren’t showing immediately, try logging out and back in; that should fix the issue.

​

Part 4: View your database info

One of the reasons Bolt is so powerful is that it includes built-in database creation and management. Many web app builders require you to set up a third-party database and connect it manually, but Bolt handles this for you automatically as part of Bolt Cloud. From your first prompt, Bolt recognized that your app needed databases and created them for you: one for storing user favorites and another for managing authentication data. In this section, you’ll see how to view that information.

​

Part 5: Use the selector tool to change your app title

Now let’s use the selector tool to update your app’s title. By default, your app was automatically named Pet Name Picker. Let’s change it to PetPick to give it a more personalized touch.

1. In the chatbox, click the Select icon.
2. Click the Pet Name Picker site title.
3. In the chatbox, paste the following prompt: Change the title of the app to PetPick.
4. Press Enter or click the blue arrow icon to submit.
5. Take note of your remaining tokens. In this example, the total dropped from 196K to 126K, so about 70K tokens were used, which is considerably fewer than the first build.

​

Part 6: Use Version History to restore an automatic backup

No matter how experienced you are, things don’t always go as planned. At some point, you may make changes to your site that you want to undo. When that happens, the easiest solution is to restore a previous version of your build. In this example, you’ll restore the site to its original color scheme by following the steps below.

1. In the top left of your screen, click the project title, then click Version history.
2. Click the bottom option, which opens its preview mode.
3. Click Restore this version in the top-right of your screen.
4. Click Restore version to confirm.

Nice! You just restored your site to an earlier backup! Notice how your project name has reverted to Pet Name Picker instead of PetPick.

​

Part 7: Use code view to make changes

While you can do almost everything you need through prompting, it’s helpful to understand how code view works. Code view lets you make changes directly in your app’s code without using any tokens.

1. Click the code view icon in the top center of your screen.
2. If you know where to look to make your changes, that’s great. However, a shortcut is to use the search bar to find the text you want to change. To do so, click the Search icon.
3. Enter Pet Name Picker.
4. Click the result that appears under App.tsx.
5. Change the name in the code from Pet Name Picker to PetPick.
6. Click Save in the top right corner of your screen.
7. Click the eye icon to return to Preview Mode and verify your changes have taken effect.
8. Take note that no tokens were used to complete this name change.

​

Part 8: Publish your project

Now you’re ready to share your app with others! Follow the steps below to publish it using Bolt’s built-in hosting.

1. Click Publish in the top-right corner of your screen.
2. Click the second Publish button that appears.
3. Wait about a minute for Bolt to deploy your site.
4. Click the link that appears in the chat window to open your site in a new browser tab.

​

Next Steps

Nice work, you’re part of the Bolt builder community! Now it’s time to start building expertise and learning how to bring your ideas to life as accurately and efficiently as possible. For your next project, you can start by learning how to Plan your app. Once you’ve got the foundations of your first prompt down, you can then work on learning to Prompt effectively and Use Discussion mode effectively. Also be sure to check out one of the Help Center’s most popular articles on Maximizing token efficiency.

​

Stuck? Need help?

If you find yourself stuck on anything, you can check out our article on Troubleshooting Bolt issues, or you can always Contact Support if you can’t find your answers here in the Bolt Help Center.

​

You’ve Got This

Starting out is often the toughest part, and now you’re already ahead. Keep moving, stay curious, and remember: progress beats perfection every time!