Full transcript
0:00Google's new AI coding tool,
0:01anti-gravity, has completely changed the
0:03way that we're now able to build
0:04applications and softwares just by using
0:07a single prompt. But the problem is that
0:09most tutorials that you see out there on
0:10YouTube get way too technical and
0:12completely skip the basics of how it all
0:14works. And so in this video, I'm going
0:15to show you exactly what anti-gravity is
0:17and how it actually works. I'm going to
0:19reveal 10 hidden features that separate
0:21beginners from the pros. And finally,
0:23I'm going to build a complete
0:24application right here in front of you
0:26so you can see the entire process step
0:28by step. And in case you don't know who
0:29I am, my name is Mikuel and I've scaled
0:31my own AI agency to six figures in 14
0:34months, helping over 50 businesses to
0:36implement AI and automations and tow
0:38over 20,000 people in the process. All
0:40starting with zero technical knowledge.
0:42With that being said, let's dive in. All
0:44right, so this here is a diagram that
0:45shows you exactly how anti-gravity
0:47actually works from top to bottom. The
0:49first thing is you. So you are an
0:51individual, you're a human that do two
0:53different things. The first thing is
0:54describe the task, which means that you
0:56describe to the actual agent what it is
0:58that you want. Whether you want to fix a
1:00bug, whether you want to build a to-do
1:02app, whether you want to build a finance
1:03dashboard. And the second thing that you
1:05do is edit code, which means that you
1:06review the work. Okay? You don't
1:08actually have to touch the code, but you
1:09check if AI did the right thing and you
1:11approve or ask for changes. Now, the
1:13good thing about this is that you
1:15literally don't have to touch the code.
1:16All you have to do is look at the output
1:17that it gave you, and if there's
1:19something wrong, then you tell the AI,
1:20"Hey, can you edit this part?" Now
1:22everything that's within this exact
1:23square is the app itself. So everything
1:26here is what anti-gravity gives you
1:27natively. And so you as a human you
1:29describe the task to the agent manager.
1:32Now the agent manager think of it as
1:33mission control. It's where you're going
1:34to type your task or request to the
1:36actual AI. It's where you're going to
1:37see your conversation history. So the
1:39actual inbox and it's where you watch
1:40what the agent is doing right here. So
1:42this is the manager for all the agents.
1:44Then on the other side we have the
1:46editor. This is the VS Code looking
1:48part, right? A normal code editor where
1:49you can see your project files, right?
1:51You can actually edit the code manually
1:53if you want and you can run terminal
1:55commands right here. But this is
1:57essentially the main hub where you can
1:58add all the files. You can uh you can
2:00look at the code that it's doing and all
2:01the different you know areas that it's
2:03actually working on. So again you as a
2:05human you have to describe the task to
2:07the agent manager and you have the edit
2:09code that is going to be in the editor.
2:11And a good thing is that you can switch
2:12between the agent manager and the editor
2:14at all times. These are just two
2:15different views of the same app. Then
2:17you ask yourself who is actually making
2:18the software because VIP coding is just
2:20you putting a prompt and getting
2:21something out of it, getting a software.
2:23So the way that it works is that when
2:25you describe the task to the agent
2:26manager, this sends the request to the
2:29actual agent. And this right here is the
2:31AI worker. When you give a task, the
2:33agent plans so it figures out what steps
2:35to take. It codes so it writes the
2:37actual code so you don't have to. And
2:39then it runs, which means that it
2:40executes terminal commands. So it
2:41starts, you know, taking action on what
2:43it needs to do. And finally, it also
2:45tests. So, it opens the browser to check
2:47if it actually works, which is a
2:48beautiful thing about anti-gravity
2:49because it goes in your browser and acts
2:51as if you know you're going there, which
2:53means that it tests on your behalf. And
2:55a good thing about this as well is that
2:56the agent is autonomous, which means
2:58that it does everything on its own and
3:00then it comes back to you for approval.
3:01Then you ask yourself, what does the
3:02agent use to actually make the software?
3:04What you use is three different things.
3:06So, the first one is the model. Now,
3:08this is the AI brain. See, this is the
3:09intelligence powering the actual agent
3:11um that's making the appro software. So
3:13you can use Gemini 3 Pro and which is
3:15Google's then you can use Claude which
3:17is anthropics and GBT which is open AIS.
3:19So different brains have the same agent.
3:21So you can just choose which one works
3:23better for you. Now typically Gemini 3
3:25is best for creating you know nice
3:28looking front ends. Front ends is just
3:29like the way that the software look.
3:31Then we have cloud which is more backend
3:32stuff. So more you know writing the
3:34actual code and getting sophisticated
3:35with that. And then GPT is more for
3:37everyday tasks that's more fast and
3:39easy. Then we have the browser. Now, the
3:41browser is a built-in Chrome uh browser,
3:43right? The agent can literally open
3:45websites here. It can click buttons. It
3:47can fill out forms. It can take
3:48screenshots. It can record videos of
3:50what it's doing, which is exactly one of
3:51the big differences between anti-gravity
3:53and lovable bolt. And this is how it's
3:55going to test your app because it
3:56actually uses it like a human would. So,
3:58you don't have to. And then finally, we
4:00have the MCP servers. One of the most
4:01powerful features of anti-gravity when
4:03making apps because this means that you
4:05are literally connected to any software
4:08that there is out there basically as
4:09long as they have an API. This can be
4:11connecting your software to N10,
4:12connecting your software to Slack to
4:14Google Sheets. And so the agent can do
4:16things outside of just your code like
4:18post a message, send a message to any to
4:20maybe trigger an automation uh or pull
4:22in any single data that it wants. And
4:24I'm going to show you exactly how you
4:25can connect any to anti-gravity as well
4:27to be able to make these softwares come
4:28all together. Now the agent itself when
4:30it is creating the software, it does
4:32also create artifacts. What this means,
4:34and I'll show you exactly, you know,
4:35when I actually build it. When I tell
4:37the agent, hey, I want a software that
4:39is a finance dashboard. Well, the first
4:41thing it does is plan, right? And so it
4:43starts making task list. It starts
4:45making a plan. Sometimes when it does
4:46test, it takes screenshots. It takes
4:48recordings and those are things that we
4:50call artifacts which are all stored in
4:52our workspace. Okay, so the full project
4:54is stored in our workspace. Our
4:56workspace is basically just a folder
4:57that you make on your laptop and all the
4:59files that the actual agent is using are
5:01all going to be stored there. So that
5:03you end up having different folders in
5:04your sort of desktop, right? Which all
5:07represents different projects which
5:08again are files and also the code that
5:10the AI agent built and the files that it
5:12uses to make that code. So now that you
5:14understand the basics of how it all
5:15flows together and connect with each
5:16other, let's dive into the actual
5:18platform and show you how it works. All
5:19right, so the first thing you want to do
5:20is you want to be able to download the
5:22actual software on your MacBook. And so
5:24you can either download for Mac OS here
5:26or you can press download here and it
5:28will take you to a page where you can
5:29download it for Windows, Linux and Mac
5:31OS as well. Once you downloaded the
5:33software, you will get on a page that
5:34looks like this. Now it might seem a bit
5:36complex because it starts showing you
5:38folders, manager, repository. It looks a
5:41bit techy here and there. But it
5:42actually is very easy to understand. So
5:44there are three different components to
5:45it. There's one component here, the left
5:47hand side. There's a second which is the
5:48middle and then the third one which is
5:50here. Okay. Now this is what we called
5:52editor. It's where we edit the [music]
5:53actual things. All right. So on the left
5:55hand side we have the open folder. So
5:57this is where we get to make the folder
5:58which is going to be on stored in our
6:00MacBook or our computer. Why is because
6:02all the artifacts which is all the
6:03files, the whole code, all the different
6:05things that it uses to make the actual
6:06software will be stored in one place and
6:09that's going to be that folder which is
6:11you know the workspace. And when you
6:12open this folder so let's say we open it
6:14up, we create a new folder and we name
6:16it test NA10. We can create this and now
6:20I can open it and then I can put yes I
6:23trust the authors and right here I can
6:26see that we have opened a workspace and
6:29now I can start adding in files right
6:30here to the workspace that the agent can
6:32actually use when making the software.
6:34Okay now once we have made this in the
6:36middle right here I can see the code
6:37being built live and on the right hand
6:39side you can think of this as the
6:41chatbot that you talk to sort of like
6:42the AI that you're actually using uh to
6:44make the software and so here is where
6:46you actually tell it to action on
6:47something. Now right here you can see
6:48that you have the different models. So
6:50this is the brain Gemini 3 Pro uh low
6:52flash
6:54here and GPT as well. Again Gemini 3 Pro
6:57is great when you're building web apps
6:58just because it is very good to make it
7:00visually appealing while Cloud Opus 4.5
7:02is something that you know you actually
7:03use when you're making something that's
7:05a bit more complex when you're making
7:06software and then finally GBT for you
7:08know easier tasks as well. And then on
7:10the left hand side you can see that we
7:11have two different types of conversation
7:12modes. We have planning and we have
7:14fast. And what it is in a very easy way
7:16is that when you tell the agent to do
7:17something. So let's say you tell it to
7:18make a software. Do you want the agent
7:20to plan before executing the tasks which
7:22is planning before executing the task?
7:24Well, yes I do. I want to see exactly
7:26how it plans throughout the actual way
7:27of making a software so that if anything
7:29goes wrong, I'm there. Okay. On the
7:31other hand, we have fast. So the agent
7:34will execute the task directly. This is
7:35used for simple tasks that can be
7:37completed faster. So if you are making a
7:38software, you typically want to have it
7:40on planning mode to make sure that
7:42you're all good. Now, one thing that you
7:43do want to do is you want to make sure
7:44that the agent when it's making the
7:46software, it doesn't have to ask you
7:47every single time if this is right or
7:49this is wrong, right? Cuz it can be
7:50overloading, especially when you're
7:51making something a bit more complex. You
7:52don't want to get questions all the
7:54time. And so, the way to change that is
7:55you want to go to the settings on the
7:57top, you want to go to open anti-gravity
7:59user settings, and then right here on
8:01agent, you'll be able to see that this
8:03will be turned on. So, you want to turn
8:05it off. And you want to make sure that
8:06the review policy is turned to always
8:08proceed and terminal command auto
8:10execution is turned to always proceed.
8:12Now, is this the safest thing to do? No.
8:15But when I'm building software, I don't
8:16want to be there. As in I can go get
8:18food, I can go get a drink and so on.
8:19And when I come back, I can make sure
8:21that it's done without me having to
8:22answer every single question and making
8:24sure that I'm there for every single
8:25step, which is why I put always proceed.
8:27But if you're doing something a bit more
8:28sensitive, then you might want to have
8:29this to request a view to make sure that
8:31the agent always gets your input for
8:32every single step. So that right there
8:33is the main editor interface. Now on the
8:35left hand side you can also see that we
8:36have code search, we have source
8:38control, run and debug, remote explorer
8:40and extensions. Now code search is when
8:43you want to find something within the
8:44code. I don't typically use this.
8:46Neither are you to be honest, especially
8:47when you're not a coder. Uh which is
8:49fine. Then we have source control, we
8:50have run and debug, and we have remote
8:52explorer. Three things that I don't
8:53really use. The main one that you're
8:55going to use um out of this three would
8:56be run and debug in case you know
8:58something is wrong with the code and you
9:00want to debug it. Debug just means
9:01fixing the code. You can see everything
9:03here. And then finally, we have
9:04extensions, which you can think of the
9:06app store for anti-gravity, which means
9:08that you can get these different apps
9:09and connect them to the software to be
9:11able to add functionalities. Not
9:12something that we're actually going to
9:13use uh when making the software, but
9:15something that you could do to add more
9:16things over time. And lastly, from the
9:17editor settings, we also have the
9:19customization in MPC servers. I'm not
9:21going to dive into this in specific. I'm
9:23going to dive into this later on, but
9:25customizations is basically when you
9:26want to make the agent better. You can
9:27also add more rules and I guess more
9:29files that you can just always reference
9:31in MCP servers. If you press on here,
9:33you can then look for the MPC server.
9:35Now, MCP stands for model context
9:37protocol. And what it means is that you
9:38now basically have the ability to
9:40connect to any software that you want in
9:43this list. But also, if you press manage
9:46MPC servers, you can also press this
9:47button right here, which is view raw
9:49configuration, and you can add your own
9:51API, which you are going to do when
9:52you're connecting any to anti-gravity.
9:54And now that we're done with this, we
9:55can press open agent manager. And this
9:57will take us to the agent manager right
9:59here. Now, for the sake of this video,
10:00because I want to keep it simple for
10:01now, I'm not going to dive too deep into
10:03the actual agents and how they work and
10:05actually testing them out. Uh, but if
10:07you want a video on this, you can let me
10:08know in the comments down below. I'm
10:09happy to do it. But all it is is for
10:11every project, every workspace that you
10:12have, there's going to be at least one
10:15agent working on something. Okay? So, at
10:16least one agent may be working on a
10:18software app or maybe working on the
10:19interface of the of the software that
10:21you're building. But then you can also
10:22run different uh agent in parallel so
10:25simultaneously at the same time to be
10:27able to have different agents doing
10:28different things at the same time when
10:30you are making the software and you do
10:32this by starting the conversation which
10:33you can here again it looks pretty
10:35similar to the one we had before which
10:36are all going to be under the same
10:38workspace and you can add more and more
10:39agents here. So you can say hello. Let
10:41me just put it here. You'll see the
10:43agent here. And you can add another one
10:44here. Hey.
10:47And you start adding more and more
10:48agents which will work simultaneously
10:51under the same project and workspace.
10:53Okay. I'm just going to delete the
10:55conversation right here. And delete this
10:58here as well. And this is great because
10:59if one agent is doing something and it
11:01takes a bit longer, you can start
11:02working on the next task at the same
11:04time. Now talking about running
11:06different agents altogether there's a
11:08concept of pricing and context window
11:10length. What that means is that yes
11:11anti-gravity is free but at the same
11:13time there are limits to how much power
11:15how much context you're giving the agent
11:17and how many agents you can run
11:18altogether because you can run into rate
11:20limits which means that it's telling you
11:22hey you're using different things too
11:23much. You basically you're running to
11:25putting too much information to the
11:26system and you're giving too many tasks
11:28to do at the same time. You have to slow
11:30down and in that case you would have to
11:32upgrade or you have to wait 5 days.
11:34Okay, bear that in mind when you are
11:35building this. Maybe it wasn't a thing
11:37two weeks ago, but it is now. All right,
11:38so now on to the fun part, which is
11:39actually building the vibe coded app
11:41step by step. The first thing you want
11:42to do is you want to open folder, and
11:44you want to name a folder in your
11:45computer. You can name this uh finance
11:48dashboard. Dashboard right here, create.
11:52And you want to press open. So this is
11:54where we'll be adding all the files that
11:55we need. Now, for every vibe coded app,
11:57you can think of it as a GPT where a GPT
11:59maybe does a specific function. In this
12:01case, a GPT uh builds you an app. For
12:03every GPT, you need a prompt. You need
12:05instructions. And so when I build a vibe
12:07coded app, when I build an app, which in
12:09this case, let's build a finance
12:10dashboard, I want to give the GPT, which
12:12in this case is the agent, instructions
12:15that it needs to follow when making the
12:16app. But I also want to give it the
12:18brand guidelines of my company. So that
12:20with these two together, it then gives
12:22us a much better output compared to what
12:24I actually want and what I'm envisioning
12:26compared to if I don't do that. Okay. So
12:28the first thing I want to do is I want
12:29to go here and I can press new file. So
12:31again, these are the files that the
12:32agent is going to be using when making
12:34the app. So you want to give it context
12:36as to what you want it to do. [music]
12:38And the file we name it as Gemini MD.
12:41Now MD stands for markdown which is a
12:43type of way that you write things. So
12:45computer can you know they can look at
12:47the hierarchy of text. Heading one will
12:48be hashtag, heading two will be two
12:50hashtags and so on. Right? That way then
12:52understands the hierarchy of text. So
12:54that's going to be for this system
12:55instructions. And then we want to create
12:56a new file which is going to be called
12:58brand guidelines.
13:01MD and this is going to be the file
13:03where we add the brand guidelines for
13:04our brand so that it uses that when
13:06making the app. First thing we want to
13:07do here is go to the notion document
13:09which has both the system instructions
13:10prompt and the brand guidelines. If you
13:12want access to this document, you can
13:13check it out in the second link down
13:14below in my free school community. Um,
13:16and once you get on this document, you
13:18can simply just copy the system
13:19instructions and bring it here and paste
13:21it. And make sure that you press command
13:23S, so you save the file. [music] And the
13:26same thing with brand guidelines. go
13:27back here and you copy and then you
13:30paste here command S. So first thing is
13:33the instructions. So we say build a
13:35personal finance dashboard. And by the
13:36way, these asterisk here are just
13:38bolding the text, right? So it
13:40recognizes that that's one of the most
13:41important parts of that sentence. Uh for
13:43tracking income, expenses, savings, and
13:45budget. This app allows users to monitor
13:47their financial health, view transaction
13:48history, manage cards, and track
13:50spending against budget limits.
13:52Navigation structures, we have the top
13:53navigation tabs, the header elements,
13:55the dashboard page. Uh, we have card
13:57one, card two, income, expense, total
13:59savings. It's a very detailed prompt
14:01explaining exactly what I want inside
14:03the software. Okay? The more explicit
14:05you are with the instructions, the
14:06better it is. Cuz yes, these softwares
14:09are amazing in building software, but
14:11they're only as good as the instructions
14:13that you tell them to. Cuz let's say you
14:14had to use him bolt, really fast guy,
14:16right? But if you put him in a race and
14:18you tell him to run left, he will run
14:19left and he'll lose. Why? Because of the
14:21instructions. Okay? So, it's not about
14:23the powerful. And so you want to make
14:24sure that your instructions are dialed
14:25in which is why this prompt is very very
14:26detailed and that's going to be for the
14:28system instructions. And then we have
14:29brand guidelines. So here I put brand
14:31name JM solutions and then we have the
14:33logo usage, the logo. Then we have
14:35primary colors to dark blue. Uh what
14:37kind of actual color do we want inside?
14:39Second colors, neutral colors,
14:41typography, UI elements. So a bunch of
14:43things that I want according to my brand
14:44and my agency. Then we also have tone of
14:47voice and contact as well. Okay. So
14:50these are two different things that
14:51again it's going to use as context. And
14:52I want to go here. I want to make sure
14:53that this is planning. I want to make
14:54sure that this is Gemini 3 Pro cuz I
14:56care about the looks. And right here, I
14:58can say, I want you to go to the
14:59Gemini.md file that's in the project.
15:02And I want you to follow like actually
15:04read the prompt thoroughly and make sure
15:05you follow the prompt step by step and
15:07build out the software that I want you
15:08to build. And also, when you do build
15:10the software, I also want you to look at
15:11the brand guidelines.mmd file that's
15:14also in the project to make sure that
15:16you get the brand guidelines right for
15:17the software that you're building. Okay?
15:18And in case you're wondering how I just
15:20spoke and it wrote this, I'm using
15:21Whisper Flow, which is a very good
15:22software that I use every single day
15:24until my credits run out. So that's it.
15:27I'm going to press run. And now we get
15:30to see the agent live. So you can see
15:32here it says we analyze Gemini.m MD and
15:34analyze brand guidelines, which is
15:36exactly what we wanted to do, right? As
15:37context. And so usually I make sure that
15:39I have all these things kind of lined
15:41out uh before we make the actual
15:43software. All right. So right here on
15:44the left, you can see that now it's
15:45making the task. So a task is basically
15:48a list of steps that it knows that it
15:50just plans that it needs to do to be
15:52able to get to the outcome which is a
15:54full tested app right um that works
15:56which is exactly what we wanted to do
15:58and so now we'll go through step one
15:59step two step three step four and step
16:01five it's basically like a software
16:02engineer when they have to make some
16:04sort of software they will set up a plan
16:05that they have to follow and this will
16:06be the task that he needs to do now in
16:08terms of the plan to be able to build
16:10this [music] we have the implementation
16:12plan which is just made as well and the
16:13implementation plan would be some sort
16:15of um plan here, some sort of document
16:18that outlines the different things that
16:21are going to be within the software and
16:22the plan of action that he needs to use
16:24when making the software. Now, one
16:26feature that I think is really
16:27interesting that they actually added is
16:29the ability for you to comment on the
16:31plan and it will use that comment when
16:32actually making the software. If I go
16:34here to let's say apply global styles
16:35for base background, I can then comment
16:38and I can say make sure that the
16:40background is clean and it's very
16:42neutral and it's nothing crazy. I can
16:44press add a comment and now I press
16:47review and now it will be using that
16:49exact comment when it's making the
16:51actual software. Press review. I can
16:54press submit. So if I put myself on the
16:55left hand side, you can see here that it
16:57said pending comment here. Commented on
16:59implementation plan and so now it knows
17:01that we commented and it will start
17:02maybe iterating that feedback right that
17:05we give it uh when making the actual
17:07interface. As you can see here as well
17:08while I was talking it made different
17:10files. So these are all part of the same
17:13sort of software. And while I was
17:15talking, it actually started making the
17:17different files here. So these are the
17:19artifacts that I'm talking about. This
17:20is all code, right, that we're not going
17:22to understand, but it's all going to be
17:24stored under the same project. And we
17:25still have brand guidelines, and we
17:27still have gemini.md. And so all of
17:29these are going to be stored in that
17:30specific folder project that we
17:32mentioned that we made. And if I go back
17:33to task, I can see that now it finished
17:35phase one, it finished phase two, it
17:37finished phase three, and it's going
17:39through one step by step. It's great
17:41because I get to see exactly the whole
17:43thing behind what it's doing and why
17:44it's doing it. It just finished phase
17:46three. It's then going to phase four
17:48feature implementation and it's walking
17:49you through exactly step by step what
17:51it's doing. And as you can see, I can
17:53simply just go off have dinner or have a
17:55drink and when I come back and maybe in
17:575 to 10 minutes, it would all be done.
17:59But of course, there are times where it
18:00starts asking you questions as to
18:01whether this is right, whether this is
18:03wrong and you have to be there to give
18:04some input. All right, so it just
18:06finished the phase 4 feature
18:07implementation and I'm having fun
18:09actually looking at what it's doing and
18:11and so on. Not that I understand most of
18:12it, but you know, still nice to look at.
18:14All right, so now it said that it
18:15finished phase 5 as well. So we had
18:17phase one until phase 5 and there's only
18:19two things that I want to show you. The
18:20first thing is me telling it, hey, can
18:22you actually test it on the browser and
18:24make sure everything is working right?
18:26Um, yeah, just test it and let me know
18:28if everything's all right. I can press
18:29go. And now what it's doing is it's
18:31going into the actual local host, right?
18:33Launching browser, which will be right
18:34here. And now it's trying to launch the
18:36application onto our browser to make
18:38sure that it test and make sure that
18:40everything is good. You can see the blue
18:41borders on the left. You can see that
18:42it's saying get DM. Uh so it's just
18:45testing things and now it's going to
18:46test the different functionalities of
18:48the whole dashboard to make sure that it
18:50all flows together and it does
18:51everything. Now this basically replaces
18:53the job of someone having to build a
18:55software and testing it out and see if
18:57it works and debug it and so on. Now is
18:59it to a place where it can replace a
19:00full software engineer's role? probably
19:02not now yet, but it will be in a place
19:05where it would just because it will
19:07pretty much do the whole process from
19:08the ideation to the implementation to
19:10the planning to the debugging to the
19:12testing. It will do everything on its
19:13own. So now it says here that I've
19:14tested the application in the browser
19:16and everything is working correctly.
19:17I've included a recording of the
19:19verification session in the walkthrough
19:21which I can open. If I go down here, I
19:22can see that in the walkthrough which is
19:24one file in the artifacts, it gives us
19:26the video of it testing, right? So you
19:30have everything here all at the same
19:32time which is pretty nuts to see to be
19:34honest. So you get to see the whole
19:35testing process that it went through on
19:372x pretty much. And the last step is
19:39actually testing it on our browser to
19:41make sure that it does work. I can say
19:42can you give me the link and actually
19:44hosted uh hosted locally. So I can press
19:46in the link and it takes me to my
19:47browser directly. I can press go and
19:50here we get the link to your local
19:51hosted application. I can press the link
19:54which will take me here and this will be
19:56the full vibe coded app that we just
19:58built. We have the dashboard. We have
20:00transactions. We have wallet and we have
20:02goals. So dashboard will have total
20:03balance, total income, expenses,
20:05savings. We can have my cards, total
20:07income. So all the dashboards, the
20:08budget, uh we have monthly spending
20:10limits, recent transactions, which are
20:12great. I can go to transactions. I can
20:14add a transaction like I did before. I
20:16can press income. Let's say I do
20:17100,000. I can do AI agency category
20:22will be let's just do education. I can
20:24press save transaction. If I go to
20:26dashboard, I can now see that the total
20:28balance is 104,000. So, we can see that
20:30it did work. In the wallet, we have our
20:32cards and for goals, we can set goals as
20:34well. In this case, we have vacation
20:36fund, but you can then add more and more
20:37goals. So, overall, from that one prompt
20:39and those two pieces of information that
20:40we gave it, which is the brand
20:41guidelines and the gemini.md, which is
20:44the full system instructions, it was
20:46able to build this full uh working
20:48vibcoded app that we can now host on
20:51Versel. So we can now import it into
20:53GitHub and from GitHub you actually host
20:55it on the web using Verscell so that you
20:57can actually start using it right away.
20:58And now you may be asking yourself but
21:00what if my backed app just doesn't work
21:02or maybe there's some feature that I
21:03press it doesn't do what it wanted to
21:05do. Well in this case let's say we have
21:07welcome back Alex. Of course my name is
21:08not Alex. I can go here to the
21:11anti-gravity and I can say hey on the
21:13first page in the dashboard it says
21:16welcome back Alex. My name is not Alex.
21:19My name is Mik. I got the spelling
21:21wrong, but actually it doesn't. So,
21:22there you go. Uh, I'm going to press go.
21:24And now what it should do is it should
21:26update the actual app. In this case, if
21:28yours is a feature, so if it doesn't add
21:29the transactions, you can say, "Hey,
21:31I've tried to add the transactions. It
21:32doesn't work. Why does it not work?" And
21:34it will run through the whole process
21:35again. It will iterate based on your
21:37feedback. Again, you're editing the
21:38actual backcoded app to be able to fix
21:40it. Or you could as well go to the
21:42actual review, go across whatever you
21:43didn't work, so in this case,
21:44transactions. And then you can leave a
21:46comment say hey transactions
21:49doesn't work and you can add a comment
21:51here and then it will use that comment
21:53to be able to make those changes. All
21:54right. So after waiting for the change
21:56in the dashboard to Mikuel. If I go here
21:58to the dashboard I can see that the
22:00dashboard changed just a tiny bit from
22:02the one that we had before. They added
22:03some stuff on the left. They added the
22:05admin on the right. I think it actually
22:06looks better than before. It looks more
22:07concrete. Um and now it made sure that
22:10the names is Mikuel and it's not Alex
22:12even down on the cards here. And it's
22:13great for us because it actually made it
22:15more concrete. But if in case you don't
22:16actually like the changes that it made,
22:18you can always go back here and you can
22:19press this little arrow, which means
22:21undo changes up to this point, which
22:23basically goes back to the way that the
22:24software was before you asked for the
22:26change. And the final feature that I
22:28want to show you on how to set up is the
22:29MCP. Okay, so now I'm back here on the
22:31default setting. I can go up here to the
22:32MCP servers. I can then go to manage
22:34MCP. And now I want to connect N10 to
22:37anti-gravity because if I search here
22:38N10, nothing actually comes up. So we
22:41have to do a what we call a custom API
22:43call or a custom sort of [music] um MCP
22:46configuration. Once you get to the
22:47manage MCP servers on the top here you
22:49will have this page that looks like
22:50this. I'm going to put this here and you
22:52will want to press on the view raw
22:54config. Okay. So that you have something
22:56that looks like this which is empty.
22:58What you want to do now is you want to
23:00go to N10. So let's go here to N10.
23:03You want to go down to the settings and
23:06you want to go to MCP access. And you
23:09want to make sure that you go to the
23:10access token. Make sure to refresh the
23:12access token. And you can press here.
23:14And now you will see the JSON file. Make
23:16sure not to share the JSON file with
23:17anyone because then it will be able to
23:19use your account. I can copy this. I can
23:21then bring it back. I can paste it here.
23:23And now I can go to file, save. And if I
23:26go to manage MCPS, I can refresh the
23:29MCPS. And I should be able to see the
23:31N10 MCP connected to our account. Fast,
23:33quick, and easy. Now, what does this
23:34actually do? Well, when you're making
23:36the vibe coded apps or vioded anything,
23:38you can now connect or you can tune in
23:40to end to receive data or to actually
23:43send data for whatever reason you wanted
23:45to in case you wanted to build an
23:46automation around any sort of app that
23:48you're building. So, as I mentioned
23:49before, I'm going to leave all the
23:50resources in a second link down below
23:52the actual prompts that I used to make
23:53the Vivecoded app so you can copy and
23:55paste them for yourself in my free
23:56school community. And now I hope you
23:58understand anti-gravity at least the
23:59basics and the fundamentals but also how
24:01to build a vibe coded app step by step
24:04which means that you're now ahead of
24:05most people who are using these kind of
24:07softwares. And if you're looking to work
24:08with me onetoone to be able to start
24:09your AI agency then I left a link down
24:11below which is a quick video walking you
24:13through exactly uh the details of how it
24:15works and check out this video up here
24:16where I show you exactly how you can
24:18build autonomous AI agents and workflows
24:20just by using the one and only clock
24:22code. With that being said, I hope you
24:24found value from this video and I'll see
24:26you in the next