I Built a Mobile AI App (And You Can Too)

In today's video, I'll be showing you how to build an app. What kind of app? A mobile app that looks exactly like this. It's a prompt improver with login and ability to save your favorites and even some settings. Pretty straightforward, but as somebody who's never built or worked on a mobile application, and it seemed like something that is out of my reach, I was genuinely surprised that I could actually do this. And to be honest, a project like this was actually on my nerdy bucket list. I kind of always wanted to build a mobile app and now I finally did it and it was totally manageable and that was due to the sponsor of today's video that is Bubble that I was genuinely excited about when they reached out because they have a and you might have guessed it AI powered mobile app builder and in today's video I'll be showing you how to use AI to build mobile apps and how to actually get them on the Android and iOS app store respectively so you can actually monetize them if your idea is good enough. Now, before I tell you about the process and show how it's actually done, I want to highlight that building mobile apps is not something that AI has really solved yet. It doesn't mean that you couldn't be writing mobile friendly code with applications like ChatGpt or some of the app builders. It just means that it's really not simple yet. For web apps, there's a ton of good alternatives out there right now. But for mobile apps, the market is just not saturated yet. And I'm not exactly sure why because mobile apps are such an opportunity. I mean, in this video, we're literally going to be taking a GPT that we created around two years ago that has over 50,000 conversations just in a GPD store, which almost nobody's using anyway. And the idea is to bring this GPT to the app store, which we did successfully, but that's a really hard challenge if you've never built a mobile app before. And that's where Bubble comes in. They have a new product that focuses on mobile, and there's a bunch of templates that can get you started in no time, even as a beginner. But more on that on a second. First, let me actually introduce the company to you. So, if

you're not familiar, this is Bubble. And if you've never used it before, it's a complete no code visual app development platform that helps you design, build, test, and deploy web apps. And now with their latest update, also mobile apps directly to the App Store or Play Store or both. And the most important word here is no code. This is built for people who haven't done this before. Although I have to say, if you don't pick one of these beginner templates, it can get quite complex quickly. You can just build a ton of things here. But I

really want to start our journey out on this templates page because I really think that for most viewers that have a similar feeling to me where they're like, "Hey, I've always kind of wanted to build a mobile app or I have an idea that I could potentially monetize, I think this is the best place to start. You go to their template store and you filter for mobile over here and then you set this to beginner. These are the simplest things you can do. So, as you might know from some vibe coding apps out there, one of the simplest things you can do is a login/register system, which as a freelancer, you could build a custom platform for your clients. Or there's this one, which is a slick mobile app onboarding, which allows you to onboard people into whatever you might be doing in a fully custom way, and they can download it from the app stores, which are available on every single damn phone. I mean, that's really the power of this. As you leave the beginner section, it starts opening up and new templates are being added frequently here. They just got started recently with this new mobile features, but really if you stick to one of these templates, that's what's going to make this process really smooth. As soon as you start getting a little custom, a bit of basic knowledge on how applications work on the back end is required, but if you stick to these templates, you're good. Except maybe this one, which is an advanced category. So, this is AI text and audio streaming. And this one is really more of a base than anything. But what we did in our case with this application is actually we customized a ton. And as you can see right here, this is the web app equivalent of the mobile application that I showed you in the beginning. And the way it works is quite

simple. As soon as you're in, you go to projects and then you create a new project with AI. What we did is we actually built it as a web app through this prompting interface. And as it is best practice to try different prompting approaches, we actually created multiple prompts to try out in here to see what we get. And this is the one that we ended up using. Now, after the initial result, we followed up with one essential part. This is my big tip here. Tell it to design the app, especially if you're building both a web app and a mobile app at the same time. Follow up with a prompt that tells it to be a mobile first design. If you do that, it's going to do certain things which might not be optimal for the web version like stretch out all these buttons, etc. But everything is going to be very compatible with mobile devices like an iPhone or an iPad or any other mobile device. Then you can proceed to add different features here with AI. But really, you're not going to spend a lot of time in there. very quickly you'll get out of this AI interface into the actual app builder which is the point at which you can start unleashing your creativity and also exploring all the options in here. Now I'm not going to give you a full step by step of how we did every single thing in here. But the base idea was this. We wanted a mobile application that allows users to input a prompt or prompt idea they have and then quickly get a result back that is very contextrich including multiple examples at the end that the AI generated for the user. Something that's very useful if you're trying to do more complex tasks with AI or you're going to build it into an automation where it's going to run hundreds of times. That's really where you want a more contextrich prompt that performs consistently. But this is not a prompting tutorial. If you're watching the channel at this point, hopefully you know about the importance of proper prompting, especially when it comes to tasks that an untrained person could not complete with a little amount of context. That's really where you start expanding the context and adding examples. Okay, back on track. The

