Stagehand can remote-control any Chrome session that exposes a CDP endpoint. Hyperbrowser supplies the always-on, privacy-hardened sessions—complete with stealth, proxies, ad blocking, and observability—so you can connect Stagehand to a reliable browser in seconds without standing up Chrome yourself.
Why Hyperbrowser for your Stagehand project?
- Consistent environments – launch Chrome with stealth, custom profiles, and residential/static proxies through a single API call.
- Enterprise controls – restrict egress with managed proxies, enable audit logs via recordings/download inspection, and reuse sessions for multi-step flows.
- Faster swaps – migrate existing Browserbase + Stagehand projects by replacing the session creation call; the Stagehand client still points to the CDP URL it receives.
- Live debugging – every session automatically exposes
liveUrl, letting you watch Stagehand steps in real time.
Prerequisites
HYPERBROWSER_API_KEY loaded via .env or your secret manager.
- Access to Stagehand via
@browserbasehq/stagehand (or clone from docs.stagehand.dev).
Installation
npm install @hyperbrowser/sdk @browserbasehq/stagehand dotenv
Quickstart (TypeScript)
This example mirrors the reference gist and shows Stagehand driving a Hyperbrowser session. It enables stealth, ad blocking, and accepts cookies out of the box, then attaches Stagehand to the returned CDP endpoint.
To see all the available session parameters, check out the Session Parameters page.
This example uses the new Stagehand v3 implementation.
import { config } from "dotenv";
import { Hyperbrowser } from "@hyperbrowser/sdk";
import { Stagehand } from "@browserbasehq/stagehand";
config();
const client = new Hyperbrowser({
apiKey: process.env.HYPERBROWSER_API_KEY,
});
async function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
async function main() {
const session = await client.sessions.create({
useStealth: true,
adblock: true,
acceptCookies: true,
});
console.log(`Watch live: ${session.liveUrl}`);
const stagehand = new Stagehand({
env: "LOCAL",
localBrowserLaunchOptions: {
cdpUrl: session.wsEndpoint,
},
});
try {
await stagehand.init();
const page = stagehand.context.pages()[0];
await page.goto("https://hyperbrowser.ai");
await stagehand.act("Click on the 'Launch Browser' button");
console.log("Page title:", await page.title());
console.log("Waiting 5 seconds before closing");
await sleep(5_000);
} catch (err) {
console.error("Stagehand task failed:", err);
} finally {
await stagehand.close();
await client.sessions.stop(session.id);
}
}
main().catch((error) => {
console.error("Stagehand task failed:", error);
process.exit(1);
});
Switch from Browserbase
| Browserbase setup | Hyperbrowser replacement |
|---|
const session = await browserbase.sessions.create({...}); | const session = await hyperbrowser.sessions.create({...}); |
session.connectUrl | session.wsEndpoint |
liveViewLinks.debuggerFullscreenUrl | session.liveUrl |
BROWSERBASE_API_KEY | HYPERBROWSER_API_KEY |
Migration checklist from Browserbase to Hyperbrowser
- Swap the SDK import to
@hyperbrowser/sdk.
- Rename environment variables and CI secrets to
HYPERBROWSER_API_KEY.
- Map Browserbase session flags to Hyperbrowser equivalents (stealth, proxies, uploads, downloads, custom extensions).
- Update dashboards/links to use
session.liveUrl.
- Stop sessions explicitly with
client.sessions.stop(session.id) to free capacity when Stagehand finishes.
Troubleshooting & resources