Vibe Coding mit ChatGPT: Canvas, Codex und Apps aus ChatGPT bauen

Du kannst auf drei Wegen mit ChatGPT Vibe Coding betreiben. Bitte im Chat um eine kleine App und sieh sie dir im Canvas an; gib Aufgaben an einer echten Codebasis an Codex, den Coding-Agent von OpenAI; oder verbinde einen KI-App-Builder wie Mythex, damit ChatGPT eine vollständige App mit Datenbank bauen, hosten und veröffentlichen kann. Der erste ist am schnellsten für ein Tool auf einer Seite, der zweite passt zu Entwicklern, und der dritte bringt dir eine Live-App mit Logins und Daten, ohne ChatGPT zu verlassen.

Hier steht, wie jeder funktioniert, ein Prompt für jeden und wo jeder endet. Wenn du den Hintergrund zum Begriff willst, lies Was ist Vibe Coding.

Option 1: ChatGPT-Chat und Canvas

Für ein schnelles Tool fragst du einfach. ChatGPT schreibt den Code, und im Canvas kann es einfache HTML- und React-Seiten anzeigen, sodass du herumklicken und Änderungen verlangen kannst.

Schreibe einen Trinkgeldrechner auf einer Seite mit Eingaben für Rechnungsbetrag, Trinkgeldprozentsatz (Buttons für 10, 15, 20 und ein freies Feld) und Personenzahl. Zeige das Trinkgeld und den Betrag pro Person, aktualisiert beim Tippen. Lass es auf dem Handy sauber aussehen.

Gut für: Rechner, einfache Spiele, Entwürfe für Landingpages und zum Lernen. Bitte „erkläre diese Datei, als wäre ich neu im Programmieren“, und du lernst schnell.

Wo es endet: Es gibt kein Backend. Nichts, was du eingibst, wird für andere Nutzer gespeichert, es gibt kein Login, und um es zu teilen, müsstest du den Code woanders hinkopieren und selbst hosten. Sobald du sagst „und speichere es, damit mein Team es sehen kann“, bist du aus dem Chat herausgewachsen.

Vibe Coding per Copy-Paste

Viele fangen damit an, ChatGPT um Code zu bitten und ihn in Dateien auf dem eigenen Rechner oder bei einem Hosting-Dienst einzufügen. Für kleine statische Seiten funktioniert das, aber es bricht schnell zusammen. Jede Änderung heißt, die richtige Datei zu finden, den richtigen Teil einzufügen und zu hoffen, dass nichts anderes von dem abhing, was du ersetzt hast. Wenn du merkst, dass du das mehr als ein paar Mal tust, wechsle zu einer der nächsten zwei Optionen.

Option 2: Codex für eine echte Codebasis

Codex ist der Agent von OpenAI für Softwarearbeit. Du gibst ihm eine Aufgabe in normaler Sprache, und er arbeitet an einem Repository: Er liest den Code, ändert Dateien übergreifend, führt Befehle und Tests aus und gibt dir das Ergebnis zur Prüfung. OpenAI bietet ihn in ChatGPT, als Kommandozeilen-Tool und als Editor-Erweiterung an; auf der Website von OpenAI steht, welche Pläne ihn enthalten und wie die aktuellen Limits sind.

Am besten passt ein Prompt im Aufgabenstil:

Füge in diesem Repo der Seite „Bestellungen“ einen CSV-Export-Button hinzu. Er soll die aktuell gefilterten Bestellungen mit den Spalten Datum, Kunde, Summe und Status exportieren. Schreibe einen Test für die Export-Funktion und führe die Test-Suite aus.

Gut für: Entwickler und technische Gründer mit einem bestehenden Projekt, die sich von einem Agent ganze Aufgaben abnehmen lassen wollen. Er arbeitet mit deinem Stack und deinen Konventionen.

Was du weiter selbst erledigst: wo die App läuft, die Datenbank, Secrets, Deployment und Domains. Codex ändert Code; er ist kein Host.

Codex und Mythex zusammen

Codex kann sich auch mit MCP-Servern verbinden, darunter dem von Mythex. Füge https://mcp.mythex.ai/mcp in Codex als benutzerdefinierten MCP-Server hinzu, bestätige den Zugriff bei Mythex, und Codex kann in dessen Cloud-Sandbox an einem Mythex-Projekt arbeiten, wobei Vorschau, Datenbank und Veröffentlichung von Mythex übernommen werden. Unser Beitrag zum Bauen von Mythex-Apps aus Claude, Cursor oder Codex führt dich durch.

Option 3: Eine vollständige App aus ChatGPT mit Mythex bauen

