> ## Documentation Index
> Fetch the complete documentation index at: https://piyushvyas.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# BAP vs Chrome DevTools Protocol

> BAP wraps CDP with agent-ready semantics. When to use raw CDP vs the BAP abstraction.

## Overview

Chrome DevTools Protocol (CDP) is the raw browser debugging protocol built into Chrome and Chromium-based browsers. BAP sits above CDP, using Playwright as an intermediary, and adds agent-oriented abstractions.

```
AI Agent
  |
  v
BAP (semantic selectors, observe, act, extract, fusion)
  |
  v
Playwright (cross-browser abstraction)
  |
  v
CDP / Browser-specific protocol
  |
  v
Chrome / Firefox / WebKit
```

## Comparison

| Dimension              | BAP                                                     | Chrome DevTools / CDP                          |
| ---------------------- | ------------------------------------------------------- | ---------------------------------------------- |
| **Level**              | Agent-ready workflow layer                              | Raw browser debugging protocol                 |
| **Selectors**          | 10 semantic types (role, text, label, ref, testId, ...) | Manual DOM queries, Runtime.evaluate           |
| **Multi-step actions** | `act` batches steps with retry and conditions           | Compose sequences yourself                     |
| **Observation**        | Structured elements with refs, action hints, bounds     | Roll your own from Accessibility + DOM domains |
| **Extraction**         | `extract` with JSON Schema                              | Custom Runtime.evaluate scripts                |
| **Token efficiency**   | Response tiers, fusion, incremental observe             | Depends on your orchestration                  |
| **Browser support**    | Chromium, Firefox, WebKit                               | Chromium only                                  |
| **Session management** | Built-in persistence, dormant sessions                  | Manual                                         |
| **Error recovery**     | Recovery hints, self-healing selectors                  | Raw protocol errors                            |

## When to Use CDP

<CardGroup cols={2}>
  <Card title="Use CDP when you need" icon="wrench">
    * Direct access to CDP domains (Performance, Profiler, Memory, Network conditions) - Custom
      debugging and profiling instrumentation - Low-level network interception with full headers -
      Service Worker and Cache API inspection - Chrome-specific features not exposed by Playwright
  </Card>

  <Card title="Use BAP when you need" icon="robot">
    * AI agent browser automation - Semantic element targeting that survives redesigns - Multi-step
      workflows with error recovery - Structured data extraction without writing JS - Cross-browser
      support (Chromium + Firefox + WebKit) - Token-efficient agent communication
  </Card>
</CardGroup>

## BAP + CDP Together

BAP supports connecting to a browser via CDP for hybrid workflows:

```typescript theme={null}
// Launch Chrome with remote debugging
// Then connect BAP to it
await client.launch({
  cdpUrl: "ws://localhost:9222",
});

// Use BAP's high-level API
await client.navigate("https://example.com");
const obs = await client.observe();

// BAP handles the CDP complexity underneath
```

You can also use Chrome DevTools alongside BAP for debugging:

1. Launch Chrome with `--remote-debugging-port=9222`
2. Open `chrome://inspect` for live DevTools access
3. Connect BAP with `--connect=ws://localhost:9222`
4. Debug with DevTools while BAP automates

See the [CDP Attach guide](/guides/cdp-attach) for detailed setup instructions.

## CDP Complexity BAP Handles For You

What you would need to implement yourself with raw CDP:

| Capability               | CDP Implementation                                                                    | BAP Equivalent                                |
| ------------------------ | ------------------------------------------------------------------------------------- | --------------------------------------------- |
| Click a button by label  | `DOM.querySelector` + `Runtime.evaluate` to find by text + `Input.dispatchMouseEvent` | `client.click(label("Submit"))`               |
| Fill a form              | Multiple `DOM.focus` + `Input.insertText` calls per field                             | `client.act([step("action/fill", ...), ...])` |
| Get interactive elements | `Accessibility.getFullAXTree` + manual filtering + ref tracking                       | `client.observe()`                            |
| Extract structured data  | `Runtime.evaluate` with custom extraction JS                                          | `client.extract({ schema })`                  |
| Handle navigation        | `Page.navigate` + `Page.loadEventFired` + error handling                              | `client.navigate(url)`                        |
| Cross-browser            | Not possible (CDP is Chrome-only)                                                     | Built-in via Playwright                       |