Mocha AI App Builder Tutorial: Vom Prompt zur veröffentlichten App
Ein Schritt-für-Schritt-Walkthrough für Mocha AI — ersten Prompt schreiben, Google-Anmeldung und Stripe hinzufügen, auf einer mocha.app-Subdomain veröffentlichen und den Code exportieren. Dazu die ganze Geschichte des Shutdowns im August 2026, geprüft gegen Mochas eigene Doku.
Kurz zusammengefasst
- Mocha (getmocha.com) war ein KI-Fullstack-App-Builder: Man beschrieb eine App in einfachen Worten, er schrieb eine echte React+TypeScript-App mit Datenbank, Auth und Hosting und veröffentlichte sie mit einem Klick auf einer mocha.app-Subdomain.
- Der Workflow: Prompt → KI-Plan prüfen → im Live-Preview testen → per Chat iterieren. Der Discuss-Modus plant, ohne Code anzufassen; Direct Edit ändert Text ohne Credits zu verbrauchen.
- Der Code gehörte dir: Hinter dem App-Namen im Header saß ein Download-Button, der Stack war portabel (React, Hono, SQLite), und die Datenbank ließ sich als CSV exportieren.
- Mocha hat am 1. August 2026 den Betrieb eingestellt. Dieser Walkthrough dokumentiert genau, wie der Builder funktionierte; die FAQ erklärt, was aus Apps, Abrechnung und Exporten wurde.
Build A Full App In 15 Minutes + Stripe Monetization (Mocha AI Guide)
Kanal:Wanderloots28:57
Mocha AI App Builder 101: Everything You Need To Build Your App
Kanal:Mocha (official channel)13:57
Mocha documentation (getting started, billing, limits, hosting)
Doku:docs.getmocha.com
Mocha is shutting down on August 1 (announced May 15, 2026)
Ankündigung:getmocha.com/blog
Fakten wurden im September 2026 mit Mochas offizieller Dokumentation und der Shutdown-Ankündigung abgeglichen. Preisangaben stammen von der im Video gezeigten Preisseite (Dezember 2025) und aus Mochas Doku.
Screenshots stammen aus dem obigen Video und werden mit Quellenangabe sowie Deep-Link zum genauen Zeitpunkt jedes Schritts verwendet.
Mocha AI verwenden: vom Prompt zur veröffentlichten App, Schritt für Schritt
Teil 1 · Von der Idee zum ersten Build
- 1
Konto anlegen und Builder öffnen
Registriere dich kostenlos auf getmocha.com und klicke im Dashboard auf "Create new app". Jedes Projekt beginnt in der Box "What do you want to build?": Idee eintippen, Referenz-Screenshots anhängen und die App Privat lassen, bis du bereit für Besucher bist. Inspiration, Templates und Prompting 101 liegen unter der Box, falls du einen Einstieg brauchst.
Die Box "What do you want to build?" — der Startpunkt jeder Mocha-AppAnsehen bei 3:06 - 2
Schreibe ein Briefing, keinen Einzeiler
Nenne Features und Look. Der Demo-Prompt verlangte einen E-Commerce- und Membership-Shop mit Produktgrid, Kategorien, Filtern, Warenkorb, Stripe-Anbindung, E-Mail/Passwort plus Google-Login und einem Admin-Login — und bat Mocha, mit den Kern-Features zu starten und den Rest aufzulisten. Konkret schlägt vage: "Füge im Header einen blauen Contact-Us-Button hinzu" wirkt besser als "Mach es hübscher".
Das Demo-Briefing: ein E-Commerce-Membership-Shop mit Stripe, Google-Login und Admin-RolleAnsehen bei 3:15 - 3
Mocha bauen lassen, dann im Preview testen
Absenden — Mocha plant zuerst und schreibt dann Code. Der erste Build des Demo-Shops dauerte rund 3 Minuten 24 Sekunden und 19 Credits und endete mit einer "13 changes made"-Zusammenfassung zum Review. Das Preview in der Mitte ist eine echte, interaktive App: Produkte filtern, Dark Mode umschalten, in den Warenkorb legen, zwischen Desktop und Mobil wechseln und per Google einloggen, um die eingebaute Auth zu testen.
Der generierte Storefront mit Kategorie-Filtern, Produktgrid und Dark ModeAnsehen bei 9:54
Teil 2 · Unter die Haube: Code, Daten und Fixes
- 4
Den generierten Code ansehen
Der Code-Tab zeigt das komplette React-+-TypeScript-Projekt, das Mocha geschrieben hat. Du kannst Dateien und Ordner hinzufügen und Code direkt bearbeiten; einige Plattform-Dateien bleiben gesperrt, und während die AI baut, ist alles nur lesbar. Hier kann ein technischer Nutzer — oder ein technischer Partner — übernehmen.
Der Code-Tab mit dem kompletten Projekt — Plattform-Dateien bleiben beim Build gesperrtAnsehen bei 5:12 - 5
Die Entwicklungs-Datenbank ansehen
Der Data-Tab listet deine Tabellen — users, products, cart_items, memberships — vorgefüllt mit Mock-Daten für die Entwicklung. Produktionsdaten bleiben bis zur Veröffentlichung getrennt und leer; Experimente hier berühren nie echte Nutzer. Mocha bearbeitet Produktionsdaten nicht direkt — Produkte pflegst du über ein Admin-Panel in der App.
Der Data-Tab: Entwicklungstabellen, vorgefüllt mit Mock-ProduktenAnsehen bei 10:38 - 6
Fehler mit Fix with AI beheben
Wenn ein Preview fehlschlägt, zeigt Mocha den Fehler und bietet Quick restart und "Fix with AI" an. In der Demo reparierte ein Klick einen TypeScript-Absturz (jeder Fix kostet 1-3 Credits). Bei hartnäckigen Bugs: Discuss-Modus einschalten, den Fehler mit der AI durchgehen und sie den Fix bauen lassen.
Preview fehlgeschlagen? Fix with AI löste die meisten Demo-Fehler mit einem KlickAnsehen bei 7:36 - 7
Google-Anmeldung einschalten
Mocha-Apps bringen Google Sign In von Haus aus mit. Öffne in den Settings Google Sign In, füge deine Google-OAuth-Client-ID und dein Secret ein und trage die im Panel gezeigte Mocha-Redirect-URI in deine Google Cloud Console ein. Eigenes Branding für die Login-Seite ist eine separate Einstellung — beim ersten Durchlauf überspringen.
Google Sign In-Einstellungen: OAuth-Client und Mocha-Redirect-URI eintragenAnsehen bei 6:27 - 8
Vor dem Build im Discuss-Modus planen
Schalte den Composer auf Discuss, und die AI antwortet, ohne Code anzufassen. Frag "what are our next steps?" — sie sichtet deine App und schlägt Prioritäten vor; die Demo nutzte das, um Stripe-Checkout, Bestellhistorie und dann Memberships zu ordnen. Wenn der Plan passt, zurück in den Build-Modus und "build it" sagen.
Der Discuss-Modus beantwortet "Was sind die nächsten Schritte?", ohne Code zu ändernAnsehen bei 12:21
Teil 3 · Zahlungen, Veröffentlichung und Kosten
- 9
Stripe über den geführten Secret-Flow anbinden
Bitte um Stripe-Zahlungen, und Mocha fügt ein STRIPE_SECRET_KEY-Secret ins Projekt ein — mit einem Walkthrough-Button, der jeden Klick im Stripe-Dashboard auflistet, inklusive Test- vs. Live-Keys. Den sk_test-Key einfügen, absenden, und der Checkout steht. Secrets liegen als Umgebungsvariablen vor und bleiben nach der Veröffentlichung vor App-Nutzern verborgen.
Der STRIPE_SECRET_KEY-Dialog mit dem integrierten Stripe-WalkthroughAnsehen bei 14:23 - 10
Auf deiner mocha.app-Subdomain veröffentlichen
Der Publish-Button öffnet einen Dialog mit URL, Status-Dropdown und Sichtbarkeit. Lass den Status beim Testen auf Unpublished, stelle die Sichtbarkeit auf Private und klicke Publish app — in der Demo dauerte das Redeploy etwa 15 Sekunden. Stripe-Testzahlungen funktionieren nur auf der veröffentlichten URL, weil die Sandbox im Editor redirect-basierte Checkouts blockiert.
Publish app: mocha.app-Subdomain wählen und beim Testen Unpublished bleibenAnsehen bei 17:30 - 11
Einen Test-Checkout in der Live-App ausführen
Produkte über das Admin-Panel anlegen, auf der veröffentlichten URL zur Kasse gehen und mit Stripes Testkarte 4242 4242 4242 4242 bezahlen. Die Demo sah "Payment Successful" und die Transaktion im Stripe-Dashboard. Wenn alles läuft, den Status auf Published stellen und den Link teilen.
Payment Successful: ein Test-Checkout über 699,98 $ auf der veröffentlichten URLAnsehen bei 19:51 - 12
Kosten kennen, bevor du dich festlegst
Der Gratis-Tarif startet mit 20 Credits laut Mochas Doku. Auf der im Walkthrough gezeigten Preisseite (Dezember 2025) kostete Bronze 20 $/Monat für 1.500 Credits, Silver 50 $ für 4.500 und Gold 200 $ für 25.000. Credits werden nur abgezogen, wenn eine KI-Operation erfolgreich ist — Veröffentlichen, Direct Edit und Wiederherstellungen sind immer gratis.
Die Preisseite von Dezember 2025: Bronze-, Silver- und Gold-PläneAnsehen bei 27:15
Die Export-Wahrheit: Der Code gehörte dir — und was jetzt passiert
"Komm ich an meinen Code?" war immer die Entscheidungsfrage bei Mocha, und die ehrliche Antwort hat zwei Hälften: großzügiger Export, solange die Plattform lebte, und ein hastiges Fluchtfenster, als sie starb. Die Chronik mit Daten.
- 1Code herunterladen (zu Mochas Lebzeiten): Auf den App-Namen im Header klicken, und ein Download-Button erscheint. Mochas eigene FAQ sagte, dass alles, was du mit Mocha baust, dir gehört, und empfahl den Export zu Cursor, Windsurf oder jeder IDE. Der Stack war portabel: TypeScript, React, Hono für APIs und SQLite.
- 2Die Grenzen: keine GitHub-Sync und keine Veröffentlichung auf Vercel, Netlify oder andere externe Hosts — Mocha deployte nur auf die eigene Cloudflare-Infrastruktur. Code lesen war immer kostenlos, selbst mit null Credits.
- 3Datenbank: Man konnte Mocha bitten, CSV-Exportfunktionen direkt in die App einzubauen, und der Data-Tab zeigte Entwicklungs- und Produktionsdaten.
- 4Export-Tool beim Shutdown: Die Ankündigung vom 15. Mai 2026 lieferte ein Tool unter Settings → Export für Code und Daten — mit dem Hinweis, dass der Betrieb außerhalb von Mocha "Entwicklungsaufwand" erfordern wird.
- 5Migration: Der empfohlene Weg war eine Ein-Klick-Migration zu Anything, einem ähnlich integrierten Builder, der auch mobile Apps kann, plus 20 $ Credits für Anpassungen danach. Der Builder stoppte am 1. August 2026; Migrations- und Export-Links sollten noch 30 Tage danach erreichbar bleiben.
Die Lehre reicht über Mocha hinaus: Bevor du ein Business auf einen KI-App-Builder stellst, prüfe, wo der Code lebt, ob der Stack woanders läuft und wie ein Shutdown-Exit aussieht. Die verlinkten Guides unten — von Lovable bis DeepSeek in Cursor — sind gute Anlaufstellen beim Umzug.
Mocha-Preise und Credits, erklärt
Mocha war Freemium. Credits bezahlten die KI-Arbeit, Tarife bezahlten Credits plus Limits. Die Zahlen stammen aus Mochas Doku (geprüft September 2026) und der im Video festgehaltenen Preisseite (Dezember 2025).
- 1Gratis-Tarif: 20 Starter-Credits, ein "Made in Mocha"-Wasserzeichen auf veröffentlichten Apps (auf Bezahl-Tarifen entfernbar) und Raum für kleine Projekte. Die komplette Demo-App — Auth, Stripe, Memberships, Admin — verbrauchte insgesamt etwa 100 Credits.
- 2Bezahl-Tarife (Preisseite Dezember 2025): Bronze 20 $/Monat mit 1.500 Credits, Silver 50 $/Monat mit 4.500 (am beliebtesten), Gold 200 $/Monat mit 25.000. Die Doku bestätigt dieselben Kontingente — monatliche Auffüllung, ungenutzte Subscription-Credits rollen bis zum Doppelten des Monatskontingents über.
- 3Wofür Credits draufgingen: einfache Text- oder Stiländerungen 5-15 Credits, neue Komponente 15-40, neue Seite 30-60, komplexe Features mit Datenbank 50-100+. Fehlgeschlagene KI-Operationen kosteten nichts — abgerechnet wurde nur bei erfolgreichen Änderungen.
- 4Immer kostenlos: Projekt ansehen, Textänderungen im Direct-Edit-Modus, Datenbank einsehen, App veröffentlichen und Versionen wiederherstellen. App-Größenlimits galten bei Bronze; ab Silver war es für normale Apps faktisch unbegrenzt.
Abrechnung nach dem Shutdown: Abos liefen bis zum 1. August 2026 zum bisherigen Preis weiter, wurden an dem Tag automatisch gekündigt, und danach wurde niemand mehr belastet. Die Ankündigung nannte Support-Kontakte für Abrechnungsfragen — das 30-Tage-Fenster nach dem Shutdown ist inzwischen vorbei.