1

Get your API Key

Your API key and Project ID are displayed in the Overview Dashboard:

Then copy your API Key directly from the input and update your .env by adding the BROWSERBASE_API_KEY entry

Alternatively, you can temporarily set the environment variable for a single bash command by prefixing it with BROWSERBASE_API_KEY=<your_api_key> in your terminal.

2

Install Playwright

npm i playwright-core @browserbasehq/sdk
3

Update your code or clone a template

Running your existing code with Browserbase only requires a few line changes:

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

const bb = new Browserbase({
  apiKey: process.env.BROWSERBASE_API_KEY
});

(async () => {
  // Create a new session
  const session = await bb.sessions.create({
    projectId: process.env.BROWSERBASE_PROJECT_ID
  });

  // Connect to the session
  const browser = await chromium.connectOverCDP(session.connectUrl);

  // Getting the default context to ensure the sessions are recorded.
  const defaultContext = browser.contexts()[0];
  const page = defaultContext.pages()[0];

  await page.goto("https://news.ycombinator.com/");
  await page.close();
  await browser.close();
  console.log(`Session complete! View replay at https://browserbase.com/sessions/${session.id}`);
})().catch((error) => console.error(error.message));
Be sure to set your BROWSERBASE_API_KEY and BROWSERBASE_PROJECT_ID environment variables.

4

Inspect the completed Session

You can find all the recent sessions on the Overview Dashboard, along with essential metrics:

Select your Session to inspect it with the Session Inspector.

Start building