How to Build a Meal Planning App with Google AI Studio (No Coding)

By Beau Johnson··8 min read

Quick answer

I build Family Feast, a meal planner for families with different diets and allergies, in about 22 minutes. I find the idea in Idea Browser, start from its PRD, feature spec, and landing page prompts, then add a hero video, Firebase auth, and Google OAuth in Google AI Studio.

In this video I build a working meal planning app called Family Feast from start to finish in about 22 minutes, using Idea Browser for the idea and Google AI Studio for the build. It's for anyone who doesn't code and wants to see the real order I work in: which prompts I send first, what I skip, and how I get from a blank project to a signed-in dashboard.

What I cover in this video

  • 1:31: Searching "diet" in the Idea Browser database and getting 27 results
  • 2:17: Finding Family Feast, a meal planner for families with mixed diets and allergies
  • 3:04: Checking search keywords and scores to see if the idea is worth building
  • 8:23: Why I start with the product requirements document and skip logos and branding
  • 10:43: Using the Awesome Design GitHub repo as landing page inspiration
  • 15:23: Generating a hero video and enabling Firebase with one click
  • 18:24: Live demo with the Johnson family and the generated meal plan
  • 19:55: Signing in with Google OAuth and checking the dashboard

Finding and checking the idea

I went into Idea Browser looking for a diet app to help me manage my calories. I searched "diet" and got 27 ideas. The one that stood out was a meal planner that handles multiple diets and allergies for busy families. I have four kids, so this is my real life. Planning meals when mom is keto, dad is diabetic, and little Sarah is allergic to nuts feels like solving a Rubik's Cube. Most meal planning apps assume everyone in the house eats the same thing, and they don't.

Before building anything I look at the validation. Idea Browser shows the keywords people are searching, like meal prep services, diabetic meal plan, family meal ideas, budget dinner ideas, and low-carb diet plan. The idea scored 9 on opportunity, 9 on problem, and 6 on feasibility, and the timing was rated as strong. There's also a go-to-market section with community signals, such as 5.7 million members in the Meal Prep Sunday subreddit. You won't use all of this data, but it helps you understand who you're building for.

The first prompt: PRD, feature spec, and landing page

Once you've picked an idea, click Build this idea in the top right. The Idea Builder holds a prompt library for that idea, with prompts for ad creative, brand packaging, the landing page, and more. I don't start with logos or branding. I want the product working first. The hero feature is what matters, and the name and logo can come later.

So I copied the product requirements document, the feature spec, and the landing page prompts into Google AI Studio, along with the opening paragraph of the idea for extra context. I dictated the first prompt with Wispr Flow:

I really like this app idea. I want to build it. I want to start with the product requirements document, the feature spec, and the landing page. Start with the landing page first. Let's work on one by one until completion. Here is the prompts. Here is the app idea. Let's go to work.

I also added a link to VoltAgent's Awesome Design repo on GitHub. It's a collection of design markdown files based on 55 popular sites like Airbnb, SpaceX, and Twitter, covering their color palettes, typography, and visual themes. I asked Google AI Studio to pick a random design from it as inspiration for the landing page.

Cleaning up the landing page and making the app work

The first version had too much text, and I put landing page buttons for the PRD and tech spec in the header. My rule is that people want to know what the product is, what it does, and how much it costs. That's it. So I asked for more motion, a new color scheme, a redesign under 1,000 words, and for it to build out the actual meal planning product. The second version, with subtle motion, looked much better.

Next I asked which APIs we needed so a user could sign up, enter their family members and diet restrictions, and get a meal plan with shopping lists. Google AI Studio started the Firebase setup, and I clicked Enable Firebase. That gave me real-time authentication and cloud sync for family rosters, diet profiles, and allergies.

Adding a hero video

While that was running, I used Google's new video model, which I call Google Omni in the video, to make a background video. My prompt:

I want you to make a 16 by 9 video of food ingredients being chopped together in an organized way, coming together, being prepared in a recipe in a seamless, beautiful fashion with lots of motion in an artistic design style.

I picked 3.1 Pro with the thinking level set to extended, in landscape. The file was only about 2 MB. I downloaded it, opened the Code tab in Google AI Studio, and dropped it into the components folder. Then I asked for it to play silently behind the hero section with the text overlaid on top. The first pass was too dark, so I asked it to raise the video opacity and fix the contrast on the pulsing text, which was getting cut off.

The live demo

