Skip to main content
Use CDP when an external browser framework needs protocol control over a Webcompute browser.

​
Get a CDP URL

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

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 Playwright execution or MCP execute_playwright_code.
CDP URLs are signed bearer capabilities. Share them only with systems that should control the browser.

​
Observation boundary

Direct CDP clients do not automatically receive Webcompute post-step observations. Use SDK browser 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. For coding-agent hosts, start with MCP.