Next.js Quickstart - SampleApp.ai

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

Install the SDK

Install the SampleApp.ai SDK package:

yarn add @sampleapp.ai/sdk

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.

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!}
    />
  );
}

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.

Connect with us.

Introduction to Sampleapp.ai

Stripe-like Guided Sandbox

​Next Steps

View Examples

Customization

​Need Help?

Discord

LinkedIn

Next Steps

Need Help?