# Stagehand — AI-Powered Browser Automation SDK

> TypeScript SDK that lets you automate browsers using natural language and visual understanding. AI sees the page like a human does. Built on Playwright. 10,000+ GitHub stars.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm install @browserbasehq/stagehand
```

```typescript
import { Stagehand } from "@browserbasehq/stagehand";

const stagehand = new Stagehand({ env: "LOCAL" });
await stagehand.init();
await stagehand.page.goto("https://news.ycombinator.com");

// AI understands the page visually
await stagehand.act({ action: "click on the first article title" });
const title = await stagehand.extract({
  instruction: "extract the title and score of the top story",
  schema: z.object({ title: z.string(), score: z.number() }),
});
```

---

## Intro

Stagehand is a TypeScript SDK for AI-powered browser automation with 10,000+ GitHub stars. Unlike Playwright where you write CSS selectors and XPath, Stagehand lets you describe actions in natural language — the AI sees the page visually and figures out what to click, fill, or extract. Built on Playwright, it combines the reliability of traditional automation with the flexibility of AI vision. Best for developers who need browser automation that does not break when UI changes. Works with: any website, Playwright-compatible. Setup time: under 3 minutes.

---

## Three Core Methods

### `act()` — Do Something
```typescript
await stagehand.act({ action: "click the Sign In button" });
await stagehand.act({ action: "fill in the email field with test@example.com" });
await stagehand.act({ action: "select Monthly from the billing dropdown" });
await stagehand.act({ action: "scroll down to the pricing section" });
```

### `extract()` — Get Data
```typescript
const data = await stagehand.extract({
  instruction: "extract all product names and prices",
  schema: z.object({
    products: z.array(z.object({
      name: z.string(),
      price: z.number(),
    })),
  }),
});
```

### `observe()` — Understand the Page
```typescript
const elements = await stagehand.observe({
  instruction: "find all interactive elements on this page",
});
// Returns: buttons, links, inputs with their descriptions
```

## Why Stagehand Over Playwright

| Playwright | Stagehand |
|-----------|-----------|
| `page.click('[data-testid="login"]')` | `act("click the Login button")` |
| Breaks when selectors change | Works even after UI redesign |
| Need to inspect DOM manually | AI sees the page visually |
| Complex selector chains | Natural language instructions |

### Best of Both Worlds
Stagehand is built on Playwright — you can mix both:

```typescript
// Use Stagehand for AI-powered steps
await stagehand.act({ action: "navigate to the settings page" });

// Drop down to Playwright for precise control
await stagehand.page.waitForSelector("#settings-form");
const value = await stagehand.page.inputValue("#email");
```

### Structured Extraction with Zod

```typescript
import { z } from "zod";

const articles = await stagehand.extract({
  instruction: "extract all news articles from this page",
  schema: z.object({
    articles: z.array(z.object({
      title: z.string(),
      author: z.string(),
      date: z.string(),
      summary: z.string(),
    })),
  }),
});
// Fully typed: articles.articles[0].title
```

### Use Cases

| Scenario | Example |
|----------|---------|
| E2E testing | "Login, add item to cart, checkout" |
| Web scraping | "Extract all job listings from this page" |
| Form filling | "Fill out the application form with this data" |
| Monitoring | "Check if the status page shows all green" |
| Screenshots | "Navigate to dashboard and take a screenshot" |

### Key Stats
- 10,000+ GitHub stars
- Built on Playwright
- 3 methods: act, extract, observe
- Zod schema for typed extraction
- Visual AI understanding

### FAQ

**Q: What is Stagehand?**
A: A TypeScript SDK for browser automation using natural language — AI sees the page visually and performs actions without CSS selectors.

**Q: Is Stagehand free?**
A: Yes, open-source under MIT. Uses your own LLM API key for vision.

**Q: Does Stagehand replace Playwright?**
A: No, it is built on Playwright and adds AI-powered natural language control. You can use both together.

---

## Source & Thanks

> Created by [Browserbase](https://github.com/browserbase). Licensed under MIT.
>
> [stagehand](https://github.com/browserbase/stagehand) — stars 10,000+

Thanks for making browser automation speak human.

---

<!-- ZH -->

## 快速使用

```bash
npm install @browserbasehq/stagehand
```

```typescript
const stagehand = new Stagehand({ env: "LOCAL" });
await stagehand.init();
await stagehand.page.goto("https://example.com");
await stagehand.act({ action: "点击登录按钮" });
```

---

## 简介

Stagehand 是一个 AI 驱动的浏览器自动化 TypeScript SDK，GitHub 10,000+ stars。用自然语言描述操作，AI 通过视觉理解页面并执行。基于 Playwright 构建。适合需要不会因 UI 变化而中断的浏览器自动化。

---

## 来源与感谢

> Created by [Browserbase](https://github.com/browserbase). Licensed under MIT.
>
> [stagehand](https://github.com/browserbase/stagehand) — stars 10,000+

---
Source: https://tokrepo.com/en/workflows/fd07b08f-5d31-404c-bd80-6e0587a6b712
Author: Skill Factory