Keywords: Google Antigravity, IDE interface, agent manager, code editor, built-in browser, AI coding environment, real-time preview, developer tools

Reading time: ~8 minutes

When I first opened Google Antigravity, I had no idea what I was looking at. As a network engineer who had used code editors only occasionally, the layout felt foreign. Panels everywhere. Sidebars. A browser embedded in the middle of a coding environment. Nothing was where I expected it to be.

Within an hour of actually using it, the layout started to make sense. The pieces I'd found confusing turned out to be exactly what I needed. The agent manager wasn't just another chat window — it was the core of how Antigravity works. The built-in browser wasn't a gimmick — it was how you see the result of your code changes immediately. The three-panel layout wasn't random — it was designed for the specific workflow Antigravity is built around.

This post walks through the three core components of Antigravity's interface: the editor, the agent manager, and the built-in browser. If you're new to Antigravity — or new to AI-powered coding environments in general — this should help you understand what each piece is for and how they work together.

The Overall Layout

Antigravity uses a three-panel layout by default. Understanding the role of each panel is the key to understanding the whole environment.

The left panel is the file explorer and project structure. It shows the files in your current project, lets you open files by clicking, and gives you a sense of the project's overall shape. For people used to finder-style file browsing, this is the most familiar part of Antigravity.

The center panel is the code editor. This is where you view and modify code files. The editor behaves similarly to other code editors — syntax highlighting, line numbers, tab-based file switching. The main difference is that the editor also displays AI edits in real time, with a visual distinction between your code and the AI's suggested changes.

The right panel — and this is what makes Antigravity different from a traditional editor — is the agent manager. This is where you talk to the AI. The agent runs in this panel, you see its progress here, and you approve or reject its changes from here. The agent manager is the core of Antigravity; the editor exists to show you what the agent is doing.

Some workflows add a fourth panel: the built-in browser, which shows the running application side by side with the code. The browser is below or beside the editor depending on the project layout.

The mental model that helps: the agent manager is where the work happens, the editor is where you see the work, and the file explorer is where you navigate. Everything else supports these three functions.

The Editor: Where You See the Code

The editor panel in Antigravity handles the same basic functions as any code editor: viewing files, editing them, navigating between them. If you've used VS Code, Sublime, or similar tools, the editor itself will feel familiar.

What makes the editor different is how it interacts with the agent manager. When the agent is working, you see its changes in the editor as they happen. The AI's additions and modifications appear with a visual distinction from your existing code — usually a different background color or a subtle animation. This lets you watch the work in real time without having to switch panels.

When the agent finishes, the editor shows you the final state of each file it modified. You can scroll through the changes, compare them to the previous version, and decide whether to accept the agent's work or ask for revisions. The accept/reject decision is per-file, not per-line, which keeps the review process manageable.

The editor also handles the diff view. When the agent proposes changes, you can see exactly what it wants to modify before accepting. The diff is standard — added lines, removed lines, context lines — and you can read it top to bottom to understand the change. This is the safety net for the agent's work: you always see what it's about to do before it becomes permanent.

One detail worth knowing: the editor in Antigravity can be configured to show or hide certain panels. If the three-panel layout feels cramped, you can collapse the file explorer or move the agent manager to a separate window. Most people settle on a layout within a few days and stick with it.

The Agent Manager: The Core of Antigravity

The agent manager is where you interact with the AI. This is the panel where you type requests, watch the agent think, see what files it's working on, and approve or reject its changes.

The interface is similar to a chat application, but it's more than a chat. When you send a message to the agent, the panel shows the agent's work in progress: which files it's reading, which files it's editing, what tests it's running, what errors it encountered. This visibility is what makes Antigravity different from a basic chatbot — you can see what the AI is actually doing, not just what it's saying.

The agent manager has a few key affordances worth understanding:

Plan view. For complex requests, the agent often creates a plan before starting work. The plan shows the steps the agent intends to take, the files it will touch, and the order of operations. You can review the plan and ask for changes before the agent starts. This is where you catch the "this is going to take the wrong approach" situations before they happen.

File-level approval. When the agent finishes a piece of work, it shows you the files it changed. You can accept all, reject all, or accept file by file. For most workflows, accepting file by file is the right pattern — you stay in control of what becomes permanent.

Conversation history. The agent manager keeps a complete history of your conversation. You can scroll back to see what the agent did earlier in the session, what worked, what didn't, and what the context was when you made earlier decisions. This is useful when the agent is working on a long-running task and you need to recall the rationale for a previous choice.

