Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.agentastic.dev/llms.txt

Use this file to discover all available pages before exploring further.

Agentastic includes a built-in web browser so you can preview your application, inspect UI components, and debug JavaScript without switching to an external app. The browser runs on WebKit (the same engine as Safari) and exposes a CLI called dev browser that AI agents can use to navigate pages, interact with elements, and verify their own changes — all from the terminal.

​
Opening a browser tab

Go to File > New Browser Tab. The tab opens to localhost:3000 by default (the http:// prefix is added automatically). You can navigate to any URL using the toolbar’s address bar.

​
Toolbar features

The browser toolbar provides standard navigation controls (back, forward, reload, address bar) plus four debugging tools:
  • Inspect element — inspect the DOM and CSS of any element on the page.
  • Console — view JavaScript output, warnings, and errors.
  • Screenshot — capture the current page to your clipboard.
  • Open in Safari — open the current URL in your default browser.

​
React Grab

React Grab is a feature designed for React developers. It lets you click on any rendered component to extract its source location, so you can tell an AI agent exactly which file and line to edit.
1

Enable React Grab

Click the cursor button in the browser toolbar.
2

Hover over a component

Move your cursor over the page. React components are highlighted as you hover.
3

Click to select

Click a component. Agentastic extracts the element markup, component name, source file, and line number.
The result looks like this: 
"<h1 class="sc-bTvRvy liXLGD">Terminal-first multi-agent IDE for Mac.</h1>"
in Typography at HeroSection.jsx:37:19
Paste this directly into your agent prompt to point it at exactly the right place.
Combine React Grab with a screenshot for maximum context: take a screenshot of a broken UI, inspect the component, and send both to the agent with “fix this element.”

​
Console

Click the </> button in the toolbar to toggle the console panel. The console captures:
Output typeAppearance
console.log()Standard output
console.info()Informational messages
console.warn()Warnings (yellow)
console.error()Errors (red)
Uncaught exceptionsHighlighted in red
Unhandled promise rejectionsHighlighted in red
Use the console for quick JavaScript debugging without opening an external browser’s DevTools.

​
Screenshot

1

Click the camera button

Click the camera icon in the toolbar.
2

Screenshot is copied to clipboard

The full-page screenshot is copied automatically.
3

Paste where needed

Paste the image into Agent Home, a terminal, or any other input that accepts images.
Screenshots are useful for sharing bug reproductions with AI agents, documenting UI states, and creating visual references for design feedback.

​
Open in Safari

Click the Safari button to open the current URL in your default browser. Use this when you need full DevTools, browser extensions, or compatibility testing in a different rendering engine.

​
Browser automation for agents

Agentastic exposes the built-in browser to AI agents via the dev browser CLI. An agent running in a terminal tab can navigate pages, inspect the DOM, fill forms, click elements, and read console output — programmatically and without human intervention.

​
How it works

When Agentastic opens a terminal, it injects two environment variables automatically:
VariablePurpose
AGENTASTIC_SOCKET_PATHUnix socket path for IPC communication
AGENTASTIC_BROWSER_IDID of the browser tab in the current editor pane
The dev browser CLI communicates with the app over this socket using JSON-RPC. Agents like Claude Code can call dev browser commands directly within their terminal sessions.

​
Quick start

Open a browser tab, then run commands 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
Element references are stable within a snapshot session but reset when you take a new snapshot.

​
Command categories

CategoryCommands
Navigatenavigate, back, forward, reload
Inspectsnapshot, screenshot, get title, get text, highlight
Interactclick, fill, type, press, keydown, keyup, check, select, hover
Waitwait selector, wait text, wait url, wait load
Queryis visible, is enabled, get attr, get count, get styles
Findfind role, find text, find label, find alt, find title, find first/last/nth
Consoleconsole list, console errors, console clear, errors list
Dialogsdialog accept, dialog dismiss
Cookiescookies get, cookies set, cookies clear
Storagestorage get, storage set, storage clear
Statestate save, state load
Framesframe select, frame main
Tabslist, open, close, focus_tab, tab new/list/switch/close
Injectionaddinitscript, addscript, addstyle
For the complete command reference, see Browser CLI Reference.

​
Example: agent testing a login flow

An AI agent can verify a login page end-to-end without any manual steps: 
# 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 account, verified via peer UID. No other user on the system can access the browser automation API.

​
Limitations

The built-in browser:
  • Uses WebKit (Safari’s engine), not Chrome or Firefox.
  • Does not support browser extensions.
  • Provides simplified DevTools — the console panel only; no full element inspector.
  • May render pages differently from Chrome or Firefox.
For full cross-browser compatibility testing, use the Open in Safari button or test in multiple external browsers.