Der Code-Editor in AI Studio gibt dir direkten Zugriff auf den Projektcode, ohne den Builder zu verlassen. Du kannst Dateien bearbeiten, projektweit suchen, Probleme schnell erkennen und Änderungen in Echtzeit aus einem einzigen Workspace überprüfen. Dadurch wird es einfacher, von AI-generierten Ergebnissen zu manueller Verfeinerung zu wechseln, wenn du mehr Kontrolle über dein Projekt benötigst.
Wichtig: AI Studio ist über Labs verfügbar. Aktiviere es für deinen Sub-Account, bevor du es verwendest. Weitere Informationen findest du unter „Labs Features - Complete Overview“.
INHALTSVERZEICHNIS
Was ist der Code-Editor in AI Studio?
Wichtige Vorteile des Code-Editors
Kernfunktionen des AI Studio Code-Editors
Suchen & Ersetzen
Globale Projektsuche
Sofortiges Speichern & Live-Vorschau
Intelligente Fehlererkennung
Automatische Routen-Erkennung
Version History
Schutz vor ungespeicherten Änderungen
So verwendest du den Code-Editor
Häufig gestellte Fragen
Verwandte Artikel
Was ist der Code-Editor in AI Studio?
Der AI Studio Code-Editor ist eine integrierte, auf CodeMirror basierende Programmierumgebung direkt im AI-Studio-Builder. Er ermöglicht es dir, den Code deiner AI-generierten Websites und Web-Apps direkt in ProfitBoost zu ansehen, zu bearbeiten und zu verwalten – ohne externe IDE oder Deploy-Schritt.
AI Studio generiert ein funktionsfähiges Projekt aus deinen Prompts (Idee, URL oder Referenzdesign), und der Code-Editor gibt dir präzise Kontrolle über TypeScript, JSX, CSS, JSON und weitere Dateien, die dieses Erlebnis steuern.
Mit dem AI Studio Code-Editor kannst du direkt im Build-Prozess iterieren: Code bearbeiten, sofortige Änderungen in der Live-Vorschau sehen und AI nutzen, um Fehler zu erkennen und zu beheben.
Wichtige Vorteile des Code-Editors
Mehr Kontrolle: Direkte Code-Anpassungen für präzisere Änderungen
Granulare Änderungen: Anpassung einzelner Texte, Styles, Komponenten oder Routen
Kein Kontextwechsel: Bearbeitung direkt in ProfitBoost ohne Download oder externe Tools
Schnelles Debugging: Fehler sofort erkennen und mit „Try to fix“ lösen
Sicheres Experimentieren: Version History zum Wiederherstellen früherer Zustände
Intelligente Navigation: Find & Replace und globale Suche für schnelle Orientierung
Kernfunktionen des AI Studio Code-Editors
Der Code-Editor enthält mehrere integrierte Tools, die das Arbeiten mit Projekten effizienter machen.
Suchen & Ersetzen
Suchen & Ersetzen hilft dir, Inhalte innerhalb der aktuellen Datei schnell zu finden und zu ändern.
Du kannst:
Mit Cmd/Ctrl + F innerhalb der Datei suchen
Suchbegriffe markieren lassen
Groß-/Kleinschreibung und ganze Wörter berücksichtigen
Einzelne oder alle Treffer ersetzen
Globale Projektsuche
Die globale Projektsuche durchsucht das gesamte Projekt statt nur eine Datei.
Du kannst:
Ergebnisse projektweit anzeigen
Treffer nach Datei gruppieren
Zeilennummern sehen
Direkt zu Datei und Stelle springen
Sofortiges Speichern & Live-Vorschau
Änderungen werden schnell in der Vorschau sichtbar, ohne zusätzlichen Deploy-Schritt.
Änderungen speichern
Live-Vorschau aktualisiert sich in Sekunden
Intelligente Fehlererkennung
Die intelligente Fehlererkennung hilft dir, Build-Probleme schnell zu erkennen und zu beheben.
So funktioniert es:
Nach dem Speichern erscheint ggf. ein Build-Fehler im Chat
Über „Details“ kannst du den Fehler ansehen
Mit „Try to fix“ versucht AI automatisch eine Lösung
Danach:
Fix prüfen
Vorschau aktualisieren
Automatische Routen-Erkennung
Neue Routen werden automatisch erkannt und im Route-Selector angezeigt, wenn sie im Code erstellt werden.
Version History
Die Version History speichert jeden gespeicherten Stand deines Projekts.
Du kannst:
Alte Versionen öffnen
Vorschauen ansehen
Versionen vergleichen
Zur vorherigen Version zurückkehren
Schutz vor ungespeicherten Änderungen
Wenn du versuchst, den Editor mit ungespeicherten Änderungen zu verlassen, erhältst du eine Warnung, um Datenverlust zu vermeiden.
So verwendest du den Code-Editor
Schritt 1: Code-Editor öffnen
Öffne dein AI-Studio-Projekt und klicke auf „Code“.
Schritt 2: Datei auswählen und bearbeiten
Wähle eine Datei im File Tree und bearbeite den Code direkt.
Schritt 3: Änderungen speichern
Klicke auf „Save“, um die Änderungen zu übernehmen.
Schritt 4: Vorschau prüfen & Fehler beheben
Überprüfe die Live-Vorschau und nutze „Try to fix“, falls Fehler auftreten.
Schritt 5: Projekt veröffentlichen
Wenn alles passt, veröffentliche das Projekt, um die Änderungen live zu schalten.
Häufig gestellte Fragen
F: Muss ich den Code-Editor verwenden, um AI Studio zu nutzen?
Nein. AI Studio kann komplette Projekte ohne manuelles Coding erstellen. Der Code-Editor ist optional für mehr Kontrolle.
F: Welche Sprachen werden unterstützt?
TypeScript, JSX, CSS, JSON und andere textbasierte Projektdateien.
F: Wird automatisch gespeichert?
Änderungen werden gespeichert, wenn du auf „Save“ klickst.
F: Werden Änderungen sofort live veröffentlicht?
Nein. Änderungen erscheinen nur in der Vorschau. Live geht es erst nach dem Veröffentlichen.
Verwandte Artikel
AI Studio in ProfitBoost
Connect Forms and Calendars in AI Studio
AI Product Pricing
Advanced SEO Support in AI Studio