Stagehand observability

Overview

Stagehand is an AI Browser Automation Framework developed by Browserbase. Tracevell provides native integration with Stagehand, allowing you to trace your Stagehand code with just a few lines of code. Tracevell observability captures:

Full recording of a browser window while the code is running.
Execution steps, such as, act, extract, observe and agent calls.
Full LLM calls, including the prompts and responses.
LLM cost of the execution steps.
Latency of the execution steps and LLM calls.

Quickstart

Below is an example of a simple Stagehand script. Highlighted lines are the ones that are required to trace Stagehand with Tracevell.

Stagehand v3
Stagehand v2

import { Stagehand } from '@browserbase/stagehand';
import { Laminar } from '@lmnr-ai/lmnr';
import { z } from 'zod';

Laminar.initialize({
  projectApiKey: process.env.LMNR_PROJECT_API_KEY,
  instrumentModules: {
    stagehand: Stagehand,
  },
});

const main = async () => {
  const stagehand = new Stagehand();
  await stagehand.init({
    model: {
      modelName: 'openai/gpt-4.1-mini',
      apiKey: process.env.OPENAI_API_KEY,
    },
  });
  const page = stagehand.context.pages()[0];
  await page.goto('https://tracevell.com');
  await stagehand.act('go to Laminar pricing page');
  const pricing = await stagehand.extract(
    "get the hobby tier pricing",
    z.object({
      pricing: z.object({
        price: z.string(),
        features: z.array(z.string()),
      }),
    }),
  );
  await stagehand.close();
  await Laminar.flush();
  return pricing;
};

main().then(console.log).catch(console.error);

import { Stagehand } from '@browserbase/stagehand';
import { Laminar } from '@lmnr-ai/lmnr';
import { z } from 'zod';

Laminar.initialize({
  projectApiKey: process.env.LMNR_PROJECT_API_KEY,
  instrumentModules: {
    stagehand: Stagehand,
  },
});

const main = async () => {
  const stagehand = new Stagehand();
  await stagehand.init({
    modelName: 'gpt-4.1-mini',
    modelClientOptions: {
      apiKey: process.env.OPENAI_API_KEY,
    },
  });
  const page = stagehand.page;
  await page.goto('https://tracevell.com');
  await page.act('go to Laminar pricing page');
  const pricing = await page.extract({
    instruction: "get the hobby tier pricing",
    schema: z.object({
      pricing: z.object({
        price: z.string(),
        features: z.array(z.string()),
      }),
    }),
  });
  await stagehand.close();
  await Laminar.flush();
  return pricing;
};

main().then(console.log).catch(console.error);

Step-by-step guide

Start with Stagehand Browser quickstart

npx create-browser-app@latest

Choose “Yes” when prompted to start with a quickstart app and follow other instructions.Finally go to the newly created directory and install dependencies.

cd YOUR_APP_NAME
npm install && npm update

Install Tracevell

npm install @lmnr-ai/lmnr@latest

Initialize Tracevell

First, we need to initialize Tracevell at the start of your application and pass the Stagehand module to instrumentModules.

import { Stagehand } from '@browserbase/stagehand';
import { Laminar } from '@lmnr-ai/lmnr';

Laminar.initialize({
  projectApiKey: process.env.LMNR_PROJECT_API_KEY,
  instrumentModules: {
    stagehand: Stagehand,
  },
});

Finalizing Stagehand traces

If you run Stagehand in a standalone script, in order to flush queued Stagehand traces, make sure to call stagehand.close() and Laminar.flush().

await stagehand.close(); // closes the browser and the parent span
await Laminar.flush(); // sends any remaining spans to Laminar

Example of a Stagehand trace

You can see entire session recording of a browser window while the code was running, along with execution steps, such as act and extract. You can also see LLM cost of the entire execution and of each execution step. For LLM spans you can see the prompt, the response and the model name.

Stagehand example — An example trace for page.act('go to Tracevell blogs page')

Browser Use

Trace Browser Use agents with synced session recordings.

Playwright

Record Playwright browser sessions alongside your traces.

Skyvern

Trace Skyvern workflows with synced session recordings.

Kernel

Trace computer-using agents running on Kernel browsers.

OpenAI

Trace the OpenAI SDK directly in TypeScript and Python.

All integrations

Browse every provider, framework, coding agent, and browser integration Tracevell supports.

Overview

LLM provider SDKs

Agent frameworks

Coding agents

Browser and computer-use agents

Eval frameworks

Other platforms

OpenTelemetry

Overview

Quickstart

Step-by-step guide

Example of a Stagehand trace

Browser Use

Playwright

Skyvern

Kernel

OpenAI

All integrations

​Overview

​Quickstart

​Step-by-step guide

​Example of a Stagehand trace

​Related integrations

Browser Use

Playwright

Skyvern

Kernel

OpenAI

All integrations

Overview

Quickstart

Step-by-step guide

Example of a Stagehand trace

Related integrations