Browser-in-the-Loop

Antigravity's browser-in-the-loop is what separates it from terminal-only coding agents. The agent can launch a real browser instance, navigate to your running application, click through flows, capture screenshots, and verify that what it built actually renders and behaves correctly. For frontend and full-stack developers, this closes the gap between "code compiles" and "the user sees what we intended."

What you'll learn

• Browser-in-the-loop lets agents drive a real Chrome instance to verify their own work
• Agents can navigate, click, fill forms, and capture screenshots as Artifacts
• Frontend iteration loops: agent modifies code, launches app, opens browser, verifies visually, reports back
• Browser recordings provide an auditable trail of agent-verified interactions

The problem

A terminal-based coding agent can verify that code compiles and passes unit tests. It cannot verify that a button changed from blue to green, that a form validates correctly in the browser, or that a navigation flow actually takes the user to the right page. For backend-only work, terminal verification is enough. For full-stack and frontend work, it is not.

The usual workaround is manual verification: you pull the agent's branch, start the app, and click around yourself. This is the bottleneck again. Browser-in-the-loop eliminates it by making the agent capable of verifying its own frontend output.

Options & when to use each

Verification method	What it checks	When to use it
Unit tests (terminal)	Logic correctness	Backend code, utility functions, anything without a visual dimension
Screenshot Artifact	Visual snapshot of a specific state	Quick verification of a single UI change: "Confirm the error message is red"
Browser recording	Full interaction flow, agent navigating the app	Complex multi-step UI flows: signup, checkout, settings changes
Manual browser verification	You open the app yourself	Final sign-off before merging; anything the agent cannot reliably evaluate (design fidelity)

Build it: browser-based verification

The browser-in-the-loop is not a separate tool you configure. It is built into the Antigravity agent. When the agent determines that browser verification is needed, it launches the browser automatically. Your role is to describe the verification you want.

Pattern 1: Visual verification

Prompt:
"Change the primary button color to #2563eb in the design system. 
 After making the change, start the app, open the browser, and show me 
 a screenshot of a page with the updated button."

The agent will:

1. Find the design system file with the button color definition
2. Change the color
3. Start the development server (npm run dev or equivalent)
4. Open the browser to a page containing a primary button
5. Capture a screenshot Artifact
6. Report back with the screenshot visible in the conversation

You review the screenshot and either approve or leave feedback.

Pattern 2: Flow verification

Prompt:
"Implement a 'forgot password' flow with email input and a confirmation page.
 After implementation:
 1. Start the app
 2. Navigate to the login page
 3. Click 'Forgot Password'
 4. Enter an email address
 5. Submit the form
 6. Verify the confirmation page appears
 Capture a browser recording of the entire flow."

The agent navigates the app as a user would, clicking through each step. The browser recording Artifact shows the complete interaction, so you can see exactly what a user would see.

Pattern 3: Cross-browser state verification

Prompt:
"Check that the mobile navigation menu closes after selecting a link. 
 Resize the browser to 375px width, open the menu, click a link, 
 and capture a screenshot showing the page scrolled to the linked section 
 with the menu closed."

The agent can set browser dimensions, simulating different viewport sizes. This is useful for responsive design verification without manually resizing your own browser.

How the browser agent works

The browser-in-the-loop is implemented as a specialized subagent. When the main agent decides browser interaction is needed, it spawns a browser subagent that:

1. Launches a Chrome instance (sandboxed, separate from your own browser)
2. Receives navigation and interaction instructions from the main agent
3. Executes them and captures results as Artifacts
4. Reports back to the main agent

The browser instance is ephemeral. It terminates when the task completes or when the conversation ends. It does not have access to your personal browser data, cookies, or saved passwords.

What goes wrong

Mistake	How you notice it	The fix
Relying on screenshots for complex flows	A screenshot shows one state correctly but the transition between states is broken	Ask for a browser recording for multi-step flows. A recording catches the transitions that screenshots miss
Not specifying which page to verify	Agent takes a screenshot of the wrong page, declares success	Be explicit: "Go to /dashboard, click 'New Project', and verify the form appears"
Development server not running	Agent reports "could not connect" or takes a screenshot of a connection error	The agent usually starts the dev server itself. If it does not, ask explicitly: "Start the dev server first"
Comparing screenshots across sessions	Visual regression -- something changed in CSS that affects pages the agent did not touch	For critical UI, use the browser recording across the full flow. One CSS change can break components the agent did not modify

Confirm it worked

If you have a frontend project available:

1. Ask the agent: "Start the dev server and take a screenshot of the home page."
2. The agent should start the server, navigate to the home page, and produce a Screenshot Artifact.
3. Ask a follow-up: "Change the page title to include the current year. Restart the server and show me a screenshot of the updated title."
4. The agent should make the change, restart (or hot-reload), and produce a second screenshot showing the updated title.

If you do not have a frontend project, create a minimal one:

# In a new empty directory:
mkdir browser-test && cd browser-test
echo '<!DOCTYPE html><html><head><title>Old Title</title></head>
<body><h1>Hello Antigravity</h1></body></html>' > index.html

Then ask the agent to serve this file and capture a screenshot. Even the simplest HTML page is enough to verify the browser-in-the-loop is working.

Next: Day 4 -- Antigravity: CLI, SDK & Agents