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

# Stripe-like Guided Sandbox

> Stripe-like interactive tutorials with step-by-step guidance

The Guided Sandbox delivers Stripe-like interactive tutorials where developers follow step-by-step instructions while seeing live code and results side-by-side - powered by real sandboxed environments that scale to thousands of concurrent developers.

## How It Works

Developers see a split-screen experience:

* **Left side**: Step-by-step instructions guiding them through the integration
* **Right side**: Live code editor and preview showing real results

As developers progress through steps, the code updates and they see real API responses - learning by doing, not just reading. Each developer gets their own isolated sandbox environment running live.

## Key Features

<CardGroup cols={2}>
  <Card title="Step-by-Step Guidance" icon="list-check">
    Break complex integrations into digestible steps with clear instructions.
  </Card>

  <Card title="Live Sandbox Environments" icon="server">
    Real containerized sandboxes running live apps - not simulations.
  </Card>

  <Card title="Scale to Thousands" icon="arrow-up-right-dots">
    Spin up 100s to 1000s of sandboxes on demand. We manage all the
    infrastructure.
  </Card>

  <Card title="Works Anywhere" icon="globe">
    Embed in any documentation platform or website.
  </Card>
</CardGroup>

## The Experience

Inspired by [Stripe's payment quickstart](https://docs.stripe.com/payments/quickstart), the Guided Sandbox provides:

1. **Clear navigation** - Developers always know where they are and what's next
2. **Interactive code** - Not just reading code, but running it in real sandboxes
3. **Instant feedback** - See real API responses immediately
4. **Self-serve exploration** - Developers can experiment freely without breaking anything

## Sandbox Infrastructure

<Note>
  This isn't just a UI component - we manage the entire sandbox infrastructure so
  you don't have to.
</Note>

* **Containerized environments** - Each developer gets an isolated sandbox
* **Auto-scaling** - Handle traffic spikes without provisioning
* **Fully managed** - We handle containers, networking, and cleanup
* **Developer self-serve** - No manual provisioning needed per user

## Use Cases

| Scenario             | Example                                         |
| -------------------- | ----------------------------------------------- |
| **Quickstart**       | Get developers from zero to first API call      |
| **Feature Tutorial** | Walk through implementing a specific feature    |
| **Migration Guide**  | Guide developers through upgrading versions     |
| **Onboarding Flow**  | Post-signup experience in your developer portal |

## Integration

The Guided Sandbox is a lightweight React component that integrates with:

* **Documentation platforms**: Mintlify, Fern, Astro Starlight, ReadMe, GitBook
* **Websites**: Any existing website or developer portal
* **Post-login experiences**: API portals, dashboards, onboarding flows

<Note>The component is just 7 lines of code to add to your site.</Note>

## Get Started

<Info>
  The Guided Sandbox component is available on request. Choose how you'd like to
  get started:
</Info>

<CardGroup cols={2}>
  <Card title="Request a Preview" icon="eye" href="https://sampleapp.ai/request-for-preview">
    See the Guided Sandbox in action with a live preview.
  </Card>

  <Card title="Book a Demo" icon="calendar" href="https://cal.com/sampleappai/demo">
    Schedule a call to discuss your use case.
  </Card>
</CardGroup>

## What We'll Help You With

When you get in touch, we'll work with you to:

* **Set up the component** for your specific documentation platform
* **Design tutorials** that create effective learning paths for your API
* **Customize branding** to match your existing documentation style
* **Integrate analytics** with your existing tools

## Next Steps

<CardGroup cols={2}>
  <Card title="Sample Apps" icon="cube" href="/products/sample-app-generator">
    Create pre-built examples for common use cases.
  </Card>

  <Card title="API & SDK Demo for Sales" icon="wand-magic-sparkles" href="/products/api-demo-for-sales">
    Generate custom demos tailored to each prospect's tech stack in under 60 seconds.
  </Card>
</CardGroup>