Using Browserbase

You can use a service that provides a headless browser—such as Browserbase—to run your Bytebot queries. A headless browser helps you avoid running a complete instance Chrome on your production hardware. Browserbase makes it easy to deploy a headless browser.

Sign up for Browserbase and obtain an API key

To start, you will need an API key from Browserbase. You can sign up for access at Browserbase.

Once you have obtained an API key from the Browserbase team, you will need to update your .env file accordingly.

$BROWSERBASE_API_KEY=your_browserbase_api_key_here

Use the Bytebot client with Browserbase

First, you need to modify your Puppeteer code to use Browserbase. You can access additional guidance via the Browserbase documentation.

First, you’ll need to replace the puppeteer.launch() call with a call to puppeteer.connect() with the Browserbase URL and API key.

1const browser = puppeteer.connect({
2  browserWSEndpoint:
3    `wss://connect.browserbase.com?apiKey=${process.env.BROWSERBASE_API_KEY}`,
4});

You may still want to launch the browser locally during development and testing, and only use Browserbase in production. This can be achieved by using another environment variable to determine whether to use Browserbase or not.

1// From the Browserbase documentation
2const getBrowser = () =>
3  process.env.IS_PRODUCTION
4    ? // Connect to browserbase so we don't run Chrome on the same hardware in production
5      puppeteer.connect({
6        `wss://connect.browserbase.com?apiKey=${process.env.BROWSERBASE_API_KEY}`,
7      })
8    : // Run the browser locally while in development
9      puppeteer.launch();

Full Browserbase example

The following is a complete example of using Browserbase with Bytebot to execute an action. It assumes that:

  • The @bytebot/sdk package and puppeteer are correctly installed
  • The Browserbase API key is set as an environment variable
  • A Bytebot API key is set as an environment variable
  • An environment variable (IS_PRODUCTION ) is set to determine whether to use Browserbase or not
1// Import the BytebotClient and puppeteer
2import { BytebotClient } from "@bytebot/sdk";
3import puppeteer from "puppeteer";
4import 'dotenv/config'
5
6// Launch the browser using Browserbase in production, or locally in development
7const getBrowser = () =>
8  process.env.IS_PRODUCTION
9    ? puppeteer.connect({
10        browserWSEndpoint:
11          `wss://connect.browserbase.com?apiKey=${process.env.BROWSERBASE_API_KEY}`,
12      })
13    : puppeteer.launch();
14
15// Use Puppeteer to navigate to a page
16const page = await browser.newPage();
17await page.goto("https://developer.chrome.com/");
18
19// Use Bytebot to extract the link from the 'Sign in' button
20const bytebot = new BytebotClient({
21  apiKey: process.env.BYTEBOT_API_KEY,
22});
23
24bytebot.puppeteer.startSession();
25const prompt = "click on the Get Started button";
26const actions = await bytebot.puppeteer.act({
27  prompt: prompt,
28  page: page,
29});
30console.log("Actions", actions);
31bytebot.puppeteer.endSession();
32
33//Execute 
34await bytebot.puppeteer.execute({ actions: actions, page: page });
35  await browser.close();
36
37// Close the browser
38await browser.close();