Tutoriel Mocha AI, le créateur d'applications : du prompt à l'app publiée
Un pas-à-pas complet de Mocha AI — écrire votre premier prompt, ajouter la connexion Google et Stripe, publier sur un sous-domaine mocha.app et exporter votre code. Et toute l'histoire de la fermeture d'août 2026, vérifiée à partir de la documentation officielle de Mocha.
L'essentiel
- Mocha (getmocha.com) était un créateur d'applications full-stack par IA : vous décriviez une appli en langage naturel, il écrivait une vraie application React + TypeScript avec base de données, authentification et hébergement, et la publiait en un clic sur un sous-domaine mocha.app.
- Le flux : prompt → revue du plan de l'IA → test dans l'aperçu en direct → itérations par chat. Le mode Discuss planifie sans toucher au code ; Direct Edit modifie le texte sans consommer de crédits.
- Le code vous appartenait : un bouton de téléchargement se cachait derrière le nom de l'app dans l'en-tête, la pile était portable (React, Hono, SQLite) et la base de données s'exportait en CSV.
- Mocha a fermé le 1er août 2026. Ce pas-à-pas documente précisément le fonctionnement de l'outil, et la FAQ couvre le devenir des applications, de la facturation et des exports.
Build A Full App In 15 Minutes + Stripe Monetization (Mocha AI Guide)
Chaîne:Wanderloots28:57
Mocha AI App Builder 101: Everything You Need To Build Your App
Chaîne:Mocha (official channel)13:57
Mocha documentation (getting started, billing, limits, hosting)
Docs:docs.getmocha.com
Mocha is shutting down on August 1 (announced May 15, 2026)
Annonce:getmocha.com/blog
Les faits ont été recoupés en septembre 2026 avec la documentation officielle de Mocha et l'annonce de fermeture. Les tarifs proviennent de la page de prix visible dans la vidéo (décembre 2025) et de la documentation Mocha.
Les captures d'écran proviennent de la vidéo ci-dessus, utilisées avec attribution et un lien profond vers le moment exact de chaque étape.
Comment utiliser Mocha AI : du prompt à l'app publiée, étape par étape
Partie 1 · De l'idée à la première version
- 1
Créez votre compte et ouvrez le créateur
Inscrivez-vous gratuitement sur getmocha.com et cliquez sur "Create new app" depuis le tableau de bord. Tout projet démarre dans la zone "What do you want to build?" : décrivez votre idée, joignez des captures de référence et laissez l'app en Private jusqu'à ce que vous soyez prêt à recevoir des visiteurs. Inspiration, Templates et Prompting 101 se trouvent sous la zone si vous cherchez un point de départ.
La zone "What do you want to build?" où naît chaque application MochaVoir à 3:06 - 2
Rédigez un brief, pas une phrase
Nommez les fonctionnalités et le style. Le prompt de démo demandait une boutique e-commerce avec abonnements : grille produits, catégories, filtres, panier, intégration Stripe, connexion e-mail/mot de passe et Google, plus un login admin — et demandait à Mocha de commencer par le cœur des fonctions et de lister la suite. La précision paie : "ajoute un bouton Contact Us bleu dans l'en-tête" vaut mieux que "rends-le plus joli".
Le brief de démo : une boutique e-commerce avec Stripe, Google et un rôle adminVoir à 3:15 - 3
Laissez Mocha construire, puis testez dans l'aperçu
Validez : Mocha planifie d'abord, puis écrit le code — la première version de la boutique de démo a pris environ 3 min 24 s et 19 crédits, et s'est conclue par un récapitulatif "13 changes made" à valider. L'aperçu central est une vraie application interactive : filtrez les produits, basculez en mode sombre, ajoutez au panier, passez du bureau au mobile, et connectez-vous avec Google pour tester l'authentification intégrée.
La vitrine générée : filtres par catégorie, grille produits et mode sombreVoir à 9:54
Partie 2 · Sous le capot : code, données et corrections
- 4
Parcourez le code généré
L'onglet Code montre tout le projet React + TypeScript écrit par Mocha. Vous pouvez ajouter des fichiers et des dossiers et éditer le code directement ; quelques fichiers de plateforme restent verrouillés, et tout est en lecture seule pendant que l'IA construit. C'est ici qu'un utilisateur technique — ou un partenaire technique — peut prendre le relais.
L'onglet Code avec le projet complet — les fichiers de plateforme restent verrouillés pendant les buildsVoir à 5:12 - 5
Inspectez la base de données de développement
L'onglet Data liste vos tables — users, products, cart_items, memberships — préremplies de données factices pour le développement. Les données de production restent séparées et vides jusqu'à la publication : vos essais ne touchent jamais de vrais utilisateurs. Mocha ne modifie pas les données de production ; ajoutez plutôt vos produits via un panneau d'administration dans l'app.
L'onglet Data : les tables de développement préremplies de produits fictifsVoir à 10:38 - 6
Corrigez les erreurs avec Fix with AI
Quand un aperçu échoue, Mocha affiche l'erreur et propose Quick restart et "Fix with AI". Dans la démo, un clic a réglé un crash TypeScript (chaque correction coûte 1 à 3 crédits). Pour les bugs tenaces, passez en mode Discuss, décrivez l'erreur avec l'IA, puis laissez-le corriger.
Aperçu en échec ? Fix with AI a résolu la plupart des erreurs de la démo en un clicVoir à 7:36 - 7
Activez la connexion avec Google
Les apps Mocha embarquent la connexion Google. Dans Settings, ouvrez Google Sign In, collez votre Google OAuth Client ID et votre secret, et ajoutez l'URI de redirection Mocha affichée dans le panneau à votre Google Cloud Console. La personnalisation de la page de connexion est un réglage séparé — laissez-la de côté au premier passage.
Réglages Google Sign In : collez votre client OAuth et l'URI de redirection MochaVoir à 6:27 - 8
Planifiez en mode Discuss avant de construire
Basculez la zone de saisie sur Discuss et l'IA répond aux questions sans toucher au code. Demandez "what are our next steps?" : elle passe en revue votre app et propose des priorités — la démo l'a utilisée pour ordonner le paiement Stripe, l'historique des commandes, puis les abonnements. Quand le plan vous plaît, revenez en mode build et dites "build it".
Le mode Discuss répond à "quelles sont les prochaines étapes" sans toucher au codeVoir à 12:21
Partie 3 · Paiements, publication et tarifs
- 9
Connectez Stripe via le flux guidé
Demandez des paiements Stripe et Mocha ajoute un secret STRIPE_SECRET_KEY à votre projet, avec un bouton Walkthrough qui détaille chaque clic dans le tableau de bord Stripe — y compris la différence entre clés de test et clés réelles. Collez la clé sk_test, validez, et le paiement est opérationnel. Les secrets sont stockés comme variables d'environnement et restent cachés aux utilisateurs après publication.
La boîte de dialogue STRIPE_SECRET_KEY avec le parcours Stripe intégréVoir à 14:23 - 10
Publiez sur votre sous-domaine mocha.app
Le bouton Publish ouvre une boîte de dialogue avec votre URL, un menu Status et la visibilité. Gardez Status sur Unpublished pendant les tests, réglez la visibilité sur Private et cliquez sur Publish app — la démo a redéployé en 15 secondes environ. Les paiements Stripe de test ne fonctionnent que sur l'URL publiée : la sandbox intégrée bloque les paiements par redirection.
Publish app : choisissez votre sous-domaine mocha.app et restez Unpublished pendant les testsVoir à 17:30 - 11
Effectuez un paiement test sur l'app en ligne
Ajoutez des produits via votre panneau d'administration, passez au paiement sur l'URL publiée et payez avec la carte de test Stripe 4242 4242 4242 4242. La démo a vu "Payment Successful" et la transaction apparaître dans le tableau de bord Stripe. Quand tout fonctionne, passez Status sur Published et partagez le lien.
Payment Successful : un paiement test de 699,98 $ sur l'URL publiéeVoir à 19:51 - 12
Comprendre le coût avant de vous lancer
L'offre gratuite démarre avec 20 crédits selon la documentation Mocha. Sur la page de prix montrée dans la vidéo (décembre 2025), Bronze coûtait 20 $/mois pour 1 500 crédits, Silver 50 $ pour 4 500 et Gold 200 $ pour 25 000. Les crédits ne sont déduits que si une opération d'IA réussit — la publication, Direct Edit et les restaurations sont toujours gratuits.
La page de prix telle qu'affichée en décembre 2025 : les offres Bronze, Silver et GoldVoir à 27:15
La vérité sur l'export : le code était à vous — et maintenant ?
"Puis-je récupérer mon code ?" était toujours LA question décisive pour Mocha, et la réponse honnête tient en deux parties : un export généreux tant que la plateforme vivait, une fenêtre de sortie précipitée quand elle est morte. Voici la chronologie, avec les dates.
- 1Télécharger le code (pendant la vie de Mocha) : cliquez sur le nom de l'app dans l'en-tête et un bouton de téléchargement du code apparaît. La FAQ de Mocha disait que tout ce que vous construisez vous appartient et suggérait d'exporter vers Cursor, Windsurf ou n'importe quel IDE. La pile était portable : TypeScript, React, Hono pour les API et SQLite.
- 2Les limites : pas de synchronisation GitHub ni de publication vers Vercel, Netlify ou un hébergeur externe — Mocha ne déployait que sur sa propre infrastructure Cloudflare. Mais la lecture du code était toujours gratuite, même sans crédit.
- 3Base de données : vous pouviez demander à Mocha d'intégrer des exports CSV dans l'app elle-même, et l'onglet Data donnait accès aux données de développement et de production.
- 4L'outil d'export de fermeture : l'annonce du 15 mai 2026 a livré un outil dans Settings → Export pour télécharger code et données, en avertissant que faire tourner l'app hors de Mocha "exigerait un effort d'ingénierie".
- 5La migration : la voie recommandée était une migration en un clic vers Anything, un créateur intégré similaire qui propose aussi des apps mobiles, avec 20 $ de crédits pour les retouches. Le créateur s'est arrêté le 1er août 2026 ; les liens de migration et d'export devaient rester en ligne 30 jours après.
La leçon dépasse Mocha : avant de bâtir une activité sur un créateur d'apps par IA, vérifiez où vit le code, si la pile tourne ailleurs et à quoi ressemblerait une sortie de secours. Les guides ci-dessous — de Lovable à DeepSeek dans Cursor — sont de bonnes étapes si vous migrez.
Les tarifs et crédits Mocha, expliqués
Mocha était freemium. Les crédits payaient le travail de l'IA, les offres payaient les crédits et des limites. Les chiffres ci-dessous viennent de la documentation Mocha (vérifiée en septembre 2026) et de la page de prix capturée dans la vidéo (décembre 2025).
- 1Offre gratuite : 20 crédits de départ, un filigrane "Made in Mocha" sur les apps publiées (retirable sur les offres payantes) et de la place pour de petits projets. L'app complète de la démo — auth, Stripe, abonnements, admin — a consommé environ 100 crédits au total.
- 2Offres payantes (page de prix de décembre 2025) : Bronze 20 $/mois pour 1 500 crédits, Silver 50 $/mois pour 4 500 (la plus populaire), Gold 200 $/mois pour 25 000. La documentation confirme ces volumes, rechargeables chaque mois, avec report des crédits d'abonnement jusqu'à 2× l'allocation mensuelle.
- 3Ce que consommaient les crédits : retouches simples de texte ou de style 5-15 crédits, nouveau composant 15-40, nouvelle page 30-60, fonctionnalité complexe avec base de données 50-100+. Les opérations d'IA qui échouaient ne coûtaient rien — seules les modifications réussies étaient facturées.
- 4Toujours gratuit : parcourir le projet, les changements de texte en Direct Edit Mode, consulter la base, publier l'app et restaurer des versions. Les limites de taille d'app s'appliquaient sur Bronze ; à partir de Silver, c'était effectivement illimité pour des apps normales.
La facturation après la fermeture : les abonnements se sont poursuivis au tarif en vigueur jusqu'au 1er août 2026, résiliés automatiquement ce jour-là, sans prélèvement ensuite. L'annonce listait des contacts support pour les questions de facturation — mais la fenêtre de 30 jours après fermeture est désormais passée.