Tutorial do Mocha AI, o criador de apps: do prompt ao app publicado
Um passo a passo completo do Mocha AI — escreva seu primeiro prompt, adicione login com Google e pagamentos com Stripe, publique em um subdomínio mocha.app e exporte seu código. E toda a história do encerramento de agosto de 2026, verificada na documentação oficial do Mocha.
Resumo
- O Mocha (getmocha.com) era um criador de apps full-stack com IA: você descrevia o aplicativo em linguagem natural, ele escrevia um app de verdade em React + TypeScript com banco de dados, autenticação e hospedagem, e publicava tudo com um clique em um subdomínio mocha.app.
- O fluxo: prompt → revisar o plano da IA → testar na pré-visualização ao vivo → iterar pelo chat. O modo Discuss planeja sem tocar no código; o Direct Edit altera textos sem gastar créditos.
- O código era seu: um botão de download ficava atrás do nome do app no cabeçalho, o stack era portável (React, Hono, SQLite) e o banco de dados exportava para CSV.
- O Mocha encerrou as atividades em 1º de agosto de 2026. Este passo a passo documenta exatamente como o criador funcionava, e o FAQ explica o que houve com apps, cobranças e exportações.
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)
Comunicado:getmocha.com/blog
Os fatos foram conferidos em setembro de 2026 com a documentação oficial do Mocha e o comunicado de encerramento. Os preços vêm da página exibida no vídeo (dezembro de 2025) e da documentação do Mocha.
As capturas de tela vêm do vídeo acima, usadas com atribuição e links diretos para o momento exato de cada etapa.
Como usar o Mocha AI: do prompt ao app publicado, etapa por etapa
Parte 1 · Da ideia à primeira build
- 1
Crie sua conta e abra o criador
Cadastre-se grátis em getmocha.com e clique em "Create new app" no painel. Todo projeto começa na caixa "What do you want to build?": digite sua ideia, anexe capturas de referência e mantenha o app em Private até estar pronto para visitantes. Inspiration, Templates e Prompting 101 ficam abaixo da caixa se você precisar de um empurrão.
A caixa "What do you want to build?" onde todo app do Mocha começaAssistir em 3:06 - 2
Escreva um briefing, não uma frase
Nomeie funcionalidades e visual. O prompt da demo pedia uma loja e-commerce com memberships: grade de produtos, categorias, filtros, carrinho, integração com Stripe, login por e-mail/senha e com Google, além de um acesso de administrador — e pedia ao Mocha começar pelas funcionalidades centrais e listar as próximas. Específico vence vago: "adicione um botão azul de Contact Us no cabeçalho" rende mais que "deixe mais bonito".
O briefing da demo: e-commerce com memberships, Stripe, Google e papel de adminAssistir em 3:15 - 3
Deixe o Mocha construir e teste na pré-visualização
Envie: o Mocha primeiro planeja e depois escreve código — a primeira build da loja da demo levou cerca de 3 minutos e 24 segundos e 19 créditos, terminando com um resumo "13 changes made" para revisar. A pré-visualização central é um app real e interativo: filtre produtos, alterne o modo escuro, adicione ao carrinho, troque entre desktop e celular e faça login com Google para testar a autenticação embutida.
A vitrine gerada: filtros por categoria, grade de produtos e modo escuroAssistir em 9:54
Parte 2 · Por dentro: código, dados e correções
- 4
Explore o código gerado
A aba Code mostra todo o projeto React + TypeScript escrito pelo Mocha. Dá para adicionar arquivos e pastas e editar o código direto; alguns arquivos da plataforma ficam bloqueados e, enquanto a IA constrói, tudo é somente leitura. É aqui que um usuário técnico — ou um sócio técnico — assume o comando.
A aba Code com o projeto completo — arquivos da plataforma ficam bloqueados durante a buildAssistir em 5:12 - 5
Inspecione o banco de dados de desenvolvimento
A aba Data lista suas tabelas — users, products, cart_items, memberships — preenchidas com dados fictícios de desenvolvimento. Os dados de produção ficam separados e vazios até a publicação: experimentar aqui nunca toca usuários reais. O Mocha não edita dados de produção; cadastre produtos por um painel de administrador dentro do app.
A aba Data: tabelas de desenvolvimento preenchidas com produtos fictíciosAssistir em 10:38 - 6
Recupere-se de erros com Fix with AI
Quando uma pré-visualização falha, o Mocha mostra o erro e oferece Quick restart e "Fix with AI". Na demo, um clique resolveu uma falha de TypeScript (cada correção custa 1-3 créditos). Para bugs teimosos, ative o modo Discuss, discuta o erro com a IA e deixe que ela construa a correção.
Pré-visualização falhou? O Fix with AI resolveu a maioria dos erros da demo em um cliqueAssistir em 7:36 - 7
Ative o login com Google
Os apps do Mocha vêm com login do Google pronto. Em Settings, abra Google Sign In, cole seu Google OAuth Client ID e o segredo e adicione a URI de redirecionamento do Mocha mostrada no painel ao seu Google Cloud Console. Personalizar a página de login é um ajuste separado — deixe para depois na primeira passada.
Ajustes do Google Sign In: cole seu cliente OAuth e a URI de redirecionamento do MochaAssistir em 6:27 - 8
Planeje no modo Discuss antes de construir
Troque o campo de texto para Discuss e a IA responde perguntas sem tocar no código. Pergunte "what are our next steps?" e ela revisa seu app e propõe prioridades — a demo usou isso para ordenar checkout com Stripe, histórico de pedidos e depois memberships. Quando o plano agradar, volte ao modo build e diga "build it".
O modo Discuss responde "quais são os próximos passos" sem mudar códigoAssistir em 12:21
Parte 3 · Pagamentos, publicação e custos
- 9
Conecte o Stripe pelo fluxo guiado de segredos
Peça pagamentos com Stripe e o Mocha adiciona o segredo STRIPE_SECRET_KEY ao seu projeto, com um botão Walkthrough que lista cada clique dentro do painel do Stripe — incluindo a diferença entre chaves de teste e de produção. Cole a chave sk_test, envie, e o checkout fica conectado. Os segredos ficam como variáveis de ambiente e ocultos dos usuários após a publicação.
O diálogo STRIPE_SECRET_KEY com o walkthrough do Stripe embutidoAssistir em 14:23 - 10
Publique no seu subdomínio mocha.app
O botão Publish abre um diálogo com sua URL, um seletor de Status e a visibilidade. Mantenha o Status em Unpublished enquanto testa, coloque a visibilidade em Private e clique em Publish app — na demo o redeploy levou cerca de 15 segundos. Pagamentos de teste do Stripe só funcionam na URL publicada: a sandbox do editor bloqueia checkouts por redirecionamento.
Publish app: escolha seu subdomínio mocha.app e fique em Unpublished enquanto testaAssistir em 17:30 - 11
Rode um pagamento de teste no app ao vivo
Cadastre produtos pelo painel de administrador, siga para o checkout na URL publicada e pague com o cartão de teste do Stripe 4242 4242 4242 4242. A demo viu "Payment Successful" e a transação apareceu no painel do Stripe. Quando tudo funcionar, mude o Status para Published e compartilhe o link.
Payment Successful: um pagamento de teste de US$ 699,98 na URL publicadaAssistir em 19:51 - 12
Entenda o custo antes de se comprometer
O plano gratuito começa com 20 créditos segundo a documentação do Mocha. Na página de preços mostrada no passo a passo (dezembro de 2025), o Bronze custava US$ 20/mês por 1.500 créditos, o Silver US$ 50 por 4.500 e o Gold US$ 200 por 25.000. Os créditos só são debitados quando uma operação de IA tem sucesso — publicar, Direct Edit e restaurações são sempre grátis.
A página de preços como aparecia em dezembro de 2025: planos Bronze, Silver e GoldAssistir em 27:15
A verdade sobre exportar: o código era seu — e o que acontece agora
"Consigo levar meu código?" era sempre a pergunta decisiva sobre o Mocha, e a resposta honesta tem duas metades: exportação generosa enquanto a plataforma viveu e uma janela de fuga apressada quando morreu. Eis o registro, com datas.
- 1Baixar o código (com o Mocha no ar): clique no nome do app no cabeçalho e um botão de download do código aparece. O FAQ oficial do Mocha dizia que tudo o que você constrói pertence a você e sugeria exportar para Cursor, Windsurf ou qualquer IDE. O stack era portável: TypeScript, React, Hono para APIs e SQLite.
- 2Os limites: sem sincronização com GitHub e sem publicação na Vercel, Netlify ou outro host externo — o Mocha só publicava na própria infraestrutura Cloudflare. Mas ler o código sempre foi grátis, mesmo sem créditos.
- 3Banco de dados: dava para pedir ao Mocha que construísse exportações em CSV dentro do próprio app, e a aba Data expunha os dados de desenvolvimento e produção.
- 4Ferramenta de exportação do encerramento: o comunicado de 15 de maio de 2026 entregou uma ferramenta em Settings → Export para baixar código e dados, avisando que rodar o app fora do Mocha "exigiria esforço de engenharia".
- 5Migração: o caminho recomendado era uma migração de um clique para Anything, um criador integrado parecido que também faz apps móveis, com US$ 20 em créditos para ajustes depois da mudança. O criador parou em 1º de agosto de 2026; os links de migração e exportação ficariam no ar por 30 dias após o fechamento.
A lição vai além do Mocha: antes de construir um negócio sobre qualquer criador de apps com IA, verifique onde o código vive, se o stack roda em outro lugar e como seria a saída em um encerramento. Os guias linkados abaixo — do Lovable ao DeepSeek no Cursor — são boas paradas se você está migrando.
Preços e créditos do Mocha, explicados
O Mocha era freemium. Os créditos pagavam o trabalho da IA e os planos pagavam créditos mais limites. Os números vêm da documentação do Mocha (conferida em setembro de 2026) e da página de preços capturada no vídeo (dezembro de 2025).
- 1Plano gratuito: 20 créditos iniciais, marca d'água "Made in Mocha" nos apps publicados (removível nos planos pagos) e espaço para projetos pequenos. O app completo da demo — auth, Stripe, memberships, admin — gastou cerca de 100 créditos no total.
- 2Planos pagos (página de preços de dezembro de 2025): Bronze US$ 20/mês com 1.500 créditos, Silver US$ 50/mês com 4.500 (o mais popular), Gold US$ 200/mês com 25.000. A documentação confirma os mesmos volumes, recarregados mensalmente, com créditos de assinatura não usados acumulando até 2× a cota mensal.
- 3No que os créditos eram gastos: mudanças simples de texto ou estilo 5-15 créditos, novo componente 15-40, nova página 30-60, funcionalidade complexa com banco de dados 50-100+. Operações de IA que falhavam não custavam nada — só mudanças bem-sucedidas eram cobradas.
- 4Sempre grátis: navegar pelo projeto, mudar textos no Direct Edit Mode, ver o banco de dados, publicar o app e restaurar versões. Limites de tamanho de app valiam no Bronze; do Silver em diante era efetivamente ilimitado para apps normais.
Cobranças após o encerramento: as assinaturas seguiram no preço vigente até 1º de agosto de 2026, foram canceladas automaticamente na data e ninguém foi cobrado depois. O comunicado listava contatos de suporte para questões de cobrança — embora a janela de 30 dias após o fechamento já tenha passado.