> ## 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 Browserbase to an Eve agent

> Install the Browserbase Eve extension and run an agent with Search, Fetch, and persistent browser tools.

This guide adds Browserbase to an Eve agent. You'll give the agent Search and Fetch for lightweight web context plus a persistent browser for interactive pages.

<Steps titleSize="h3">
  <Step title="Create an Eve agent">
    Eve requires Node.js 24 or newer. Create a project, then enter its directory:

    ```bash theme={null}
    npx eve@latest init browserbase-eve-agent
    cd browserbase-eve-agent
    ```
  </Step>

  <Step title="Install the Browserbase extension">
    Add the Browserbase extension to your project:

    ```bash theme={null}
    pnpm add @browserbasehq/eve
    ```
  </Step>

  <Step title="Set your environment variables">
    Copy your Browserbase API key from the [Dashboard](https://www.browserbase.com/overview). Add it and your Vercel AI Gateway key to `.env`:

    ```bash .env theme={null}
    BROWSERBASE_API_KEY=bb_live_...
    AI_GATEWAY_API_KEY=your_vercel_ai_gateway_key
    ```

    The Browserbase API key creates cloud browsers and powers Stagehand through Browserbase Model Gateway. The Vercel AI Gateway key powers the outer Eve agent.

    <Note>
      If you link the project to Vercel, you can use `VERCEL_OIDC_TOKEN` instead of `AI_GATEWAY_API_KEY`.
    </Note>
  </Step>

  <Step title="Mount the extension">
    Create `agent/extensions/browserbase.ts`:

    ```typescript Node.js agent/extensions/browserbase.ts theme={null}
    import browserbase from "@browserbasehq/eve";

    export default browserbase({
      apiKey: process.env.BROWSERBASE_API_KEY!,
      model: "openai/gpt-5.4-mini",
    });
    ```

    Eve uses the filename as the tool namespace. This file creates tools such as `browserbase__search`, `browserbase__fetch`, `browserbase__navigate`, and `browserbase__extract`.
  </Step>

  <Step title="Configure the agent model">
    Create or update `agent/agent.ts`:

    ```typescript Node.js agent/agent.ts theme={null}
    import { defineAgent } from "eve";

    export default defineAgent({
      model: "openai/gpt-5.4-mini",
    });
    ```
  </Step>

  <Step title="Guide the agent's browser use">
    Add these instructions to `agent/instructions.md`:

    ```markdown theme={null}
    Use Browserbase Search to discover sources, then Fetch to retrieve straightforward content.
    Create a browser session only when a page requires JavaScript or interaction.
    For browser tasks, navigate before you observe, act, or extract.
    Stop the browser session when you finish the task.
    ```
  </Step>

  <Step title="Run the agent">
    Start Eve's terminal interface:

    ```bash theme={null}
    npx eve dev
    ```

    Try this prompt:

    ```text theme={null}
    Open https://news.ycombinator.com and return the titles and URLs of the first five stories. Use a Browserbase session and stop it when you are done.
    ```

    Open the [Sessions dashboard](https://www.browserbase.com/sessions) to watch the agent use the browser.
  </Step>
</Steps>

## Choose the right browser tool

For predictable runs, use `create_session`, `navigate`, `observe`, and then `act` or `extract`. Use `agent` when the task needs Stagehand to plan several browser steps on its own. Always call `stop_session` after the task.

<CardGroup cols={2}>
  <Card title="Example agent" icon="github" href="https://github.com/browserbase/integrations/tree/main/examples/integrations/vercel/eve-example">
    Compare your project with the complete runnable example.
  </Card>

  <Card title="Extension source" icon="github" href="https://github.com/browserbase/integrations/tree/master/examples/integrations/vercel/eve">
    Review the extension's tools, configuration, and session lifecycle.
  </Card>
</CardGroup>