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.
Following this walkthrough will use about 120K tokens, which is just under a Bolt free plan’s daily allowance of 150K.
If you’re looking for a more advanced guide, you can skip this one 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 may vary slightly.

​
Part 1: Build your app with your first prompt

You are 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 :
    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.) Allow them to save favorites.
  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. Wait a couple of minutes while Bolt creates your app.
  6. Try it out in the Preview window. Pick an animal, pick a category, and get names. (The celebrity puns are our favorite.)
Congrats! You just built your first Bolt web app!

​
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.

​
Part 2: Turn on token display in chat

Turn on the option to display token usage in chat to help you understand how many tokens your prompts are using.
  1. Hover over the left side of your screen, then click Settings.
  2. Click General under the Personal Settings menu.
  3. Toggle on Display token usage in chat.
  4. Look above your chatbox to view your remaining tokens. If you know what you started with, you can calculate how many tokens your initial app build required.
In our example, we started with 150K tokens and had 86K remaining after the initial build, meaning we used 64K to build the first version of our Pet Name Picker app.

​
Part 3: Use Discussion mode to brainstorm and get advice

Now that you’ve built your first web app, let’s try Bolt’s Discussion mode to get ideas for improving it. Discussion mode is great when you’re unsure or shaping a prompt. It works like Build mode but uses about 90% fewer tokens, so it’s the best place to start when you have questions. In the example below, we’ll use Discussion mode to brainstorm a new color scheme for your app. Follow along to see how it works.
  1. Click Discuss at the bottom of the chatbox to switch to Discussion mode.
    When you’re in Discussion mode, the Discuss icon is highlighted blue.
  2. Ask Bolt for three color scheme ideas that would work well with your app using the following prompt: I want to change the color scheme to a dark mode theme. Provide three suggested color schemes that would work well with this site.
  3. Click the blue and white arrow to submit.
  4. Copy the name of the color scheme you think you’d like best. In our example, we copied Deep Night Sky (Blue/Purple Focus).
Note that using Discussion mode for this question only used around 1K tokens.

​
Part 4: Apply your color change

Now that you know what color scheme you’d like to switch to, it’s time to make the change. While we do it, we’ll keep an eye on our token situation.
  1. Click Discuss at the bottom of the chatbox to switch back to Build mode.
  2. Enter a prompt in the chatbox that instructs Bolt to change the color scheme you picked in the previous section. For example: Change the color scheme to Deep Night Sky (Blue/Purple Focus).
  3. Click the blue arrow icon to submit your prompt.
    Discussion mode often gives you clickable actions so you don’t have to type prompts manually. In the example video above, we could have just clicked the blue Implement Deep Night Sky button in the chat history instead.
  4. Wait for Bolt to finish making changes and your Preview screen to update with your new colors.
  5. Check your token balance above the chatbox to understand how many tokens you used to make that change.
    Although building our initial app used 86K tokens, changing the color scheme only used 56K tokens (85K starting - 29K remaining).
Nice work! Now you have an understanding of how to change your site after it’s been created, as well as how many tokens it takes to perform such an update.

​
Part 5: Use version history to restore an automatic backup

No matter how experienced a builder you are, things don’t always go to plan. At some point, you’re going to make changes to your site that you’d like to reverse. In that situation, the easiest fix is to restore to a previous version of your build. To show you how this works, you can restore the site back to the original color scheme by following the steps below:
  1. Click View history.
  2. Click the original version, 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!
Did you notice your token remaining balance didn’t change? Restoring your site to a previous version doesn’t use tokens!

​
Part 6: Publish your project

Follow the steps below to publish your app 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.
Awesome! You just published your Bolt web app!

​
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!