▶️YouTube

Antigravity just changed how to build IOS apps with Ai

Marcin AI·youtube.com·16 min read·Mar 28

Select text to create a clip

Transcript — click timestamp to jump, select text to highlight

203 segments

If you're like me, you love to eat, you love to go out to restaurants, but you hate to cook,

or at least you don't know what to cook, I just made an app that takes a picture of your

refrigerator, as you can see my fridge is right here, and you can just scan a picture of your

refrigerator, and then my AI that I just built inside of Anti-Gravity is going to take all the

ingredients inside your fridge, as you can see right here, and then it's going to make custom

recipes based on the ingredients. I do it all in this video from start to finish,

and this is actually a React Native and Expo application that we're going to be able to

actually launch into the Apple App Store and the Google Play Store. All of it in this video,

step by step, how to use Anti-Gravity, how to connect the AI. So if you're ready to build a fun,

vibe-coded AI cooking app, all right, we're going to be using Anti-Gravity. If you guys aren't

familiar, Anti-Gravity is a dedicated IDE by Google that sits inside of your computer. So this is an

actual app that's on the computer. This is not a web-based tool like AI Google Studio. So here's

the idea for the app. So smart fridge and culinary assistant. Create a sleek cooking assistant React

Native app. So I'm going to be doing this as a mobile application that's going to get actually

submitted to the App Store. You get the point. But first, what I want to do is I want to take this

into Google, and I'm going to say this. So this is kind of like a pre-prompt to put inside of

Anti-Gravity. I want to build a React Native plus Expo application that I want to actually deploy

on iOS and Android. I'm going to be building in Anti-Gravity. So I need you to make sure you set

up everything correctly to be able to do this. Can you give me a simple bullet point MVP that I could

start with inside of Anti-Gravity to build this project properly? I want to focus on the UI and

IX and all the functionalities with placeholder data. And then we're going to add all of the back end.

So the reason I want to do this is I want to actually build up the front end of it. I want

it to work. I want it to have all the screens. I want to make sure everything's perfect. And then

we're going to connect it into all the live data. All right, perfect. So now we're in Anti-Gravity.

So the way you set it up, this basically works exactly like cursor, VS code, or any of the rest.

So I'm going to open a folder. So let's make a new folder on my desktop. And we're going to call

this our HeyCooking app. No, actually, yeah, let's just go with that. Yeah, so I'm actually

doing this for real. All right. Then we're going to say, yes, we want to give it access.

So this is not going to be a step-by-step tutorial on Anti-Gravity. There's plenty of those out there,

but I'm just going to start actually cooking this up. So you guys could just follow along

and get this built. So first thing, we're going to go up here on the right side and you have a

couple of different modes. So this is very important when you're actually starting with

these tools is you have planning mode, and then you also have fast mode, and then you also have

your different language. So right now we're going to be using Gemini 3 Flash, because what I'm going

to do is I just want to plan it out first. Okay. So then I'm just going to paste that prompt in there.

So now I've approved the plan. So here it is. Check this out. Define the MVP and get approved,

which we just did. Now, right now it's initializing the Expo project. So if your end goal

is to do cross-platform building Android and app together, it's not a native language like you would

use Swift, for example, for iOS, but React Native. And through React Native, you're able to set up Expo,

and then it's going to be able to actually use EAS to submit for you into the App Store. We'll get

into that all later, but right now I just want to kind of set up the main things. So whenever you

want to build a cross-platform application, React Native plus Expo. And if you guys haven't set up

Expo, it is free to use, get it set up. And this is going to be the way that we're going to push the

project to Expo. We're going to use all the Expo components, libraries, other environments,

everything in here. And this will build pretty much a full stack framework for us to actually submit to

the App Store. So this is what the dashboard actually looks like. Right now, you just got to

set up the account. As you can see, I have a bunch of projects in here that I've actually built. And

of course, if you guys like this kind of videos, a little selfless plug, I run a community called

AI Builders. There's 478 members all in here, all vibe coding from all over the world. I think we have