I created the Johnson family, added a member who is gluten-free and allergic to peanuts and nuts, and clicked Generate cohesive plan. It quickly returned a plan with a Mediterranean lemon herb chicken dish, a shopping list, and cooking instructions. I also had it add Google OAuth, because every app should have easy sign-up now. After signing in, the dashboard even offered syncing the shopping list with Instacart and Amazon Fresh. The plan only covered Monday through Wednesday, so making it a full weekly plan for each person is the next refinement.

If you want more builds like this, check out Build an App with AI and Vibe Coding.

Key takeaways

  • Search an idea database for a problem you actually have. You'll understand the user because you are the user.
  • Start with the PRD, feature spec, and landing page prompts. Leave logos, branding, and ad creative for later.
  • Keep the landing page short and clear: what it is, what it does, and how much it costs.
  • In Google AI Studio, Firebase auth takes one click, and adding Google OAuth makes sign-up easier.
  • Focus on the one hero feature and don't over-engineer. In this build, that feature is planning meals for a family with different diets.

FAQ

Can I build an app with Google AI Studio without coding?

Yes. In this video I build a full meal planning app with a landing page, Firebase authentication, Google OAuth sign-in, and a working meal plan generator just by prompting Google AI Studio. I don't write any code.

How long does it take to build an app with Google AI Studio and Idea Browser?

The Family Feast build took about 22 minutes from start to finish. It still needs refinement, such as extending the plan from three days to a full week.

Which Idea Browser prompts should I use first?

I start with the product requirements document, the feature spec, and the landing page prompts. I skip the ad creative, brand packaging, and logo prompts at first so I can get the hero feature working.

How do I add a background video to my Google AI Studio app?

Generate the video, download it, open the Code tab, and drop it into the components folder. Then ask Google AI Studio to play it silently behind the hero section with readable text on top, and adjust the opacity and contrast if needed.

Transcript

Read the full transcript

0:00This is what it looks like building apps in 2026 and you're going to be blown away in this video. I'm going to show you able to build this beautiful app out in just 25 minutes using two tools idea browser and Google AI studio. You're going to want to watch all the way through this video because to put this thing together literally takes minutes using these two tools and let's get right into it. All right, so the two tools we're going to be using is Google AI studio to literally just build the entire app out and idea browser for the idea we're going to choose. I'm going to be looking for a diet app something where I can look to lock in a certain amount of calories and I want to eat for the day and be able to help me with my diet plan. So let's see what they have in their database as far as apps to

0:46build around dieting because they have over a thousand ideas that are in their database. There has to be one, right? So if you sign up for free you get an idea of the day which gets emailed to you a little bit before 8:00 a.m. Pacific time. So you might just get something that is down your alley that you want to build. And if you do end up signing up you get a ton more features. We'll get into those later like the idea builder, the idea agent, things like that being able to connect to the back end MCP that makes building that much easier and you can also take your idea that you have that might not be on idea browser and then run it to its market research and be able to validate that idea. So let's go to the database like I said I want to be able to build a dieting app and I'm

1:31just going to hit diet. See what pops up. There's 27 ideas based around a diet or building a diet plan. Let's go through these and I want to be able to see something that aligns with what I'm trying to build for myself and if it's going to work for myself and it's something that you know I want to build is obviously going to be something that other people want because everyone is focused on getting better at getting healthier, getting a right diet plan whether it's carnivore or keto or whatever, accounting calories, being able to just manage your calories and your diet in one app is going to be super nice. So, there is a ton on here. Let me go through these and pick out exactly what is going to align for me. All right, I found something. We got four kids, meal planning is crazy,

2:17keeping on track of your diet and what you eat is very hectic, especially if you have a family of four, six, 12, whatever. It's really hectic and crazy. So, you got a meal planner here that handles multiple diets and allergies for busy families. This is perfect. So, planning meals for a family where a mom is keto, dad is diabetic, and little Sarah's allergic to nuts is feeling like a Rubik's Cube. And it is so true. Family Feast uses smart algorithms to create weekly meal plans that actually work for everyone at your table. You basically tell it who eats what, and it generates shopping lists, prep schedules, and recipes that keep everyone happy and fed. Most meal planning apps assume everyone in your house eats the same thing. They don't. And that's so true, right? Family Feast

3:04handles the complexity that real families face every day. $10 a month for premium features, and then we're targeting 40 million families juggling multiple dietary needs. Oh my goodness, this is perfect. So, what I like is it just gives you quick validation right away that, "Hey, these are the key words that are being searched all across the internet, meal prep services, diabetic meal plan, meal planning in general, family meal ideas, healthy meal plans, budget dinner ideas, and then low-carb diet plan." So, kind of gives you some more confidence on, "Okay, is this even worth building?" Even if you're just building it for yourself, but I think we're all building apps with the intending of making money. So, this is just great. You can see opportunity is nine, problem is nine, feasibility is

