Transcript for:
Vibe Code: Revolutionizing Mobile App Creation

about three months ago we realized it was possible to build a mobile app that builds mobile apps An one of my co-founders came to me with a prototype and he's like "Check this out I think it's possible to build a mobile app that builds mobile apps." And I was like "Oh my god." And we did a little more testing We decided to drop everything and pursue this idea And yesterday we made our official announcement So this is what I posted on X Today we're announcing Vibe Code the first ever app that builds mobile apps This is how it works Let's say you have an idea for an app Simply pull out the Vibe Code app type out your idea like an app that lets me type in Gen Z lingo and it uses AI to translate it into a concise explanation And maybe you want two scenarios in which you would use that lingo And press go And the Vibe Code app will begin building your app When it's done generating you can begin immediately testing your app And when you want to make a change simply type the change you want and Vibe Code will edit your app And you can repeat this process until your app is complete Yesterday I built three apps This calorie app that lets me take a photo of food and it tells me the calories An app that looks like Airbnb except it's for renting lawnmowers And another app that lets me take perfect photos for my girlfriend We're now rolling out the app to the first wave of users So if you want access to the Vibe Code app go to vibecodeapp.com We are trying to build the Canva of app building An app that makes it easy and actually helps you ideulate around the app that you're building You'll be able to create a web version of all of your apps And we're also going to create a web app but we decided since no one else has done it so far to start with the mobile app that builds mobile apps Let me just show you how it works So this is what we have so far So this is version zero and I'm going to turn on my screen recording And so I open the Vibe code app and what I want to do is let's say we wanted an app that lets me chat with an AI like chat GT except it's called Riley GPT and the theme is teenage engineering and has fun loading loading for the chatbot So we can just type this in and press go But it is now loading And of course it takes a little while to load the app And one thing that we wanted to make sure we want to make sure that you can leave while you're doing this So you can literally just uh leave the app and you'll get a notification when it's done which is pretty cool Ah okay So you see it's loading It says bundling Let's see if we one prompted a chat GPT clone Oo Riley GPT All right Let's see We can click here Ask Riley GPT something And you'll notice it has this menu button That is our app right if we press menu it allows us to edit the app We can also see our previous versions And we can also revert our changes back to any previous state And we can edit the app as well So let's go ahead and toss this right here Ask Riley GBT something Please tell me about San Francisco Ooh look at that loading screen Let's see if it works Does the AI work boom San Francisco a vibrant blend of culture tech stunning landscapes etc etc Look at that So we have a working chat app Let's see if it has context of previous messages It might not I'm not sure Wow more So if we say "Wow more please," and it tells us more about San Francisco then it does have a memory of the previous chats in the thread Let's see Wow amazing And so it doesn't have bold formatting but we have this chat GPT app And what I want to do here is let's go ahead and ask it to let's please make the colors better and make the top of the phone the same color as behind the chat as well Just make it a lighter app Don't have that black part Please make the font more like Teenage Engineering Vibe So we can literally make edits here from our phone And we can press this button And here you go We now have we can see that it's loading right now We actually don't need to stay on this screen while it's loading We're still figuring out what we want to happen while it's loading There are some fun things that we can do but right now we're just focused on the functionality and getting it out to the first wave of of testers of the app for our pre-launch You can sign up to download it for free And so you can actually see that it is making some changes and you'll see this like blue bar come down from the top of the screen every once in a while and that means it's like it's updating the changes of the app refreshing Okay so it says property platform doesn't exist But if you shake your phone like if the ever the menu button leaves your phone and you can't get out of it just shake your phone and it pulls up this menu as well And so if you're ever stuck you can shake your phone and if there's any sort of like error or you feel like you want to refresh the app you can just press this button up here on the top right This will refresh your app which is quite cool And so we did get an error but it's not done editing You see it created an error and then the AI agent kept working and it fixed the error Now it says update successful And so what I'm going to do here is let's try refreshing it Now it's refreshing Now look at that It's doing exactly what we asked it previously We have this white app We changed the font And now it's kind of more fun We can move this menu button below the keyboard to see what it looks like And now we can ask anything But I believe it's actually still making changes No it's done So now what we can do is we can say "Hello tell me something cool." Uh tell me about golden retrievers Boom Let's try to edit the time on these So right now for the time it has six digits for what time it was Instead I want how many minutes ago it was So you know if it was 5 minutes ago it should say 5 minutes If it was a should say how many days ago similar to many other chat apps please do that instead And so we can begin editing this And we can go to our versions And you see now we're on version three So this is our fourth prompt that will show up here after the edits have been made And again you don't need to wait while it's loading which is pretty cool Update has been successful And look at this Hello Tell me something cool 1 minute ago 1 minute ago We can say hi Let's see what that says Just now It says just now And then these all say 1 minute ago It's very small I'll zoom in hopefully so you can see that But we just edited that So now we're going to press the menu button So we can press menu So please make a button on the top right that allows me to make it dark mode Okay You see that it added this dark text right here But hope it's still making changes but it just says dark but hopefully in the next change it'll move that dark over to the right Okay So it's it created light mode and it's added the button for dark So let's see Let's see It should move that dark button to the top right to make it dark before it's done making changes And you can always check and see if it's still loading It is indeed making changes Okay there we go It added the button on the top right Let's see if it's still loading Okay update successful Now we can test the dark mode Hello there It's a little bit hard to see that text but we now have this dark mode And so that's all we need to do We just shake our phone on the input field When I type in my query the text is too light on dark mode It's like light gray on white background It's very hard to see Can you please make sure that it's black and look uh it's not There we go Update successful And it's black So now you can see it perfectly on the input And that's pretty cool Now let's try one other thing Let's shake our phone Please add another button to the left of the dark light toggle And there should be a settings menu And this allows me to go to a new settings menu And I want to be able to create a profile and upload an image as a profile image and upload my username that should be saved to my account And that is what should show up on my messages So this one is a little bit harder but let's see how it does Okay so it's still editing Look at that So we have profile and dark next to each other So it added them on top of each other and then it put them side by side And that's really cool Look at that So that's what the profile screen looks like Is it done nope Let's wait for it to finish But look at that It's creating this profile So choose your image I want to wait for it to refresh Okay Update successful We are now good to go Choose image Let's go ahead and upload an image of me Actually let's do this photo of Jeff Bezos So let's click on this Okay Let's zoom in here on Jeff Bezos Choose Nice Jeffy B Oh no Okay so this is a good example Right now I cannot press enter because the keyboard is covering the enter button So this is an issue I get sometimes Notice how the menu button is somewhere lower on the screen You can't get to it Just shake your phone And when I'm editing the settings the keyboard is covering the input field enter button So I can't actually submit it Please address this issue That's a common issue you get when working with mobile apps because you have to account for the keyboard What does the screen look like when your keyboard is out is it covering anything is it blocking anything and so let's see if the agent will take care of this cuz I believe it will Okay so we have an issue but it's okay I believe it's just going to fix it Update successful You notice that the screen is black What I'm going to do here is I'm going to press refresh Let's see if that solves the issue There we go So now we have the app open Let's hit profile So we'll choose an image Jeff B Now let's type in See you now it moved it up So we can type in Jeffy B And now we can press save And now let's say hi And there we go It's from Jeffy B Um tell me about the company Amazon And there we go We now have a chat Let's say please make the users chats right align Ever since I added the username and profile picture to show in the in chat it became left align So now the app should move Jeffy B over to the right Let's see how it's doing Okay Update successful Let's see Hi And boom It created a clean R icon Really like that Let's see what it looks like on light mode There we go This is so cool And look at that We're just vibe coding this app So once I'm done we can actually close the vibe code app and reopen it And what you'll notice is after you've created some apps you have just all of the apps that you've created And the one that we just created it autame to Riley Tech We'll add some more options in terms of custom naming things like that But if you click on this you can reopen it and resume the project where you were working on And it's going to open it up And boom we're back on our project And again you can revert your changes So let's say we want to go back to versions Okay Let's say actually you know what i actually don't like the settings feature Let's just go back to this one right here before we added the settings feature And you can see it says reverting success And look we no longer have the profile option because we are now at a old version of the app If we press menu here we can go back to the newest version of our app and it's going to revert our changes back to the original Success Now that we also have the profile uh icon and it still has all of the data saved because it's saved on our phone And yeah it's pretty cool And so that is essentially the core of the app that I'm building now And I'm building it with a very very very very talented team And we're going to grow very very very fast It's going to be scary And I'm excited So if you want to see more videos like this let me know in the comments There should be a link to find out more about this app if you want to I want your input What features do you want on this app genuinely I I want to know what would make this app better If it's something that actually would make this app better we will add it But remember we're staying discipline in our commitment to vibe coders This app is for vibe coders not developers Developers will love it but it will adhere to the values of vibe coding and it will make everything simple fun It will guide you through the process of vibing and building an app So that's what I'm working on Super excited for more of you guys to try it Peace