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.
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:Element in der Vorschau anklicken
Element wird hervorgehoben. Ein Chip zeigt Tag, Selector und Quelldatei.
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
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
Visual Designer
Screens auf dem Canvas generieren
Einstellungen
KI-Modelle und Tool-Genehmigung konfigurieren