How to Build an App Using Bolt AI - Tutorial

What if I told you that all you need to build your own AI app is an hour and a couple of AI tools? Better yet, what if I showed you how to do it? Hey there, Daniel here from the Founder Institute, and today I'm going to be using Mistral and Bolt to build an AI travel app. You can pretty much use any AI app builder you want. I personally prefer Bolt because I have a ton of experience building features and apps with it. And I also really like that the company is always trying to improve and releasing new features. And as with any AI app, you need to connect your app to a large language model using an API. It's kind of like the brain of your application. It's going to be able to take in preferences and your text and give you an answer that works best for you. Today, what we'll be using is Mistral. I personally prefer Mistral because it's fast and it's lightweight. You do have a bunch of different options like OpenAI and Propic, Cohere, but this is more so a personal preference of mine. Feel free to use any that works best for you. And before we begin, I have a quick tip on prompting for you. Always start out small. So in my experience, what I've seen is as AI models get better and better, they have a tendency to overcomplicate builds and solutions. So the best way to counteract that, at least for me is to start out small. If I give it a simple set of features that I want to build, I can always kind of build on top of that and fix errors as they come, as opposed to having like this massive Frankenstein of an application that I can't even ship or deploy.

So let's get building. And to get to Bolt, head on over to bolt.new. And with Bolt, you get a couple of different account options. Let me just explain them to you briefly. You have the Pro account, you have the Pro 50, Pro 100, and Pro 200. Sadly, there is no free account, but that's completely okay because I feel like the Pro account is really, really good. And if you're someone who is building basic apps and basic features, I think it's a really great option. I've had a ton of luck with it. But if you're someone who is building multiple things at the same time, then Pro 50 might be better for you. Because we're creating an AI application, what we'll need is API keys to connect the AI to our actual application. And for that, we'll head on over to mistral.ai, and then from there we'll hit try the API. I don't really to make an account because I already have one. But what I will do is I will explain the account types for you. I'll hit settings and then from here subscriptions. So the really cool thing about Mistral is you do have the experiment account type, which is essentially for free and lets you kind of play with their API. And then of course, if you actually want to deploy and scale, you do have the option to upgrade to the scale account, which gets you higher rate limits and a ton of more features. Okay, so back to the API keys. From the overview section, you'll head on over to API keys down here, and over here you'll see a dashboard of API keys, and we don't have one yet, so you see nothing. But what we'll do is hit create new key. We'll have to give our API key a name. I'll go with travel app, and you can also pick an expiration date. I'm good for now, so I won't do that, and I'll hit create new key. Next thing what I'll do is I'll copy the key, and I have this Google Doc open. I'll just paste it over here. Perfect, and then we're done. Super quick thing to remember with API keys is please don't share yours with anybody. I will be deleting mine after this, so I'm all good for this video. Okay, so let's get prompting. And today what I want to do is build an AI-powered travel app. And the prompt I have in mind is I want to build a simple AI-powered travel app called Travelbug that helps people find niche travel destinations and experiences based on their preferences. What I've also done is mentioned Mistral and the API key. So what I'll do is head on over to the Google Doc that I had. Copy this API key and then paste it here. But you know, the thing is, I feel like our prompt could be better. So what I'll do is hit the enhance prompt button. And what it's doing is adding a ton of context to this prompt. And that will be really, really helpful when it comes to the actual UI of the app. And you'll see here, it has all these input requirements that are needed from whoever's using the app, as well as an output format, which is always great. And then there's additional specifications. What it has done is removed the Mistral bit. So what I'll do is I'll add that back in. I'll be using Mistral for the AI, and then I'll mention the API key here, and then I'll hit create. And if you head on over to the messages here, as the AI is building out our application, you'll see that it's kind of missed out the bit about AI and Mistral and the API keys and everything. So I definitely do think we'll have to go back in and try to get that added on. And if you look over here to the code, you do see that there are some dummy destinations that it's adding, and that's not really what I want. So there's definitely a work in progress when it comes to AI tools, and you have to be on your toes a little bit. Okay, so Bolt is done building the application and honestly this looks amazing and I feel like for 99% of use cases this would be exactly what you would want. But this isn't what I want. I literally just want this bit and nothing else. So what I'll do is I'll go over to the text box and I'll ask Bolt to just focus on the tool and remove the other bits from it. Okay, so this is what it created for me and what we'll do is before actually implementing the AI to this because I know it kind of missed out on it entirely, we'll just test out this tool. So what I want is a cultural travel style. Let's go to the city, budget, super budget, maybe 5 days, amenities or experiences. I feel like this section could be way better, but let's focus on that later. Uh, let's do photography and fine dining, travel restrictions or accessibility needs. Let's do cold sensitivity because I don't like the cold and food allergies. Because yeah, I have food allergies. So find my perfect destination, and we click that, and this is what we got, which is nothing. So there is definitely a fix that's required. So a really cool feature on Bolt is the discussion mode. So what you do here is click discuss and then enter in your prompt, which is nothing happens when I click the find my perfect destinations button. I want AI to fix it, and I also want the answers to be AI-generated using Mistral, and I've let that I will be providing an API key. Let's see what solution Bolt provides us here. So Bolt's basically given us a plan of action here. It's going to be implementing the API and working on error handling. What we'll do is we'll let it know that we'll be providing it the API key. Here is the key. I'll go back into this doc, copy the key, and letting it know and let's see how it handles this message. What we'll do is now click fix these issues. Okay, so Bolt implemented a solution. So what we'll do now is test out this app. Travel style, cultural, I don't know, city, budget, duration, nightlife, fine dining, food, food allergies, cold sensitivity, find my perfect travel destination. And as you can see, we have an issue here. What we'll do is hit attempt fix. Okay, so Bolt came up with a fix for that. And what we'll do now is test this again. Let's see how things go here. Finding your perfect travel destinations. It does take a little bit of time to load. And I think that's the case with a lot of free AI APIs. And after what felt like I think 30 seconds, I got this really, really cool formatted answer. And I think this works super, super well, to be honest. It is definitely what I had in mind, maybe even a little better, but there are definitely some fixes here as far as the UI is concerned. What I'll do is now I'll ask Bolt to remove these header images with each answer and maybe also fix the color of my header here so that it's actually visible. Okay, so we had Bolt fix the header here, so now all the contents on top are visible. And we also asked it to fix the answer cards. So what we'll do is we'll test it out again. We'll go to budget, we'll hit island, budget, Wi-Fi, love Wi-Fi, food allergies, and cold sensitivity. So okay, let's hit find my perfect destination. And again, because it's a free AI API, I think that's why it takes a bit more time. But what I do really like is the structure of the answers that it gives me. So fingers crossed it implemented the fix and it kind of looks way better than it already did. Okay, so we still have that issue with the answer cards. What we'll do is ask AI to fix it again. These things do happen. There is a ton of back and forth that takes place when you're trying to create an AI app or feature with these tools. So it's completely okay, not unexpected at all. And I think we have exactly what I wanted now. And with that, that, what we'll do is test out these answers. Hit budget. Wow, local tips. Awesome. Honestly, this looks great, kind of way better than what I expected. But as you can see, AI did need a bit of help on getting here. So the next thing that we'll do is hit deploy so that our application can go live. Okay, so now that we are deployed and live, two quick things before we end things here. Uh, integration. So with Bolt, you have the option to integrate Stripe and Supabase. So if you actually want to bring your application live and have people using it, you do need to have Supabase as a database. And then Stripe is always great if you want to integrate payments into it. So Bolt is pretty, pretty good with all of these things.

I hope you found this video useful. And as always, if there is something that you want us to test or try out, let us know in the comment section. And we've also built applications using Lovable and Replit. I'll link those videos in the comments as well, so do check them out. And if you're ready to go from idea to startup, check us out at fi.co. And remember, the best way to learn how to do is to just start and make a ton of mistakes.

And you know what? Eventually you'll get there. I hope you really enjoyed this video.

We'll see you in the next one.