LongCut logo

Google Antigravity Full Tutorial for Beginners: How to Use Google Antigravity

By Mikey Ranks

Summary

Topics Covered

  • Self-Healing: When Something Breaks, the AI Fixes Itself
  • Vibe Coding: Describe What You Want, Not How to Build It
  • The Three-Layer Architecture That Makes AI Build Reliably
  • Build Once, Reuse Forever with Skills
  • Instructions Determine Output Quality More Than the Tool

Full Transcript

Starting a new project can make you feel a bit stuck sometimes, like you have an idea in your head. But turning that into something that actually works, especially if you're not deep into coding, that can be the hard part.

Google Anti-gravity approaches this differently. You focus on the idea, the

differently. You focus on the idea, the vibe of what you want to build, and then the AI handles the execution, and it's not just generating random code either.

There's a structured system behind it that keeps everything consistent and reliable. What makes it stand out from

reliable. What makes it stand out from most AI tools is how it's built.

Anti-gravity uses a three layer architecture directive orchestration and execution. So, it can handle more

and execution. So, it can handle more complex [music] tasks without falling apart. It also handles a self-healing

apart. It also handles a self-healing system, which [music] means if something breaks during the build, it can detect the issue, it can fix it, and it can keep on going. Now, this video is for anyone who's opened up a blank project

and didn't know where to start or who's tried AI tools before, but only use them for simple props. So the goal here is to move beyond that and actually build something functional so that by the end of this video you are going to create a

real working app sales dashboard for the Fables brand with styling and layout and data all put together. So rather than just explaining the tool we're going to go ahead and walk through building something step by [music] step. And

before we do dive in, if you do want to master Google Anti-gravity in just say 2 hours instead of spending weeks figuring it out all on your own, well, I do have a complete Google Anti-gravity Pro

program and a community with everything that you need. The links in the description down below. But first, let's go ahead and get you started with the basics here. Before you can start

basics here. Before you can start building anything with Google Anti-gravity, you first need to get the platform installed and connected properly. This part is pretty

properly. This part is pretty straightforward, but it matters more than people think because anti-gravity isn't just a normal app. It also needs access to your local workspace so the AI

can create files, organize projects, and run tasks for you. To get started, open up your browser and head to anti-gravity.google/d

anti-gravity.google/d download. And once you're there, just

download. And once you're there, just choose your operating system, download the installer, and then run it like any other standard setup. Now, anti-gravity

is designed to feel lightweight, but it works best with a stable setup. And

since it relies on AI model calls and web-based tools, having a solid internet connection does make a pretty big difference. As long as your computer can

difference. As long as your computer can handle modern browserbased tools, well, you should be fine. Once the

installation is finished, just launch Anti-gravity from your applications folder and you'll see the sign-in screen. So, click sign in and then log

screen. So, click sign in and then log in with your usual Google account. This

links your workspace and gives the platform access to manage your projects.

When you're inside, the layout is simple. On the left here is the file

simple. On the left here is the file explorer where your files and folders live. And then on the right is the agent

live. And then on the right is the agent panel where you interact with the AI, give it instructions, and review what it's doing. So from the start, this

it's doing. So from the start, this isn't just installing an app. It's

setting up a workspace where your ideas can turn into actual projects. Once

anti-gravity is installed, there's one more piece that makes everything more powerful. The Chrome extension, of

powerful. The Chrome extension, of course. Now, this extension basically

course. Now, this extension basically gives the AI eyes and hands inside of the browser. Without it, the AI can

the browser. Without it, the AI can still generate files and code, but with it enabled, they can't interact with web pages. They can observe what's happening

pages. They can observe what's happening and even record sessions for debugging.

This is especially useful when working with websites and testing or scraping data. Instead of relying only on text,

data. Instead of relying only on text, the AI can visually understand what's happening and respond more accurately.

In most cases, the extension installs automatically. To check, open the agent

automatically. To check, open the agent manager and click the Chrome icon at the top right. Now, this launches Chrome

top right. Now, this launches Chrome using the anti-gravity profile. If it's

