# In-App Browser

Source: https://docs.paradev.com/browser

Built-in browser pane for previewing your running services





The browser pane previews your running services inside the app.

<img alt="The in-app browser previewing a dev server" src="__img0" />

## Open a Browser Tab [#open-a-browser-tab]

* Press **⌘⇧B** to open a new browser tab
* Click the external link icon on any detected port in the sidebar to open it in the browser

## Navigation [#navigation]

The address bar has:

* Back, forward, and reload buttons
* URL autocomplete based on your browsing history
* Favicon display for visited sites

## Browsing History [#browsing-history]

URLs you visit are saved locally and appear as autocomplete suggestions. To clear your history:

1. Click the overflow menu (⋯) in the browser toolbar
2. Select **Clear Browsing History**

## DevTools [#devtools]

Open the DevTools pane next to any browser tab to inspect and debug the page.

## Design Mode [#design-mode]

Click **Design** in the browser toolbar to arm an element picker inside the page. Click any element and a prompt card opens under it: describe the change, pick an agent, and send. The agent receives the element's DOM, computed styles, React component metadata, and a cropped screenshot along with your note, in an existing agent terminal or a fresh session.

<video src="/videos/design-mode.mp4" className="w-full rounded-xl ring-1 ring-white/10 my-4" />

* Press **esc** to pick a different element; **esc** again (or the banner's ✕) exits design mode
* Works on any page the pane can load, including your local dev server

## Extensions [#extensions]

Browser panes run Chrome extensions, so password managers, passkeys, and content blockers work in the pane.

* **Install**: open an extension's page on the Chrome Web Store inside a pane and click the add button. Paradev lists the extension's permission warnings and asks before it installs.
* **Pin**: open the puzzle-piece menu in the browser toolbar to pin an extension to the toolbar. Right-click a pinned extension to unpin it.
* **Remove**: use the same menu. Removing asks first and deletes the extension's data.
* **Content blockers**: extensions that use `declarativeNetRequest`, such as uBlock Origin Lite, block requests in the pane.
* **Native messaging**: an extension that declares `nativeMessaging` can talk to its desktop app, for example a password manager. The desktop app must trust Paradev as a browser; 1Password lists it under **Settings → Browser → Add Browser**.

When Paradev has signed Chrome Web Store hashes for an extension, it checks the extension's files against them at every start. Extensions installed before this check existed are recorded on first use and checked from then on. If a file changed, the extension is turned off and shows as greyed out in the menu. Reinstall it to keep its data, or remove it.

Extensions run in your own browser session. Panes that agents open run in a separate session with none of your extensions and none of your logins unless you import them. Agents can manage extensions with [`superset browser extensions`](/cli/cli-reference#browser), and every install and removal still asks you in the app.

## Ports Integration [#ports-integration]

When Paradev detects a port in use (e.g. `localhost:3000`), clicking its external link icon opens it in an in-app browser tab instead of the system browser.

For workspaces on a [remote host](/remote-access), the desktop app forwards detected ports while that workspace is selected. See [Remote Access](/remote-access#ports-on-a-remote-host) for requirements and port conflicts.

## Drive it from the CLI and agents [#drive-it-from-the-cli-and-agents]

The [`superset browser`](/cli/cli-reference#browser) commands let an agent open, read, screenshot, and interact with a page in the pane you are watching.

```bash
# Open a page and get its pane id back
superset browser open --workspace <id> --url http://localhost:3000 --target new-tab

# Read, screenshot, and evaluate in the pane
superset browser eval --workspace <id> --pane <paneId> --code "document.title"
superset browser screenshot --workspace <id> --pane <paneId> --out shot.png
superset browser console --workspace <id> --pane <paneId>
```

For clicking, typing, scrolling, and form flows, `superset browser cdp` prints a raw [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) WebSocket endpoint for a browser-use or Playwright-class client. The endpoint drives only that pane's page (never the Paradev app itself), and pane operations are scoped to their workspace.

Agents use this through the [`superset:browser` skill](/skills). A pane you open runs in your logged-in browser session. Panes that agents open use a separate session with none of your logins unless you import them. Agents are instructed to confirm before consequential actions.

## Pane or standalone browser? [#pane-or-standalone-browser]

The `superset:browser` skill defaults to the in-app pane. When a page is or can be open in a workspace pane (previewing a dev server, verifying UI, clicking through a flow), agents use the `superset browser` commands above.

For targets a pane cannot reach (a real Chrome window outside Paradev, a host without the desktop app attached, or an isolated or cloud browser), the skill uses [Browser Use 3.0](https://docs.browser-use.com/open-source/browser-use-cli) as a second engine.

### Browser Use 3.0 [#browser-use-30]

<Callout type="info" title="Optional third-party software">
  Browser Use is third-party software from [Browser Use](https://browser-use.com). Paradev does not require it; the in-app pane needs no extra install. Attaching it to your running Chrome gives agents your signed-in sessions.
</Callout>

Browser Use 3.0 is a CLI that lets agents run Python against a browser over the Chrome DevTools Protocol. Paradev does not bundle it; agents check for it and ask before installing. To install it yourself (requires [uv](https://docs.astral.sh/uv/)):

```bash
uv tool install browser-use
browser-use --help
```

You can also run `uvx --from 'browser-use[cli]' browser-use …`. This does not add `browser-use` to your `PATH`, so each call needs the full prefix.

By default it attaches to your running Chrome (your real, signed-in profile), so the skill needs your explicit consent first. Otherwise agents use a scratch browser or a Browser Use cloud browser (which bills until stopped, so they ask first and stop it after). `browser-use --doctor` diagnoses connection problems, and `browser-use skill` prints the engine's own usage reference.

Browser Use can also drive an in-app pane: set `BU_CDP_WS` to the endpoint from `superset browser cdp`, and the pane appears as a single page target. The `superset browser` commands are the simpler default for panes.
