Start your first Session with Stagehand

Stagehand is an AI web browsing framework, fully compatible with Playwright

Get started with Stagehand

Use npx create-browser-app for an interactive introduction to Stagehand.

1

Get your Browserbase API Key and Project ID

Your API key and Project ID are displayed in the Overview Dashboard:

Then copy your API Key directly from the input and update your .env by adding the BROWSERBASE_API_KEY and BROWSERBASE_PROJECT_ID entries.

2

Get your OpenAI/Anthropic API Key

You can get your OpenAI/Anthropic API Key from the OpenAI Dashboard or Anthropic Dashboard.

3

Install Stagehand

• npm
• pnpm
• yarn

npm install @browserbasehq/stagehand zod

4

Update your code or clone a template

Integrating Stagehand into your existing code is straightforward:

• Node.js

import { z } from "zod";
import { Stagehand } from "@browserbasehq/stagehand";

(async () => {
	// Initialize Stagehand
    const stagehand = new Stagehand({
      env: "BROWSERBASE",
      apiKey: process.env.BROWSERBASE_API_KEY,
      projectId: process.env.BROWSERBASE_PROJECT_ID!,
	  // To use Anthropic, set modelName to "claude-3-5-sonnet-latest"
      modelName: "gpt-4o",
      modelClientOptions: {
		// To use Anthropic, set apiKey to process.env.ANTHROPIC_API_KEY
      	apiKey: process.env.OPENAI_API_KEY,
      },
	});
	await stagehand.init();
	const page = stagehand.page;
	await page.goto("https://docs.browserbase.com");

	// Preview an action before taking it
	const suggestions = await page.observe("click 'Stagehand'");

	// Take a suggested action
	await page.act(suggestions[0]);

	// Read the NPM install command
	const { npmInstallCommand } = await page.extract({
		instruction: "The NPM install command",
		schema: z.object({
			npmInstallCommand: z.string(),
		}),
	});
	console.log(npmInstallCommand);
	
	await stagehand.close();
})().catch((error) => console.error(error.message));

Be sure to set your BROWSERBASE_API_KEY, BROWSERBASE_PROJECT_ID, and OPENAI_API_KEY environment variables to the values you copied.

5

Inspect the completed Session

You can find all the recent sessions on the Overview Dashboard, along with essential metrics:

Select your Session to inspect it with the Session Inspector.

Start building

Using Browser Sessions

Learn how to connect to and interact with browser sessions effectively.

Managing Sessions

Understand how to properly end sessions and manage their lifecycle.