> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://platform.bctrl.ai/llms.txt.
> For full documentation content, see https://platform.bctrl.ai/llms-full.txt.

# Browser Quickstart

> Create a space, launch a browser runtime, connect with Playwright, and inspect the run.

This is the core BCTRL browser flow:

1. Create a space.
2. Launch a browser runtime.
3. Create a CDP connection.
4. Use your native browser framework.
5. Inspect the current run.

```ts
import { Bctrl } from "@bctrl/sdk";
import { chromium } from "playwright";

const bctrl = new Bctrl({
  apiKey: process.env.BCTRL_API_KEY!,
});

const space = await bctrl.spaces.create({
  name: "yc-demo",
});

const runtime = await space.runtimes.browser.launch({
  name: "demo-browser",
});

const connection = await runtime.connections.create({
  protocol: "cdp",
});

const browser = await chromium.connectOverCDP(connection.endpoint.url);
const context = browser.contexts()[0] ?? await browser.newContext();
const page = context.pages()[0] ?? await context.newPage();

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

const run = await runtime.currentRun();
const live = await run.live({
  control: "none",
});

console.log(live.iframeUrl);

await runtime.stop();
```

## What happened

* The space became the permission boundary for the work.
* The runtime hosted a real browser.
* The connection gave Playwright a temporary CDP endpoint.
* The run captured events, commands, artifacts, live view, and recording metadata.

## Next

* [Connect with CDP](/sdk/browser-runtimes)
* [Runs](/sdk/core-concepts/runs)
* [Run Artifacts](/sdk/observability/run-artifacts)