Mocha AI アプリビルダー徹底チュートリアル：プロンプトから公開まで
Mocha AI の全手順を解説——最初のプロンプトの書き方、Google ログインと Stripe 決済の追加、mocha.app サブドメインへの公開、コードの書き出しまで。2026 年 8 月のサービス終了の経緯も、公式ドキュメントで検証した事実に基づいて紹介します。
要点まとめ
- 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 · アイデアから初回ビルドまで
- 1
アカウントを作り、ビルダーを開く
getmocha.com で無料登録し、ダッシュボードから "Create new app" をクリック。すべてのプロジェクトは "What do you want to build?" ボックスから始まります。アイデアを入力し、参考スクリーンショットを添付し、公開の準備ができるまでは Private のままに。迷ったらボックスの下にある Inspiration・Templates・Prompting 101 をどうぞ。
すべての Mocha アプリの出発点となる "What do you want to build?" ボックス3:06 に視聴 - 2
一言ではなく、要件を書く
機能と見た目を具体的に列挙します。デモのプロンプトは、商品グリッド・カテゴリ・フィルター・カート・Stripe 決済・メール/パスワードと Google ログイン・管理者ログインを備えた EC + メンバーシップストアを要求し、まずコア機能から作って次の候補を列挙するよう指示しました。漠然と「もっとよく」より「ヘッダーに青い Contact Us ボタンを追加」の方が効きます。
デモの要件：Stripe・Google ログイン・管理者ロール付きの EC メンバーシップストア3:15 に視聴 - 3
Mocha にビルドさせ、プレビューで確認
送信すると Mocha はまず計画を立て、それからコードを書きます。デモストアの初回ビルドは約 3 分 24 秒・19 クレジットで、確認用の "13 changes made" サマリーで完了。中央のプレビューは本物のインタラクティブアプリで、商品の絞り込み・ダークモード切替・カート追加・デスクトップ/モバイル切替ができ、Google ログインで内蔵認証も試せます。
生成されたストアフロント：カテゴリフィルター・商品グリッド・ダークモード9:54 に視聴
パート 2 · 中身を覗く：コード・データ・修復
- 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 回につき 1〜3 クレジット）。しつこいバグは Discuss モードで AI と一緒に原因を整理してから修正させると効率的です。
プレビュー失敗？ Fix with AI ならデモの大半のエラーをワンクリックで解決7:36 に視聴 - 7
Google ログインを有効にする
Mocha アプリは Google ログインが最初から組み込まれています。Settings で Google Sign In を開き、Google OAuth のクライアント ID とシークレットを貼り、パネルに表示される Mocha リダイレクト 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 に視聴
パート 3 · 決済・公開・コスト
- 9
ガイド付きシークレットフローで Stripe を接続
Stripe 決済を依頼すると、Mocha はプロジェクトに 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 の 3 プラン27:15 に視聴
書き出しの真実：コードはあなたのものだった——そして何が起きたか
「コードは持ち出せるのか？」は Mocha を選ぶかどうかを決める問いでした。正直な答えは二段階あります。サービスが生きていた間は寛大な書き出し、終わるときは駆け足の脱出期間。時系列で記録します。
- 1コードのダウンロード（稼働中）：ヘッダーのアプリ名をクリックするとダウンロードボタンが現れます。公式 FAQ は「Mocha で作ったものはすべてあなたのもの」と明言し、Cursor・Windsurf など任意の IDE への持ち出しを推奨。スタックは移植可能で、TypeScript・React・API 用の Hono・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 日間残す予定でした。
この教訓は Mocha に限りません。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（人気No.1）、Gold は $200 で 25,000。ドキュメントも同じ額を確認済みで、毎月リセット、未使用のサブスク分は月額の 2 倍まで繰り越せました。
- 3クレジットの消費目安：簡単なテキストやスタイル変更は 5〜15、新しいコンポーネントは 15〜40、新しいページは 30〜60、データベースを伴う複雑な機能は 50〜100+。失敗した AI 操作は課金なし——成功した変更だけが消費されます。
- 4常に無料：プロジェクトの閲覧、Direct Edit でのテキスト編集、データベースの確認、アプリの公開、バージョンの復元。アプリサイズの上限は Bronze にのみ実質的な影響があり、Silver 以上は通常のアプリでは事実上無制限でした。
終了後の請求：サブスクリプションは 2026 年 8 月 1 日まで現行料金で継続し、同日に自動解約、以降の請求はありません。請求問い合わせの窓口は発表に記載されていましたが、終了後 30 日の期間はすでに過ぎています。