Stagehand Core Primitives
act() — Perform Actions
Tell the browser what to do in plain English:
// Click, type, select, scroll — all with natural language
await page.act({ action: "Click the sign-in button" });
await page.act({ action: "Type 'hello world' into the search box" });
await page.act({ action: "Select 'United States' from the country dropdown" });
await page.act({ action: "Scroll down to the pricing section" });extract() — Pull Structured Data
Extract data with type-safe Zod schemas:
import { z } from "zod";
const products = await page.extract({
instruction: "Extract all product names, prices, and ratings",
schema: z.object({
products: z.array(z.object({
name: z.string(),
price: z.string(),
rating: z.number(),
})),
}),
});
// Returns typed data: products.products[0].nameobserve() — Understand the Page
Discover what's possible on the current page:
const observations = await page.observe({
instruction: "What interactive elements are on this page?",
});
// Returns: list of actions like "Click 'Add to Cart'", "Open dropdown menu"Combining Primitives
Build complex workflows by chaining primitives:
// 1. Navigate and observe
await page.goto("https://store.example.com");
const actions = await page.observe({ instruction: "Find the search functionality" });
// 2. Search for a product
await page.act({ action: "Search for 'wireless headphones'" });
// 3. Extract results
const results = await page.extract({
instruction: "Get the first 5 search results",
schema: z.object({
items: z.array(z.object({
name: z.string(),
price: z.string(),
inStock: z.boolean(),
})),
}),
});
// 4. Take action on best result
await page.act({ action: `Click on '${results.items[0].name}'` });Local vs Cloud Execution
// Local — runs Playwright on your machine
const local = new Stagehand({ env: "LOCAL" });
// Cloud — runs on Browserbase infrastructure
const cloud = new Stagehand({
env: "BROWSERBASE",
apiKey: process.env.BROWSERBASE_API_KEY,
projectId: process.env.BROWSERBASE_PROJECT_ID,
});Playwright Compatibility
Stagehand extends Playwright — use standard selectors when you want deterministic control:
// Mix AI and traditional selectors
await page.act({ action: "Accept the cookie banner" }); // AI handles dynamic UI
await page.locator("#product-id-123").click(); // Precise selector
const text = await page.extract({ // AI extracts
instruction: "Get the product description",
schema: z.object({ description: z.string() }),
});FAQ
Q: What is Stagehand? A: Stagehand is an AI browser automation framework with 21,800+ GitHub stars that provides three primitives — act(), extract(), observe() — for automating websites using natural language, built on Playwright.
Q: How is Stagehand different from Browser Use or Skyvern? A: Stagehand is a developer-first TypeScript library with three clean primitives, designed to be embedded in applications. Browser Use is a Python framework focused on autonomous agents. Skyvern adds computer vision for visual automation. Stagehand is the most ergonomic for TypeScript developers.
Q: Is Stagehand free? A: Yes, fully open-source under MIT license. Local execution is free. Cloud execution via Browserbase has a free tier with paid plans for scale.