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 install @browserbasehq/stagehand zod
4

Update your code or clone a template

Integrating Stagehand into your existing code is straightforward:

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