Skip to main content
Get up and running with SampleApp.ai in your Next.js application in just a few steps.
1

Install the SDK

Install the SampleApp.ai SDK package:
yarn add @sampleapp.ai/sdk
2

Configure Environment Variables

Create a .env.local file in your project root with your API key:
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.
3

Create the Sandbox Home Page

Create a new file at app/sandbox/page.tsx (or pages/sandbox/index.tsx for Pages Router):
"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!}
    />
  );
}
4

Create the Dynamic Sandbox Page

Create a new file at app/sandbox/[sandboxId]/page.tsx (or pages/sandbox/[sandboxId].tsx for Pages Router):
"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} 
    />
  );
}

​
Next Steps

View Examples

Explore example implementations.

Customization

Learn how to customize the appearance and behavior.

​
Need Help?

Discord

Get help from our team.

LinkedIn

Connect with us.