Browser UI

Expand

The Browser page (/browser) provides a live view into the CDP-controlled browser instance, with an integrated chat panel for directing the browser agent.

Interface layout

The page uses a resizable horizontal split layout:

• Left panel — Live browser viewport with toolbar
• Right panel — Chat panel for sending instructions to the browser agent

The chat panel can be toggled on/off using the chat icon button in the header. Panel sizes are draggable and remembered between sessions.

Live viewport

The LiveBrowserView component shows a real-time screenshot of the controlled browser, updated continuously. The toolbar above the viewport provides:

• Navigation controls (back, forward, refresh)
• URL bar showing the current page
• Tab management via the TabBar component
• Recording controls for session capture
• Auto-snapshot toggle

Note

When the browser page is rendered inside the headless browser itself (detected via Playwright), a static placeholder is shown instead to prevent infinite recursion.

Chat panel

Type instructions to the browser agent in the chat panel:

Navigate to github.com/trending and screenshot the top 5 repos

Fill in the login form with my credentials from my workspace

Extract all product prices from the current page as JSON

The agent executes CDP commands (navigate, click, type, screenshot, extract DOM) in response to your instructions.

DOM tree viewer

The DOMTreeViewer component provides an interactive DOM inspector, letting you browse the page structure and identify elements for automation.

Network inspector

The NetworkInspector component shows recent network requests and responses from the controlled browser session — useful for debugging API interactions and monitoring automation behavior.

Recording controls

The RecordingControls component manages browser session recording:

• Start/stop recording
• Sessions are saved for replay and audit purposes

Session management

Browser sessions persist between page loads. If you navigate away from the Browser page and return, the browser is still at the same URL.

An AuthStateManager handles authentication state for the browser session, ensuring credentials and cookies are properly managed.

Guide

Click the book icon in the header to open an in-app guide with tips for effective browser automation.