3:50six, and a why now is this perfect timing? So, goes over the business fit, execution difficulty, go-to-market. See if we click all that comes with little go-to-market summary. Exceptional market potential with strong traction across Reddit, Facebook, and YouTube. I mean, if you don't have a family, you know that this is a pain point. If you do have a family, you know that this is, you know, kind of annoying to solve, right? You got to know who's eating what, where, why, if it had nuts, if it was cross-contaminated. I mean, it's just crazy. So, this could be a great, um, easily monetizable app, you know, as far as like making content around it. So, goes over the overview. High engagement across social media platforms

4:35and growing interest in AI solutions for meal planning. Go to market tactics include create interactive meal planning content on YouTube. He can also make quick shorts with like something like a VO3.1, very simple, um, image-to-video model. Engage with Reddit communities offering AI meal tips. Collaborate with Facebook groups on meal planning workshops, and develop partnerships with grocery delivery apps. Target audiences are busy parents seeking convenience, and then health-conscious households, and then families with very specific dietary needs. I love that. Here's the signals. Like if you're wondering where they're getting this data from. So, Reddit. 5.7 million members in the Meal Prep Sunday, um,

5:21subreddit, and then Facebook groups, and then YouTube as well. Two 2 million views on AI meal planning content. Early positioning angles, AI-powered meal plans tailored for your family, healthy budget-friendly meals with AI convenience, and then simply simplify meal planning with AI technology. So, strong traction, you love to see that. You need to know, you know, your target audience. Who's your avatar? Especially as you start building this because you want to know who you're building it for. So, the offer here is to like how you get customers. So, the free offer is going to just be a family meal planning quiz. Interactive AI-driven quiz to determine a personalized meal plans for and also

6:06front-end meal flow starter plan $4.99 a month basic subscription offering weekly meal plan, shopping list, and a simple dietary integration. The core offer is Mealflow Plus subscription, which is a comprehensive plan with advanced meal customization, multi-user support, and device integration. So, you get a ton of data here and this applies to all the ideas as well. You're going to get a ton of like tactical advice to be able to steer your project in the right idea. Are you going to use all of it? No, but there are pieces you could pick out here that you can apply to your project. And it can be almost overwhelming at some point, which is why in this video, I'm going to go over the basic foundational

6:52parts that you've mean to be able to build your app within minutes. I mean, this isn't 2025 anymore. This time in 2026, you can literally build your app out 80% of the way working in under an hour. So, let's get this going. I'm going to show you where in Idea Browser you need to head first because there's a ton of ideas to go through. Once you find your idea, I would just go right to build this idea in the top right-hand corner here. And then there's Idea Builder and there's AI Workspace. So, AI Workspace, you can inject all of the information right into your favorite LLM. With Idea Builder, you can connect right to Google AI Studio and just start building right away. So, like I said, you can also

7:37connect via MCP, which helps pull all all context over. What context you say? It is all of the prompts that come pre-loaded with the idea. So, there's a lot in here. There's ad creative prompt, there's a brand packaging prompt, a landing page prompt, and like if you just look at kind of what it looks like specifically. So, your ad creative's prompt, create a comprehensive ad campaign package with multiple ad variations, targeting angles, and detailed creative briefs. And it goes on, you could just give this to Google AI studio and you will get multiple ad creatives or brand packaging as well as like, you know, what you want your typography to be, what you want your logo, your coloring, all of this. And And it's overwhelming. I wouldn't start

8:23there though because you don't want to start with something that's not going to make your product work. I always try to focus on making my product work first and then going back and tweaking the little things like the logo and the name and all that stuff. That's not important. Just getting the hero feature of your product working first is the most important part of the building process. So, that's why I start with the product requirements document as the first thing. We're going to copy that. We're going to go back into Google AI studio. This is their playground. We're just going to dump a ton of information in with this first prompt. And this is how I do it. I use a voice dictation software called WhisperFlow. 100% you need to be using it if you're building apps in 2026. It's this simple. I really like this app idea. I want to

9:09build it. I want to start with the product requirements document, the feature spec, and the landing page. Start with the landing page first. Let's work on one by one until completion. Here is the prompts. Here is the app idea. Let's go to work. So, that is the first initial prompt that's going to kick this off. I actually always like going back to the actual idea and just taking the front paragraph. Gives it a bit more context and know what it's working with. So, I'm just going to quote that and then we're going to go back into the PRD and pull that over and make it simple. You don't need to overcomplicate it. If you do, you're going to have tons of bugs, it's going to be a pain in the butt, and it's not going to make the building process fun at all. So, then we're going to go down again. I'm going to get the feature

