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

# Start your first session with Puppeteer

> Connect Puppeteer to Browserbase cloud browsers. Run headless Chrome automation at scale with built-in session management and debugging.

<Card title="Get started with a Puppeteer Node.js template" icon="rocket" iconType="sharp-solid" href="https://www.browserbase.com/templates/quickstart-puppeteer">
  Get started with Browserbase and Puppeteer in Node.js.
</Card>

<Steps>
  <Step title="Get your API key">
    Your API key and Project ID are displayed in the [Dashboard Navigation row](https://www.browserbase.com/sessions):

    <Frame>
      <img src="https://mintcdn.com/browserbase/giE_cpy18f2mWHqr/images/quickstart/api_key.png?fit=max&auto=format&n=giE_cpy18f2mWHqr&q=85&s=4ac94a8f69cec20bd17b2a8788169062" width="3410" height="1864" data-path="images/quickstart/api_key.png" />
    </Frame>

    Copy your API key and update your `.env` by adding the `BROWSERBASE_API_KEY` entry.

    Alternatively, you can temporarily set the environment variable for a single bash command by prefixing it with `BROWSERBASE_API_KEY=<your_api_key>` in your terminal.
  </Step>

  <Step title="Install dependencies">
    <CodeGroup>
      ```bash Node.js theme={null}
      npm i puppeteer-core @browserbasehq/sdk
      ```
    </CodeGroup>

    <br />
  </Step>

  <Step title="Update your code or clone a template">
    Running your existing code with Browserbase only requires a few line changes:

    <CodeGroup>
      ```typescript Node.js theme={null}
      import puppeteer from "puppeteer-core";
      import Browserbase from "@browserbasehq/sdk";

      const bb = new Browserbase({
        apiKey: process.env.BROWSERBASE_API_KEY,
      });

      (async () => {
        const session = await bb.sessions.create();
        console.log(`Session created, id: ${session.id}`);

        const browser = await puppeteer.connect({
          browserWSEndpoint: session.connectUrl,
        });

        const page = await browser.newPage();

        await page.goto("https://www.browserbase.com/", {
          waitUntil: "domcontentloaded",
        });

        const debugUrl = await bb.sessions.debug(session.id);
        console.log(
          `Session started, live debug accessible here: ${debugUrl.debuggerUrl}.`,
        );

        console.log("Taking a screenshot!");
        await page.screenshot({ fullPage: true });

        console.log("Shutting down...");
        await page.close();
        await browser.close();

        console.log(
          `Session complete! View recording at https://browserbase.com/sessions/${session.id}`,
        );
      })();
      ```

      <br />
    </CodeGroup>

    <Note>Set your `BROWSERBASE_API_KEY` in the environment variables.</Note>
  </Step>

  <Step title="Inspect the completed session">
    Find your recent sessions on the overview dashboard:

    <Frame>
      <img src="https://mintcdn.com/browserbase/giE_cpy18f2mWHqr/images/quickstart/dashboard.png?fit=max&auto=format&n=giE_cpy18f2mWHqr&q=85&s=79f6a7a4e22d8f8fba56321a5f4435bb" width="3426" height="1870" data-path="images/quickstart/dashboard.png" />
    </Frame>

    Select a session to inspect it with the [Session Inspector](/platform/browser/observability/observability).
  </Step>
</Steps>

## Start building

<CardGroup cols={2}>
  <Card title="Using browser sessions" icon="browser" iconType="sharp-solid" href="/platform/browser/getting-started/using-browser-session">
    Learn how to connect to and interact with browser sessions effectively.
  </Card>

  <Card title="Managing sessions" icon="circle-stop" iconType="sharp-solid" href="/platform/browser/getting-started/manage-browser-session">
    Understand how to properly end sessions and manage their lifecycle.
  </Card>
</CardGroup>