> ## Documentation Index
> Fetch the complete documentation index at: https://docs.seemodo.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Live-Vorschau & Sandbox

> Deine App läuft in einer echten Cloud-Sandbox mit Hot-Reload, Terminal-Zugang, AI Coder, Git und Build-Logs.

# Live-Vorschau & Sandbox

Jede Anwendung in Seemodo läuft in einer Live-Cloud-Sandbox. Das ist eine echte Entwicklungsumgebung — dein Code läuft, du kannst mit deiner App interagieren, und Änderungen erscheinen sofort.

## Wie die Sandbox funktioniert

Wenn du einen HiFi-Screen generierst oder ein Projekt öffnest, stellt Seemodo eine Cloud-Sandbox bereit:

1. Eine frische Entwicklungsumgebung startet
2. Dein Projekt-Code wird synchronisiert
3. Ein Dev-Server mit Hot-Reload startet
4. Die Live-Vorschau erscheint in deinem Workspace

## Das Sandbox Panel

Im Visual Designer: Klick auf das **Terminal-Icon** neben dem Generieren-Button.

### AI Coder (OpenCode)

Ein vollständiger KI-Coding-Assistent mit Dateisystem-Zugriff:

* Neue Dateien und Komponenten erstellen
* Mehrere Dateien gleichzeitig bearbeiten
* Routing, State-Management und komplexe Features einrichten
* Pakete installieren

### Terminal

Eine vollständige Kommandozeile verbunden mit deiner Sandbox:

```bash theme={null}
npm install axios
ls src/components/
cat package.json
```

### Git

Versionskontrolle in der Sandbox:

* Aktuellen Branch anzeigen
* Geänderte Dateien mit Status sehen
* Commit-Nachrichten schreiben und committen
* Commit-Verlauf mit Diffs ansehen

### Vite Logs

Echtzeit-Build-Ausgabe des Entwicklungsservers:

* Kompilierungsfehler
* HMR-Updates (Hot Module Replacement)
* Warnungen und Debug-Info

## Status-Indikatoren

| Indikator                   | Bedeutung                            |
| --------------------------- | ------------------------------------ |
| Grüner Punkt                | Sandbox läuft und ist synchronisiert |
| Spinner                     | Sandbox startet                      |
| Terminal-Icon (aktiv)       | Sandbox Panel ist offen              |
| Terminal-Icon (deaktiviert) | Noch keine Sandbox aktiv             |

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Seemodo Cloud" icon="cloud" href="/de/seemodo/cloud">
    Datenbank zur Sandbox-App hinzufügen
  </Card>

  <Card title="GitHub" icon="code-branch" href="/de/seemodo/github">
    Sandbox mit GitHub verbinden
  </Card>
</CardGroup>