9:55spec. Look at the feature spec prompt here. It says, "Generate comprehensive feature specifications that provide clear direction for development teams. This should include detailed user stories, acceptance criteria, technical requirements, and implementation guide guidelines." So, it's going to be super helpful for building this app out to actually work. And then we're going to do one more, which is the landing page. And I'm actually going to take it one more step further, and I'll show you what we're doing here. There is a GitHub repo called Vault Agent Awesome Design. This really helps give your LLM, specifically Google AI Studio, a little more direction when it comes to building the landing page. It's a collection of 55 websites that are super popular, Airbnb, SpaceX, uh Twitter. You got 55

10:43different other sites that are basically going to pull in their typography, their styling, and be able to kind of guide how you want your landing page to look. So, it says it's a collection of design markdown files, analysis by popular brand design systems. Drop in one to your project and let the coding agents generate a matching front end. So, it's it's awesome. It's just really helpful. It's really helpful. 91,000 stars in just a couple months. You can see here's a lot of the popular websites. It just pulls in their styling, their visual theme and atmosphere, color palette and rules, typography rules, the principles, a lot a lot of helpful stuff. The more the better, I think to to an extent. And I'm basically just going to copy the URL. I want you guys to use this awesome

11:30design GitHub repository for the inspiration of building the landing page. Choose a random design on there to inspire our landing page to make it fit with the idea. And I know that's a really long prompt to get started here, but I think the more context the better. So, this is going to help at least lay the foundation for us. All right, this is the one shot it came up with. One cohesive recipe base, endless custom modifications. Stop boiling standard gluten-free pasta, stir-frying keto cauliflower, and preparing allergy-safe pork portions separately. Cook one unified base, let us orchestrate the swaps so everyone eats safely in harmony. So, my general rule for for just landing pages in general is like if there's too much text, no one's going to

12:17read it. And that's just me. I think living in this era of attention deficit, um people just don't want to read. People want to know what your product is and what it does and how much it costs. And that's it. So, I'm going to go back in to Google AI Studio and just ask to simplify it. Okay, that's great. Can we add more motion and change the color scheme? And then another thing is we need to build out the product so it actually works. I don't know why you put the product PRD and a technical spec and landing page buttons in the header, but we want this app to actually work and function for meal planning for families. Also, I want you to redesign the landing page so it's less than 1,000 words and just I want to know what the product is

13:03and what it does in the hero section and how much it costs. All right, this is looking much better. Let me refresh it and I'll just show you just the simple subtle motion does make a big difference. So, one cohesive recipe based on endless plates in harmony. I love that flashing, too. Just little little simple stuff. Here's our free lead magnet, launch core meal planner. What it is is it's automated multi-diet cohesiveness. What it does, dual portion substitution matrix. Awesome. I think the words are too big. Like, we just need to simplify the wording. Click a family and watch ingredients automatically morph. Family feast eliminates separate cooking pipelines. Toggle the profiles below to watch how a single base recipe responds dynamically

13:50to strict dietary limitations and allergen thresholds. Stone, all right. All right. How cool. It has a little Okay. How much money you can save and how many hours you can save by using the app. You can just start a free trial. Okay, cool. So, I think I'm going to use a Google Omni to create some kind of background video with movement just to give it spice up the hero section a bit. And let's go back into What did it say? Okay, so it changed and redesigned the landing page. Okay, what is the next step to actually make the app work? What APIs do we need to connect? We want to be able to have the user that signs up be able to basically put in how many family members they have, what is their diet restrictions or what diet they're

14:36going for, and then basically plan their meal plan for the day or for the week for them. Ingredients to buy, shopping lists, things like that. Google Omni is Google's new video model, I would say. It's kind of like their nano banana for video. You can basically say, "Make Creating videos as easy as having a conversation. So, it's like the nano banana for video. So, let's try it out. It's been fun using this the last few days, and you can get really creative with it. So, let's just give it a simple prompt. I want you to make a 16 by 9 video of food ingredients being chopped together in an organized way, coming together, being prepared in a recipe in a seamless, beautiful

15:23fashion with lots of motion in an artistic design style. So, that's my prompt. I'm going to go with 3.1 Pro and thinking level extended. It's going to be landscape. And well, let's just let it cook and see what happens. And then Google AI Studio came back. I have initiated the Firebase setup. The Firebase setup is going to allow us to authenticate users. It basically integrates right into Google AI Studio, making your database so easy to set up. So, you just click enable Firebase. All right, cool. I have successfully completed the next development milestone. It's fully integrated real-time Firebase authentication. What was implemented uh specifically was the Firebase core service setup, polished authentication bar and account model, some modern sunkissed amber organic forest theme. I do like the theme.

