How To Build Your First App With Google AI Studio (Free)

0:00going to be walking through the entire app building process using just two tools in within 20 minutes you're going to go from zero to a fully working app. And we're going to use two tools, Google AI Studio and Idea Browser, to build these apps out. So, let's get right into it. So, something that I've been trying to work on better is just keeping track of my expenses and I came across this idea on Idea Browser that is super helpful for business owners, document processing tool for fractional bookkeepers. So, basically a lot of people that are entrepreneurs, they just have a really messy organization when it comes to keeping track of expenses and deductions. We're going to be building this app out today to help people like yourself or like me to be able to just keep track of our finances in an

0:45organized way. Say you send this off to your CPA, they will thank you. So, you can see here the fractional accounting market is projected to grow 46 billion to 107 billion by 2033. So, this is going to be a great tool we could build that I would personally use every single day. If you're unfamiliar with Idea Browser, they have a ton of ideas, over a thousand here, that you could literally hit the ground running and build out an idea within a day. And it really helps as far as like setting the foundation for your idea. Maybe you even have an idea that's not in the database, it will validate it for you using specific keywords and search trends, Reddit, Google search, and things like that to help you actually get concrete evidence that your app is even worth building. So, like I said, I found this

1:31one in the database and this is something that I would personally use every day because I do run a couple other businesses and to be able to just keep track of the finances would be much easier. So, let's get a shot at building this out. You get a nice little quick like summary of what it's actually about. You get a build opportunity and problem solving and feasibility and why now kind of just like indicators to see if this is even worth building and comes up with a business fit and then your offer, why now, proof and signals and market gap and then execution plan. You You can also chat with this idea just to see if it is actually going to be a fit for you because you don't want to be building things that aren't going to be fitting your niche. So, what I like is you just click this button on the top

2:16right-hand corner right here. It says build this idea and you can either go into the AI workspace or you could go into the idea builder which connects right to Google AI Studio. We're going to go into the idea and it comes with ton of prompts that you can literally just hand off to Google AI Studio. Google AI Studio is awesome because it is free and you could basically build your MVP within 20 minutes. So, the first one we're going to start off with is the product requirements document. This is huge. You need this file to be able to give it like the road map to your actual build. So, I'm going to get a few prompts here and then be able to just plug those in to Google AI Studio. Like just going over it real quick, like these templates are huge to be able to,

3:01you know, hand off to Google AI Studio to be able to give it as much context as possible. Say you just copy over your brand packaging or the email funnel system or your MVP road map. That's not enough context for Google AI Studio to build. So, you want to make sure that you're picking the right prompts to be able to put into Google AI Studio to at least build the main first layer of your product. So, like I said, the PRD, feature specs is a huge one. Also, there's a landing page one, that's the copy and the wireframe. Those are the three that I would start with first. There is also a drop-down button that is super helpful. If you really want to take advantage of Idea Browser, is it says idea actions right here. If you

3:47click the drop-down button, there is a download data button where it'll download all of the data of the idea that you could just plug and play to the LLM. For the sake of this video, we're going to keep it simple. I'm going to show you through the building process of how I kind of build. We're going to start with those first three prompts, but if you want to go crazy and maybe run this on some type of loop, then you could download all the data and then have it go through step by step as it completes it. But like I said, let's just go and start with the PRD first. So, product requirements document is in the idea builder and you just copy it. Like it's it's so simple to build nowadays and we're just going to paste that in and we're going to give it some room to breathe and then we're going to copy in the feature spec and then the landing page. And we're going to drop

4:33those in. It'll probably take a few minutes and then we'll come back to it and start working on this landing page and just see how it does. Okay, this is what it came back with just after a few minutes. After giving it the feature spec, the PRD and the landing page prompts from idea browser, came back with at least some copy and we at least, like I said, laid the foundation for our product. So, I feel like it's there's a lot of words here. It's just just for building purposes. If you have more than a thousand words on your landing page in 2026, you shouldn't because nobody wants to read these days. They want what does your product do for me and how much does it cost? And then add a demo video. That's it. Don't overcomplicate it. So, there is already

5:18I can see way too many words. So, that we're going to work with, but at least, like I said, this is the building process. So, that's kind of how it um turned out on the first one shot. I didn't even do anything. And then you can kind of go over here and just see, you know, what it thinks about the idea overall. I have completed the development on Onboardly. No more shoe boxes. High converting landing page. It is a struct- it is structured entirely as a highly polished responsive single page application with premium typography, interactive tools, and clean visual layouts. So, it went with this visual design, and then direct AI onboarding. Bookkeepers can select a sample shoebox file combinations. So, like sideways scan statements, blurred