52 different countries right now, and people are launching products, building founders. Right here,

Drew just crossed 5,000 MRR on his newest micro SaaS. We got a lot of people. It's a fun community.

We do live weekly calls. So if you guys are interested, the links are below. And let's get

back to it. So as you see right now, it's going through the checklist step by step. I haven't done

anything yet. So it's literally been one prompt. So I built the navigation, built the dashboard,

already created the recipes, recipe details, and the shopping list already getting built right now with

one prompt. All right, so it just finished. So it says, I've completed the MVP foundation for your

fridge and culinary assistant. The app is built on Expo and React Native, featuring premium

WoW aesthetics, including the dashboard. The right thing inside. Now, before you need to do all these

commands, all you have to do is, for example, right now at this stage is say launch simulator

right here. So that's the command. Normally you would go in, you would go into terminal and have

to do all this stuff, but I'm teaching you the absolute basics. So you don't have to worry about

anything. And the way the simulator actually comes up is you guys need to have Xcode connected,

which is the actual Apple native software. And again, you can download it for free. But if you want to

launch the app store, it's going to cost you 99 bucks a year. This is just the price to pay

with Apple. But once you set up Xcode, you download your simulators, and then you're going to have an

actual simulator that's going to pop up as you see here. And if you want to do it yourself and not

go down, the actual command is npm run iOS. If that's what you want to test. If you want to test

Android, then it's npm run Android. Now our simulator is going to open up. So you can do either

way. That's the actual command. But if you guys don't know the commands, just tell the actual agent,

hey, open up the iOS simulator. So here you go. So now the simulator is loaded. And the great thing is

when you're using Expo, you download it on your phone, and you're going to have a QR code. So

right now I'm also going to do both. And the great thing is you need to remember is you need to be

able to actually test it on your phone. Because a lot of times the simulator can do a lot, but there's

still limitations. So if something's not working, definitely use a real iOS device. So let me scan

this QR code. And I'm going to be able to show you how you want to be able to do it through your actual

phone, and not just on the on the device. So here we go. So we got current ingredients. So this

would be snap your fridge picture, which we like. So we're going to hit plus, that'll work. Then we

have our current ingredients. And then we have our recipes. So there you go. Avocado, salmon toast,

protein packed salad, classic omelet, slow cooked beef. And then it gives us an actual shopping list

for our application. Pretty straightforward, simple and clean. And then here's all the ingredients

that it's going to actually do. So what I want to do is I want to make this AI enabled. So I want to

connect the actual Google API so we can actually do a lot of analysis on this. So that's going to be

the next thing we want to do. Next, I want to add the Gemini image recognition with the Google API.

So I can actually take a picture of my food. And I want you to analyze it and take out all of the

ingredients that are in the photo. All right, pretty straightforward. Let's give it a rip. Let's

see what it does. So now I've switched over to Gemini 3 Pro. So now we're into the actual coding

of more of the difficult features. So this is just a great way to do it because the first one was

pretty simple, like building a simple UI with placeholder data. Some of those smaller models

can do it. So Flash is great at that. But once we get into the more difficult coding, I like to

definitely use a better model like Gemini 3 Pro High. So then it's just giving me the best model for

coding when it comes to actual difficult tasks. And also before it finishes this, the next great thing

you want to do is you want to definitely set up your Git. So we're going to go in, we're going to

do source control, and we're going to actually commit our first Git. So we have a GitHub repository

for this project to make sure that we're saving every single versioning in case something does

screw up. One very important thing is you guys have to make sure you have your GitHub installed.

So if you're getting an error message, make sure you go over to extensions, type in GitHub,

and right up here you'll see that you just need to install this. I already have it installed,

but just so you guys know if you're running into any kind of issues with GitHub. And also there's a million

other apps in here that you can install based on whatever project you're building. So now we're

going to snap our fridge, we're going to grant permission. And again, I like to try it first

on the phone, which we know it's not going to work because it's going to have to use a camera,

