Skip to main content
Jede App, die du in Genie baust, lebt in einem Projekt. Wenn du beschreibst, was du erstellen möchtest, generiert Genie eine voll funktionsfähige App — diese generierte App ist dein Projekt. Jedes Projekt hat seine eigene URL, seinen eigenen Chat-Verlauf, eigene Einstellungen und optional ein verbundenes Cloud-Backend. Du kannst so viele Projekte haben, wie dein Tarif erlaubt, und jedes wird unabhängig verwaltet.

​
Ein Projekt erstellen

Du erstellst ein Projekt direkt vom Genie-Startbildschirm, indem du eine Beschreibung der gewünschten App in das Prompt-Feld eingibst und Enter drückst (oder auf Generieren klickst). Genie liest deine Beschreibung, generiert die App und öffnet sie in der Projektansicht.
1

Genie öffnen

Gehe zu genie.app und melde dich in deinem Konto an.
2

Beschreibe deine App

Tippe eine Beschreibung der App, die du bauen möchtest, in das Prompt-Feld. Sei so konkret, wie du möchtest — zum Beispiel: „ein Task-Tracker für ein kleines Team mit Fälligkeitsdaten und Prioritäts-Labels”.
3

Generieren

Drücke Enter oder klicke auf den Senden-Button. Genie beginnt mit dem Bau deiner App. Sobald sie fertig ist, landest du direkt in der Projektansicht.
Du kannst auch mit einer vorgefertigten Vorlage starten, statt einen Prompt von Grund auf zu schreiben. Vorlagen geben dir einen funktionierenden Ausgangspunkt, den du mit Folgeprompts anpassen kannst.
Ein neues Projekt zu erstellen erfordert ein verfügbares Guthaben von mehr als 1 Credit, da sofort ein Build gestartet wird. Ist dein Guthaben zu niedrig, zeigt Genie dir einen Dialog mit deinem Guthaben und einem Link zu den Tarifen, statt einen Build zu starten, den es nicht bezahlen kann. Siehe Credits, wie Credits funktionieren.

​
Die Projektansicht

Sobald dein Projekt erstellt ist, verbringst du in der Projektansicht die meiste Zeit. Sie besteht aus zwei Hauptbereichen nebeneinander: dem Chat-Panel links und der Live-Vorschau rechts.

Chat-Panel

Im Chat-Panel sprichst du mit Genie. Tippe Folgeanweisungen — „füge eine Suchleiste hinzu”, „ändere das Farbschema zu Dunkelblau” — und Genie aktualisiert die App in Echtzeit. Dein vollständiger Gesprächsverlauf wird gespeichert und ist hier sichtbar.

Live-Vorschau

Die Live-Vorschau rendert deine App so, wie sie tatsächlich läuft. Du kannst durchklicken, Formulare ausfüllen und das Verhalten genau wie ein echter Nutzer testen — ohne die Projektansicht zu verlassen.

​
Chat-Verlauf

Jede Nachricht, die du sendest, und jede Antwort von Genie wird im Chat-Verlauf des jeweiligen Projekts gespeichert. Du kannst durch die gesamte Unterhaltung zurückscrollen, um vergangene Änderungen nachzuvollziehen, zu verstehen, warum etwas auf eine bestimmte Weise gebaut wurde, oder dort weiterzumachen, wo du nach einer Pause aufgehört hast.

​
Einem Build beim Laufen zusehen

Während Genie deine App baut oder aktualisiert, zeigt das Chat-Panel eine Live-Fortschrittskarte mit jedem Schritt des Builds — Planung, Coding und Veröffentlichung. Klicke auf einen Schritt, um seine Details zu öffnen: was er getan hat, welche Dateien sich geändert haben, und — falls er fehlgeschlagen ist — warum, zusammen mit einem Button „Genie bitten, das zu beheben”, der einen erneuten Versuch mit bereits ausgefülltem Fehlergrund startet.
Ein Schritt, der nie tatsächlich gelaufen ist (zum Beispiel, weil ein vorheriger Schritt im selben Build fehlgeschlagen ist), wird als Übersprungen angezeigt statt als falscher Erfolg — so siehst du auf einen Blick, welche Teile eines Builds wirklich abgeschlossen wurden.
Sobald ein Build abgeschlossen ist, zeigt Genie außerdem eine kurze Zusammenfassung der Änderungen. Während diese Zusammenfassung geschrieben wird, zeigt die Statuszeile der Fortschrittskarte „Zusammenfassung wird geschrieben…” statt des generischen „Letzte Handgriffe…” an — so siehst du, dass das Coding fertig ist und Genie nur noch abschließt. Was ich gebaut habe und Noch nicht gebaut erscheinen als kompakte Vorschau — klicke auf Mehr anzeigen, um die vollständige Zusammenfassung aufzuklappen — sodass To-do-Vorschläge oder Genies Empfehlung für den nächsten Schritt direkt darunter sichtbar bleiben, statt weiter nach unten verdrängt zu werden.

