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

# Quickstart

> Stagehand allows you to build web automations with natural language and code.

export const V3Banner = () => null;

<V3Banner />

If this is your **first time using Stagehand**, you should try [Director](https://director.ai) first. It's an agent that allows you to build Stagehand workflows using natural language. You can also try Stagehand using our [MCP server](/v3/integrations/mcp/introduction).

Otherwise, the quickest way to start with Stagehand is with our CLI. It scaffolds a ready‑to‑run Stagehand app with sensible defaults, and an example script.

<Note>
  This quickstart is for **TypeScript**. For other languages, change the language selector in the top left corner.
</Note>

## 1) Create a sample project

<CodeGroup>
  ```bash Bash theme={null}
  npx create-browser-app
  ```
</CodeGroup>

## 2) Run it

Follow the CLI prompts to enter the project directory and add your API keys. Then run the example script.

<CodeGroup>
  ```bash Bash theme={null}
  cd my-stagehand-app # Enter the project directory
  cp .env.example .env  # Add your API keys
  npm start # Run the example script
  ```
</CodeGroup>

## 3) Use Stagehand (act, extract, observe)

The scaffold includes an index.ts file that contains the example script. Here's what it looks like:

<CodeGroup>
  ```typescript TypeScript theme={null}
  import "dotenv/config";
  import { Stagehand } from "@browserbasehq/stagehand";

  async function main() {
    const stagehand = new Stagehand({
      env: "BROWSERBASE"
    });

    await stagehand.init();

    console.log(`Stagehand Session Started`);
    console.log(`Watch live: https://browserbase.com/sessions/${stagehand.browserbaseSessionID}`);

    const page = stagehand.context.pages()[0];

    await page.goto("https://stagehand.dev");

    const extractResult = await stagehand.extract("Extract the value proposition from the page.");
    console.log(`Extract result:\n`, extractResult);

    await stagehand.act("Click the 'Evals' button.");

    const observeResult = await stagehand.observe("What can I click on this page?");
    console.log(`Observe result:\n`, observeResult);

    const agent = stagehand.agent({
      mode: "cua",
      model: "google/gemini-2.5-computer-use-preview-10-2025",
      systemPrompt: "You're a helpful assistant that can control a web browser.",
    });

    const agentResult = await agent.execute("What is the most accurate model to use in Stagehand?");
    console.log(`Agent result:\n`, agentResult);

    await stagehand.close();
  }

  main().catch((err) => {
    console.error(err);
    process.exit(1);
  });

  ```
</CodeGroup>

<Tip>
  To use, set provider keys in `.env` (e.g., `OPENAI_API_KEY`). For cloud browsers, add `BROWSERBASE_API_KEY`.
</Tip>

## Next steps

Learn about the Stagehand primitives: act, extract, observe, and agent.

<CardGroup cols={2}>
  <Card title="Act" icon="arrow-pointer" href="/v3/basics/act">
    Perform actions on web pages with natural language
  </Card>

  <Card title="Extract" icon="download" href="/v3/basics/extract">
    Get structured data with Zod schemas
  </Card>

  <Card title="Observe" icon="eye" href="/v3/basics/observe">
    Discover available elements and actions
  </Card>

  <Card title="Agent" icon="robot" href="/v3/basics/agent">
    Autonomous multi-step browser workflows
  </Card>
</CardGroup>