not installed, the agent will guide you with a setup prompt. Just click setup or install and follow the steps to the official page. So once that's done, make

official page. So once that's done, make sure browser control is enabled. [music]

Go to anti-gravity settings at the bottom right here. Open up advanced settings. Then under the browser tab,

settings. Then under the browser tab, just toggle on enable browser tools.

Now, this is what allows the AI to actually use the extension. And once it is enabled, anti-gravity can now interact with the web. It can test things and help debug visually. And now

that everything is set up, let's go ahead and take a look at the interface.

At first, it might feel a bit unfamiliar, but it is at first because once you understand how things are laid out, it just becomes much easier to navigate. An anti-gravity, you're mainly

navigate. An anti-gravity, you're mainly working between two areas here. The

right side, you have the agent manager, which is where you will spend most of your time. Now, this is where you type

your time. Now, this is where you type your instructions. You talk to the AI,

your instructions. You talk to the AI, and then you watch it plan and execute tasks step by step. Now on the left side you have the editor mode where all of your files live as the AI builds things

for you. This is where you can open up

for you. This is where you can open up those files, review the code, and then make changes if needed. A simple way to think about it is this. The right side is where you tell the AI what to do and

the left side is where you check what it actually did. So now before you start

actually did. So now before you start building, it does also help to understand how everything is organized behind the scenes. So, first up, you have something called a workspace, which

is basically just a folder on your computer that contains everything related to your project. It acts as the main container that the AI can see and work with. And inside that workspace,

work with. And inside that workspace, you have your project, which is the actual thing that you're building. If

you want to switch projects, you can simply just open up a different folder from the top left menu. And when you look at the left panel here, you'll notice it's not just a simple file list.

There are a few sections that make it easier to work with your files. The

project section is your main file explorer. So that's where you'll see all

explorer. So that's where you'll see all of your folders and all of your files.

And as the AI runs, you'll also notice new folders like directives, execution, and temp/ getting created automatically.

Then you have the outline section which gives you a quick overview of whatever file you have currently open. So instead

of scrolling through everything, you can just click on a function or a section and then jump straight to it. So lastly,

here is the timeline section which keeps track of changes made to your file. If

say something breaks or it just doesn't look right, you can just go back, compare the two versions, and even restore a previous state. Going back to the right side here, the conversation panel is really where everything starts

because you type your instructions here at the bottom, and then the AI responds above with its plan and actions. You can

also use the at symbol to reference specific files or skills, which helps the AI understand your project better since it can read directly from your workspace. Before you start building

workspace. Before you start building anything, there is one more thing worth setting up properly, and that's your model and a few key settings. Right

below the conversation panel, you'll find the model dropdown, which is where you choose which AI you want to use. In

most cases, you'll switch between two options. If you want something fast and

options. If you want something fast and reliable for general tasks, then go with Gemini 3.1 Pro. If you're working on more complex layouts or more detailed UI, Claude 4.6 usually does a better

job. After that, it's a good idea to

job. After that, it's a good idea to check your settings so the AI behaves the way that you expect. Head over to the bottom right corner here and open up anti-gravity settings. Then go into

anti-gravity settings. Then go into agent settings. And the first option

agent settings. And the first option you'll see is auto execution, which controls whether the AI runs tasks on its own [music] or it waits for your approval. Now, if you want full

approval. Now, if you want full automation, you can just set it to always proceed. And if you prefer more

always proceed. And if you prefer more control, choose request review. Next is

review policy, which decides how often the AI pauses for feedback before moving forward. And you can keep it flexible or

forward. And you can keep it flexible or more controlled depending on how hands-on you want to be. For more

advanced control, open up advanced settings. And under the agent tab here,

settings. And under the agent tab here, you'll find terminal command auto execution, which allows the AI to run commands like say installing dependencies. It's also important to

dependencies. It's also important to turn on shell integration here so everything runs smoothly. Then under the browser tab, make sure enable browser tools is turned on. This gives the AI

access to web-based tools, which is especially useful for things like scraping data or testing web apps. And

once these are set, you're in a really good position to start building without running into any unnecessary issues. So,

this is where you're going to go through your first real vibe coding experience.