​
Vorschau aktualisieren

Sobald ein Build abgeschlossen ist, erscheint ein kleiner Button „Aktuelle Version ansehen” schwebend über der Live-Vorschau — und, solange die Vorschau noch lädt, auch auf ihrem Platzhalter — sodass du das neueste Ergebnis sofort übernehmen kannst. Er verschwindet von selbst, sobald die Vorschau aktuell ist, und erscheint beim nächsten Folge-Prompt, der deine App ändert, erneut.
Die Vorschau aktualisiert sich außerdem automatisch, sobald ein Build abgeschlossen ist — meistens musst du also gar nichts anklicken. Der Button ist da, falls du es schneller erzwingen möchtest.

​
Chat-Modus

Manchmal möchtest du eine Frage stellen statt eine Änderung anzufordern — „was macht diese Komponente?”, „wie würde ich Authentifizierung hinzufügen?” oder „welche Felder sollte dieses Formular haben?”. Genie erkennt automatisch, wenn du chattest oder eine Frage stellst statt einen Build anzufordern, und antwortet direkt im Chat-Panel, statt einen Neubau zu starten. Du musst nichts umschalten — frag einfach ganz natürlich, und es werden keine Credits für einen ungewollten Neubau verbraucht. Genies Antwort ist nicht immer reiner Text — wenn es sinnvoll ist, dir eine Auswahl anzubieten, zeigt Genie stattdessen eine anklickbare Karte direkt im Chat, statt eines Absatzes, den du in eigenen Worten beantworten musst: einen Button zum Bestätigen einer Aktion, eine Liste zur Auswahl einer Option, oder eine Checkliste, in der du beliebig viele Punkte ankreuzen und eine eigene Anmerkung hinzufügen kannst. Die vollständige Übersicht findest du unter Interaktive Antworten.
Willst du nicht tippen? Tippe auf das Mikrofon-Symbol im Composer des Chat-Panels, um deinen Prompt stattdessen zu diktieren. Siehe Sprechen statt tippen.
Führt die Antwort zu etwas, das über dieses Projekt hinausgeht — ein neues Projekt erstellen, Credit-Nutzung prüfen, Mitglieder verwalten — klicke auf Mit Genie AI fortfahren unter der Antwort, um die Unterhaltung ins vollständige Genie-AI-Panel zu übernehmen, genau dort, wo du aufgehört hast. Der Button markiert sich danach als Fortgesetzt, damit du auf einen Blick erkennst, dass du eine Frage bereits übergeben hast — und der gesamte Austausch, einschließlich aller beantworteten Karten, wird mit übernommen, sodass Genie AI nie erneut nachfragen muss.

​
Das Genie-AI-Panel

Klicke auf den Genie AI-Griff neben deiner Live-Vorschau, um die vollständige Workspace-KI in einem Panel neben deiner App zu öffnen, ohne das Projekt zu verlassen. Es ist derselbe Assistent wie in der Befehlspalette und im Workspace-Chat — alles, was er dort kann, kann er auch von hier aus: Projekte erstellen oder aktualisieren, Credits prüfen, Mitglieder verwalten. Öffne den Chat-Umschalter des Panels, um zwischen deinen letzten Genie-AI-Unterhaltungen für diesen Workspace zu wechseln, statt eine zu verlieren, um eine andere zu beginnen. Um eine ganz neue Unterhaltung zu starten, tippe einfach im Composer los — einen separaten „Neuer Chat”-Button musst du nicht suchen.
Bitte das Genie-AI-Panel, etwas Neues zu bauen — bei allem, was über eine kleine, klare Anfrage hinausgeht, stellt Genie zuerst ein paar kurze Fragen dazu, worauf du hinaus willst. Siehe Genie fragt nach, bevor sie baut.

