Erstelle und initialisiere eine neue Sandbox-Umgebung in der KI-generierter Code mit Live-Vorschau läuft. Die Sandbox beinhaltet ein komplettes React + Vite + Tailwind Setup.
Endpunkte
Es gibt zwei Versionen je nach Sandbox-Provider:
| Endpunkt | Provider | Beschreibung |
|---|
/api/create-ai-sandbox | Vercel | Erstellt eine Vercel Sandbox-Instanz |
/api/create-ai-sandbox-v2 | Modal | Erstellt eine Modal Cloud-Sandbox (empfohlen) |
Sandbox erstellen (Vercel)
POST /api/create-ai-sandbox
Antwort
{
"success": true,
"sandboxId": "sbx_abc123xyz",
"url": "https://sbx-abc123xyz.vercel.run:3000",
"message": "Vercel-Sandbox erstellt und Vite React App initialisiert"
}
Sandbox V2 erstellen (Modal)
POST /api/create-ai-sandbox-v2
Request Body
Erstellung einer neuen Sandbox erzwingen auch wenn bereits eine existiert.
Antwort
{
"success": true,
"sandboxId": "modal-sandbox-1234",
"url": "https://seemodo--sandbox-1234.modal.run",
"apiUrl": "https://seemodo--sandbox-backend.modal.run",
"message": "Modal-Sandbox erfolgreich erstellt"
}
Sandbox-Initialisierung
Wenn eine Sandbox erstellt wird, wird automatisch eingerichtet:
Projektstruktur
Erstellt ein komplettes Vite React-Projekt mit TypeScript-Unterstützung.
Dependencies
Installiert React, Tailwind CSS und gängige UI-Dependencies.
Vite-Konfiguration
Konfiguriert HMR (Hot Module Replacement) für Live-Updates.
Dev Server
Startet den Vite Dev-Server und gibt die Vorschau-URL zurück.
Projekt-Template
Die erstellte Sandbox beinhaltet:
/
├── package.json # Dependencies und Scripts
├── vite.config.js # Vite mit React und HMR
├── tailwind.config.js # Tailwind-Konfiguration
├── postcss.config.js # PostCSS Setup
├── index.html # HTML-Einstiegspunkt
└── src/
├── main.jsx # React-Einstieg
├── App.tsx # Haupt-App-Komponente
├── index.css # Tailwind-Imports
└── pages/ # Generierte Seiten kommen hierhin
Beispiel-Verwendung
// Neue Sandbox erstellen
const response = await fetch('/api/create-ai-sandbox-v2', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ forceNew: false })
});
const { sandboxId, url } = await response.json();
// Jetzt Sandbox für Generierung nutzen
await fetch('/api/generate-screen', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
prompt: 'Eine schöne Landing Page',
sandboxId: sandboxId
})
});
// Vorschau ist unter zurückgegebener URL verfügbar
console.log('Vorschau:', url);
Sandbox-Lebenszyklus
Bestehende Sandboxes wiederverwenden
Die API verwendet automatisch bestehende Sandboxes wenn möglich:
// Erster Aufruf erstellt neue Sandbox
await fetch('/api/create-ai-sandbox-v2', { method: 'POST' });
// Zweiter Aufruf gibt bestehende Sandbox zurück
await fetch('/api/create-ai-sandbox-v2', { method: 'POST' });
// Neue Sandbox erzwingen
await fetch('/api/create-ai-sandbox-v2', {
method: 'POST',
body: JSON.stringify({ forceNew: true })
});
Fehlerbehandlung
| Fehler | Ursache | Lösung |
|---|
Sandbox-Erstellung läuft bereits | Gleichzeitige Erstellungs-Anfragen | Auf bestehende Erstellung warten |
Sandbox-Erstellung fehlgeschlagen | Provider-Fehler | Provider-Credentials prüfen |
npm install fehlgeschlagen | Dependency-Probleme | Erneut versuchen oder Template prüfen |
Fehler-Antwort
{
"error": "Sandbox-Erstellung fehlgeschlagen",
"details": "Modal-Backend antwortet nicht"
}
Konfiguration
Sandbox-Verhalten wird in config/app.config.ts konfiguriert:
modal: {
enabled: true,
timeoutMinutes: 60,
defaultPort: 5173,
workDir: '/root/vite-app'
},
vercelSandbox: {
timeoutMinutes: 30,
devPort: 3000,
runtime: 'nodejs20'
}
Umgebungsvariablen
| Variable | Beschreibung |
|---|
MODAL_BACKEND_URL | URL zum Modal Backend-API |
VERCEL_TOKEN | Vercel API-Token (für Vercel-Provider) |
VERCEL_TEAM_ID | Vercel Team-ID |
VERCEL_PROJECT_ID | Vercel Projekt-ID |
Hinweise
- Sandboxes haben Timeout nach konfigurierter Dauer (Standard 60 Minuten)
- Modal-Sandboxes beinhalten Seemodo AI für intelligente Code-Generierung
- Vercel-Sandboxes sind leichter aber ohne Seemodo AI
- Typisch ist nur eine Sandbox pro Session aktiv