Instead of jumping straight into something complex, no, we're going to start with a simple link in bio page similar to link tree. It's a small project, but it clearly shows how anti-gravity works. From a simple idea

anti-gravity works. From a simple idea to a working app that you can open up locally. To get started, you do need a

locally. To get started, you do need a clean workspace. [music] Anti-gravity

clean workspace. [music] Anti-gravity uses a local folder to store everything it creates, including files like directives and execution. Start by

creating a new folder on your desktop or in your documents, and then name it simple project. Then open the

simple project. Then open the anti-gravity desktop app. In the top left corner here, click file, then open folder, or use the open folder button if your workspace is empty. Select the

simple project folder and click open.

Next, open the agent manager. Here

you'll find it in the upper right corner by clicking open agent manager. And this

is where you'll be giving instructions to the AI. It's basically your main control panel. You can also open it

control panel. You can also open it using the toggle agent icon or the shortcut Ctrl AltB. And once that's open, you can start your first interaction. So in this message box, you

interaction. So in this message box, you can type in, "Hi, I am insert your name here. I want to build a simple personal

here. I want to build a simple personal link in bio page." And with that, just press enter. So, this first prompt tells

press enter. So, this first prompt tells the system what you're trying to build and then allows it to start preparing everything in the background. At this

point, instead of writing code, you're just going to describe what you want.

And that's really the whole idea behind Vibe Coding. So, let's go ahead and type

Vibe Coding. So, let's go ahead and type in this prompt. Create a clean dark theme landing page. Include a circular profile picture placeholder, my name, Kelvin, a short bio, IT specialist, and

three buttons for LinkedIn, GitHub, and portfolio. Use Tailwind CSS for styling.

portfolio. Use Tailwind CSS for styling.

So, the more specific you are here, both in terms of design and tools, the better the result will actually be. After you

send in the prop, you'll notice that the AI doesn't start coding right away.

First, it shows you a plan. And this is where it breaks down what it's going to do, like creating files, adding Tailwind, and setting up the layout.

Take a moment to read through that plan.

If everything looks right, then click the approve or play button. Now, this

step is important because it makes sure that the AI is going in the right direction before it starts building.

Once you approve it, you'll start to see things happening here on the left side.

New files like index.html will appear and the code will start filling in line by line. And this is a system turning

by line. And this is a system turning your prompt into an actual working page.

And when it's done, go to the explorer, right click on index.html, and then click reveal in file explorer. Then open

up that file in your browser. And just

like that, you'll see your page running locally. No manual coding, just a clear

locally. No manual coding, just a clear idea and the right prompt. [music]

Once you've built something simple, it helps to understand how anti-gravity is actually working in the background. The

system uses a three layer structure to separate the goal from the technical execution which helps the AI stay organized instead of getting lost in the code. So for this part, please do

code. So for this part, please do download the provided agents.md file.

Now this is a really well-built threelayer architecture by Nick Save and we're going to use it as our reference and structure. The three layers are

and structure. The three layers are directive, orchestration, and execution.

The directive layer is the highle SOP or standard operating procedure written in markdown. The orchestration layer is the

markdown. The orchestration layer is the AI glue that decides which scripts need to run and in what order. The execution

layer is where the actual work happens through deterministic Python scripts, API calls, and other concrete actions.

So, this structure also supports self-healing, which anti-gravity refers to as the self annealing loop. If a

script fails, the AI can read the error log, fix the issue, and then try again until the task is complete. Another

advantage here is reusability. Once you

have a strong agents.md file and a few custom skills, you can reuse that setup and feature project, so you're not starting from scratch every single time.

To set this up, create a new project folder and give it a name. For example,

say realworld project. [music]

Next, open the downloaded agents.md file

and copy all of its contents. [music]

Then open up your project folder in Google Anti-gravity. Create a new file

Google Anti-gravity. Create a new file named agents.mmd and then paste

named agents.mmd and then paste everything into it. Save the file using Ctrl S. After that, go to the AI

Ctrl S. After that, go to the AI conversation panel and type at symbol agents.mmd instantiate. The instantiate

agents.mmd instantiate. The instantiate

