Browser Preview
The Browser tab embeds a web browser within Tarsk, letting you preview your application while the agent works on it. This is especially useful for front-end projects where you want to see visual changes in real time.
Opening the Browser Tab
Section titled “Opening the Browser Tab”- Start the dev server using the Run/Stop button (see Dev Server for setup).
- Click the Browser tab at the top of the thread view.
- Enter the URL of your dev server (e.g.
http://localhost:3000) in the address bar.
The browser loads the URL and displays your application. You can interact with it just like a regular browser — click links, fill forms, and navigate pages.
How It Works
Section titled “How It Works”The Browser tab uses an embedded web view (iframe) that loads the URL you specify. It is not a full browser — it shares the same origin restrictions and capabilities as an iframe. This means:
- Works best with local dev servers on
localhost - Some external sites may refuse to load in an iframe due to security headers
- DevTools are not available — use the browser for visual preview only
Workflow
Section titled “Workflow”A typical workflow combines the Browser tab with the agent:
- Start the dev server (Run/Stop button).
- Open the Browser tab and navigate to your app.
- Ask the agent to make a change (e.g. “Update the hero section background color”).
- The agent edits the files; hot-reload updates the browser automatically.
- Verify the change visually, then continue with the next request.
Switching Between Tabs
Section titled “Switching Between Tabs”The Browser tab stays loaded when you switch to another tab (Chat, Explorer, etc.), so your application state is preserved. When you switch back, the page is still where you left it.
When to Use the Browser vs an External Browser
Section titled “When to Use the Browser vs an External Browser”| Situation | Recommended |
|---|---|
| Quick visual check of a change | Browser tab |
| Interacting with the app’s UI | Browser tab |
| Debugging with DevTools | External browser |
| Testing responsive layouts | Browser tab (viewport presets) |
| Checking network requests or console | External browser |
Click Open external in the Browser toolbar to open the current URL in your system browser.
For debugging, open the same URL in Chrome, Firefox, or Safari where you have full DevTools access. The Browser tab is designed for quick preview, not deep debugging.
Viewport Presets
Section titled “Viewport Presets”Use the viewport buttons in the Browser toolbar to simulate different screen sizes:
| Preset | Icon | Typical width |
|---|---|---|
| Desktop | Monitor | Full width |
| Tablet | Tablet | ~768 px |
| Phone | Smartphone | ~375 px |
This helps verify responsive layouts without opening an external browser. On the desktop app (Electrobun), the Browser tab uses a native webview for better performance.
Agent Browser Tool
Section titled “Agent Browser Tool”The agent can execute JavaScript in the Browser tab context using the run_js tool. This lets the agent interact with your running app — clicking elements, reading DOM state, or testing UI behaviour. See Chat for tool details.
Refreshing and External Browser
Section titled “Refreshing and External Browser”Click the Refresh button in the Browser tab toolbar to reload the current page. This is useful when hot-reload does not pick up a change, or when you want to reset the application state.