Zum Hauptinhalt springen
Seemodo verwendet Cloud-Sandboxes um deine generierten Anwendungen auszuführen. Jede Sandbox bietet eine vollständige Entwicklungsumgebung mit Vite Dev-Server, Paket-Management und KI-Integration.

​
Verfügbare Anbieter

​
Anbieter-Vergleich

FeatureModalE2BVercel
Standard-Timeout1 Stunde60 Min15 Min
Max Timeout24 Stunden60 Min15 Min
Seemodo AI✅ Integriert❌❌
Git-Integration✅ Auto-Commit❌❌
Paket-Managerpnpmnpmnpm
Startzeit~5 Sekunden~10 Sekunden~3 Sekunden
Beste VerwendungVoller KI-WorkflowSchnelle PrototypenNext.js Apps

​
Sandbox-Lebenszyklus

​
Sandbox erstellen

Eine Sandbox wird automatisch erstellt wenn du:
  1. Einen HiFi-Screen generierst
  2. Generate Flow mit HiFi-Modus klickst
Der Prozess:
  1. Neue Sandbox vom Anbieter anfordern
  2. Auf Container-Start warten
  3. Vite Dev-Server initialisieren
  4. Seemodo AI starten (nur Modal)
  5. Vorschau-URL zurückgeben

​
Sandbox-Zustände

ZustandBeschreibung
InitialisierungSandbox startet
BereitAlle Dienste laufen, Vorschau verfügbar
AktivBenutzer interagiert mit Sandbox
InaktivKeine kürzliche Aktivität
BeendetSandbox wurde gestoppt

​
Vorinstalliertes Template

Modal-Sandboxes kommen mit vorkonfiguriertem Vite + React + Tailwind Template: 
/root/vite-app/
├── src/
│   ├── main.jsx
│   ├── App.jsx
│   └── index.css
├── public/
├── index.html
├── package.json
├── vite.config.js
├── tailwind.config.js
└── postcss.config.js

​
Konfiguration

Alle Sandbox-Einstellungen sind in config/app.config.ts: 
export const appConfig = {
  // Modal Konfiguration
  modal: {
    timeoutMinutes: 60,
    backendUrl: process.env.MODAL_BACKEND_URL,
    vitePort: 5173,
    viteStartupDelay: 5000,
    workingDirectory: '/root/vite-app',
  },
  
  // E2B Konfiguration
  e2b: {
    timeoutMinutes: 60,
    vitePort: 5173,
    viteStartupDelay: 10000,
    workingDirectory: '/home/user/app',
  },
  
  // Vercel Konfiguration
  vercelSandbox: {
    timeoutMinutes: 15,
    devPort: 3000,
    devServerStartupDelay: 7000,
    workingDirectory: '/app',
  },
};

​
Terminal-Zugriff

Öffne das Terminal um Befehle direkt in der Sandbox auszuführen:
  1. Klicke den Terminal Button nachdem eine Sandbox aktiv ist
  2. Nutze das eingebaute Terminal oder KI-Chat
Häufige Befehle: 
# Dateien anzeigen
ls -la src/

# Paket installieren
pnpm add lodash

# Nach Fehlern suchen
cat vite.log

# Git-Historie anzeigen
git log --oneline

​
Projekt herunterladen

Exportiere dein Projekt als ZIP-Datei:
  1. Öffne das Sandbox-Panel
  2. Klicke den Download Button
  3. Erhalte eine vollständige ZIP mit:
    • Allen Quelldateien
    • package.json mit Abhängigkeiten
    • Konfigurations-Dateien
    • Git-Historie (nur Modal)
Heruntergeladenes Projekt lokal ausführen: 
unzip project.zip
cd project
pnpm install
pnpm dev

​
Problemlösung

  • Prüfe ob dein Anbieter-API-Key/URL korrekt ist
  • Verifiziere dass Modal-Backend deployed ist
  • Prüfe Netzwerk-Konnektivität
  • Browser-Konsole auf Fehler prüfen
  • Warte auf Vite-Server-Start (kann 5-10 Sekunden dauern)
  • Prüfe auf Build-Fehler in den Logs
  • Stelle sicher dass Sandbox nicht abgelaufen ist
  • Vorschau-iframe aktualisieren versuchen
  • Verifiziere dass Paket-Name korrekt ist
  • Prüfe auf Netzwerk-Probleme in der Sandbox
  • Nutze pnpm statt npm (Modal)
  • Vite nach Installation neustarten
  • Stelle sicher dass du Modal-Provider nutzt
  • Warte auf vollständige Sandbox-Initialisierung
  • Prüfe ob Seemodo AI-URL verfügbar ist
  • Panel auf Verbindungsfehler prüfen

​
Umgebungsvariablen

Sandboxes unterstützen Umgebungsvariablen für:
  • API-Schlüssel (für externe Dienste)
  • Konfigurations-Flags
  • Feature-Toggles
Erstelle eine .env Datei in der Sandbox oder bitte die KI Umgebungsvariablen einzurichten.
Niemals echte API-Schlüssel in generiertem Code committen. Nutze Umgebungsvariablen und .env Dateien.