0:00 Google's anti-gravity changes everything about building real apps. Most ways of building apps require you to be either highly technical or to know how to code. And in this video, I'm going to show you how anti-gravity makes this incredibly easier and way faster. So you can avoid costly mistakes, save thousands of dollars, and launch working AI apps [music] without needing a full engineering team. And if you don't know who I am, I'm Joe. I'm an ex senior manager in big tech. And over the last five months, I've helped dozen of businesses transition into AI. So with that aside, get comfortable and let's dive straight in. The first thing you want to do is download antigravity. You can either find it typing anti-gravity.google or you can go inside my community agentic module. And here you will see shortly the list of
0:45 resources fully updated for agentic workflow and agentic. And this will be the initial page that you will be displayed with. So the initial thing that we do even before understanding anti-gravity and etc. We start from one foundational concept which is every project that we do needs to be inside a folder. So the first thing that we're going to be doing is open folder. We're going to go to desktop anti-gravity and we're going to create a new folder. For example, in this case it's the app uh and we're just going to open it. Okay. Now on the leftand corner, so right here you're going to have the name of the folder that you just created. And you will see that whenever we start typing with anti-gravity here you will have a list and a series of files mix between markdown HTML etc etc etc that
1:33 anti-gravity will generate automatically without your input. This page right here it's the right hand side and here we chat with our chatbot and with the our agents in general and this page right here with the anti-gravity logo is basically where everything that we do will be displayed. So we will be able to see exactly what's inside the files that anti-gravity is generating and in case to interact with those. Now what do we want to create? We want to create now a very simple app. But in order for us to make it effectively we need to actually have two things. So first of all we need to have clarity on the type of apps that we want to do needless to say. But second of all, it's very good if we can provide anti-gravity with an example of the type of app or a sort of a visual reference that it can use in order to
2:19 produce something that we really like. So how do we do that? One service that I would highly recommend I showed in the other video how you can take example from dribble but vzero from versel. It's a great service that I really really like. So you can press this link right here. You can go inside and I already prepopulated right here a very very simple prompt so that we could actually run it and see what's happening. So please help me create a modern and clean user interface for a to-do app that I would love to build. Ensure that the logo is in orange. Nothing crazy, nothing difficult. We're just going to run it and what's going to happen? What's going to happen is that this AI will take our prompt and will generate a UI that we actually like or that more or less reflects what we requested. And why is this useful? Because as you know from prompting engineering basics and if you
3:05 don't I'm going to just share a little nugget with you but the more context an AI has the better it is and within the context is extremely important also to have what we call examples. So if you were doing I don't know AI workflows with NA10 or agentic workflows with Gemini you would be providing this LLM with few real life examples that would help the LLM fix the behavior or adjust the behavior or adjust the output right and this is what we're trying to do with Versell right so we're just providing additional examples so the LLM can better understand the content and the context cool so vers finished running and this is the output that it created so as you can see there is a nice UI that we can actually now take as a reference and screenshot and feed it to
3:52 anti-gravity. So copy and here you can see it's interactive. We can you know type stuff and then move around delete we can do so many things. So versel is a very nice starting. Now we can go to anti-gravity paste it inside and we can record something along the way of hey I would like to create a todo app and in this app I would want you to use as a a reference for the user interface the screenshot that I provided. Please ensure that uh all of the buttons inside this UI are actually working and so the um person should be able to insert and delete tasks and also I would like this task to be categorized as per dashboard that you see. Cool. So now we can send it and as usual what's going to happen is that now the antigravity agents will
4:39 start running and we'll start creating the initial plan. Why am I talking about plan and I'm not saying that it will start generating the app right away. The reason is because and let me move myself so you can actually see it. So if I zoom in on the bottom of this, you will see that I have a planning uh button right here and then a fast conversation mode. What is the difference between the two? The difference is that whenever you have a planning uh conversation mode, the agent will start giving you a plan and therefore you can think about it as an SOP that you would use inside a business, right? And then it you can check this SOP and validate if all of the steps are there if you want to add something else and etc. If you go in the fast conversation on the other side it will just start immediately doing
5:24 whatever it is required. However, of course the output has a quality difference between the two right because if you let the agent think deeply through something then the output will be of course of major quality. If you want immediate answers, of course, the agent thought less about the the content and the context and therefore the quality is of course impacted. Now back to our app, we have the implementation plan and you can see that here you have an 80/20 of what it will do with a lot of steps and here you have also the tasks and you'll see that shortly after we we press proceed the AI agent will start actually initializing this process and this project and therefore we will start seeing this box ticked and this will also help us having an understanding of at what point the AI
6:09 agent is what is it doing and maybe where is it stuck so that we can help it out throughout the process. Okay, fantastic. So now the agent stopped and we can go check the result of this in the local host link which basically means local host that we are running the app inside our computer so not in a cloud and using the GPUs of the computer and so we can see that okay right here we have our app it's dark anti-gravity all tasks uh two pending task which is this one and we have a categorization let's see now if it did what we wanted which is add something So this is a new task and we can add it. Perfect. This is here. And let's see if
6:55 we can also change the category. New category right here. We we can. So this is perfect. How about if we cancel this? We can. And if the task is not more pending. Okay, you can see right here that the number is being updated. So perfect. It's working. So now the app we made something very simple. We could spend hours now making the UI better and fixing it and etc. However, this is just a front end right now. Let's make the core of the app working. So what do we want to do now? Let's imagine you are selling this app like because you created something so valuable that people are willing to pay. And by the way, if you want to learn how to sell it, please check my free community down there. We now need two things, right? We need
7:41 first of all a way to uh store the data any information of the people using the app. So these people needs to authenticate themselves with an email with a password and something like this. And then potentially we need a stripe payment, right? Or some sort of way to receive the money. So let's go back to anti-gravity and think about how we can do this. And in order to do that, we're just going to go in the NCP servers. And we know that the NCP is nothing more than the English let's say of apps through which apps and AI chat one another. And we can press Firebase here. You're going to have a button that will enable you to install it. And then you can install it right here. Right. So if you go into MCP servers now we are going to see that we have all of the possibility of using Firebase. Now the only thing that we have to do right now if we really wanted to use Firebase as a backend and in order to make it work is
8:28 simply to come back here and say hey I would like you to help me improve the app. I would like you to create a fully functioning backend so that whenever a new user comes in he has the possibility of being authenticated either through a Google signin or with a email and password. I would like you to use Firebase in order to create this fully functioning back end and to store all of the data. You have access to Firebase MCP. So please use it and create everything uh functioning for me. And now what's going to happen is then anti-gravity will start taking charge of the task that we just created and will start creating the whole uh structure for us. It's realistic that at one point in this prompt specifically we will have some sort of user interaction with the
9:15 LLM specifically for I don't know logging into uh Firebase I expect okay we can press proceed to the implementation plan I was saying to have some sort of human interaction and to use Firebase as a back end and the interaction that I'm expecting is some sort of login or to provide some support emails because at the end all of these services like Firebase they work with this specific um functionality and Firebase right now sorry and anti-gravity right now does not have all of these information stored for us and therefore it cannot input this information there okay so the first thing that I was mentioning it's here probably to proceed with the setting up the fire I need you to authenticate so please go here and paste your authorization code by here so login open I'm going to go back here login with
10:00 this continue allow so before continuing confirmation that uh perfect Perfect. This is the code. We can copy it. And boom. We are going to This is the code. Now we're going to copy it. And slowly anti-gravity will process all of the information. And then it will give us the great everything now seems to be working. Let's go and check in our local host how it looks. And we see that now the first thing that we see is this uh registration uh panel that we see where we have the Google sign in. We have also here the button. we have the possibility of creating an account and etc. Now, two things to say in case you tried them already. If you press Google, it will most likely not work. Yeah, error because we still did not deploy the app
10:46 and so until you deploy it, it will not really work. And email, if I try with my regular dami email and I press create account, I will see that also there is an oath configuration not found. And the reason is that within anti-gravity right here, uh, anti-gravity successfully created this integration, right? But we don't really have yet integrated it inside Firebase. Okay. So, the only thing that you have to do right now without uh complicating it that much is simply to go right here and paste the error and say, "Hey, I got this error when I entered my uh email and password.
11:35 Can you help me fix that?" Amazing. So, immediately after it says, "Okay, click this link Firebase console." If you see a get started button, see email password toggle enable and etc. So let's try it. Firebase. Great. So what did it say? Uh if you see a get started button, click it. Click it. We see the get started button. And now it's going to be these two, right? Uh select email password. Uh so it will be this one. And we're going to enable. And then we're going to uh press save. And then actually automatically uh it's even telling us that we have the sign in with Google. So we're just going to do
12:22 it right like this. Right. And we have a support email. I can put mine. I can press save. And this should be more than enough for us to be able to then proceed into anti-gravity and go back to our project. So now we have uh done both. So our method should be there. So now let's go test it out. Uh if we go right here and we press sign up and we put my email uh let's maybe put uh a different one and random six whatever password. If I press create an account then I'll be able to log in and now I can see that I can start doing the things that I was supposed to. Okay. So app created authentication done at least with the uh
13:09 email part. Let's now validate that also we managed to store the information and the emails that we registered right so if I go now on user right here I can see that I have all of the trial email that I used. So you see my last email GG and whatever with the password and etc. So now this is working. So what is another step that we have to do now now that everything is working is deploying the app right so we go back to our anti-gravity and we say hey please deploy the app now using uh Firebase MCP tool and you host it on Firebase hosting. So this way we we should be able now to also use the Google
13:57 authentication that we had in the beginning. And after we have done this, we have done all the login process and the registration process. And so a great next step would be to integrate a form of payment. We will be using stripe as an example in order to have a full stack developed app. Right? All right. So now the agent finished and here we have a link which is the link that we used in order to host this agent inside um Firebase. So now we can test first of all we see it right and you see it here uh that the app is live and here we can try and see if the Google uh signup works and as you can see it really does. So here we can continue and once we are logged in we will have our app fully functioning right. So now we can try and test it and here it works. Fantastic. So
14:45 now the last step we have to do is to connect Stripe API to this so that whenever someone logs in before logging in they have to go through a payment process and therefore we can get our 20 bucks a month or whatever we want to sell this app for and so we can start monetizing because at the end of the day anti-gravity is a great tool but the end in mind whenever we build something in the AI space or anywhere is to either you know uh save on costs make more money or efficient a process and or save some time. Right? So these are the three um I want to say soul in which we should be using AI. Good. So in order to do that we go back right here and we say okay. So fantastic. Now everything works.
15:33 I now need one last change, which is I need you to help me implement a stripe ament uh at the beginning of the process. So that a user before signing in has to pay I don't know how much? 20. Is that fair? 20 bucks a month. Okay cool. Here are the Stripe API. Cool. So now this is our
16:21 prompt. What do we need? We actually need a few things right now. We can go to the MCP servers and see if we have a Stripe thing. Okay, so here we have it. We can install it. And now here it says Stripe secret key. So what does it mean? It means that if you are new to the space, I will explain it in simple words. If you are not new to the space and so you've already done some automation, this means the API key, right? So whenever we have two apps that we need to connect in order to do that we do it through the so-called web hooks right or uh connections that happen in the web okay from app A to app B in order to do that there needs to be a sort of permission that we can grant an app in order for this app to access the
17:08 other app and this is given through a unique identifier and this unique identifier is the API key. So you can literally see uh it as a key that is connected to you as a individual and that will help you being authenticated and granted all of the permission in order to use a a certain service. Right? So what does it mean? It means that right here we have to go in our stripe. Uh okay, you're going to have to log in. I hope I did it already or that I can manage to Okay, the light is gone and it's gone. It's like just gone. I'll have to check it later. Everything is live. So [laughter] cool. Let me see. Fantastic. So, this is
17:54 the account. And where do we find our API keys? So, we're going to go on settings and go on developer. And then right here, you're going to have uh API keys. I assume is this one. And you're going to do manage API keys. And then here you will be like okay go create secret key building your own integration and create secret key. Here we're going to have to send a verification. I will open now Gmail. Okay. Here I has just authenticated myself and I just gave the confirmation. So trial anti-gravity app. Now create. And here it's going to be our API key that I will for sure delete right after this. So try API key. And we save it. As you can see now this is
18:40 perfect. It it is connected here. We can now run this and once again the stripe API key and you also have access to the MCP. We press enter and now what's going to happen is that the agent as usual will go inside Stripe use our API key and then implement the payment to our app and ideally if everything goes as per expectation we should have that at the beginning in the beginning form we should have a payment process that should enable us to uh get the money and receive the money right so of course this would mean that whenever we test it later on I'm not going to pay myself so yeah this is just to say the payment is
19:26 there fantastic So we are about to check if everything works as per expectation. So here we should be having that now with this link browser stripe checkout and boom amazing. So now the app asks us to pay and so with this once we will pay then we will be able to access the previous interface that we created and then we're going to be able to enter our to-do app. So now you have officially built a full stack app using anti-gravity. We managed to integrate not only a back end using Firebase but we also managed to integrate a payment process using Stripe. Now everything that we have learned is great on paper and building these things it's the first step. However, if you're interested in learning how you can monetize AI and AI
20:13 automation, I would recommend you to join my free school community
