Туториал Mocha AI — конструктора приложений: от промпта до релиза
Пошаговый разбор Mocha AI: первый промпт, вход через Google, оплата через Stripe, публикация на поддомене mocha.app и экспорт кода. Плюс полная история закрытия сервиса в августе 2026 года — с фактами, сверенными по официальной документации Mocha.
Коротко
- Mocha (getmocha.com) — это был AI-конструктор фулстек-приложений: вы описывали приложение обычным языком, он писал настоящий React + TypeScript код с базой данных, авторизацией и хостингом и в один клик публиковал его на поддомене mocha.app.
- Рабочий процесс: промпт → ревью плана AI → тест в живом превью → итерации через чат. Режим Discuss планирует, не трогая код; Direct Edit правит текст без списания кредитов.
- Код принадлежал вам: кнопка скачивания пряталась за именем приложения в шапке, стек был переносимым (React, Hono, SQLite), а база данных экспортировалась в CSV.
- Mocha закрылась 1 августа 2026 года. Этот разбор документирует, как именно работал конструктор, а в 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
Факты сверены с официальной документацией Mocha и анонсом закрытия в сентябре 2026 года. Цены взяты со страницы тарифов, показанной в видео (декабрь 2025), и из документации Mocha.
Скриншоты взяты из видео выше с указанием авторства и ссылками на точный таймкод каждого шага.
Как пользоваться Mocha AI: от промпта до опубликованного приложения
Часть 1 · От идеи до первой сборки
- 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, вход по e-mail/паролю и через Google, плюс админ-логин — и просьба начать с ядра функций, а остальные перечислить списком. Конкретика бьёт расплывчатость: "добавь синюю кнопку Contact Us в шапку" работает лучше, чем "сделай красивее".
Демо-бриф: интернет-магазин с членствами, Stripe, Google-входом и ролью админаСмотреть с 3:15 - 3
Дайте Mocha собрать — и проверьте в превью
После отправки Mocha сначала составляет план, потом пишет код — первая сборка демо-магазина заняла около 3 минут 24 секунд и 19 кредитов и завершилась сводкой "13 changes made" на ревью. Превью в центре — настоящее интерактивное приложение: фильтруйте товары, переключайте тёмную тему, добавляйте в корзину, меняйте десктоп/мобильный вид и входите через Google, проверяя встроенную авторизацию.
Сгенерированный витрина-магазин: фильтры категорий, сетка товаров и тёмная темаСмотреть с 9:54
Часть 2 · Внутри: код, данные и исправления
- 4
Осмотрите сгенерированный код
Вкладка Code показывает весь проект на React + TypeScript, который написал Mocha. Можно добавлять файлы и папки и править код напрямую; несколько платформенных файлов заблокированы, а во время сборки всё доступно только для чтения. Именно здесь технический пользователь — или технический партнёр — может перехватить управление.
Вкладка 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 кредита). С упорными багами включите Discuss mode, разберите ошибку с 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-клиент и redirect URI от MochaСмотреть с 6:27 - 8
Планируйте в Discuss mode до сборки
Переключите композер в Discuss — и AI отвечает на вопросы, не трогая код. Спросите "what are our next steps?" — он осмотрит приложение и предложит приоритеты: в демо так выстроили порядок Stripe-оплаты, истории заказов и членств. Когда план устроит, вернитесь в режим сборки и скажите "build it".
Discuss mode отвечает на вопрос "что делать дальше", не меняя ни строчки кодаСмотреть с 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, выпадающим статусом и видимостью. Держите статус Unpublished, пока тестируете, поставьте видимость Private и нажмите Publish app — в демо передеплой занял около 15 секунд. Тестовые платежи Stripe работают только на опубликованном URL: песочница внутри редактора блокирует оплату с редиректами.
Publish app: выберите поддомен mocha.app и держите Unpublished на время тестовСмотреть с 17:30 - 11
Проведите тестовую оплату на живом приложении
Добавьте товары через админ-панель, пройдите checkout на опубликованном URL и заплатите тестовой картой Stripe 4242 4242 4242 4242. В демо появилось "Payment Successful", а транзакция отобразилась в панели Stripe. Когда всё работает, переключите статус на Published и делитесь ссылкой.
Payment Successful: тестовая оплата на $699.98 на опубликованном URLСмотреть с 19:51 - 12
Поймите цену до того, как решитесь
Бесплатный тариф стартует с 20 кредитов по документации Mocha. На странице тарифов из видео (декабрь 2025) Bronze стоил $20 в месяц за 1 500 кредитов, Silver — $50 за 4 500, Gold — $200 за 25 000. Кредиты списываются только за успешные операции AI — публикация, Direct Edit и откаты версий всегда бесплатны.
Страница тарифов по состоянию на декабрь 2025: планы 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Экспорт при закрытии: в анонсе от 15 мая 2026 появился инструмент в Settings → Export для скачивания кода и данных — с оговоркой, что запуск приложения вне Mocha "потребует инженерных усилий".
- 5Миграция: рекомендуемый путь — переезд в один клик к Anything, похожему интегрированному конструктору, который к тому же делает мобильные приложения, с $20 кредитов на правки после переезда. Конструктор остановился 1 августа 2026; ссылки на миграцию и экспорт планировалось держать 30 дней после закрытия.
Урок шире Mocha: прежде чем строить бизнес на любом AI-конструкторе, проверьте, где живёт код, работает ли стек в другом месте и как выглядит выход при закрытии сервиса. Гайды по ссылкам ниже — от Lovable до DeepSeek в Cursor — хорошее продолжение, если вы переезжаете.
Тарифы и кредиты Mocha — объясняем
Mocha была freemium-сервисом. Кредиты платили за работу AI, тарифы — за кредиты и лимиты. Цифры ниже — из документации Mocha (проверено в сентябре 2026) и со страницы тарифов в видео (декабрь 2025).
- 1Бесплатный тариф: 20 стартовых кредитов, водяной знак "Made in Mocha" на опубликованных приложениях (снимается на платных тарифах) и простор для небольших проектов. Полное демо-приложение — авторизация, Stripe, членства, админка — обошлось примерно в 100 кредитов.
- 2Платные тарифы (страница цен, декабрь 2025): 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 Mode, просмотр базы данных, публикация и откат версий. Лимиты размера приложения действовали на Bronze; начиная с Silver они были практически безграничными для обычных приложений.
Биллинг после закрытия: подписки действовали по прежней цене до 1 августа 2026, в этот день отменялись автоматически, и дальше списаний не было. В анонсе были контакты поддержки по биллингу — но 30-дневное окно после закрытия уже истекло.