but at least that works. So now let's go to our phone. So what I have here, here's our simulator,

and then on the one on the left is actually my screen. So you guys can see it really nicely.

So look, I'm scrolling, and then it's actually reacting. I'm just filming it a quick time so you

can see. So snap your fridge, grant permission, allow. And then here's our screen,

but I'm going to select the image from the fridge and then hit choose. Now it's identifying. So it

says fail to analyze image, please try again. So we want to do is we want to go into our terminal

and see what that error was and see what happened and see what the error is. And obviously we haven't

added our Google API key. So that's what it is. So I built the function. So now it says right here

that the API is not connected. So we need to connect the API next. So the way we do that,

it's really easy. Just go to Google AI studio. And then down here, it says, get API key.

And then you just have to either create a new key. So let's just create a new one.

And then we're going to call this, Hey, cooking. And this is a pay as you go model. So once you set

this up, then, all right, so there it is up here. And we're just going to copy this API key.

Then we're going to go back to anti-gravity. And then we're going to give it the API key. And then I'm

going to give it one command. So I'm going to say, here is my API key for Google that we're going to be

using for all the image recognition and all of the AI enabled features, period. Make sure you hide

this API key so no one can access it in my project. Very important thing to make sure you ask.

All right. So now it's going to cook it up. It's going to create an environment variable

inside of our project. That's going to actually hide our API keys. It's going to do this by default,

but I just want to say it so you guys can understand and start learning that whenever you're

building stuff for production, you're going to definitely have to hide your API keys,

add security, all of your RSL policies to make sure that nobody can hijack your application.

All right. Perfect. And as you can see, I've updated your project to securely handle the API

key. So I created that .env file, and then it put everything inside of it, the export public Google

API key. So instead of export, that's where it's actually going to be living. So then when we go to

production, it's going to be actually hidden in there. All right. So next, let's go to npm run iOS.

Let's relaunch our simulator after all the changes. And let's take a look if we have our app not working.

So let me load up my phone here. Let me scan this QR code really quick.

I like to do a fresh install personally, just so I make sure that it works every single time.

And here's our default. Then we're going to go scan, select, select our fridge, pick all our goodies.

Let's keep those oranges in there. Actually, no, I want to get the salad on top. I'll fix that later.

And now it should work and identify all of our ingredients. Let's see if it did.

There it is. Grapes, green juice, jar of condiments, strawberries, zucchini noodles,

bread, olive oil, feta crumbs, kimchi, sauce, milk, eggs, Kobe, beef patties.

Wait, let me just show you that it's actually a real deal. So here you go. Let's take a look what

we got to make sure we're looking at the right stuff. So there you go. It's got the kimchi. It's

got eggs, the apple juice. I got the avocado, got the grapes up here. Look, there's only a few

grapes and it picked all of that up. So pretty amazing. Strawberries, everything is up in here.

We got the milk. We got the butter. We got the Kobe beef. It actually picked up that it's Kobe beef.

Feta cheese. Perfect. All right. So now we basically have our AI enabled image analyzer working. So next,

what I want to do is be able to actually do something with this, right? So right now,

it doesn't actually go in and create our suggestions because we haven't done that

feature yet. So that's what we want to do next. So right now we'd actually just have all of our

ingredients. Let me see if I can delete the ingredients. Yep. I could delete them. That's

perfect. And then we need a way on the bottom after I've snapped a photo to be like, create

the recipes for me. So let's do that now. All right, here we go. The image recognition works

perfectly and all of my ingredients are shown. Now, what I want to do is I want to add a button

that says make me my recipes. Once that button is pushed, I want you to suggest five recipes

based on the ingredients that are inside my fridge. All right, we're going to let that rip.

So one of the great things when you actually have your phone connected to your computer is down here,

you get to actually see everything. So you get to see what's actually happening. So you can see right

here that the log shows everything that was actually put out into the app. So you know what's

actually happening. So this is great for debugging. This is great for seeing logs to make sure that