command tells anti-gravity to read the full agents.mmd file and automatically

full agents.mmd file and automatically set up the project files based on the structure inside of it. Once the main structure is in place, the next thing that makes anti-gravity more powerful is

skills. Skills are repeatable processes

skills. Skills are repeatable processes that teach the AI how to handle specific tasks like brand extraction or database management. They save tokens, improve

management. They save tokens, improve consistency, and make the output more reliable. A skill is basically a

reliable. A skill is basically a specialized instruction file, and what makes it powerful is that it gives the AI a predictable set of rules to follow every time. To create one, we're going

every time. To create one, we're going to use the skill creator from Enthropic.

Go to this website here on your screen to check it out and get it for yourself.

On the left sidebar, rightclick skill creator and click download. Set the

download path to your project folder such as realworld project. Then go back to anti-gravity and you should see the downloaded skill creator folder in the

explore tab. Rename skill.md to

explore tab. Rename skill.md to

skill_killcreator.md

so it's easier to reference. With that

file from anthropics repository, you already have a structure now for creating skills without starting from scratch. For a brand extraction skill

scratch. For a brand extraction skill example, go to the right side of anti-gravity and change the model in the conversation panel to claim 4.6. Then

type in at symbol skill_kllcreator.mmd.

I want to create a brand new scale that uses the firecrawl API to scrape a website and pull in any relevant brand data, colors, typography, and fonts. I

also want to make sure we pull in any relevant or interesting images like header or hero images, logos, things like that. and also any information that

like that. and also any information that might be helpful in building a new website like particular styling effects, buttons and things like that. And after

that, do not press enter yet. Go to this website here on your screen. And at the top right side, click the copy page.

Paste everything below the prompt you already wrote, then press enter.

Anti-gravity will now use claw to read the instructions inside skill_kllcreator.mmd

skill_kllcreator.mmd and then create a new skill centered around brand extraction using file crawl. After that, you should see a new

crawl. After that, you should see a new brand extractor folder in the explorer.

Expand it and then rename skill.md to

skill_brand extractor.md so it's easier to reference. Once a skill like brand

to reference. Once a skill like brand extractor is built, you can move it into future project folders and still reference it in the AI conversation whenever you need it. As your projects get more advanced, you'll also start

working with multiple thinking processes or agents at the same time. And this

allows you to handle different parts of an app without everything getting all mixed up together. And you can run multiple agents simultaneously by opening up separate chat threads. And

each agent here can focus on a different feature. So instead of doing everything

feature. So instead of doing everything in one place, you can just divide the work and move faster. And if you're working on multiple projects, you can go ahead and switch between them using the

workspace switcher. This lets you move

workspace switcher. This lets you move between different folders or client projects without losing the context of what the AI was doing in each one. To

keep track of progress during a run, you can use the comment feature in the chat panel. Click add comment to cue

panel. Click add comment to cue instructions. The AI will check this

instructions. The AI will check this inbox of comments whenever it reaches a pause so you can guide it without interrupting the flow. For more complex builds, it also helps to break large

goals into smaller steps and instead of giving one big instruction, just split it into smaller directives. This keeps

the orchestration layer focused and makes the results more accurate. So for

this project, we're going to create a dashboard for Mr. Beast's Fastables chocolate website. And the goal is to

chocolate website. And the goal is to build a dashboard for tracking chocolate sales while also pulling in the style, the design, and overall feel of festivals.com. This project brings

festivals.com. This project brings together a few important pieces in one workflow. Brand scraping, external APIs,

workflow. Brand scraping, external APIs, and modern UI design. By the end, you're going to have a functional dashboard that looks aligned with the Fastables brand. So, to start, we need to pull in

brand. So, to start, we need to pull in brand information. Go to this website

brand information. Go to this website here on your screen. And on the left sidebar, rightclick brand guidelines and click download. For the download path,

click download. For the download path, choose your project folder. For example,

realworld project. Then go back to anti-gravity and you should see the downloaded brand guidelines folder in the explorer tab. Expand that folder and then rename skill.md to skill_brandg

guidelines.mmd. So again, it's easier to

