Tutorial de Mocha AI, el creador de apps: del prompt a la app publicada
Un recorrido paso a paso con Mocha AI: escribe tu primer prompt, añade inicio de sesión con Google y pagos con Stripe, publica en un subdominio mocha.app y exporta tu código. Y toda la historia del cierre de agosto de 2026, verificada con la documentación oficial de Mocha.
Lo esencial
- Mocha (getmocha.com) era un creador de apps full-stack con IA: describías una aplicación en lenguaje natural, escribía una app real en React + TypeScript con base de datos, autenticación y hosting, y la publicaba en un clic en un subdominio mocha.app.
- El flujo: prompt → revisar el plan de la IA → probar en la vista previa en vivo → iterar por chat. El modo Discuss planifica sin tocar el código; Direct Edit cambia textos sin gastar créditos.
- El código era tuyo: un botón de descarga se escondía tras el nombre de la app en la cabecera, el stack era portable (React, Hono, SQLite) y la base de datos se exportaba a CSV.
- Mocha cerró el 1 de agosto de 2026. Este recorrido documenta exactamente cómo funcionaba el creador, y la FAQ cubre qué pasó con las apps, la facturación y las exportaciones.
Build A Full App In 15 Minutes + Stripe Monetization (Mocha AI Guide)
Canal:Wanderloots28:57
Mocha AI App Builder 101: Everything You Need To Build Your App
Canal: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)
Anuncio:getmocha.com/blog
Los datos se contrastaron en septiembre de 2026 con la documentación oficial de Mocha y el anuncio de cierre. Las cifras de precios vienen de la página de precios mostrada en el vídeo (diciembre de 2025) y de la documentación de Mocha.
Las capturas provienen del vídeo anterior, usadas con atribución y enlaces profundos al momento exacto de cada paso.
Cómo usar Mocha AI: del prompt a la app publicada, paso a paso
Parte 1 · De la idea a la primera build
- 1
Crea tu cuenta y abre el creador
Regístrate gratis en getmocha.com y pulsa "Create new app" en el panel. Todo proyecto empieza en el cuadro "What do you want to build?": escribe tu idea, adjunta capturas de referencia y mantén la app en Private hasta que estés listo para visitantes. Debajo tienes Inspiration, Templates y Prompting 101 por si necesitas un punto de partida.
El cuadro "What do you want to build?" donde nace toda app de MochaVer en 3:06 - 2
Escribe un briefing, no una línea
Nombra funciones y estética. El prompt de la demo pedía una tienda e-commerce con membresías: rejilla de productos, categorías, filtros, carrito, integración con Stripe, acceso por correo/contraseña y con Google, y un login de administrador — y le pedía a Mocha empezar por las funciones núcleo y listar lo siguiente. Lo concreto gana a lo vago: "añade un botón azul de Contact Us en la cabecera" rinde más que "hazlo más bonito".
El briefing de la demo: tienda e-commerce con Stripe, Google y rol de administradorVer en 3:15 - 3
Deja que Mocha construya y prueba en la vista previa
Envía: Mocha primero planifica y luego escribe código — la primera build de la tienda de la demo tardó unos 3 minutos 24 segundos y 19 créditos, y terminó con un resumen "13 changes made" para revisar. La vista previa central es una app real e interactiva: filtra productos, cambia al modo oscuro, añade al carrito, alterna escritorio/móvil e inicia sesión con Google para probar la autenticación integrada.
El escaparate generado: filtros por categoría, rejilla de productos y modo oscuroVer en 9:54
Parte 2 · Bajo el capó: código, datos y correcciones
- 4
Explora el código generado
La pestaña Code muestra el proyecto completo en React + TypeScript que escribió Mocha. Puedes añadir archivos y carpetas y editar el código directamente; algunos archivos de plataforma quedan bloqueados y, mientras la IA construye, todo es de solo lectura. Aquí es donde un usuario técnico — o un socio técnico — puede tomar el mando.
La pestaña Code con el proyecto completo — los archivos de plataforma quedan bloqueados durante la buildVer en 5:12 - 5
Inspecciona la base de datos de desarrollo
La pestaña Data lista tus tablas — users, products, cart_items, memberships — precargadas con datos ficticios de desarrollo. Los datos de producción quedan aparte y vacíos hasta publicar: experimentar aquí jamás toca usuarios reales. Mocha no edita datos de producción; añade productos desde un panel de administración dentro de la app.
La pestaña Data: tablas de desarrollo precargadas con productos de pruebaVer en 10:38 - 6
Recupérate de los errores con Fix with AI
Cuando una vista previa falla, Mocha muestra el error y ofrece Quick restart y "Fix with AI". En la demo, un clic arregló un fallo de TypeScript (cada corrección cuesta 1-3 créditos). Con bugs rebeldes, activa el modo Discuss, repasa el error con la IA y deja que construya la solución.
¿Vista previa fallida? Fix with AI resolvió la mayoría de errores de la demo en un clicVer en 7:36 - 7
Activa el inicio de sesión con Google
Las apps de Mocha traen el acceso con Google listo. En Settings, abre Google Sign In, pega tu Google OAuth Client ID y su secreto, y añade la URI de redirección de Mocha mostrada en el panel a tu Google Cloud Console. La personalización de la página de acceso es un ajuste aparte — déjala para después.
Ajustes de Google Sign In: pega tu cliente OAuth y la URI de redirección de MochaVer en 6:27 - 8
Planifica en modo Discuss antes de construir
Cambia el cuadro de entrada a Discuss y la IA responde preguntas sin tocar el código. Pregunta "what are our next steps?" y repasará tu app y propondrá prioridades — la demo lo usó para ordenar el pago con Stripe, el historial de pedidos y luego las membresías. Cuando el plan te convenza, vuelve al modo build y di "build it".
El modo Discuss responde "cuáles son los siguientes pasos" sin cambiar códigoVer en 12:21
Parte 3 · Pagos, publicación y costes
- 9
Conecta Stripe con el flujo guiado de secretos
Pide pagos con Stripe y Mocha añade un secreto STRIPE_SECRET_KEY a tu proyecto, con un botón Walkthrough que detalla cada clic dentro del panel de Stripe — incluida la diferencia entre claves de prueba y reales. Pega la clave sk_test, envía, y el checkout queda conectado. Los secretos se guardan como variables de entorno y quedan ocultos para los usuarios tras publicar.
El diálogo STRIPE_SECRET_KEY con el walkthrough de Stripe integradoVer en 14:23 - 10
Publica en tu subdominio mocha.app
El botón Publish abre un diálogo con tu URL, un desplegable de Status y la visibilidad. Mantén Status en Unpublished mientras pruebas, pon la visibilidad en Private y pulsa Publish app — la demo redesplegó en unos 15 segundos. Los pagos de prueba con Stripe solo funcionan en la URL publicada: la sandbox del editor bloquea los checkouts por redirección.
Publish app: elige tu subdominio mocha.app y quédate en Unpublished mientras pruebasVer en 17:30 - 11
Ejecuta un pago de prueba en la app en vivo
Añade productos desde tu panel de administración, pasa al pago en la URL publicada y paga con la tarjeta de prueba de Stripe 4242 4242 4242 4242. La demo vio "Payment Successful" y la transacción apareció en el panel de Stripe. Cuando todo funcione, cambia Status a Published y comparte el enlace.
Payment Successful: un pago de prueba de 699,98 $ en la URL publicadaVer en 19:51 - 12
Entiende el coste antes de comprometerte
El plan gratuito arranca con 20 créditos según la documentación de Mocha. En la página de precios mostrada en el recorrido (diciembre de 2025), Bronze costaba 20 $/mes con 1.500 créditos, Silver 50 $ con 4.500 y Gold 200 $ con 25.000. Los créditos solo se descuentan cuando una operación de la IA tiene éxito — publicar, Direct Edit y restaurar son siempre gratis.
La página de precios tal y como se mostraba en diciembre de 2025: planes Bronze, Silver y GoldVer en 27:15
La verdad sobre exportar: el código era tuyo — y qué pasa ahora
"¿Puedo llevarme mi código?" era siempre LA pregunta decisiva con Mocha, y la respuesta honesta tiene dos mitades: un export generoso mientras la plataforma vivió y una ventana de escape precipitada cuando murió. Aquí va el registro, con fechas.
- 1Descargar el código (con Mocha en marcha): pulsa el nombre de la app en la cabecera y aparece un botón de descarga de código. La propia FAQ de Mocha decía que todo lo que construyes te pertenece y sugería exportar a Cursor, Windsurf o cualquier IDE. El stack era portable: TypeScript, React, Hono para APIs y SQLite.
- 2Los límites: sin sincronización con GitHub ni publicación en Vercel, Netlify u otro hosting externo — Mocha solo desplegaba en su propia infraestructura de Cloudflare. Eso sí, leer el código siempre fue gratis, incluso sin créditos.
- 3Base de datos: podías pedirle a Mocha que construyera exportaciones CSV dentro de la propia app, y la pestaña Data exponía los datos de desarrollo y producción.
- 4La herramienta de exportación del cierre: el anuncio del 15 de mayo de 2026 incluyó una herramienta en Settings → Export para descargar código y datos, advirtiendo que ejecutar la app fuera de Mocha "requeriría esfuerzo de ingeniería".
- 5La migración: el camino recomendado era una migración en un clic a Anything, un creador integrado similar que también ofrece apps móviles, con 20 $ en créditos para ajustes posteriores. El creador se apagó el 1 de agosto de 2026; los enlaces de migración y exportación debían seguir activos 30 días más.
La lección va más allá de Mocha: antes de construir un negocio sobre cualquier creador de apps con IA, comprueba dónde vive el código, si el stack funciona en otro sitio y cómo sería la salida si cierra. Las guías enlazadas abajo — de Lovable a DeepSeek en Cursor — son buenas paradas si estás migrando.
Precios y créditos de Mocha, explicados
Mocha era freemium. Los créditos pagaban el trabajo de la IA y los planes pagaban créditos más límites. Las cifras vienen de la documentación de Mocha (comprobada en septiembre de 2026) y de la página de precios capturada en el vídeo (diciembre de 2025).
- 1Plan gratuito: 20 créditos iniciales, marca de agua "Made in Mocha" en las apps publicadas (retirable en planes de pago) y espacio para proyectos pequeños. La app completa de la demo — auth, Stripe, membresías, admin — gastó unos 100 créditos en total.
- 2Planes de pago (página de precios de diciembre de 2025): Bronze 20 $/mes con 1.500 créditos, Silver 50 $/mes con 4.500 (el más popular), Gold 200 $/mes con 25.000. La documentación confirma los mismos volúmenes, recargados cada mes, con los créditos de suscripción no usados acumulables hasta 2× la asignación mensual.
- 3En qué se iban los créditos: cambios simples de texto o estilo 5-15 créditos, un componente nuevo 15-40, una página nueva 30-60, una función compleja con base de datos 50-100+. Las operaciones de IA fallidas no costaban nada — solo se cobraban los cambios exitosos.
- 4Siempre gratis: explorar tu proyecto, cambiar textos en Direct Edit Mode, ver la base de datos, publicar tu app y restaurar versiones. Los límites de tamaño de app aplicaban en Bronze; desde Silver eran efectivamente ilimitados para apps normales.
Facturación tras el cierre: las suscripciones siguieron a su precio hasta el 1 de agosto de 2026, se cancelaron automáticamente ese día y nadie recibió más cargos. El anuncio listaba contactos de soporte para dudas de facturación — aunque la ventana de 30 días tras el cierre ya ha pasado.