> ## 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 cloud browsers to Agent Browser

> Integrate Browserbase with Agent Browser for cloud-hosted browser automation.

<Steps titleSize="h3">
  <Step title="Get your API Key">
    Visit 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>

    Copy your API key for the next step.
  </Step>

  <Step title="Install Agent Browser">
    <Tabs>
      <Tab title="npm">
        ```bash theme={null}
        npm install -g agent-browser
        agent-browser install
        ```
      </Tab>

      <Tab title="npx">
        ```bash theme={null}
        npx agent-browser install
        ```
      </Tab>

      <Tab title="Homebrew">
        ```bash theme={null}
        brew install agent-browser
        agent-browser install
        ```
      </Tab>
    </Tabs>

    The `install` command downloads Chromium for local use. When using the Browserbase provider, the browser runs in the cloud instead.
  </Step>

  <Step title="Set environment variables">
    Set your Browserbase credentials:

    ```bash theme={null}
    export BROWSERBASE_API_KEY="bb_live_..."
    ```
  </Step>

  <Step title="Open a page with Browserbase">
    Use the `-p browserbase` flag to run commands on a Browserbase cloud browser:

    ```bash theme={null}
    agent-browser -p browserbase open https://example.com
    ```

    This creates a Browserbase session and navigates to the URL. You can view the session in your [Browserbase Dashboard](https://www.browserbase.com/sessions).
  </Step>

  <Step title="Get an accessibility snapshot">
    The `snapshot` command returns an accessibility tree with element references — the primary way AI agents understand page content:

    ```bash theme={null}
    agent-browser -p browserbase snapshot
    ```

    Output includes element refs that you can use in subsequent commands:

    ```
    - heading "Example Domain" [ref=e1] [level=1]
    - paragraph "This domain is for use in illustrative examples."
    - link "More information..." [ref=e3]
    ```

    Use the `-i` flag to show only interactive elements:

    ```bash theme={null}
    agent-browser -p browserbase snapshot -i
    ```
  </Step>

  <Step title="Interact with elements">
    Use element refs from the snapshot to click, type, and fill:

    ```bash theme={null}
    # Click a link by ref
    agent-browser -p browserbase click @e3

    # Fill a form field
    agent-browser -p browserbase fill @e5 "test@example.com"

    # Take a screenshot
    agent-browser -p browserbase screenshot page.png
    ```
  </Step>

  <Step title="Close the session">
    ```bash theme={null}
    agent-browser -p browserbase close
    ```
  </Step>
</Steps>

<Note>
  All commands support the `-p browserbase` flag to run on Browserbase cloud browsers. You can also set `AGENT_BROWSER_PROVIDER=browserbase` as an environment variable to avoid passing the flag each time. See the [Agent Browser README](https://github.com/vercel-labs/agent-browser) for the full command reference.
</Note>

## Connecting via CDP

You can also connect Agent Browser to a Browserbase session directly using the CDP WebSocket URL:

```javascript theme={null}
import Browserbase from "@browserbasehq/sdk";

const bb = new Browserbase({ apiKey: process.env.BROWSERBASE_API_KEY });
const session = await bb.sessions.create();

console.log(session.connectUrl);
// wss://connect.browserbase.com/?sessionId=...
```

Then connect Agent Browser:

```bash theme={null}
agent-browser --cdp "wss://connect.browserbase.com/?sessionId=..." snapshot
```

<CardGroup cols={2}>
  <Card title="Agent Browser GitHub" icon="github" iconType="sharp-solid" href="https://github.com/vercel-labs/agent-browser">
    Full documentation, examples, and source code.
  </Card>

  <Card title="Browserbase sessions API" icon="book" iconType="sharp-solid" href="/reference/api/create-a-session">
    Learn more about creating and managing Browserbase sessions.
  </Card>
</CardGroup>