guidelines.mmd. So again, it's easier to reference. After that, go to the AI

reference. After that, go to the AI conversation panel again and type update at symbol skill_brandguidelines.mmd

with the extracted information. Add any

new info that was extracted as well. So

what this does is take the information we extracted earlier using firecrawl and integrates it into skill_brandguidelines.fd.

skill_brandguidelines.fd.

Press enter and wait for it to finish updating. Next, we'll move into the

updating. Next, we'll move into the external API part which in this case is fire crawl. After that, go to the AI

fire crawl. After that, go to the AI conversation panel and type in at symbolskill_brandextractor.mmd

symbolskill_brandextractor.mmd and this website here on your screen update at symbolskill_brandguidelines.

MD. So this prompt is supposed to extract information from the feasible site and then update the brand guidelines file. But at this point we'll

guidelines file. But at this point we'll run into an error because the fire crawl API has not been connected yet. So then

the next step is setting that up. In the

AI conversation panel, type create av file for me to store my API keys. And

this should create av file which you'll see in the explorer here on the left sidebar. Then go to this website on your

sidebar. Then go to this website on your screen, create a new API key, and then give it a name. for example, realworld project. Then copy that key, go back to

project. Then copy that key, go back to anti-gravity, paste it into the env file and save it using command S or control S. And once that's done, go back to the

S. And once that's done, go back to the AI conversation panel and type I've added my key to the DNV file. Please

proceed with the brand extraction. And

at that point, with the fire crawl API connected, the extraction should continue and then finish properly. Once

the brand data is ready, the next part is the interface. So, to help anti-gravity create a more polished design, we're going to go ahead and set up the front-end design scale from

Anthropic, go to this website here on your screen again, and on the left sidebar, rightclick front-end design, and click download. Set the download path to your project folder again. Then,

return to anti-gravity. Then, you should be able to see the downloaded front-end design folder in the explorer tab.

Expand it and rename skill.md to

skill_frontenddesign.md.

And with that in place, everything is ready for the dashboard build itself.

Then go to the AI conversation panel and type prioritize the information in the brand data folder. Use

atfastables_com_brand_guidelines.mmd

and the images. Also use the best practices and at symbolskill_frontendesign.mmd.

symbolskill_frontendesign.mmd.

I want to create a clean modern dashboard focusing on the feastables brand to track sales of the feastables chocolate. Just create some fake sales

chocolate. Just create some fake sales data for now so that we can test this out. Make sure the entire dashboard fits

out. Make sure the entire dashboard fits on a single page and that there is a way for me to open this locally. Then go

ahead and press enter and wait for the AI to finish creating the web app. Once

it's done, go to the explorer tab here on the left sidebar. Rightclick

Feastables dashboard.html and then select reveal in file explorer.

Then open Feastables.html in your browser. And at that point, you should see a sales dashboard that feels heavily inspired by the Fastables website. And the nice part here is this

website. And the nice part here is this whole thing was created without doing any manual coding at all. For apps that need to store information over time, anti-gravity can also set up a local

database. And this is useful for things

database. And this is useful for things like user data, sales records, or anything else that needs persistence instead of just sitting in the front end. To set up a database for this

end. To set up a database for this project, just go back to the AI conversation panel and type set up a local SQL light database to store the sales data for the dashboard. The AI

should then create a DB file inside your workspace. And once it finishes, you

workspace. And once it finishes, you should see a file named sales.db in your explorer. After that, the next step is

explorer. After that, the next step is adding CRUD operations. Now, CRUD stands for create, read, update, and delete, which are the core actions used to manage database records. In the AI

conversation panel, again, instruct the agent to write execution scripts to create, read, update, and delete records from the sales table. The agent will then generate layer 3 Python scripts for

those database actions. In the explorer under the execution folder, you should see the new py [music] files appear. And

once the database is working, you can connect it to the interface. To do that, use this prompt. [music] Add a search bar to the dashboard UI that queries the SQL light database for specific

chocolate bars. And when that's done,

chocolate bars. And when that's done, just open up feasible dashboard.html again, and you should see a search bar in the middle of the page. So the last part is testing the connection. Ask the

