> ## Documentation Index
> Fetch the complete documentation index at: https://docs-preview.webcompute.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# CDP and browser frameworks

> Attach external browser tooling through CDP and understand when Webcompute observations are available.

Use CDP when an external browser framework needs protocol control over a Webcompute browser.

## Get a CDP URL

```ts theme={null}
import { Web } from "@webcompute/sdk";

const web = new Web();
const browser = await web.browser.create({
  policy: { allowedDomains: ["example.com"] },
});

const cdpUrl = await browser.cdpUrl();
```

You can attach CDP-compatible tools such as Playwright, Puppeteer, Stagehand, Browser Use, or custom clients when they fit your workflow.

## Attach Playwright over CDP

```ts theme={null}
import { chromium } from "playwright";

const remote = await chromium.connectOverCDP(cdpUrl);
const context = remote.contexts()[0] ?? (await remote.newContext());
const page = context.pages()[0] ?? (await context.newPage());

await page.goto("https://example.com");
console.log(await page.title());

await remote.close();
await browser.close();
```

Playwright CDP attachment is useful for interop. For agent-readable observations after each step, prefer Webcompute browser-code execution or MCP `execute_playwright_code`.

<Warning>
  CDP URLs are signed bearer capabilities. Share them only with systems that should control the browser.
</Warning>

## Observation boundary

Direct CDP clients do not automatically receive Webcompute post-step observations. Use SDK browser-code execution, MCP `execute_playwright_code`, or runtime status endpoints when an agent needs bounded page evidence after each step.

## When to use CDP

* Attach an existing browser framework.
* Inspect low-level protocol behavior.
* Reuse a known CDP workflow.
* Run deterministic checks outside the agent harness.

For most TypeScript product workflows, start with [SDK quickstart](/agent-workflows/sdk-quickstart). For coding-agent hosts, start with [MCP](/integrations/mcp).