Browser Companion

The Browser Companion is an embedded web browser inside Scape's editor pane. You can browse the web without leaving Scape, and your Claude agents can drive browser tabs programmatically via MCP tools — taking screenshots, inspecting pages, clicking elements, filling forms, and reading network traffic.

Opening a URL

• From the UI: Open a browser tab in Scape's editor pane.
• From an agent: Use scape_browser_open (returns a tab_id for further interaction) or open_url (fire-and-forget).

Agent automation

Agents interact with browser tabs through a snapshot-based workflow:

1. Snapshot the page (scape_browser_snapshot) — returns an accessibility tree with stable element refs.
2. Act on elements using those refs — scape_browser_click, scape_browser_type, scape_browser_scroll.
3. Observe the result — scape_browser_screenshot, scape_browser_get_html, scape_browser_console.

Available tools

Tool	Description
scape_browser_open	Open a URL, returns tab_id
scape_browser_list	List all open browser tabs
scape_browser_close	Close a tab
scape_browser_snapshot	Accessibility-tree snapshot with element refs
scape_browser_screenshot	Capture a PNG screenshot
scape_browser_get_html	Get raw HTML (whole page or specific element)
scape_browser_click	Click an element by ref
scape_browser_type	Type text into an element
scape_browser_scroll	Scroll the page
scape_browser_navigate	Navigate to a URL
scape_browser_back / forward	Browser history navigation
scape_browser_reload	Reload the page
scape_browser_console	Read console logs
scape_browser_network	Read network requests
scape_browser_audit	Run a Lighthouse-style audit
scape_browser_wait_for_idle	Wait for network/rendering to settle
scape_browser_evaluate	Run JavaScript (separately gated)
scape_browser_inspect_component	Resolve React component source (dev builds)

Access control

Three layers control what agents can do:

1. Global toggle — enables/disables browser MCP tools entirely.
2. Per-tab robot toggle — each browser tab has a robot icon in its toolbar. Click it to allow/deny agent access to that specific tab.
3. Per-host allowlist — write tools (click, type, evaluate) require explicit host approval. localhost is auto-granted.

Dev server integration

When you're running a local dev server, the browser companion is especially useful for visual QA — agents can screenshot your app, compare against expectations, and iterate on fixes without you needing to check each change manually.

Use scape_browser_inspect_component on dev builds to resolve which React component renders a specific element and jump to its source in Scape's editor.