Learn the basics of Google Antigravity

Today I'm going to be giving you the first look at anti-gravity, a brand new product by Google DeepMind built for developers.

And it combines the best of all worlds.

It's both an editor, an agent manager orchestration system, and a browser all in one product surface.

[Music] So to start, we're going to open up the anti-gravity app, and we're going to go through the onboarding. So let's click next.

Personally, I'm a light mode guy.

So, let's head over to default light mode and click that sign in with Google button.

So, you'll just use your normal Gmail account.

Click sign in.

And this will pop us back into anti-gravity.

All right. So, now we're logged in.

We're going to introduce you to a key concept of anti-gravity, which is that there are three main surfaces on which you can get your work done. The first one is called the agent manager. This is a place for you to manage and create agents across all of your workspaces. There is one agent manager window. Now, if you want to get into the code, if you want to take over from the agent, for example and bring that task from 90% to 100%.

You can at any point press commande or press the open and editor button.

And this will take you into the anti-gravity editor, which has things like tab autocomplete, the agent sidebar everything you've come to know and love inside of your editor products.

And finally, there is a browser. This is a brand new offering that incorporates an agent directly inside of Chrome.

So you can ask questions like test my feature and the agent manager or the editor will spawn a browser and click on the screen scroll on the screen to basically test the products that you're building.

So this is a really really powerful way to bring all that context, that rich context of applications and docs directly into the agent. So we're going to go with agent assisted development.

What this means is the LLM will automatically decide if something is worth our attention. If something is very very easy, the agent will just go off and implement it and come back at the end.

But for some things that are more complicated or if it has questions it might ask us, hey, why don't you take a look at this, answer a few questions about your codebase that I couldn't figure out, and then go off and execute.

So, it's a different way of working.

This is my preferred way. So, now that we finished onboarding, let's go ahead and get started on our first project.

[Music] You'll notice on the left side there is a sidebar and we're going to go ahead and add a new workspace. We're going to be working locally instead of an SSH.

So we'll press open folder and let's create a new folder. We'll just call it flight tracker.

, And, today, we're, going to, be building a flight tracker app where a user can add their flight number and it will directly integrate with your Google calendars to basically add that flight information to your calendar directly.

Build me a flight lookup next.js JS web app where the user can put in a flight number and the app gives you the start time, end time, time zones, start location, and end location of the flight.

For now, use a mock API that returns a list of matching flights.

Display the search results under the form input.

So, it's going to start and remember the setting that we chose for the agent to be making decisions on the user's behalf.

Because we chose that auto setting, this means that the agent is capable of running terminal commands on our behalf without our approval.

Now, if this command was something a bit more sophisticated, we want to build that trust with you as the user.

And so we'll obviously notify you to approve or deny that specific request. So, we'll go off.

It looks like we wanted to run create next app and the agent will now start doing work on your behalf in the background, but you can always check in on its progress. And one of the really really cool features for anti-gravity is this notion of artifacts. So if you click the right sidebar and this is available both in the editor and the agent manager.

You'll notice that the agent is putting together artifacts.

These are markdown files for the agent to sort of track its own progress, do research and even generate findings.

We see that the agent is keeping its own task list to keep track of its progress.

And this is something that you can also follow along with. We have instrumented the anti-gravity agent to work with three main artifacts. The first one is the task list which you saw and the other two are important for users to observe and approve. The first one is called an implementation plan and this basically specs out some of the research the agent did and it will give you a report of what it's going to do prior to actually going off and making changes to your codebase.

And finally, there's a walkthrough which happens at the end of an agent's task and it will communicate what it did as well as some of the verification steps it took to sort of prove that it completed it.

This might take the form of screenshots or terminal commands that it ran or unit tests or heck maybe even a PR description, things of that nature. And so it looks like our agent has done some research and we're now going to open up our implementation plan.

And you'll see this looks pretty good.

It's putting together some components.

It's telling me a bit about the styling, some of the ways that it's going to verify that it did the work correctly.

This all looks pretty good to me.

So now it's going to go off and start implementing all these files.

It'll keep track of its progress in the task list and you can follow along or you could even go get a coffee and come back.

It looks like the agent finished the code generation part. So now it's going to actually run the dev server so that we can check this out locally.

And it wants to launch the browser.

So let's go ahead and press setup.

You'll press install extension.

So let's go ahead and add this to Chrome.

So, what's really cool about anti-gravity is that because of this browser integration, it can actually test the code that it just wrote all on its own.

So, here we just generated a flight tracker and now with that blue little cursor, it's moving its cursor around the screen to actually test our application.

And in this case, it's adding in American Airlines flight 123.

It's testing some invalid states.

Um and it's basically going to deliver us uh a couple of screen recordings and a screenshot in our walkthrough report.

So, let's click review and we can see what it put together. It tells us a bit about the features that it implemented and importantly how it verified that the results were actually correct.

So, let's head back to our home. We call this the inbox.

This is where you can spin up new conversations and check in on your progress across all your different agents across all your different workspaces.

And so, now we're going to start two parallel tasks. And the beauty of anti-gravity is that you can have the agent do work for you in the background while you focus on maybe a more complex task in the foreground. Let's have it do some research.

So, we want to hook this up to live flight data. So, let's ask it to look up the aviation stacks API.

I already have an API key if you want to test with curls. Look up the documentation and make sure you use the curl responses to get the interface.

Let's make this app look a little bit more polished by giving it a logo.

The beautiful part about being part of the Google DeepMind ecosystem is that we have direct access to Nano Banana and the latest image generation models directly inside of the product.

