Browser

Built-in web browser for previewing and debugging

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

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.