everything is actually working correctly. So this is a pretty big part because now it's actually going

to build out our recipes. Yeah, you can see right here, it just popped up. So here's our recipes.tsx.

So this is where it's going to actually create the recipes. Right now we were using placeholder data

to make sure that it was good, but now it's going to actually take our data. That's why I like to do it

first, making sure that the visuals are there. And we could have spent four hours. You could have gone in

and designed them all in Figma. But again, here at speed, I just want to show you the process.

If you have inspiration, I would put them in there, drag them into your builder and say,

Hey, I want this website or this app to look exactly like this, you know, those types of things. But

for here, it's speed and showing you exactly how to build it, not to make it look pretty,

even though it still looks pretty good. So even if you have no skills of design, this actually looks

pretty good. Oh, I could already see our button, make me my recipes, even though it's not done

coding. So that'll be perfect. So actually, the more I think about it, when this is built with

my grocery list, I'm going to actually connect it to an API for a food delivery service. So I can

actually get all these groceries if I want for things that are missing, for example. And I'm also

going to add a social component to this so people can share recipes with our friends and family. And

then there's also going to be a feed of all kinds of stuff. So it's a simple idea that we can obviously

develop and evolve, but I just always wanted to build this for myself and now I'm just going to be able to do it.

All right. So let's take a look if everything works. Let's go in, grab our fridge, scan our fridge.

Here we go. We got our proper model selected. We have all of our functions now. So this should

give us the ability. So there's our ingredients, 16 items. And now when we click make me my recipes,

there it is, chefing up some ideas. I'm definitely going to be cooking up some ideas. I do like chefing

up though. There it is. Kobe beef and kimchi wraps, zucchini noodle salad with feta and grapes.

Pickled onion and egg toast with mixed greens. What? I would have never thought of that. Kobe beef bowl

with zucchini noodles and kimchi. That sounds amazing. You can also delete them now. So before

I don't have the delete function. And now let's take a look at Kobe beef. And now we have Kobe beef,

25 minutes, 600 medium. Here's all the ingredients. Here's all the noodle. We can also add missing

ingredients. Pretty impressed actually that I was able to do this in about 25 minutes, but let's keep going.

So now what I want to do, but before we do that, we got to have a little fun. So check this out. So I

have another image of my fridge, but it's the side with all of the sauces, including the champagne.

Let's see what it cooks up for pickles, sauces, champagne, ketchup, Italian.

This is going to be absolutely hilarious to see what kind of recipes can be made with champagne,

pickle juice, champagne, cocktail, ketchup, and Italian glazed chicken. Oh, this is too good. I love

it. Pickle juice, champagne, cocktail. Hope you guys are enjoying this video. It's been fun to vibe code

this and just show you the power of what Google has to offer anti-gravity and also how you can do

this and actually make phone applications that you can then submit to the iOS app store. And also,

like I mentioned before, if you guys are interested, definitely come check out the school,

come build with us. We have so many people creating some incredible applications, absolute beginners

that have never touched vibe coding before, all the way to full stack developers. Somebody in our

community just cost $300,000 in revenue and many people have reached the $10,000 mark and the $1,000

mark. So it's been really fun and rewarding to have a community. I built it for myself, but now we have so

many people and they're actually creating incredible products. And just like that, we have our whole app.

Now we're going to go in, we have all of our ingredients, every single thing that we wanted to

build and our app is complete so far. There's obviously a lot more work to do, but the whole purpose of

this was to show you guys the power of anti-gravity, power of Google, power of building using these

tools. Just taking a simple idea without a massive plan and just vibe coding it all the way through.

So definitely come build with us inside AI Builders. All the links are below and I hope you guys enjoyed

this video and I will see you in part two when I finish this app. I push it to Expo, I finish all

the features and then we're going to launch it to the iOS app store. All right, hope you guys are doing well

and I'll talk to you later.

Clips

No clips yet

Select text above to create your first clip

Loading connections...

Reflect

What would you ask the author if you could talk to them?

Press Cmd+Enter to submit