> ## 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.
# AI Coder
> Das Chat-Interface zum Erstellen und Iterieren deiner Anwendungen. Mit Spracheingabe, Datei-Referenzen, Prompt-Queue, Visual Edits und mehreren KI-Modi.
# AI Coder
Der AI Coder ist Seemodos konversationelles Entwicklungs-Interface. Im Projekt-Editor (`/projects/[id]`) baust du komplette Anwendungen durch Chat.
## Layout des Projekt-Editors
| Bereich | Zweck |
| ----------------- | ------------------------------------------------------------------- |
| **Top Toolbar** | Zurück, Projektname, Visual Edits, History, Publish, GitHub, Teilen |
| **Linkes Panel** | AI Assistant (Chat), History oder Visual Edits — umschaltbar |
| **Resize-Handle** | Ziehen zum Anpassen der Panel-Breiten (320–700px) |
| **Rechtes Panel** | Live-Vorschau deiner laufenden App |
## Toolbar-Buttons
| Button | Aktion |
| --------------------------- | -------------------------------------------------- |
| **← Zurück** | Zum Dashboard zurückkehren |
| **Projektname** (mit Pfeil) | Klick öffnet Projekt-Einstellungen |
| **🖌 Visual** | Wechsel zu Visual Edits Modus |
| **🕐 History** | Wechsel zur Chat-Verlaufsansicht |
| **Publish** (grün) | Deploy-Panel öffnen |
| **GitHub** | GitHub-Dialog öffnen (grüner Punkt wenn verbunden) |
| **Teilen** | Teilen-Dialog für Mitarbeiter-Einladungen |
## Der AI Chat
### Chat-Modi
Über den **Modus-Selector** am unteren Rand wechselst du zwischen:
| Modus | Beschreibung | Tool-Limit |
| --------------- | -------------------------------------------------------------- | ------------------- |
| **Chat & Edit** | Standard. KI liest Code, plant Änderungen, bearbeitet Dateien. | Max 25 Tool-Aufrufe |
| **Planning** | Nur Diskussion. KI hilft beim Planen ohne Code-Änderungen. | Keine Tools |
| **Agent** | Erweiterter Modus mit mehr Tools und längeren Ketten. | Max 50 Tool-Aufrufe |
### Nachrichteneingabe
Der Composer unten bietet:
* **Textfeld** — Prompt schreiben. Shift+Enter für neue Zeile, Enter zum Senden.
* **@ Datei-Erwähnungen** — `@` tippen für Autocomplete-Dropdown mit bis zu 10 passenden Projektdateien. Tab/Enter zum Auswählen, Escape zum Schließen.
* **🎤 Spracheingabe** — Mikrofon-Icon für Diktat. Kontinuierliche Erkennung mit Zwischenergebnissen. Transkribierter Text erscheint im Eingabefeld.
* **Senden** — Nachricht absenden (Enter). Während KI streamt wird dies zu **"Zur Queue hinzufügen"** (amber).
* **Stop** — Erscheint während KI streamt; sofort abbrechen.
Wenn die KI arbeitet und du tippst, erscheint ein Hinweis: "Enter drücken um zur Queue hinzuzufügen · Nachricht wird gesendet wenn KI fertig ist".
### Prompt-Queue
Wenn die KI arbeitet, kannst du weiter Nachrichten senden. Sie gehen in eine **Queue**:
* **Queue-Badge** — Zeigt Anzahl wartender Nachrichten
* **Pause/Fortsetzen** — Queue-Verarbeitung pausieren
* **Aufklappen** — Alle wartenden Nachrichten sehen
* **Umordnen** — Nachrichten per Drag & Drop umsortieren
* **Entfernen** — Einzelne Nachrichten löschen
### KI-Antworten
Jede Antwort kann enthalten:
* **Markdown-Inhalt** — Formatierter Text mit Code-Blöcken
* **Thinking** (einklappbar) — Der Denkprozess der KI
* **Tool Calls** (einklappbar) — Welche Tools die KI verwendet hat
* **Files Modified** (einklappbar) — Liste geänderter Dateien
* **Aufgaben-Fortschritt** — Checkliste der Schritte
* **Vorschlag-Buttons** — Kontextbezogene nächste Schritte
### Tool-Genehmigung
Wenn die KI ein Tool nutzen will das Bestätigung braucht:
* **"Genehmigung erforderlich"** Karte erscheint
* **Genehmigen** — Aktion erlauben
* **Ablehnen** — Aktion verweigern
### Supabase-Verbindungshinweis
Wenn die KI erkennt dass deine App eine Datenbank braucht:
* "Datenbank benötigt" Nachricht
* **Verbinden** — Seemodo Cloud Setup öffnen
* **Überspringen** — Ohne Datenbank fortfahren
## Visual Edits
Klicke den **🖌 Pinsel** für visuelles Point-and-Click-Editing:
Fadenkreuz-Icon in der Vorschau-Toolbar klicken.
Element wird hervorgehoben. Ein Chip zeigt Tag, Selector und Quelldatei.
Das Visual Edits Panel zeigt Tabs für:
* **Text** — Inhalt, Schriftgröße, Schriftstärke, Textausrichtung, Farbe
* **Farben** — Hintergrund- und Textfarbe
* **Abstände** — Margin und Padding (oben, rechts, unten, links) mit Slidern
* **Rahmen** — Breite, Farbe, Radius, Stil
* **Schatten** — Box Shadow Konfiguration
* **Bild** — Hintergrundbild-URL, Upload oder KI-Generierung
Änderungen werden sofort als CSS-Overrides in der Vorschau angezeigt.
* **Änderungen speichern** — Wandelt Visual Edits in einen KI-Prompt um der permanente Code-Änderungen bewirkt
* **Verwerfen** — Entfernt alle temporären Overrides
## Vorschau-Panel
### Vorschau-Toolbar
| Button | Aktion |
| ------------------------- | ------------------------------- |
| **Desktop/Tablet/Mobile** | Viewport-Breite wechseln |
| **Fadenkreuz** | Element-Picker für Visual Edits |
| **Aktualisieren** | Vorschau manuell neu laden |
| **Externer Link** | Vorschau in neuem Tab öffnen |
### Vorschau-Tabs
| Tab | Inhalt |
| ------------ | -------------------------------------------------- |
| **Preview** | Live laufende App im iframe |
| **Code** | Projekt-Quellcode durchsuchen (Dateibaum + Viewer) |
| **Console** | Browser-Konsole mit Fehler-Badge |
| **Database** | Seemodo Cloud Interface (wenn verbunden) |
## Tipps
* **@ Mentions nutzen** — "@src/components/Header.tsx mach das Logo größer"
* **Planning-Modus** für Architektur-Diskussionen ohne Code-Änderungen
* **Agent-Modus** für komplexe Multi-Datei-Operationen
* **Queue nutzen** wenn du eine Sequenz von Änderungen kennst
* **Visual Edits** für schnelle Styling-Tweaks ohne Tippen
* **Console-Tab prüfen** wenn etwas kaputt aussieht
## Nächste Schritte
Screens auf dem Canvas generieren
KI-Modelle und Tool-Genehmigung konfigurieren