In the rapidly evolving landscape of software development, AI-powered coding assistants are emerging as powerful tools for accelerating application development. This article explores the capabilities of Bolt.new, an AI coding assistant by StackBlitz, through the practical exercise of building a dynamic Todo List application using Next.js and nothing else but prompts.
The demonstration showcases how Bolt.new can not only generate a basic application from scratch but also iteratively add complex features through simple prompts. We’ll examine the assistant’s ability to handle various development tasks, from implementing UI components to managing data structures, while also highlighting both its strengths and limitations.
Throughout this hands-on exploration, we’ll see how Bolt.new handles different challenges, including error resolution and code refactoring, providing valuable insights into the current state of AI-assisted development and its practical applications in real-world scenarios.
Getting Started
It was fairly easy to sign up on Bolt.new as a new user via Github. It dropped me into a page with two panels. An area on the left to provide prompts, while the code editor, managed by StackBlitz, sat on the right. The interface is very intuitive & simple to use and needed no documentation to get started.
Let’s dive in and build a dynamic Todo list app.
Build the Todo list app
💬 Prompt: Build a todo list app with Next.js and Bootstrap with a primary light blue and secondary purple color theme.
Bolt went to work and started creating the Next.js Todo application. It was pretty cool to see that it showed its “work” as steps on the left panel while it displayed the code being generated on the right panel. Pretty amazing.
The interface is pretty slick, and it presents a full code editor with a live preview. A terminal window at the bottom is “watching” the files as they are being changed for the live preview.
✨ And, in about a minute, it created the base version of the Todo list application with theme colors that I specified. It complied and ran the app with a live preview. The app is fully functional at this point.
Let’s go beyond a bit further and iteratively add some features.
Feature: Add start and end dates to item
💬 Prompt: Add a start date and an end date to a todo item.
❌ Bolt refactored the code and tried to add the feature but encountered issues.
❌ Bolt encountered errors, then analyzed the error and proposed a fix. But, the fix did not work and it posed new errors while refactoring code.
✅ Bolt tried one more round to fix the issues, and got it right this time. Pretty cool.
💡Note: Shows the capabilities of Bolt to acknowledge issues/errors by running code live and parsing the errors. And, then understanding the issue and proposing a fix.
✅ And, now we have a the todo items with a start and end dates.
Let’s add another feature to add editing capabilities to a todo item.
Feature: Editing an existing item
💬 Prompt: Add feature to edit an existing todo item.
✅ Bolt refactored the code and added the feature without any errors. It added a pencil icon next to the todo item which when pressed allows the item to be edited.
Let’s add some categories and then add the capability to assign the category to a todo item.
Feature: Add category management and assign category to item
💬 Prompt: Add a feature to assign categories like Personal, Work etc. to a todo item. Create a separate screen to add, edit and delete categories.
❌ First attempt, had some errors, which Bolt analyzed and proposed to fix.
❌ Even with multiple attempts, Bolt could not fix the following error. It went into a loop showing the same errors and not able to fix the errors.
Error: A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.
👨🏼💻Intervention from an engineer who knew the code was required in this case. The fix was pretty simple, and I manually fixed the code.
Updated the following lines from:
<Select value={value || ''} onValueChange={(val) => onChange(val || null)}>
...
...
<SelectItem value="">No category</SelectItem>
to
<Select value={value || ''} onValueChange={(val) => onChange(val === "unassigned" ? null : val)}>
...
...
<SelectItem value="unassigned">No category</SelectItem>
The above changes fixed the code and we have a working app again. 🎇
😢 Unfortunately, at this point I had used all my remaining tokens so I could not proceed further.
🎉 But, overall, I had a blast building with Bolt.new. As you can see that in about 5 mins, I had a fully functioning app ready to go, built by just supplying some simple prompts. That is really cool and very powerful.
What’s Next?
As much fun I had building the app, I was wondering what could I do next. Then I saw that Bolt.new allows you to download the code and also lets you continue to work on the code in the StackBlitz cloud code workspace. If I had to keep using Bolt.new I could subscribe to the Pro version starting at $20/month.
ℹ️ Check out the full source code generated by Bolt.new for the Todo list app we built in this article.
Conclusion
Bolt.new is an excellent full stack AI code assistant that can not only create an app from scratch but help to add features interactively. It successfully added features like start/end dates and item editing capabilities through iterative prompts.
As far as technical challenges are concerned, Bolt.new encountered and fixed some errors independently, demonstrating its ability to analyze and debug code. It required an engineer’s manual intervention for a specific component error that Bolt couldn’t resolve. We need to be on a watch out for issues created while refactoring code.
👉🏼 So, it is important to understand that AI tools are most effective when used by engineers familiar with the domain knowledge, and who can maintain the AI-generated codebase. While non-engineers who can’t code will struggle after a certain point.
🛑 AI tools are not replacing engineers any time soon!!!
❔What are you going to build today?
If you build something with Bolt.new, or if you have questions or feedback, please let me know in the comments below.