Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.browserbase.com/llms.txt

Use this file to discover all available pages before exploring further.

1

Get your Browserbase API key

Go over the Dashboard’s Settings tab:
Then copy your API Key directly from the input and set the BROWSERBASE_API_KEY environment variable.
2

Create a Braintrust organization

Create a new Braintrust organization if you haven’t already.
3

Install Braintrust, Zod, and Playwright

In addition to Braintrust and Browserbase SDK, you’ll also use Zod for parameter validation.
  npm install zod braintrust playwright-core
4

Set organization-wide variables in Braintrust

Set the BROWSERBASE_API_KEY environment variable in Braintrust. This lets you use the Browserbase SDK to fetch page content.In addition to setting the BROWSERBASE_API_KEY environment variable, you’ll also need to upload your AI API keys to Braintrust.Braintrust supports a variety of AI providers, so you can select the one that best fits your needs. You can set the AI provider in the Braintrust Settings page.
5

Update your Braintrust project to use Browserbase

Your existing code in Braintrust works well with Browserbase as a tool.Tools can be created through code. Define a load function that fetches and returns the page content from a given URL.Here’s how to modify your existing code to use Browserbase as a tool in Braintrust:
browserbase.ts
import * as braintrust from "braintrust";
import { z } from "zod";
import { chromium } from "playwright-core";

// Create a session with Browserbase
async function createSession() {
  const response = await fetch(`https://api.browserbase.com/v1/sessions`, {
    method: "POST",
    headers: {
      "x-bb-api-key": `${process.env.BROWSERBASE_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      proxies: true,
    }),
  });
  const json = await response.json();
  return json;
}

// Load page from the internet
async function loadPage({ url }: { url: string }) {
  const { id } = await createSession();
  const browser = await chromium.connectOverCDP(
    `wss://connect.browserbase.com?apiKey=${process.env.BROWSERBASE_API_KEY}&sessionId=${id}`,
  );

  const defaultContext = browser.contexts()[0];
  const page = defaultContext.pages()[0];

  await page.goto(url);

  const readable: { title?: string; textContent?: string } =
    await page.evaluate(`
    import('https://cdn.skypack.dev/@mozilla/readability').then(readability => {
      return new readability.Readability(document).parse()
    })`);
  const text = `${readable.title}\n${readable.textContent}`;

  return { page: text };
}

// Create a new project and tool in Braintrust
const project = braintrust.projects.create({ name: "Browserbase API Tool" });

project.tools.create({
  handler: loadPage,
  parameters: z.object({
    url: z.string(),
  }),
  returns: z.object({
    page: z.string(),
  }),
  name: "Load page",
  slug: "load-page",
  description: "Load a page from the internet",
  ifExists: "replace",
});
Make sure you set your environment variables BRAINTRUST_API_KEY and BROWSERBASE_API_KEY locally before proceeding.
6

Push the function to Braintrust

Use the Braintrust CLI to push the function to Braintrust. This deploys the function and makes it available in your project.Once the command completes, you should see the function listed in the Library’s “Tools” tab. You can now input a URL and use the “Load page” tool to fetch the page content.
npx braintrust push browserbase.ts
You’ve successfully integrated Browserbase with Braintrust! You can use tools to create simple and composable agents that perform tasks like data extraction, retrieval augmented generation (RAG), API execution, and much more. Learn more about prompting and tool calling in Braintrust Docs.