> ## 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.

# Add web browsing capabilities to Braintrust

> Integrate Browserbase with Braintrust

<Tabs>
  <Tab title="API">
    <Steps titleSize="h3">
      <Step title="Get your Browserbase API key">
        Go over the [Dashboard's Settings tab](https://www.browserbase.com/settings):

        <Frame>
          <img src="https://mintcdn.com/browserbase/giE_cpy18f2mWHqr/images/quickstart/api_key.png?fit=max&auto=format&n=giE_cpy18f2mWHqr&q=85&s=4ac94a8f69cec20bd17b2a8788169062" width="3410" height="1864" data-path="images/quickstart/api_key.png" />
        </Frame>

        Then copy your API Key directly from the input and
        set the `BROWSERBASE_API_KEY` environment variable.
      </Step>

      <Step title="Create a Braintrust organization">
        Create a new [Braintrust
        organization](https://docs.braintrust.dev/getting-started/creating-a-project)
        if you haven't already.
      </Step>

      <Step title="Install Braintrust, Zod, and Playwright">
        In addition to Braintrust and Browserbase SDK, you'll also use [Zod](https://zod.dev/) for parameter validation.

        ```bash theme={null}
          npm install zod braintrust playwright-core
        ```
      </Step>

      <Step title="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.

        <Frame>
          <img src="https://mintcdn.com/browserbase/m1Ny8qOvNHvtrY7y/images/integrations/braintrust/envvars.png?fit=max&auto=format&n=m1Ny8qOvNHvtrY7y&q=85&s=cc916fc2d66f1ebb803b9d73d4421040" width="2614" height="1228" data-path="images/integrations/braintrust/envvars.png" />
        </Frame>

        <Frame>
          <img src="https://mintcdn.com/browserbase/m1Ny8qOvNHvtrY7y/images/integrations/braintrust/aiproviders.png?fit=max&auto=format&n=m1Ny8qOvNHvtrY7y&q=85&s=172181b5f3a8660b5a3443b388328930" width="2698" height="1732" data-path="images/integrations/braintrust/aiproviders.png" />
        </Frame>
      </Step>

      <Step title="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:

        ```typescript browserbase.ts theme={null}
        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",
        });
        ```

        <Info>
          Make sure you set your environment variables `BRAINTRUST_API_KEY` and
          `BROWSERBASE_API_KEY` locally before proceeding.
        </Info>
      </Step>

      <Step title="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.

        ```bash theme={null}
        npx braintrust push browserbase.ts
        ```

        <Frame>
          <img src="https://mintcdn.com/browserbase/m1Ny8qOvNHvtrY7y/images/integrations/braintrust/tool-library.gif?s=3f0b3e8537e17b385bb3bce347066215" width="1280" height="720" data-path="images/integrations/braintrust/tool-library.gif" />
        </Frame>
      </Step>
    </Steps>

    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](https://www.braintrust.dev/docs/guides/prompts).
  </Tab>

  <Tab title="SDK">
    <Steps titleSize="h3">
      <Step title="Get your Browserbase API key">
        Go over the [Dashboard's Settings tab](https://www.browserbase.com/settings):

        <Frame>
          <img src="https://mintcdn.com/browserbase/giE_cpy18f2mWHqr/images/quickstart/api_key.png?fit=max&auto=format&n=giE_cpy18f2mWHqr&q=85&s=4ac94a8f69cec20bd17b2a8788169062" width="3410" height="1864" data-path="images/quickstart/api_key.png" />
        </Frame>

        Then copy your API Key directly from the input and
        set the `BROWSERBASE_API_KEY` environment variable.
      </Step>

      <Step title="Create a Braintrust organization">
        Create a new [Braintrust
        organization](https://docs.braintrust.dev/getting-started/creating-a-project)
        if you haven't already.
      </Step>

      <Step title="Install Braintrust, Zod, and Browserbase SDK">
        In addition to Braintrust and Browserbase SDK, you'll also use [Zod](https://zod.dev/) for parameter validation.

        ```bash theme={null}
          npm install zod braintrust @browserbasehq/sdk playwright-core
        ```
      </Step>

      <Step title="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.

        <Frame>
          <img src="https://mintcdn.com/browserbase/m1Ny8qOvNHvtrY7y/images/integrations/braintrust/envvars.png?fit=max&auto=format&n=m1Ny8qOvNHvtrY7y&q=85&s=cc916fc2d66f1ebb803b9d73d4421040" width="2614" height="1228" data-path="images/integrations/braintrust/envvars.png" />
        </Frame>

        <Frame>
          <img src="https://mintcdn.com/browserbase/m1Ny8qOvNHvtrY7y/images/integrations/braintrust/aiproviders.png?fit=max&auto=format&n=m1Ny8qOvNHvtrY7y&q=85&s=172181b5f3a8660b5a3443b388328930" width="2698" height="1732" data-path="images/integrations/braintrust/aiproviders.png" />
        </Frame>
      </Step>

      <Step title="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:

        ```typescript browserbase.ts theme={null}
        import * as braintrust from "braintrust";
        import Browserbase from "@browserbasehq/sdk";
        import { chromium } from "playwright-core";
        import { z } from "zod";

        const BROWSERBASE_API_KEY = process.env.BROWSERBASE_API_KEY!;

        async function load({ url }: { url: string }): Promise<{
          page: string;
        }> {
          const bb = new Browserbase({
            apiKey: BROWSERBASE_API_KEY,
          });
          const session = await bb.sessions.create();
          const browser = await chromium.connectOverCDP(session.connectUrl);
          const context = browser.contexts()[0];
          const page = context.pages()[0];

          await page.goto(url);

          const text = await page.textContent("body");
          return { page: text || "" };
        }

        const project = braintrust.projects.create({ name: "browse test" });

        project.tools.create({
          handler: load,
          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",
        });
        ```

        <Info>
          Make sure you set your environment variables `BRAINTRUST_API_KEY` and
          `BROWSERBASE_API_KEY` locally before proceeding.
        </Info>
      </Step>

      <Step title="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.

        ```bash theme={null}
        npx braintrust push browserbase.ts
        ```

        <Frame>
          <img src="https://mintcdn.com/browserbase/m1Ny8qOvNHvtrY7y/images/integrations/braintrust/tool-library.gif?s=3f0b3e8537e17b385bb3bce347066215" width="1280" height="720" data-path="images/integrations/braintrust/tool-library.gif" />
        </Frame>
      </Step>
    </Steps>

    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](https://www.braintrust.dev/docs/guides/prompts).
  </Tab>
</Tabs>