​
Text direkt in der Vorschau bearbeiten

Du kannst auf beliebigen Text in der Live-Vorschau klicken und ihn direkt bearbeiten — ohne einen neuen Prompt zu senden. Das ist nützlich für schnelle Label-Änderungen, Anpassungen an Button-Beschriftungen und Überschriften.
1

Bearbeitungsmodus aktivieren

Klicke auf das Bearbeiten-Symbol (Stift-und-Auswahl-Cursor) in der Prompt-Werkzeugleiste. Das Prompt-Feld wechselt zu einer Bearbeitungskarte und beim Bewegen der Maus über die Live-Vorschau werden Textelemente hervorgehoben, die du auswählen kannst.
2

Text zur Bearbeitung auswählen

Klicke auf ein oder mehrere hervorgehobene Textelemente in der Vorschau. Jede Auswahl erscheint in der Bearbeitungskarte als beschriftetes Feld.
3

Text aktualisieren

Ändere den Text für jedes Feld in der Bearbeitungskarte.
4

Übernehmen

Klicke auf Änderungen übernehmen. Genie wendet alle Änderungen gleichzeitig an.
Für einfache Textersetzungen — Überschriften, Labels, Button-Beschriftungen — wendet Genie die Änderungen an, ohne eine KI-Generierung auszuführen. Die Aktualisierung dauert Sekunden und verbraucht keine Credits. Wenn eine Bearbeitung Text betrifft, der aus einer Datenbank oder einer externen Quelle stammt, leitet Genie diesen Teil wie einen normalen Prompt durch die KI-Pipeline. Um den Bearbeitungsmodus zu verlassen, ohne Änderungen zu übernehmen, klicke auf Abbrechen oder drücke Escape.

​
Bilder und Videos zu deiner App hinzufügen

Du kannst ein Bild oder Video in dein Projekt einbinden, indem du es direkt in den Projekt-Chat ziehst. Ziehe eine Datei — ein Logo, ein Hero-Bild, ein Produktfoto oder ein Hintergrundvideo — in das Prompt-Feld und beschreibe, was Genie damit machen soll. Zum Beispiel:
  • „Verwende dieses Bild als Hero-Hintergrundbild”
  • „Füge dieses Logo zur Navigationsleiste hinzu”
  • „Verwende dieses Video als Hintergrund der Startseite”
Genie speichert die Datei im öffentlichen Ordner deines Projekts und referenziert sie im generierten Code. Du musst die Datei nicht separat hosten oder eine URL kopieren — der Asset wird automatisch mit deiner App ausgeliefert.
Wenn du ein Bild als Design-Referenz teilst, ohne Genie zu bitten, es einzubetten — zum Beispiel „Lass meine App so aussehen wie dieser Screenshot” — verwendet Genie es nur als Kontext und fügt die Datei nicht zu deinem Projekt hinzu. Sei explizit, wenn du es eingebettet haben möchtest: „Verwende dieses Bild als Hero-Hintergrund”.
Du kannst auch Bilder und Videos in großem Umfang über den Workspace-Chat hochladen. Öffne die Befehlspalette mit ⌘K (Mac) oder Ctrl+K (Windows), wähle Bilder & Videos hochladen, oder frag die Genie-Workspace-KI direkt. Eine Drag-and-Drop-Karte ermöglicht es dir, mehrere Dateien auf einmal in ein ausgewähltes Projekt zu veröffentlichen.

​
Projekt-URL

Jedes Projekt erhält eine eindeutige URL, mit der du es direkt öffnen kannst. Du findest diese URL in den Einstellungen unter dem Tab Allgemein oder kopierst sie einfach aus der Adressleiste deines Browsers, wenn du die Live-App ansiehst. Wenn dein Projekt öffentlich ist, funktioniert diese URL für jeden — kein Login erforderlich. In bezahlten Tarifen kannst du auch eine eigene Domain verbinden, sodass deine App unter einer Adresse läuft, die dir gehört. Siehe App veröffentlichen und teilen für Details.

