Bolt.new Review: Building a Next.js Site in Minutes with an AI-Powered IDE

After exploring Cursor AI and Windsurf Editor, we’ll turn our attention to Bolt.new, an AI-powered web development agent. We’ll follow the same steps as before: create a simple Next.js application, evaluate the AI-generated suggestions, and share our experience using it.

Initial Impressions

Bolt.new is an AI-powered web development assistant integrated into a web-based IDE. Unlike traditional IDEs, it offers a streamlined interface with fewer windows. While the available features are somewhat limited—primarily viewing and editing project files, checking terminal output, and previewing the browser—it promises an efficient development experience. Let’s test this by creating a simple Next.js application.

Project Requirements

We’ll create a Next.js application based on the requirements specified below.

Please create a Next.JS application. I need the following cases to be included in it:

1. The homepage needs to have a sticky header with a logo on the left, search input in the center, and a login icon on the right.

2. A hero banner with a carousel containing three images.

3. Below the hero banner, display four hero products in a row with the following information:

   • Image, name (clickable and links to the details page), rating (1 to 5 stars), and description (if more than 100 characters, it should be truncated with '...'). Each product should be displayed in a separate product card.

4. A footer containing:

   • Logo on the left, "Copyright" text in the center, and links to "About Us," "LinkedIn," and "Twitter."

Once the Bolt tool begins providing suggestions, the web IDE integrates seamlessly into the browser, appearing alongside the AI assistant chat.

Bolt quickly installed dependencies, generated the project structure, and created all necessary files. A standout feature is its ability to automatically populate the site with relevant images—something that had to be done manually when testing Cursor AI and Windsurf Editor.

Now, let’s see how Bolt.new handles modifications to existing code. We’ll request it to generate a new logo and apply it to the site.

please generate some icon with 4 overlapped triangles.

please put the link to the left side in header and left side in the footer instead of ShoppingBag element

Referencing Code in AI Assistant Chat

Although Bolt.new is a web development agent (with the option to download the project code and run it locally in another IDE), its user interface is more simplified compared to Cursor and Windsurf IDEs. However, it does allow you to reference specific code snippets in the AI assistant chat.

That said, it’s important to note that while this referencing feature exists in chat mode, it’s not always clear which specific line of code is being referenced.

Changing Existing Code

Next, let’s modify the created site by adding a modal dialog for logging in.

Need to change logic after clicking on the login icon.

Once clicked on the icon, a modal popup should appear with the following components:

1. A logo in the top-left corner (source: /img/icon.svg).

2. "Log in to Your Account" text in the middle.

3. A close button in the top-right corner.

4. Two input fields: Email (type text) and Password (type password).

5. A submit button.

Once the submit button is clicked, the modal should close, and the following API should be called:
POST /gateway/users/login
The form's parameters should be submitted as body parameters.

Once again, the task was completed quickly and without any issues. The site refreshed automatically, and the new version was ready for verification.

Troubleshooting Errors

When errors arose, fixing them directly in the Bolt agent was not particularly convenient or efficient. However, Bolt offers a potentially useful feature: the ability to roll back to a previous point in the AI assistant chat. By selecting this option, your project reverts to the state it was in after a specific recommendation from the AI assistant.

Conclusion

Creating a simple example site using the Bolt.new agent was smooth and efficient. Since Bolt.new handles everything in its cloud environment and even loads the required image files automatically, it took only about 10 minutes to complete the example site, fully populated with all necessary assets. From my perspective, Bolt.new is particularly well-suited for creating landing pages or simple websites quickly and seamlessly.

However, challenges may arise when working on more complex projects or troubleshooting issues in your code. In such cases, it might be better to download the project code and address the problems using a traditional IDE.

Another unclear aspect is the token system associated with your account. While working on my second example project, I received a message stating, "You've used all your remaining tokens. Subscribe to Pro for 66x more usage." Unfortunately, checking the pricing page didn’t clarify how many free tokens are provided. According to forums, users get about 100k tokens per day, which I hoped would cover 5–10 chat suggestions. However, my tokens were depleted unexpectedly, making the token calculation seem unclear and inconsistent.

Despite these drawbacks, I found Bolt.new to be a valuable tool for specific use cases, like the ones mentioned above. For regular development activities and more complex projects, I’d prefer using traditional IDEs such as Windsurf Editor or Cursor AI, especially since they offer similar or even lower pricing options.