6:04receipt photos, or a nephew's custom spreadsheet. So, it runs an animated multi-step progress standard detailing the OCR translation, which is really nice. It's just a way to organize those statements and files that you get, especially as an entrepreneur. So, this is going to be super helpful for organizing your financial statements, and maybe you're not so good at that, you know, you could drop it into Onboardly and get something that's more organized that you can hand to your CPA. Or, if you're a bookkeeper, maybe this is something that you'd want to use, right? So, okay. And it comes with the pricing, everything all laid out, which is great. This is good good starting material. I do want to show there is a repo out there by Volt Agent. Have you heard of it? It's called the Awesome Design. And it's just basically a

6:50collection of highly performing, highly converting websites. There is 91,000 stars on this repo, and it released about a month ago. So, there is websites tracked from SpaceX, from Posthog, from Figma, Coinbase, Airbnb. So, basically, I'm going to just give it the link, going to go back into Google AI Studio, and just give it this one link, and say, "Use this Awesome Design mark down file from this GitHub repo, and completely redesign the landing page into a modern, futuristic, aesthetically pleasing landing page. I want less than 1,000 words on this landing page. I want what the offer is, what the product does, like H1, what it is, H2, quick description, and then I want a spot for

7:37a demo video, and then how much it costs. That's it. Send it." Okay, so here's what it came back with after that prompt. A lot more professional looking and just perfect. This is so much better. Wow. Um I mean, I was overwhelmed with just so much text. It's crazy. And I still think there's way too much text here. So actually, let's let's go back and fix that. There is still way too much text in the hero section. I want it so simple. What does our product do? Who is it for? What problem does it solve? Way too many words. Let's send that. And let's just look at the design overall overall. I I really the coloring needs to be changed too, but we'll get into that. And then here would be the hero section or the the demo and then how much it costs. So one flat fee

8:22recovered in your first client intake. So this is basically like I'm a bookkeeper. This is what I offer as a service. They can send me all of their unorganized files. This helps organize those files for me to file taxes or whatever help them as a fractional accountant or bookkeeper. I love that. So awesome. So it did make the change already with the text. I love that. A lot more simple and start your 14 day free trial. So automated client intake for fractional bookkeepers. Instantly turn chaotic client statements and folder receipts into QuickBooks ready ledgers. Stop losing unbillable hours to manual document sorting. On Boardly collects, OCR transcribes and date sequences and matches messy client files automatically giving your bookkeeping

9:07firm a streamlined error-free ingestion pipeline. So this is cool. Really good. Really good. Much better. Awesome. Awesome. And then I'm going to go back. Okay. I have six I have successfully simplified and streamlined landing page hero section reducing the unnecessary text to answer your three target questions. What is the offer? What is the what the product does? And then the lightweight quick description. I do want a complete redesign of the color scheme. I don't want any vibe coded colors. Come up with some new colors that are not seen in AI slop vibe coded landing pages. Maybe use the awesome design markdown file for inspiration. Remember the GitHub repo I gave you? Okay, so it came back with a nice color scheme. This looks better. I'm liking this. Now we

9:53need to go back into Google AI studio and to see if everything works. So it says I completed a comprehensive redesign of the color scheme and now we're going to just basically connect this. So I want to make sure this actually works. I want to know what back end you're using. I want to know what database we could use. I think we use Firebase. I want to be able to log in and actually use this product. What is the next step? Okay, so Google AI studio uses Firebase to help capture people that are interested in your product. So whether you want to capture emails, start a wait list, things like that. So Firebase is so easy to connect. Literally just prompts you to connect it through your Gmail account. And once that's connected, you could start wiring up the rest of the process to be able to

10:39actually get customers. And also helps with authentication. So you want people that actually sign up for your product to be authenticated to use it. This is important when building any app. So Firebase is really easy to set up. You could use Superbase, Neon, Convex. All right, we've made some major progress. So we connected the database. Now we are actually making this product come to life. And this is how easy it is to build apps in 20 26. I'm telling you, if you're not building, what are you doing? You need to start building and start ideating. You're never going to have a finished app on your first one shot on your first day. It's important to just take your idea from the unseen and make it seen. Once you start seeing it come together, it's going to give you confidence. It's going to give you

11:24motivation to keep iterating and keep going back to idea browser, checking out the prompts, going through the idea builder, things that you're going to use, things that you're not going to use, and to be able to keep that iteration process going because you're never going to have a finished product from day one. It's just important that you start, and by starting this way, it sees, you know, you see your app come to life, and you feel good about yourself, and then you can add on things later down the road. So, that's why it's awesome just being a builder this time, you know, in 2026 is just like it's so easy compared to this time last year. So, here's where we're at. We actually have the live product right now. You can see and now use every single feature on the onboarding pipeline with the live data persistence. We just simply open

