> ## Documentation Index
> Fetch the complete documentation index at: https://stagehand-sameelarif-stg-2602-update-cache-docs.mintlify.site/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.

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. You can also try Stagehand using our [MCP server](/v2/integrations/mcp/introduction).

<Note>
  This quickstart is for **TypeScript**. For **Python**, see the [installation guide](/v2/first-steps/installation).
</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.page;

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

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

    const actResult = await page.act("Click the 'Evals' button.");
    console.log(`Act result:\n`, actResult);

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

    const agent = await stagehand.agent({
      instructions: "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` and `BROWSERBASE_PROJECT_ID`.
</Tip>

## Next steps

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

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

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

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

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