AI to run a test script to verify that the database connection is secure and data is being saved correctly. And if

everything works, you should see a database integrity and security test showing pass along with the test suite complete. Now that confirms the database

complete. Now that confirms the database connection is secure and that the data is being saved correctly. So, at some point you'll probably notice that sometimes the AI gets it exactly right and other times it's a bit off. Most of

the time that doesn't come down to the tool. It just comes down to how the

tool. It just comes down to how the instructions are written. Small changes

in how you phrase things can make a big difference in the output. And the

quality of what anti-gravity builds really does depend on how clear your instructions are. The more context you

instructions are. The more context you give, the better the results. For

example, instead of saying something vague like build a site, it's much better to say something like build a sales dashboard for Mr. be using the extracted branding data in the brand

data forward slashfolder. And that extra detail helps the AI understand exactly what you're trying to achieve. It also

helps to be specific about the tools you want to use. Mentioning things like Tailwind CSS or SQLite. Make sure the AI uses the right text stack instead of guessing. And if you're explaining

guessing. And if you're explaining something more complex, you can also use voice input. Just click the microphone

voice input. Just click the microphone icon here in the chat bar and speak your instructions. This usually gives more

instructions. This usually gives more context and vibe compared to typing everything out. Before the AI starts

everything out. Before the AI starts building, it will show you a list of steps or a plan. Take a moment to read through it. If something looks off, you

through it. If something looks off, you can click add comments and adjust the plan before execution. This helps avoid unnecessary errors or wasted steps. As

you start building more complex projects, you'll run into errors, and that's completely normal. Anti-gravity

is designed to handle this through its three layer system where errors are treated as part of the process. And if

something does fail, the first place to check is the terminal output at the bottom panel here. This shows error messages and logs. The AI will usually read this on its own and suggest a fix,

but it still helps to understand what's happening. You can also use the browser

happening. You can also use the browser recording feature for debugging.

Activate the extension, click record, and then go through the action that's failing. The AI will then analyze that

failing. The AI will then analyze that recording and then use it to fix issues in the UI. If the AI gets stuck or starts looping, you can step in and just click the stop button in the chat and give a clearer or more specific prompt

to guide it back on track. One common

issue is forgetting to save important files like or agents.md. If those are not saved, the AI won't be able to read them. So, it's a good habit to press CRS

them. So, it's a good habit to press CRS regularly to make sure everything is up to date. Once you've built something

to date. Once you've built something that works, the next step is making sure it's actually usable beyond just a demo.

Right? A lot of projects look fine at first, but if the code isn't clean or organized, it does become harder to maintain or improve later. To start,

it's a good habit to review the code the AI generates. Open the files in the

AI generates. Open the files in the editor and check if things are structured properly. Look for simple

structured properly. Look for simple things like clear naming, organized sections, and modular code instead of everything being placed in just one file. It also helps to add proper

file. It also helps to add proper documentation. You can prompt the agent

documentation. You can prompt the agent with generate a comprehensive readme.md

file explaining how to set up and run this dashboard locally. And doing this makes it much easier for you or anyone else to understand how the project works and how to run it. For saving your

progress, you can integrate version control using GitHub. Open the built-in terminal and run commands like get init and get push to store your project in a remote repository. This gives you backup

remote repository. This gives you backup version history and a way to collaborate if needed. Finally, if you want to

if needed. Finally, if you want to prepare your project for actual use, you can ask the AI to optimize it. So, for

example, prompted to optimize the assets and minify the CSSJS files. And this

will help you reduce file sizes and improve loading speed, which makes a big difference for real users. So, at this point, you've seen the whole process now from setting things up to building

something that actually works like a real product. And that said, the tool is

real product. And that said, the tool is only as good as how you use it. The more

specific you are, and the more you experiment and guide it when needed, the better your results will be. And from

here, the best thing you can do is start applying this to your own ideas. So, you

already have the workflow, and now it's just about building on it. I want to thank you for sticking all the way through to the end of the video and investing your time with me today. I'll

see you at the next one.

Loading...

Loading video analysis...