> ## 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.

# Installation

> Integrate Stagehand into an existing project.

export const V3Banner = () => null;

<V3Banner />

Install Stagehand in your current app with the TypeScript SDK.

<Tip>
  We recommend using the Node.js runtime environment to run Stagehand scripts.

  **Bun is now supported** as long as you do not integrate Stagehand with Playwright. Playwright is not compatible with Bun.
</Tip>

<Tabs>
  <Tab title="TypeScript">
    ### Install dependencies

    <CodeGroup>
      ```bash npm theme={null}
      npm install @browserbasehq/stagehand
      ```

      ```bash pnpm theme={null}
      pnpm add @browserbasehq/stagehand
      ```

      ```bash yarn theme={null}
      yarn add @browserbasehq/stagehand
      ```

      ```bash bun icon="sparkles" theme={null}
      bun add @browserbasehq/stagehand
      ```
    </CodeGroup>

    <Tip>
      If you plan to run locally, you need to have [Chrome](https://www.google.com/chrome/) installed on your machine. For cloud browser sessions, skip this.
    </Tip>

    ### Configure environment

    Set environment variables (or a `.env` via your framework):

    <CodeGroup>
      ```bash Bash theme={null}
      OPENAI_API_KEY=your_api_key
      BROWSERBASE_API_KEY=your_api_key
      ```
    </CodeGroup>

    <Note>
      Stagehand does not auto-load `.env` files.

      If you use a `.env` file, install and initialize `dotenv` in your own app code:

      ```bash theme={null}
      npm install dotenv
      ```

      ```typescript theme={null}
      import dotenv from "dotenv";
      dotenv.config({ path: ".env" });
      ```
    </Note>

    ### Use in your codebase

    Add Stagehand where you need browser automation.

    ```typescript theme={null}
    import dotenv from "dotenv";
    import { Stagehand } from "@browserbasehq/stagehand";
    import { z } from "zod";

    dotenv.config({ path: ".env" });  // if needed

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

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

      await page.goto("https://example.com");

      // Act on the page
      await stagehand.act("Click the learn more button");

      // Extract structured data
      const description = await stagehand.extract("extract the description", z.string());

      console.log(description);
      await stagehand.close();
    }

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

  <Tab title="Other Languages">
    <Note>
      For Python and other language SDKs, use the **language selector** in the top left corner of the sidebar to view the SDK documentation for your language.
    </Note>
  </Tab>
</Tabs>

## Next steps

<CardGroup cols={2}>
  <Card title="Configuration" icon="gear" href="/v3/configuration/browser">
    Environment, Browserbase vs Local, logging, timeouts, LLM customization
  </Card>

  <Card title="Act" icon="arrow-pointer" href="/v3/basics/act">
    Perform precise actions with natural language
  </Card>

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

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