Add Databases to Your App with AI Studio | Vibe Coding Guide

Key Takeaways

One of my favorite features of AI Studio is how easy it is to add a database with Cloud Firestore because most apps that you build won't be just static webpages. You're going to need to store information. Maybe you are collecting RSVPs for an event website or you are building a shared registry or gift wish list or a daily nutrition tracker. Whatever it is, most cases you are going to need a database. So, let's see how we can do that with AI Studio. I'm going to paste in this prompt and select build. So, if you're new here, this is AI Studio at aistudio.google.com. You can type in a prompt. So, describe in natural language what it is that you want to build and the agent will go and build it for you. So, here I've typed build a book tracker app where you take a picture of the book. It stores the name, author, and the date that you took the picture. I also want a table that shows all of the books that I've read. So, everything that we've logged so I can track my progress and understand how I'm doing with my reading goals for the year. I've also specified that the app have this dark Academia style which I think will just look really nice. So, on the right-hand side over here, we can see a couple of different design options for how this might look. So, you don't need to pick one of these, but I do think quite a few of them are very lovely. So, I'm going to go ahead and pick this Archivist one and we'll collect select this design and that just means that the app will be built in that same sort of visual aesthetic. And then on the left here, you can see that the agent is prompting us to enable a database. So, I'm going to click enable Firebase and this is what will allow Gemini to go off and to set up provisioning and authentication and everything else integration with our database so that when we use this app, our information is automatically stored. So, I'm going to let this uh build for a minute and we'll come back very shortly when everything is good to go. Okay, looks like our app is ready. So, I'm going to enter full screen and I'll click authenticate. And now we can click activate lens. Let's see. And hold up a book. And we'll click commit and hopefully this should work and the book will show up on the right-hand side over here in our registry. Um and there we have it. Yeah. Oh my gosh, it kept the picture too. That's great. Didn't really need that picture, but we have the title Small Is Beautiful. We have the author and the date that the book was was archived. And so, I'm going to go back over to the chat here and I'm going to ask the model to show me where the data is stored. And um when I send that, this should return a link which will have which will take us to the database and we can see the book that we just logged in that database. So, let's click on this link and this is going to take us to Firebase. And here we have our books and you can see over here we have Schumacher. We have Small Is Beautiful, April 22nd, 2026. That's when we took the picture. So, all of our data will get stored right here. So, the last thing I'm going to do is I want to deploy this app so that I can try it out on my phone. So, we'll go to publish and the first thing we need to do is set up our API key. So, I'm going to do that under secrets. Right now, I have a free key and if I want to deploy this app to Google Cloud and have it on a public URL that I can share with other people, we will need to use a paid API key. So, I'm going to go ahead and set one of those keys and then we'll head over to publish. You'll notice that I have a spend cap set here which this is my monthly spend cap of $5. This is just really helpful to make sure that if I share this app with my friends, my spending doesn't go out of control. It's just going to cap everything at $5 which is a really nice feature to have. So, we clicked save. Now, we're going to click publish our app. And so, I'm going to come back in a minute when this is ready to go. Okay, our app is ready. So, we'll click open and we can authenticate again. And you can see that authenticated as me, Nikita. I have this book here. So, what I'm going to do is I'm going to copy the URL and I'm going to open it on my phone. Okay, I've got the app on my phone now. So, we're going to authenticate again and hopefully when I take a picture of a book, you will see it pop up on the screen. So, I'm going to do that right now. I'm going to enable the camera. I'm taking a picture. And it's analyzing. This was the book that I just took a picture of and we should see it. There we go. It just popped up on screen, The Embodied Mind, Cognitive Science and Human Experience. So, I was able to do that from my phone. So, now anytime I finish reading a book, I can take a picture with my phone and have it logged into this app here for me so I can refer back and see how my reading goals are going for the year. I hope this gives you an idea of how easy it is to add a database with AI Studio and opens up all kinds of new possibilities for what you can create. So, I'm really excited to see what it is that you build and thank you so much for watching.