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

# Next.js Quickstart

> Get started with SampleApp.ai SDK in your Next.js application

Get up and running with SampleApp.ai in your Next.js application in just a few steps.

<Steps>
  <Step title="Install the SDK">
    Install the SampleApp.ai SDK package:

    ```bash theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    yarn add @sampleapp.ai/sdk
    ```
  </Step>

  <Step title="Configure Environment Variables">
    Create a `.env.local` file in your project root with your API key:

    ```env theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    NEXT_PUBLIC_SAMPLEAPP_API_KEY=your_api_key_here
    NEXT_PUBLIC_SAMPLEAPP_ORG_ID=org_id
    ```

    Make sure to replace `your_api_key_here` with your actual API key from the SampleApp.ai dashboard.
  </Step>

  <Step title="Create the Sandbox Home Page">
    Create a new file at `app/sandbox/page.tsx` (or `pages/sandbox/index.tsx` for Pages Router):

    ```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    "use client"

    import { SandboxHome } from "@sampleapp.ai/sdk";

    export default function SandboxPage() {
      return (
        <SandboxHome
          apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!}
          orgid={process.env.NEXT_PUBLIC_SAMPLEAPP_ORG_ID!}
        />
      );
    }
    ```
  </Step>

  <Step title="Create the Dynamic Sandbox Page">
    Create a new file at `app/sandbox/[sandboxId]/page.tsx` (or `pages/sandbox/[sandboxId].tsx` for Pages Router):

    ```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    "use client"

    import { Sandbox } from "@sampleapp.ai/sdk";
    import { use } from "react";

    export default function SandboxHomePage({ 
      params 
    }: { 
      params: Promise<{ sandboxId: string }> 
    }) {
      const { sandboxId } = use(params);

      return (
        <Sandbox 
          apiKey={process.env.NEXT_PUBLIC_SAMPLEAPP_API_KEY!} 
          sandboxId={sandboxId} 
        />
      );
    }
    ```
  </Step>
</Steps>

## Next Steps

<CardGroup cols={2}>
  <Card title="View Examples" icon="code" href="/examples/overview">
    Explore example implementations.
  </Card>

  <Card title="Customization" icon="wand-magic-sparkles" href="/integration/customization">
    Learn how to customize the appearance and behavior.
  </Card>
</CardGroup>

## Need Help?

<CardGroup cols={2}>
  <Card title="Discord" icon="discord" href="https://discord.gg/FnCBtjJSNj">
    Get help from our team.
  </Card>

  <Card title="LinkedIn" icon="linkedin" href="https://linkedin.com/company/sampleappai">
    Connect with us.
  </Card>
</CardGroup>