This article provides a first look at Anti-Gravity, a brand new product by Google DeepMind built for developers. It combines the best of all worlds, functioning as an editor, an agent manager orchestration system, and a browser all within a single, unified product surface.
Getting Started with Anti-Gravity
To begin, we open the Anti-Gravity application and proceed through the onboarding process. After a few introductory screens, you can select your preferred theme—light or dark mode. A simple sign-in with a standard Google account connects you to the service and drops you right into the main interface.
Once logged in, you are introduced to the core concept of Anti-Gravity: a workspace divided into three primary surfaces designed to streamline your development workflow.
The Three Core Surfaces
-
The Agent Manager: This is your central hub for creating and managing AI agents across all your projects and workspaces. It’s a single, powerful window that gives you a high-level overview of all autonomous tasks.
-
The Editor: When you need to dive into the code, you can seamlessly transition from the agent’s work to a hands-on approach. By pressing
commandeor clicking the “open in editor” button, you enter the Anti-Gravity editor. It’s a fully-featured environment with everything you’d expect, including tabbed files, intelligent autocomplete, and an agent sidebar to collaborate with your AI partner. This is perfect for taking a task from 90% to 100% complete. -
The Browser: A novel feature is the brand-new browser that incorporates an agent directly within a Chrome environment. You can issue commands like “test my feature,” and the agent will spawn a browser instance, autonomously clicking and scrolling to test the applications you’re building. This provides a powerful way to bring the rich context of web applications and documentation directly into the agent’s workflow.
For our workflow, we’ll select Agent-Assisted Development. This mode empowers the LLM to automatically decide which tasks require our attention. Simple tasks are implemented autonomously, while more complex problems or queries will prompt the agent to ask for clarification. It’s a collaborative and efficient way of working.
Building Our First Project: A Flight Tracker
Now that onboarding is complete, let’s start our first project. Using the sidebar, we’ll add a new local workspace by opening a new folder, which we’ll name flight-tracker.
Our goal is to build a flight tracker application where a user can input a flight number and see its details. The app will eventually integrate with Google Calendar.
We’ll start with a clear prompt for the agent:
Build me a flight lookup Next.js web app where the user can put in a flight number. The app should display 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.
The agent immediately begins working. Because we chose the auto-setting, the agent can run basic terminal commands, like npx create-next-app@latest, without requiring approval. For more sensitive commands, Anti-Gravity is designed to build trust by notifying you for approval.
The Power of Artifacts
A key feature of Anti-Gravity is the concept of Artifacts. By opening the right sidebar, you can see that the agent generates and maintains markdown files to track its progress, conduct research, and document its findings.
There are three main types of artifacts:
- Task List: A simple to-do list that the agent maintains to track its progress, which you can follow along with.
- Implementation Plan: Before making any code changes, the agent conducts research and presents a detailed report outlining its plan. This gives you a chance to review and approve its strategy.
- Walkthrough: At the end of a task, the agent delivers a final report communicating what it accomplished and, crucially, the verification steps it took to prove completion. This can include screenshots, terminal command outputs, or even a pull request description.
After a moment, the agent produces an implementation plan. It details the components it will create, the styling approach, and its verification methods. The plan looks solid, so we let it proceed. The agent now begins implementing the files, and we can either watch its progress in the task list or step away and come back when it’s done.
Once the code generation is complete, the agent runs the dev server and launches the browser to test its work. This requires a one-time setup of a Chrome extension.
With the browser integration, the agent can test the code it just wrote. A blue cursor appears on the screen, indicating the agent is in control. It autonomously navigates the UI, enters test data like “American Airlines flight 123,” and even checks invalid states. The results of this testing—screen recordings and screenshots—are compiled into the final walkthrough report for our review.
Multitasking with Parallel Agents
The true beauty of Anti-Gravity is its ability to handle multiple tasks in parallel. While one agent works on a complex task in the background, you can focus on something else in the foreground.
Let’s assign two new tasks.
Task 1: Research Live Flight Data We need to replace our mock API with real data. We’ll ask an agent to research a live data source.
Look up the Aviation Stack API. I already have an API key you can use for testing with curl. Find the documentation and use the curl responses to determine the data interface.
Task 2: Design a Logo To make the app more polished, we’ll ask another agent to design a logo. Thanks to its integration with the Google DeepMind ecosystem, Anti-Gravity has direct access to the latest image generation models like Nano Banana.
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.
Incredibly quickly, the logo design task is complete. The agent generates four distinct logo options. The classic aviation style looks great, so we instruct the agent to implement it.
I like the global flight tracker with the aviation theme. Add this as my favicon. Also, update the site title.
We can send these instructions as pending comments. The agent is intelligent enough to receive these comments and integrate them into its current workflow at an appropriate stopping point without needing to be babysat.
Meanwhile, the research on the Aviation Stack API is finished. The agent has produced an artifact detailing the API’s capabilities and data structure. By reviewing the conversation history, we can see the agent performed a Google search to find the documentation, read the pages, and even used the provided API key to run curl requests and fetch sample data. This gives us high confidence in its findings.
The implementation plan for the API integration looks good. We can leave comments directly on the plan, just like in a Google Doc.
Use the key I gave you in
.env.local. Implement this in autilfolder so that I can apply it to the route. Don’t change the route yet.
From Agent to Editor: Integrating the Live API
With the research done and the utility file created, it’s time to integrate it. While we could ask the agent to do this, it’s a perfect opportunity to showcase the editor.
The agent has created a new file, utils/aviation-stack.ts.
// utils/aviation-stack.ts
export interface AviationStackFlightData {
flight_date: string;
flight_status: string;
departure: {
airport: string;
timezone: string;
iata: string;
icao: string;
terminal: string;
gate: string;
delay: number;
scheduled: string;
estimated: string;
};
arrival: {
airport: string;
timezone: string;
iata: string;
icao: string;
terminal: string;
gate: string;
baggage: string;
delay: number;
scheduled: string;
estimated: string;
};
airline: {
name: string;
iata: string;
icao: string;
};
flight: {
number: string;
iata: string;
icao: string;
};
}
export async function getFlightData(flightNumber: string): Promise<AviationStackFlightData[]> {
const API_KEY = process.env.AVIATION_STACK_API_KEY;
const response = await fetch(`http://api.aviationstack.com/v1/flights?access_key=${API_KEY}&flight_iata=${flightNumber}`);
const data = await response.json();
return data.data;
}
We navigate to our page route file, which contains the original mock flight logic. We can delete all of it. The editor, aware of the context, immediately suggests replacing the mock data with our new live data utility. We simply press Tab to accept the suggestion and Tab again to add the import.
Next, we update our component’s UI to use the new type declarations from the API. The agent has context over all files and the documentation it retrieved, so changing all instances of the old schema is as simple as tabbing through the suggestions.
With the migration complete, we head back to the browser to test the app with live data. We type in a real flight, “American Airlines 100,” and see it’s correctly flying from JFK to Heathrow. The app is working.
Final Touch: Google Calendar Integration
To put a bow on it, let’s add a feature to save the flight information to Google Calendar. We give the agent one last prompt:
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.
We can watch the agent work side-by-side. It shows its thought process in real-time: “reviewing clickable items,” “mapping flight data,” and reading relevant files. It then implements the Google Calendar integration.
Once the code is written, the agent takes control of the browser again. The blue border appears, and it tests the new feature with “American Airlines 100.” It clicks the flight card, and a new Google Calendar event page opens, pre-filled with the correct flight details.
The agent then compiles its final walkthrough artifact, confirming the feature was implemented and verified. We can also test it ourselves, and it works perfectly.
Committing Our Work
To finish, we head back to the editor and click the “generate commit message” button. The agent, being context-aware, uses the conversation history and file changes to generate a descriptive commit message. It looks great, so we commit the code.
In just a few minutes, we’ve built a new application from scratch. This workflow—reviewing artifacts, managing multiple agents, and finalizing tasks in an AI-powered editor—represents a new paradigm for developers. Anti-Gravity empowers you to get work done faster and more efficiently than ever before.