​
Ein Projekt remixen

Remix ist vorübergehend nicht verfügbar, während wir die Funktion überarbeiten. Der Remix-Button, die Option „Remix ab hier” und der Schalter Remixable in den Projekteinstellungen sind bis dahin ausgeblendet. Keine Remix-Einstellungen oder -Historie gehen dabei verloren.
Wenn du dir ein öffentliches Projekt ansiehst, das die Eigentümerin als remixbar markiert hat, siehst du in der Projektansicht einen Remix-Button. Ein Klick darauf erstellt eine Kopie dieses Projekts in deinem eigenen Konto — inklusive des gesamten generierten Codes — sodass du mit eigenen Prompts darauf aufbauen kannst. Wenn du beim Klicken auf Remix nicht angemeldet bist, leitet Genie dich zuerst zur Login-Seite weiter und schließt den Remix dann nach der Authentifizierung ab.
Um anderen das Remixen deines eigenen Projekts zu erlauben, aktiviere den Remixable-Schalter unter Einstellungen > Allgemein. Siehe Projekteinstellungen für Details.

​
Zu einer früheren Version zurückkehren

Jede Änderung, die Genie ausliefert, wird als Version gespeichert, zu der du zurückkehren kannst. Wenn eine kürzliche Aktualisierung nicht so ausgefallen ist, wie du wolltest, kannst du deine Live-App auf genau den Stand einer früheren Version zurücksetzen.
1

Version finden

Scrolle in deinem Chat-Verlauf zurück zu der Nachricht, deren Ergebnis du wiederherstellen möchtest.
2

Zurücksetzen

Klicke auf Auf diesen Stand zurücksetzen in der Karte dieser Nachricht. Ein Bestätigungsdialog erklärt, dass dies den aktuellen Live-Code deiner App durch die ausgewählte Version ersetzt.
3

Bereitstellung beobachten

Genie stellt den Code wieder her und veröffentlicht deine App neu. Eine Statusanzeige verfolgt den Fortschritt, bis deine Live-App die wiederhergestellte Version ausliefert.
Das Zurücksetzen löscht nichts — es fügt einen neuen Eintrag zu deinem Chat-Verlauf hinzu, sodass du später jederzeit wieder nach vorne wechseln kannst, indem du auf eine neuere Version zurücksetzt. Der Button ist bei deiner neuesten Version deaktiviert, sobald sie bereits live ist, da es dann nichts wiederherzustellen gäbe.
Das Zurücksetzen ist nicht verfügbar, solange dein Projekt auf Genie Cloud läuft. Eine frühere Version wiederherzustellen würde nur den Frontend-Code deiner App zurücksetzen, nicht die Datenbank und Edge Functions, zu denen sich dein Live-Cloud-Backend inzwischen weiterentwickelt hat — deshalb bleibt der Button Auf diesen Stand zurücksetzen mit einem erklärenden Tooltip deaktiviert, solange Genie Cloud aktiv ist.

​
KI-Assistenten im Browser

Wenn du einen Browser mit eingebautem KI-Assistenten nutzt — etwa Gemini in Chrome oder Copilot in Edge —, kann dieser Assistent direkt mit deinem geöffneten Projekt arbeiten. Er kann in deinem Namen einen Prompt an Genie senden und prüfen, ob Genie noch beschäftigt ist, ohne dass du selbst in den Chat tippen musst.
Das funktioniert automatisch in Browsern, die den entstehenden WebMCP-Standard unterstützen. In allen anderen Browsern verhält sich die Projektseite genau wie gewohnt.

​
Nächste Schritte

Projekteinstellungen

Benenne dein Projekt um, füge eine Beschreibung hinzu und steuere, wer es sehen oder remixen darf.

Veröffentlichen und teilen

Mache deine App öffentlich, hole dir einen teilbaren Link oder verbinde eine eigene Domain.

Secrets speichern

Füge API-Schlüssel und Umgebungsvariablen hinzu, die deine App zum Laufen braucht.

Genie Cloud

Verbinde eine Datenbank, Authentifizierung und Dateispeicher mit deinem Projekt.