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 dependencies

npm i puppeteer-core @browserbasehq/sdk

3

Update your code or clone a template

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

import puppeteer from "puppeteer-core";
import Browserbase from "@browserbasehq/sdk";

const BROWSERBASE_API_KEY = process.env["BROWSERBASE_API_KEY"]!;
const BROWSERBASE_PROJECT_ID = process.env["BROWSERBASE_PROJECT_ID"]!;

const bb = new Browserbase({
  apiKey: BROWSERBASE_API_KEY,
});

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

  // Connect to the session
  const browser = await puppeteer.connect({
    browserWSEndpoint: session.connectUrl
  });

  const pages = await browser.pages();
  const page = 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 to the values you copied from the Dashboard.

Get started with a Puppeteer Node.js template

Clone this GitHub repo to get started with Puppeteer

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