Context management. For long sessions, the agent manager shows you what context the agent is currently working with. You can add or remove files from the agent's context, which determines what the AI "sees" when working on a task. Managing context well is one of the bigger skills in using Antigravity effectively.

The agent manager is the panel you spend the most time in. The editor is where you check the work; the agent manager is where you direct the work.

The Built-in Browser: Real-Time Preview

The built-in browser is one of Antigravity's most useful features for web projects. It's a real browser embedded in the coding environment, showing the running version of the application as you work on it.

The browser updates as the agent makes changes. When the AI modifies the code, the browser reflects the change immediately — usually within a second or two. This feedback loop is what makes the development feel interactive rather than sequential. You're not waiting for the AI to finish and then running the app; you're watching the app change as the AI works.

The browser supports standard web development features: console access, network inspection, element inspection. You can debug the application directly in Antigravity's browser, just as you would in a separate browser tab. The difference is that the browser is always there, in the same window as your code, with the relevant context available.

For non-web projects, the browser is less directly useful, but the concept generalizes. Antigravity shows you the relevant output of whatever you're building — terminal output for scripts, log output for services, file content for data files. The principle is the same: keep the result visible alongside the code that's producing it.

The browser also handles the "is this working?" question more efficiently than checking a separate window. When the agent makes a change and the browser shows the expected result, you've confirmed the change works. When the browser shows something different, you can ask the agent to investigate. The feedback loop is faster than the alternative.

How the Three Panels Work Together

The three panels aren't independent — they work together as a single workflow. The typical pattern:

  1. You start in the agent manager, describing what you want to build or change.
  2. The agent reviews your project (using the file explorer data) and creates a plan, which appears in the agent manager.
  3. You review the plan in the agent manager, possibly asking for changes.
  4. The agent starts working. The editor shows the files being modified; the agent manager shows the progress.
  5. The built-in browser reflects the changes as they happen.
  6. The agent finishes. The agent manager shows the files changed; the editor shows the final state; the browser shows the result.
  7. You review the changes (in the editor) and accept or reject (in the agent manager).
  8. You continue in the agent manager with the next request, or you take over the code yourself.

The flow is circular rather than linear. You don't have to choose between "using the AI" and "writing code yourself" — you can do both in the same session, switching between the agent manager and the editor as needed.

For complex tasks, you'll often start with the agent, review what it did, and then take over a specific part manually because the agent's approach wasn't quite what you wanted. The editor is where this handoff happens.

Common Patterns for Each Panel

After using Antigravity for a while, certain patterns emerge for how each panel is used:

File explorer patterns. Most people use the file explorer as a navigation tool, not a workspace. The pattern is: open file, work in editor, close file. The file list is for finding things, not for managing them.

Editor patterns. The editor is most useful for two things: reviewing AI-suggested changes, and making small manual edits. For larger manual work, most people use a separate editor. Antigravity's editor is optimized for the AI workflow, not for being a full-time writing environment.

Agent manager patterns. The agent manager is where you spend most of your time. Effective use involves: giving clear, specific requests; reviewing plans before approving; checking context when responses seem off; iterating on descriptions when the agent doesn't get it right.

Browser patterns. The browser is most useful for verification — "did the change actually work?" The pattern is: ask the agent to make a change, watch the browser, accept or revise based on what you see.

These patterns aren't rules. They're what most people settle into after a few weeks. The first few days are slower as you figure out which panel to use when.

A Note on Configuration

Antigravity allows substantial layout and behavior configuration. The default three-panel layout works for most people, but it's not the only option. If something about the default doesn't work for your workflow, change it.

Common adjustments: moving the agent manager to a separate window for larger screens; collapsing the file explorer when working on a small set of files; resizing panels to give the editor more room for code review.

The configuration that matters most is the agent's context. As mentioned earlier, what the AI sees when working on a task is the single biggest factor in how useful its responses are. Spend time understanding the context settings; the layout will work itself out.

For someone just starting with Antigravity, the advice is the same as for any new tool: use the defaults until you understand why you'd change them, then change one thing at a time so you can see what each change does. The interface is designed to be usable without configuration, and most people find the defaults work for a long time before they need to customize.

Related Reading

Sources

— Justin

📅 First published: 2026-05-09 | 🔄 Last updated: 2026-06-22