Wenn du in einer ChatGPT-Unterhaltung bleiben und am Ende eine echte, gehostete App haben willst, verbinde Mythex. Mythex funktioniert in ChatGPT als App: ChatGPT spricht über MCP mit den Tools von Mythex, dem offenen Protokoll, mit dem Assistenten anderswo gehostete Tools nutzen können (was MCP ist).

Sobald die Verbindung steht, kann ChatGPT ein Mythex-Projekt anlegen, den Code in einer privaten Cloud-Sandbox schreiben, eine Live-Vorschau starten, eine Datenbank und Dateispeicher hinzufügen und die App unter einer öffentlichen URL veröffentlichen. Die Ergebnisse kommen mit einem Link zurück, sodass du das Projekt in Mythex öffnen und der Vorschau zusehen kannst.

So verbindest du

1. Öffne in Mythex die Kontoeinstellungen und kopiere die MCP-Adresse.
2. Füge Mythex in ChatGPT in den Einstellungen für Apps oder Connectors mit dieser Adresse hinzu. Die Menüs von ChatGPT ändern sich von Zeit zu Zeit, folge also der Hilfeseite von OpenAI zum Hinzufügen einer App, falls die Namen abweichen.
3. Eine Mythex-Seite öffnet sich: Melde dich an und wähle Zugriff erlauben. Es gibt keinen Schlüssel zum Einfügen.
4. Starte eine Unterhaltung und nenne Mythex in deiner Anfrage.

Das Verbinden funktioniert mit jedem Mythex-Plan. Die Sandbox-Tools – Bauen, Vorschau, Veröffentlichen – brauchen Mythex Pro ($25 im Monat), und Sandbox-Zeit und Hosting kommen aus deinen Mythex-Credits. Deine ChatGPT-Nutzung bleibt in deinem OpenAI-Plan.

Ein erster Prompt zum Ausprobieren

Nutze Mythex, um mir einen Bewerbungs-Tracker zu bauen. Ich füge Bewerbungen mit Firma, Rolle, Link, Bewerbungsdatum, Status (beworben, Gespräch, Angebot, abgelehnt) und Notizen hinzu. Zeige ein Board nach Status, in dem ich Karten ziehen kann, und ein einfaches Diagramm der Bewerbungen pro Woche. Speichere alles in einer Datenbank und schütze es mit einem Login. Starte die Vorschau und gib mir den Link.

Dann eine Änderung pro Nachricht:

Füge im Mythex-Projekt jeder Bewerbung ein Erinnerungsdatum hinzu und hebe Karten hervor, deren Erinnerung heute fällig oder überfällig ist.

Veröffentliche es und schick mir die Live-URL.

Gut für: Leute, die schon in ChatGPT planen und denken und das Ergebnis live haben wollen, mit dauerhaft gespeicherten Daten, ohne Hosting zu lernen. Da es ein gewöhnliches Mythex-Projekt ist, kannst du jederzeit im Mythex-Chat weitermachen.

Welche Option zu deinem Vorhaben passt

Prompt-Gewohnheiten, die in ChatGPT funktionieren

• Nenne das Tool, wenn du es nutzen willst. „Nutze Mythex, um …“ macht klar, dass die Anfrage für dein Projekt ist und keine allgemeine Antwort.
• Eine Änderung pro Nachricht. Lange Änderungslisten erzeugen lange Listen von Nebenwirkungen.
• Bitte vor großen Schritten um einen Plan. „Liste vor jeder Änderung auf, was du ändern wirst, und warte auf mein OK.“
• Füge exakte Fehler ein. Der vollständige Fehlertext ist mehr wert als jede Beschreibung.
• Frag, was sich geändert hat. „Fasse deine letzten drei Änderungen in normalen Worten zusammen“ hält dich auf dem Laufenden, wenn du den Code nicht liest.

Mehr davon findest du in unserem Spickzettel mit Vibe-Coding-Prompts.

Bleib auf der sicheren Seite

• Füge nie echte Passwörter oder API-Schlüssel in eine ChatGPT-Unterhaltung ein. Wenn deine App einen Schlüssel braucht, speichere ihn in den Secrets des Projekts. Die Tools von Mythex melden nur die Namen von Secrets, nie die Werte.
• Prüfe vor dem Veröffentlichen, dass Nutzer die Daten anderer nicht sehen können und dass kein Schlüssel in Code gelandet ist, der im Browser läuft. Unser Guide Ist Vibe Coding sicher? listet die Prüfungen mit Prompts zum Einfügen auf.

Nutzt du auch Claude? Der passende Guide behandelt Vibe Coding mit Claude und Claude Code. Für einen Blick Modell für Modell siehe ChatGPT vs. Claude vs. Gemini zum Bauen von Apps.

Fragen