inspiration for it all was our GPT that we already have on the store and that works super well, but the GPT store is just not used by many people, especially in comparison to something like the mobile app store. So we got our first version of the web app and then basically a lot of the process came down to this switching between this web app view and this mobile app view and copying some of the web app functionality into the mobile app. So because everything was mobile first already like all you need to do is just click one of these buttons say copy here and as you move over to the mobile app. If I wanted the button in here I would just go in here say paste and boom you can see the new button is added. Now in this case we don't need it. So we can always return here but that's basically how you piece this together from a user interface standpoint. Then there's obviously the functionality part which is all about stringing the different sites that it pre-created and you edited a bit together. So this is the web and the mobile app view. And then here you can see all the different pages. So right now we just have the homepage here. We have a quick build page. We have a sign-in custom build page where it guides you through the multiple steps. But what really matters to us here is this mobile view. And over here you can see we have a basic chat interface here. And then as you would expect we have a history page where you can save your favorite prompts. We have a basic settings page here and a few more things to really round this out. So that's really enough for a first version of this application. But what matters from here on out is the

things that happen when you press the buttons, right? So if you're on the button and you say edit workflow, it will bring you to the second view, these workflows. And this is really how things are managed within bubble. If you press that button, something should happen. And this is where you decide what that something is. If the button hero quick is tapped, then there's just one step here. Navigate over to a different view called quick. That's a simple chat interface and that's what we named it here. And that's really all that button needs to do. Now, if you head on over to quick, you can see that things get a bit more complicated here because yeah, if you click the save button, then multiple things happen. You actually want to save the prompt inside of the user's history and that takes multiple steps. We do that by initiating something called a custom state. And as you can see here, this is the part where things start getting a bit more complex rather than dragging things around. But luckily, Bubble has documentation on all this. And if you stick to the templates, the things are set up for you already. So you don't even need to customize things like this. This one is pretty simple. It just shows you an element that says text saved. And then in this way, you can just go step by step and build out the different pages within your app. Make sure that all the buttons do everything you need them to do. And they also have all these plugins. So in our case, we use the API connector by bubble to connect to the OpenAI API. So we get chat GPT responses in there. But there's many more plugins like calendars or Google integration or thousands of others that are a lot more specific. But again, that makes things more complex and I think it's really good, especially if you're trying this out for the first time to kind of scope out something very, very small that actually works and then take that success and build on it and go deeper and deeper. I want to

highlight one more really important thing that I learned way too late in here and that is the fact that you can click on these branches here and if you go to history you can create these save points which is so essential because it gives you the confidence to try things and potentially also break things once you create a safe point like this you can always return to this exact version without losing anything. So when you

build out your pages and you make sure that the functionality is aligned with your vision and you could play around with it as it would perform on a phone and once you're happy there you would just go over here and deploy to live. Now in order to do that you need to resolve all of these issues that it highlights here which would be a problem if you ship this but I already did that in advance and this is the version that the user would be interacting with. I can just start the build then it makes some suggestions. I can make a decision and then I'll just type out my idea and it should come back with a improved prompt just like this. And then I can press the save button. And this way I can build out different prompts easily on the go. And then if I go to my save prompts, you can see that it now shows up in here and is easily accessible anytime I need it. Now, is there ways for me to improve this? Sure. Do I plan to make this concrete app everything it could be and monetize it? No, absolutely not. This was a little test project and I just wanted to see what I could quickly get done. And now I have a base template that I can use to package various prompts and applications that can be potentially so simple to use that even my grandma would manage doing that. Whereas not the same thing can be said about a lot of web applications or god forbid a GPT in the chat GPT store. This

is the most userfriendly device out there. And now with AI you can take your ideas and bring them to the store. So if you want to try out Bubble for free, check out the first link in the video's description. And as a final note, I kind of want to add that I realize that most people won't building the next $50,000 a month SAS, but there's a real opportunity here to enhance the business that you might already have or build something for your work to enhance certain things you're already doing. Basically, with all of this building stuff, it comes down to the quality of the idea and to the fact that you need to be solving a real problem. And usually the best way to get started with that is just kind of looking at your days, your workflows, and thinking about how you can solve that. And now with Bubble, you have another tool on your belt that most people just didn't have before. Developing a mobile app used to be a big endeavor, and now everybody can do it, including me. And that's essentially all I got for today. I hope this was helpful or inspirational to you and I'll see you very