16:09Synchronized workspace persistence, customize the planner view, workspace to recognize user identities, and then real-time at client cloud sync. So, roster modifications, customize family members, diet profiles, allergy. So, cool. You'd be able to like plug in your entire family and just have a constant recurring meal plan generated every week or month. So, that's cool. Awesome. Okay. And let's go check our matte video. This was Martin Pikki. Th- This is so good. This is just so good. Super impressed. Uh this is just so good. I love this. So, I'm going to download the video. The

16:54videos are only a couple megabytes, so 2 megabytes. I'm going to go into where it says code right here, and then I'm going to basically just drop it into the components section of the source file. That was so fun. That was awesome. That was awesome. So good. I put a video that I want you to underlay the hero section to have it playing in the background. Make it look good and I don't want any sound, but I just want it as a visual element and an overlay the entire text over top. The text needs to stick out and stand out over top the video and I put it in the components folder in the database. Okay, we're going from this plain mining page with spicing it up a

17:39bit with that background video. It's going to look good. I just have a feeling. Oh, yeah. Look at that. Boom. Look at that. We do need to the opacity needs to be picked up a little bit, but uh I think it's going to look great. So, I could barely see the video. You might have to change the opacity so we could see the video a little bit more clearly and then also the text that's pulsing needs to be better visualized because it's kind of getting cut off. All right, so it says I have successfully updated the hero section, enhanced the video opacity so we could see it and then improve the contrast overlays with the text and the pulsing text. So, let's take a look cuz it was kind of dark before. Ha ha ha yeah, it's looking good. I love it. I

18:24love it. Look how good that looks. Oh, man. Oh, my. That is amazing. So cool. I love it. I love it. This just adds more flavor. Adds more engagement to the site. I think it's great. Wait. Okay, here's the demo. Here's how it all works. Roster family name Johnson family will go. You can add a family member. You could just say we're gluten-free and then we're allergic to peanuts and nuts. Generate cohesive plan. Wow, that was fast. Johnson family custom feast cohesive plan Mediterranean lemon herb chicken. Gives you a shopping list. It syncs with checkout. Interesting. Wow, it even

19:09gives you instructions. It's awesome. Let's go. This is sweet. Right in Tuesday, Wednesday. Awesome. I think we need to make it so it's like a weekly plan. Just making sure everything works. And when a person signs up, they get a weekly plan day by day for each person specifically. If they are allergic to something or whatever. Well, that works in the background. That I just love the the hero section. It's awesome. So let's go back to the landing page and let's sign up at I just have to use Google OAuth. I'm in the next thing. Integrate Google OAuth for sign up, too. Make it easier. All right, cool. So it integrated Google OAuth. It just makes sign up so much easier. If you're building any app, you need to have Google OAuth. It's just

19:55necessary now now this this time of year in 2026. If you don't have Google OAuth, come on. What are you thinking? Okay, so let's get this refresh. Google sign in. Sign in with OAuth. Let's go. All right, awesome. So I am here in the dashboard after signing up. So let's generate the the plan again. And awesome. So it only gave me Monday, Tuesday, Wednesday. Three core dinners aligned. Sync error. Sync with checkout. Oh, you can Wow, that's awesome. You can connect securely with Instacart and Amazon Fresh. I mean, that is that's insane right there. I mean, who's going to want to do that manually? So that automatically syncs to Amazon Fresh or Instacart. Wow, that's awesome. Returning to planner. Sweet. So this is

20:40what it looks like building apps in 2026. Like crazy that you even get this far in just what? 22 minutes? So yes, we need a little bit of refinement as far as like adding more days to the week, but it's just really crazy between Idea Browser and Google AI Studio to build that fast. I mean, there's more and more features built into these two tools, but this is just how I start building. You just need to jump into it and get going. Stop procrastinating. Start Stop over-engineering things. Focus on the one hero feature that's actually going to help people. This is just helping people plan meals better. It's that simple. There's nothing to it. And that's what it is. That's the hero feature. We don't want to over-engineer

21:26things. So, basically getting it like that, all set, there you go. And if you want to actually use these tools in your workflow, you can click the link down below to be able to actually test them out. So, Google S Studio is free to get going. Idea browser is free to get going. You can start working on the idea of the day. And then just see how you like it. Comment down below. What are your thoughts? Are you building in 2026? We'll see you in the next one.

Ready to start building with AI?

Join Shipping Skool free — 4 live build sessions a week, courses, and a community that ships.

Join Shipping Skool

Keep reading