12:10the app in the browser, just like we have here, and then we can sign up and get the guest sandbox, click the one-click instant guest playground button, and at the bottom of the modal, this signs you in anonymously, and then sets up a playground session instantly. So, no password required. This is just to get it going and to start using it, and then use the product. We can add in custom client names, manage intakes, trigger automated actions, resolve extracted gaps, and then sync ledgers. I love that. We can confirm the recommended ledger classes to achieve a successful QuickBooks or Xero sync state. I love it. So, it's all working. Let's go through the process right now and run the trial. Let's fill this in. Let's go. Idea browser. Email

12:57address. Oh, my email is already registered. I am unable to log in. Can we just simply add a simple OAuth that just links my Gmail account? Okay, so that needed to be fixed. Added Google OAuth sign-in to Onboardly portal as requested. Okay, very cool. Now, let's go back here, restart it. I think, boom, sign in with Google. Yes, it's me. All right. Select a client on the left panel or click add to set up a new intake pipeline in Firestore. So, let's say it's Clothes Plus Stuff LLC. Add. Analyzing. Awesome. So, here is where we do the live ingestion. So, basically we would take all of our documents like receipts, garage sale receipts, anything that I did for my Clothes Plus Stuff

13:43business, and then it would ingest it here. And then, client uploaded a chaotic shoe box zip container. Systems are reading the file boundaries and sorting the timestamps. That's awesome. Let me actually give it something that I had from a few years ago just to see if this works. All right, so I have an old CSV I'd want to upload, but I think it's just using hardcoded data. So, let me go back into Google AI Studio. So, it looks like it's just using hardcoded data. I'd like to upload my CSV for my actual business to see if it actually can sort the transactions by date. I want to get this thing actually working with live data, not mock data. Okay, awesome. So, I have successfully completed the work place integration and issues with the dashboard. Awesome. So, instead of using

14:30hardcoded data, which I just did by default, we want to actually work. So, let's go and test this out. Okay. So, let's see if it remembers my business. Okay, cool. So, now I can put in my live transaction ledger, which I have from my company from the last few years. Let's go look for it. Got it. All right. Wow. Awesome. Continuity warning found 54 chronological gaps, 15 days of inactivity. Wow, that is cool. And it categorized them. I could sync to QuickBooks, export standard CSV, save ledger to state cloud. That is awesome. Cloud database activated. So, I could

15:17essentially sync this to QuickBooks via their API, which is pretty cool. Uncategorized expenses. I wonder if it can categorize them for us. Let's see if we can add that in. Okay, after I drop in a CSV, are we able to have it categorize the transactions for us? So, if you drop in a ton of CSVs from just miscellaneous transactions, would love it to get categorized for us just to help us organize the finances that much better. All right, cool. Came back with a full stack transition with the redesign Gemini bookkeeping intelligence. Let's go. And then user interface enhancements. Very cool. Awesome. So, it's actually going to give us feedback. I have set up automated transaction categorization for you to

16:03keep everything secure and follow a scalable full stack guidelines. I have upgraded Onboardly to a robust Express Flight stack architecture. Awesome. Using Gemini API as the back end. Very cool. All right. All right. Okay, here's another important one. Intelligent category classifier. Designed a server-side endpoint powered by Gemini 3.5 Flash to evaluate the dates, merchants, pays, and transaction amounts from your CSV files. And then it implemented a local normalizer on the front end that maps the AI response to our standard chart of accounts. Very cool. So, let's get back into this. Refresh. I mean, within 20 minutes to have this much progress is crazy in

16:502026. I I can I know I keep saying 2026, but things have changed so much just in the last year that this wasn't even possible a year ago. All right, cool. So, we have this auto categorize with Gemini with Gemini bookkeeping intelligence. Scans the current ledger listings and it automatically predicts standard classification coordinates using the neural categorization engine. So, it detected the columns. It's pretty messy spreadsheet from when I used to do yard sales in 2021 to flip on eBay. So, let's see how this works. Nice. So, it auto categorized the office supplies and a few other things here, which is really helpful. Awesome. All right. And just to give you some

17:35context, the CSV I gave it was completely unorganized. So, just to be able to make progress and have this thing actual work is huge. Like I said, we've been working on this for about 20 minutes and to be able to have an actual 80% working MVP is crazy. So, if you want to actually build apps like this using Idea Browser to actually find the idea, like I've said before in previous videos, they have literally over a thousand ideas in their database. So, when you go to the idea of the day, you get one for free if you just sign up for free. It gets emailed to you. If you do decide to sign up, they have a database with a thousand ideas. search from popularity. Comes with everything. The build kit, it comes with the agent

18:20builder, it comes with all the prompts to get going to be able to give to Google AI Studio to build out your idea within 20 minutes. So, you could pull in all that context also via their MCP, which they just came out with a few weeks ago, which is super helpful. So, I'll put those links to them down below. Let me know your thoughts. Is building in 2026 that much easier than this time last