Session Live View

With our Session Live View, you can easily display your running sessions with a few simple API calls.

Browserbase provides Session Live URLs allowing you to:

• Access and view a live Session for observability and debugging purposes
• Integrate a Live View of a running Session in your application
• Add a user interaction step to your automation or AI agent

​

Getting a Session Live URL

Request a Session Live URL using the Session Live URLs endpoint or SDKs:

​

Debug a running Session

Once a Session Live URL is retrieved (ex: debuggerFullscreenUrl), open it with Chrome to start taking action.

​

Give control over the Session to your end users

While Browserbase helps deal with common web automation problems, such as (anti-bot mechanisms, captchas, and downloading files reliably), some scenarios remain challenging to automate for technical or data-privacy reasons:

• iFrames can be difficult to work with as the loaded content might be external and could change without notice, potentially leading to error conditions. iFrames can be delegated to the end user by forwarding the remote control URL.

• Working with user credentials can be another tricky scenario. The end-user might prefer to fill out their credentials directly on the website instead of storing them elsewhere.

​

Example

These code samples show how to use a Session Live URL to hand control of the Session to the user:

• Node.js
• Python

import { chromium } from "playwright-core";
import { Browserbase } from "@browserbasehq/sdk";

(async () => {
  const browserbase = new Browserbase();
  const { id } = await browserbase.createSession();

  const browser = await chromium.connectOverCDP(browserbase.connectUrl({ id }));

  // perform actions ...

  const { debuggerFullscreenUrl } =
    await browserbase.getDebugConnectionURLs(sessionId);

  // forward the `debuggerFullscreenUrl` to the user
})();

​

Integrate a live Session iFrame within your application

Session Live URLs can be used to integrate a live view of ongoing automation within your application.

For example, an application enabling users to configure advanced health checks based on page content can benefit from allowing the users to see the health check recording in case of false positives.

​

Example

import { chromium } from "playwright-core";
import { Browserbase } from "@browserbasehq/sdk";

(async () => {
  const browserbase = new Browserbase();
  const { id } = await browserbase.createSession();

  // TODO:  store the Session `id` to database

  const browser = await chromium.connectOverCDP(browserbase.connectUrl({ id }));

  // ...
})();

import { Browserbase } from "@browserbasehq/sdk";

const browserbase = new Browserbase();

// retrieve `sessionId` from the database

const { debuggerFullscreenUrl: debugConnectionURL } = await browserbase.getDebugConnectionURLs(sessionId)

// forward `debugConnectionURL` to the front-end

<iframe
  src="{debugConnectionURL}"
  sandbox="allow-same-origin allow-scripts"
  allow="clipboard-read; clipboard-write"
  style="pointer-events: none;"
/>

​

Handling disconnections

If the Session Live View loses its connection to the browser, the iFrame will post a message to the window for you to handle the new state.

window.addEventListener("message", function (event) {
  if (event.data === "browserbase-disconnected") {
    console.log("Message received from iFrame:", event.data);
    // Handle the disconnection logic here
  }
});