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
Toolbar-Buttons
Der AI Chat
Chat-Modi
Über den Modus-Selector am unteren Rand wechselst du zwischen: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.
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:1
Element-Picker aktivieren
Fadenkreuz-Icon in der Vorschau-Toolbar klicken.
2
Element in der Vorschau anklicken
Element wird hervorgehoben. Ein Chip zeigt Tag, Selector und Quelldatei.
3
Eigenschaften bearbeiten
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
4
Änderungen live sehen
Änderungen werden sofort als CSS-Overrides in der Vorschau angezeigt.
5
Speichern oder verwerfen
- Ä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
Vorschau-Tabs
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
Visual Designer
Screens auf dem Canvas generieren
Einstellungen
KI-Modelle und Tool-Genehmigung konfigurieren