Browser Quickstart

View as Markdown

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.
1import { Bctrl } from "@bctrl/sdk";
2import { chromium } from "playwright";
3
4const bctrl = new Bctrl({
5 apiKey: process.env.BCTRL_API_KEY!,
6});
7
8const space = await bctrl.spaces.create({
9 name: "yc-demo",
10});
11
12const runtime = await space.runtimes.browser.launch({
13 name: "demo-browser",
14});
15
16const connection = await runtime.connections.create({
17 protocol: "cdp",
18});
19
20const browser = await chromium.connectOverCDP(connection.endpoint.url);
21const context = browser.contexts()[0] ?? await browser.newContext();
22const page = context.pages()[0] ?? await context.newPage();
23
24await page.goto("https://example.com");
25console.log(await page.title());
26
27const run = await runtime.currentRun();
28const live = await run.live({
29 control: "none",
30});
31
32console.log(live.iframeUrl);
33
34await 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