Add web browsing capabilities to Braintrust

Get your Browserbase API Key

Then copy your API Key directly from the input and set the BROWSERBASE_API_KEY environment variable.

Create a Braintrust Organization

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

Install Braintrust, Zod, and Playwright

In addition to Braintrust and Browserbase SDK, we’ll also use Zod for parameter validation.

  npm install zod braintrust playwright-core

Set organization-wide variables in Braintrust

We’ll set the BROWSERBASE_API_KEY environment variable in Braintrust. This will allow us to use the Browserbase SDK to fetch page content.

In addition to setting the BROWSERBASE_API_KEY environment variable, we’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.

Update your Braintrust project to use Browserbase

Running your existing code in Braintrust works well with Browserbase as a tool.

Tools can be created through code. Let’s define a load function that fetches and returns the page content from a given URL.

Here’s an example of 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://www.browserbase.com/v1/sessions`, {
    method: "POST",
    headers: {
      "x-bb-api-key": `${process.env.BROWSERBASE_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      projectId: process.env.BROWSERBASE_PROJECT_ID,
      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, BROWSERBASE_API_KEY, BROWSERBASE_PROJECT_ID locally before proceeding.

Push the function to Braintrust

Now, we’ll use the Braintrust CLI to push the function to Braintrust. This will deploy the function to Braintrust and make it available to use 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 web-scraping, retrieval augmented generation (RAG), API execution, and much more. Learn more about prompting and tool calling in Braintrust Docs.

Capabilities

Guides