So let's ask our agent, design a few different mockups for a logo for our app.

I want one that's more minimalist one that's more classic, one that's clearly a calendar, and any others that you think might fit. I want to use this as the favicon for our app.

So, let's head back home.

Oh, wow. It already looks like it's done with the logos. That was very, very quick.

And you'll see that it generated let's see, four different types of logos.

I really do like the look of this classic aviation style one.

So, let's tell the agent to implement this one inside of our project. I like the global flight tracker with aviation theme.

Add this as my favicon. And I actually should probably tell it to update my site title as well since I think it's using uh whatever came out of the initial generation script. So let's go ahead and tell it to do that as well.

And you'll see that we are sending it as a pending comment, which basically means the agent can take into consideration at some good stopping point in the conversation.

So here it already got started working on the favicon, but now it's also going to take into account that we want to change the site title.

And we didn't even need to babysit the agent.

We could just leave it and leave some comments and come back and it takes it into account. It's smart enough to know when and how to inject this into our conversation.

[Music] So, we'll head back home and it looks like now our aviation stacks API research is already done and it's written an artifact for us to review and it's done all this research on what the aviation stacks API can do and what data it returns and what's really cool is you can scroll through the conversation if you want more detail on how it got arrived at this conclusion and it did a Google search to basically figure out what is the aviation stack API what is the docs URL for this and it went out and actually read those pages to put together this research. And I also love that because we gave it an API key, it's able to literally run the curl requests and get sample data so that we know with very very high confidence and very high trust that this is correct.

So this implementation plan looks pretty good.

Let's actually tell it and leave it some comments.

So, just like a Google doc you can highlight text, leave comments and just say, "Use the key I gave you in thev.

local.

" We'll scroll through the rest.

And looks good to me. Implement this in a util folder so that I can apply it to the route.

Don't change the route yet.

Press submit.

Great. Now, let's hop back over to home.

And now we're going to go check in on our design of the favicons.

It looks like it's updated our favicon.

You'll see it now in the tab.

We should probably remove the white background at some point, but you kind of get the idea.

It's able to do this work in parallel.

So, now we're sort of multi-threading our brain across these two different projects. And you'll see that this aviation stacks API util is almost done.

Great. So, our agent has notified us that it's ready for review. And it looks like it created this new file, aviation stack.ts, in our utils folder.

And it looks like it used a lot of the research that it did before to make sure that this is correct. And let's now hop into the editor so that we can really really use this new util. We could ask the agent to do this, but I want to show you some of the features inside of the editor.

We'll head over to where I think the route is, and you'll see all this logic for mock flights that came out of the original generation.

And we can go ahead and delete all this. The editor is already suggesting that we replace our mock data with our live data.

So, let's go ahead and press tab to accept this suggestion.

, We're, going to, press, tab again, include the import.

And now let's just make sure that the rest of our UI is using these new type declarations from the API as opposed to the mock data. So, we'll go into page tsx and we'll sort of start poking around.

Looks like we'll need to change the shape of the data. So instead of flight which is the mock API schema, we are going to use the one from the API itself and it's called aviation stack flight data.

Because the agent has context over all the files in your codebase as well as the internet documentation that we retrieved earlier we can just tab tab tab and change all the instances in our UI of using the mock data to using the API data.

Now that this migration is complete, let's head back over to the browser and just make sure that the app actually works with this new live data. So, we'll type in a real flight.

Looks like American Airlines Flight 100 is taking off from JFK and landing in Heathro.

So, our app seems to be working.

Now, let's put a bow on it.

We want to be able to add this flight into our Google calendar. Let's ask the agent to do this for us. For each flight result, make the entire card clickable to open a Google calendar link with the flight information.

notably the times and locations.

Test this with the browser and show me a walkthrough when you are done.

Again, we could let this task run in the background, but this product is really really mind-blowing sometimes.

So, let's actually watch it side by side.

The agent will also show you what it's thinking about while it's doing its work.

So, here it's saying reviewing clickable items. It's starting to map some of the flight data, and now it's going to go off and read some of the files that are relevant for this conversation.

It looks like it's implementing the Google Calendar integration and the agent divides things into sections so it's a bit easier for the user to follow along. Of course, you can always get into the nitty-gritty by going to the editor and showing all the steps.

So, it looks like it's done and it's now going to the browser and actually testing this feature.

So, when the blue border is visible, this means the browser is under the agents control and here it's testing out American Airlines flight 100 and can move the cursor to click. And now you can see we are able to add this flight to our calendar.

And now that the agent is done using the browser, it's going to put together a walkthrough. This is the third and final artifact to show us that it is indeed done with the task that we requested.

And here you can see sort of some of the features that it implemented here, the Google calendar integration and that it verified using American Airlines Flight 100. And let's head back over to a browser. We can try this feature ourselves.

We'll come in here put in American Airlines Flight 100.

Looks like data is flowing correctly.

And hey, looks like it generated a calendar event for us.

So, let's head back over to our editor and let's commit this code.

And there's a nice little button here to just generate a commit message.

Again, this is contextaware, so it's using your conversation history in addition to the files to come up with this commit message.

This looks pretty good.

Let's commit it. There you have it.

We just built a new app from scratch in just a few minutes.

And we believe that this is the new way for devs to get work done.

Reviewing artifacts, managing multiple agents, and getting tasks over the finish line with an AI powered editor.

The anti-gravity team is already hard at work on what's next. So stay tuned for future updates.

I'll catch you all in the next one.