Browser

Overview

Agentastic includes a built-in web browser for previewing web applications, testing APIs, and debugging frontend code without leaving the editor. The browser runs on WebKit (the same engine as Safari) and includes developer tools.

Opening a Browser Tab

Open a browser tab by:

• File > New Browser Tab, by default we open localhost:3000 - Automatically adds http://

Features

The browser toolbar provides standard navigation, beside that we provide four debugging capabilities:

• inspect element
• console
• take screenshot
• open in safari

Developer Tools

React Grab

A unique feature for React developers:

1. Click the cursor button in the toolbar to enable React Grab
2. Hover over React components on the page
3. Click to select a component

This helps you quickly grab component code from a running application. In addition to the element name, we also extract the location and line as well. This is quite handy for telling the agent which exact file to modify. e.g.

"<h1 class="sc-bTvRvy liXLGD" class="sc-bTvRvy liXLGD">Terminal-first multi-agent IDE for Mac.</h1>" in Typography at HeroSection.jsx:37:19

Console

View JavaScript console output:

• Click the </> button in the toolbar to toggle the console
• See console.log, warnings, and errors
• Errors are highlighted in red

The console captures:

• console.log() - Standard output
• console.info() - Information messages
• console.warn() - Warnings (yellow)
• console.error() - Errors (red)
• Uncaught exceptions
• Unhandled promise rejections

Screenshot

Capture the current page:

1. Click the camera button in the toolbar
2. Screenshot is copied to your clipboard
3. Paste into Agent Home, or the terminals

Useful for:

• Sharing bugs with AI agents
• Documenting UI states
• Creating visual references

Tip: if you don't like the element in the website, take a screenshot, and then inspect the element. Provide both the screenshot and the element to the agent, then tell the agent to fix that particular element.

Open in Safari

Click the Safari button to open the current URL in your default browser. Useful when you need:

• Full browser DevTools
• Browser extensions
• Testing in a different engine

Browser Automation for Agents

Agentastic exposes the built-in browser to AI coding agents via the dev browser CLI. Agents running in the terminal can programmatically control browser tabs — navigate pages, snapshot the DOM, click elements, fill forms, and read console output — all without leaving the terminal.

How It Works

When you open a terminal in Agentastic, two environment variables are injected automatically:

Variable	Purpose
AGENTASTIC_SOCKET_PATH	Unix socket for IPC communication
AGENTASTIC_BROWSER_ID	ID of the browser tab in the current editor

The dev browser command communicates with the app over this socket using JSON-RPC. Agents like Claude Code can call these commands directly from their terminal sessions.

Quick Start

Open a browser tab, then from the terminal:

# List open browser tabs
dev browser list

# Take an accessibility snapshot (returns a DOM tree with @eN refs)
dev browser snapshot --browser-id <UUID>

# Click an element using its @eN reference
dev browser click "@e5"

# Fill a form field
dev browser fill "input[name=email]" "user@example.com"

# Get the page title
dev browser get title

# Navigate to a URL
dev browser navigate "https://example.com"

Element References (@eN)

When you run dev browser snapshot, the DOM tree is returned with @eN references assigned to each interactive element:

heading 'Dashboard' @e1
  button 'Save' @e2
  textbox 'Search...' @e3
  link 'Settings' @e4

Use these refs in subsequent commands instead of CSS selectors:

dev browser click "@e2"     # Click the Save button
dev browser fill "@e3" "query"  # Type into the search box

Refs are stable within a snapshot but reset when you take a new snapshot.

What Agents Can Do

Category	Examples
Navigate	navigate, back, forward, reload
Inspect	snapshot, screenshot, get title, get text, highlight
Interact	click, fill, type, press, keydown, keyup, check, select, hover
Wait	wait selector, wait text, wait url, wait load
Query	is visible, is enabled, get attr, get count, get styles
Find	find role, find text, find label, find alt, find title, find first/last/nth
Console	console list, console errors, console clear, errors list
Dialogs	dialog accept, dialog dismiss
Cookies	cookies get, cookies set, cookies clear
Storage	storage get, storage set, storage clear
State	state save, state load
Frames	frame select, frame main
Tabs	list, open, close, focus_tab, tab new/list/switch/close
Injection	addinitscript, addscript, addstyle

See the full Browser CLI Reference for all commands, or read the Browser Use Skill Guide to set up agent access.

Example: Agent Testing a Login Flow

An AI agent can test a login page end-to-end:

# Navigate to the login page
dev browser navigate "http://localhost:3000/login"
dev browser wait load

# Snapshot to discover form elements
dev browser snapshot

# Fill in credentials
dev browser fill "@e2" "admin@example.com"
dev browser fill "@e3" "password123"

# Submit the form
dev browser click "@e4"

# Wait for redirect and verify
dev browser wait url "/dashboard" --timeout 5000
dev browser get title

Security

The socket only accepts connections from your user (verified via peer UID). No other users on the system can access the browser automation API.

Limitations

The built-in browser:

• Uses WebKit (Safari's engine), not Chrome
• Doesn't support browser extensions
• Has simplified DevTools (console only)
• May render differently than Chrome/Firefox

For full compatibility testing, use the "Open in Safari" button or test in multiple browsers.

Tips

Local Development

Keep a browser tab open to your dev server for quick previewing.

Use React Grab

Quickly extract component code instead of searching through files.

Screenshot for Context

Capture screenshots to include in AI agent prompts for visual context.

Console for Quick Debug

Use the console view for quick JavaScript debugging without opening Safari DevTools.

Browser + Agent Workflow

Open a browser tab to your dev server, then tell your agent to use dev browser commands to verify its changes visually. This closes the loop between code changes and UI verification.