要点速览
- Mocha（getmocha.com）曾是一个 AI 全栈应用构建器：用大白话描述你想要的应用，它会写出一个真正的 React + TypeScript 应用（自带数据库、登录和托管），一键发布到 mocha.app 子域名。
- 工作流：写提示 → 确认 AI 的计划 → 在实时预览里测试 → 用聊天继续迭代。Discuss 模式只规划不改代码；Direct Edit 改文案不耗积分。
- 代码归你所有：点击顶栏应用名就有下载代码按钮，技术栈可迁移（React、Hono、SQLite），数据库可导出 CSV。
- Mocha 已于 2026 年 8 月 1 日停止服务。本教程完整记录它的工作方式，FAQ 说明应用、账单和导出的后续处理。
Build A Full App In 15 Minutes + Stripe Monetization (Mocha AI Guide)
频道:Wanderloots28:57
Mocha AI App Builder 101: Everything You Need To Build Your App
频道:Mocha (official channel)13:57
Mocha documentation (getting started, billing, limits, hosting)
文档:docs.getmocha.com
Mocha is shutting down on August 1 (announced May 15, 2026)
官方公告:getmocha.com/blog
所有事实已于 2026 年 9 月对照 Mocha 官方文档与停服公告核实。价格数字来自演示视频中出现的定价页（2025 年 12 月）及 Mocha 文档。
截图取自上方视频，均注明来源，并附直达每一步时间点的深度链接。
Mocha AI 使用教程：从提示词到上线应用
第一部分 · 从想法到第一个版本
- 1
注册账号，打开构建器
在 getmocha.com 免费注册，然后在仪表盘点击 "Create new app"。每个项目都从 "What do you want to build?" 输入框开始：写下你的想法，附上参考截图，在准备好之前保持 Private（私有）。没思路的话，输入框下方有 Inspiration、Templates 和 Prompting 101 可以参考。
"What do you want to build?" 输入框——每个 Mocha 应用的起点在 3:06 观看 - 2
写需求简报，别只写一句话
把功能和外观要求都写清楚。演示提示要求做一个电商 + 会员制商店：商品网格、分类、筛选、购物车、Stripe 支付、邮箱/密码加 Google 登录，外加管理员登录——并要求 Mocha 先做核心功能、列出后续计划。具体胜过含糊：“在页头加一个蓝色的 Contact Us 按钮”远好过“把它弄好看点”。
演示需求：带 Stripe、Google 登录和管理员角色的电商会员商店在 3:15 观看 - 3
让 Mocha 生成，然后在预览里测试
提交后 Mocha 会先给计划再写代码——演示商店的首版耗时约 3 分 24 秒、花费 19 积分，最后给出一份 "13 changes made" 摘要供你确认。中间的预览是真正可交互的应用：筛选商品、切换深色模式、加购物车、切桌面/移动端视图，还能用 Google 登录测试内置认证。
生成的店面：分类筛选、商品网格和深色模式在 9:54 观看
第二部分 · 深入内部：代码、数据与修复
- 4
查看生成的代码
Code 标签页展示 Mocha 写出的完整 React + TypeScript 工程。你可以新建文件、新建文件夹、直接改代码；少数平台文件保持锁定，且 AI 构建期间全部只读。懂技术的用户（或你的技术合伙人）可以从这里接管。
Code 标签页：完整工程在此，构建期间平台文件锁定在 5:12 观看 - 5
查看开发数据库
Data 标签页列出你的数据表——users、products、cart_items、memberships——并预填了开发用的模拟数据。生产数据在发布前保持独立且为空，在这里随便折腾都不会影响真实用户。Mocha 不会直接改生产数据；需要录入商品就通过应用里的管理员后台。
Data 标签页：开发数据表已预填模拟商品在 10:38 观看 - 6
用 Fix with AI 修复报错
预览失败时，Mocha 会展示错误并提供 Quick restart 和 "Fix with AI"。演示中一次点击就修好了一个 TypeScript 崩溃（每次修复花费 1-3 积分）。遇到顽固 bug，就切到 Discuss 模式跟 AI 把错误聊清楚，再让它动手修。
预览失败？Fix with AI 一键修复了演示中的大多数错误在 7:36 观看 - 7
开启 Google 登录
Mocha 应用天生自带 Google 登录。在 Settings 里打开 Google Sign In，粘贴你的 Google OAuth Client ID 和密钥，并把面板里显示的 Mocha redirect URI 添加到 Google Cloud Console。登录页的自定义品牌是另一项设置——第一次先跳过。
Google Sign In 设置：粘贴 OAuth 凭据和 Mocha 重定向 URI在 6:27 观看 - 8
先用 Discuss 模式规划，再动手构建
把输入区切到 Discuss，AI 只回答问题、不改代码。问一句 "what are our next steps?"，它会盘点你的应用并给出优先级建议——演示就用它排定了 Stripe 结账、订单历史、会员功能的顺序。计划满意后切回构建模式，说一句 "build it" 即可。
Discuss 模式回答 "接下来做什么"，不改动任何代码在 12:21 观看
第三部分 · 支付、发布与成本
- 9
用引导式密钥流程接入 Stripe
向 Mocha 要 Stripe 支付，它会往项目里加一个 STRIPE_SECRET_KEY 密钥，并附一个 Walkthrough 按钮，逐步列出 Stripe 后台的每次点击——包括测试密钥与正式密钥的区别。粘贴 sk_test 密钥、提交，结账流程就接好了。密钥以环境变量形式存储，发布后对应用用户不可见。
STRIPE_SECRET_KEY 弹窗与内置的 Stripe 引导说明在 14:23 观看 - 10
发布到你的 mocha.app 子域名
点击 Publish 按钮会弹出包含 URL、Status 下拉框和可见性设置的对话框。测试期间把 Status 保持在 Unpublished（不上线）、可见性设为 Private，再点 Publish app——演示中重新部署只花了约 15 秒。Stripe 测试支付只能在发布后的 URL 上进行，因为编辑器内沙箱会拦截重定向式结账。
Publish app：选好 mocha.app 子域名，测试期间保持 Unpublished在 17:30 观看 - 11
在线上应用跑一次测试结账
通过管理员后台添加商品，在发布后的 URL 上进入结账，用 Stripe 测试卡号 4242 4242 4242 4242 支付。演示中看到了 "Payment Successful"，交易也出现在 Stripe 后台。一切正常后，把 Status 切到 Published，把链接分享出去。
Payment Successful：发布 URL 上完成的 $699.98 测试结账在 19:51 观看 - 12
下手之前先搞清成本
按 Mocha 文档，免费档自带 20 积分起步。演示视频（2025 年 12 月）里的定价页显示：Bronze 每月 $20 含 1,500 积分，Silver $50 含 4,500，Gold $200 含 25,000。积分只在 AI 操作成功时扣除——发布、Direct Edit 和版本恢复永远免费。
2025 年 12 月的定价页：Bronze、Silver、Gold 三档在 27:15 观看
导出的真相：代码确实归你——然后发生了什么
"代码能不能拿走？"一直是选择 Mocha 的决定性问题。诚实的答案分两段：平台存续期间导出相当大方，平台倒下时则给了一段仓促的撤退窗口。以下按时间记录。
- 1下载代码（平台存续期）：点击顶栏应用名即出现下载代码按钮。Mocha 官方 FAQ 写明“你用 Mocha 构建的一切归你所有”，并建议导出到 Cursor、Windsurf 或任意 IDE。技术栈可迁移：TypeScript、React、Hono（API）和 SQLite。
- 2限制：不支持 GitHub 同步，也不能发布到 Vercel、Netlify 等任何外部主机——Mocha 只部署到自家的 Cloudflare 基础设施。不过阅读代码永远免费，积分为零也能看。
- 3数据库：可以让 Mocha 在应用里做出 CSV 导出功能，Data 标签页也能查看开发和生产数据。
- 4停服导出工具：2026 年 5 月 15 日的公告在应用 Settings → Export 里提供了导出工具，可下载代码和数据，同时提醒在 Mocha 之外跑起来“需要工程投入”。
- 5迁移：官方推荐路径是一键迁移到 Anything——一个同样一体化的构建器，还支持移动应用——并赠送 $20 积分用于迁移后修改。构建器于 2026 年 8 月 1 日停止，迁移与导出入口原计划在停服后再保留 30 天。
这条教训适用于所有 AI 应用构建器：把生意押上去之前，先弄清代码放在哪、技术栈能不能搬走、停服时怎么撤退。下面的相关教程——从 Lovable 到 DeepSeek in Cursor——是迁移的好去处。
Mocha 定价与积分机制详解
Mocha 采用免费增值模式：积分为 AI 工作付费，订阅档位买的是积分和额度上限。以下数字来自 Mocha 文档（2026 年 9 月核对）和演示视频中的定价页（2025 年 12 月）。
- 1免费档：20 积分起步，已发布应用带 "Made in Mocha" 水印（付费档可去除），够做小项目。演示里的完整应用——认证、Stripe、会员、管理员——总共只用了约 100 积分。
- 2付费档（2025 年 12 月定价页）：Bronze 每月 $20 含 1,500 积分；Silver 每月 $50 含 4,500（最受欢迎）；Gold 每月 $200 含 25,000。文档确认了相同的积分额度，每月刷新，未用完的订阅积分最多滚存到月度额度的 2 倍。
- 3积分怎么花：简单的文字或样式修改 5-15 积分，新增组件 15-40，新增页面 30-60，带数据库的复杂功能 50-100+。失败的 AI 操作不扣分——只有改动成功才计费。
- 4永远免费：浏览项目、Direct Edit 改文字、查看数据库、发布应用、恢复版本。Bronze 有应用体积上限；Silver 及以上对常规应用基本等于无限。
停服后的账单处理：订阅按原价持续到 2026 年 8 月 1 日，当日自动取消，之后不再扣费。公告里列了账单问题的支持联系方式——不过停服后的 30 天窗口现在也已关闭。