> ## Documentation Index
> Fetch the complete documentation index at: https://tracevell.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Stagehand observability

> Trace Stagehand runs and watch the browser session recording synced to each act, extract, and LLM call in Tracevell.

## Overview

[Stagehand](https://github.com/browserbase/stagehand) is an AI Browser Automation Framework developed by [Browserbase](https://browserbase.com/).

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.

> [tab] Stagehand v3
>
> ```javascript {2, 4-10, 32} theme={null}
> import { Stagehand } from '@browserbase/stagehand';
> import { Tracevell } 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 Tracevell 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);
> ```

> [tab] Stagehand v2
>
> ```javascript {2, 4-10, 32} theme={null}
> import { Stagehand } from '@browserbase/stagehand';
> import { Tracevell } 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 Tracevell 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

**1. Start with Stagehand Browser quickstart**

```sh theme={null}
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.

```sh theme={null}
cd YOUR_APP_NAME
npm install && npm update
```

**2. Install Tracevell**

```sh theme={null}
npm install @lmnr-ai/lmnr@latest
```

**3. Initialize Tracevell**

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

```javascript theme={null}
import { Stagehand } from '@browserbase/stagehand';
import { Tracevell } from '@lmnr-ai/lmnr';

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

**4. 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()`.

```javascript theme={null}
await stagehand.close(); // closes the browser and the parent span
await Laminar.flush(); // sends any remaining spans to Tracevell
```

## 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](https://mintcdn.com/laminarai/pCELL5UGvyOmmwBL/images/traces/stagehand.png?fit=max\&auto=format\&n=pCELL5UGvyOmmwBL\&q=85\&s=c66063df752e656b39718625468f8897)

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

## Related integrations

> [card] [Browser Use](https://tracevell.com/docs/integrations/browser-use.md)
>
> Trace Browser Use agents with synced session recordings.

> [card] [Playwright](https://tracevell.com/docs/integrations/playwright.md)
>
> Record Playwright browser sessions alongside your traces.

> [card] [Skyvern](https://tracevell.com/docs/integrations/skyvern.md)
>
> Trace Skyvern workflows with synced session recordings.

> [card] [Kernel](https://tracevell.com/docs/integrations/kernel.md)
>
> Trace computer-using agents running on Kernel browsers.

> [card] [OpenAI](https://tracevell.com/docs/integrations/openai.md)
>
> Trace the OpenAI SDK directly in TypeScript and Python.

> [card] [All integrations](https://tracevell.com/docs/integrations.md)
>
> Browse every provider, framework, coding agent, and browser integration Tracevell supports.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.