Как мы завайбкодили проект за 6 часов

Мы с другом попробовали собрать реально работающий проект по поиску развлечений на одном острове с помощью ИИ-агента, который будет бродить по БД, наполненной данными и подбирать тебе список активностей на 1-2 дня. Ниже описание процесса - как это происходило. Уверен, для тех, кто хочет попробовать сделать какой-то свой продукт, такое описание и инструменты, могут быть супер полезны.

Исходные данные - есть идея того, что можно сделать. больше ничего нет. Из платных инструментов только cursor.

• 11:30 - открываем chatGPT - без подписки, модель не важна - пишем туда идею - говорим, что хотим создать такой веб-сервис - спрашиваем мнение. далее просим создать описание функциональности такого сервсиа. по мере надобности исправляем то, что не нравится. потом просим максимально сузить скоуп для MVP. читаем то, что получилось - если все устраивает, далее.
• идем на framer/templates и ищем то, что нравится по стилю. делаем скриншот, возвращаемя в чатик, вставляем скриншот - просим добавить в конец файла описание дизайн системы на основе скриншота. копируем итоговый текст.
• открываем lovable - платный аккаунт не нужен, у вас есть 5 бесплатных запросов. вставляем наш скопированный текст из chatGPT и можем добавить тоже скриншот из фрэймера. жмем enter, идем делать кофе, у нас есть пара минут.
• если вдруг, вы точно знаете, что вам надо обязательно сделать какую-то конкрентную страницу в прототипе - добавьте это в запрос. по умолчанию lovable создаст заглушки для большинства страниц, которые были указаны - точно сделает хорошо главную плюс еще несколько. но если попросить сделает и другие.
• пока lovable генерит открываем supabase - можно любую другую, но supabase хорошо интегрирован с lovable и будет просто быстрее. регистрируемся, создаем пустую БД, возвращаемся в lovable.
• в loavble вы уже увидите что-то - скорее всего оно будет очень сильно похоже на то, что вам нужно. не напрягайтесь с дизайном, потом в курсоре сможете все поправить - вас интересует пока что основной флоу - в моем случае это была страница запуска ИИ-ассистента плюс страница для результатов его работы. на них я потратил второй запрос. внимание - 2 запроса последних вам понадобится для поключения supabase, поэтому не тратье их.
• 12:00 - приехал мой напарник
• подключаете supabase - lovable сам предложит интегрироваться и пойдет писать интеграцию - на выходе даст вам sql запрос, который копируем и идем в SQL editor in supabase - вставляем - запускаем - обычно все работает, как часы. если нет - сходите в курсор или чатгпт и попросите найти ошибки в скрипте. открываете database и делаете скриншот структуры БД.
• возвращаетесь в lovable - кидаете скриншот - просите закончить интеграцию - ждете - все готово. дальше подключаете проект к github - кнопочка справа вверху.
• забираем проект в курсор, даем доступ напарнику, проговариваем кто и что делает. мы договорились, что хотим наполнить БД реальной инфой, желательно картинками, чтобы сервис выглядел живым, прикрутить ИИ-ассистента и далее научить его ходить в нашу БД и брать оттуда активности, подходящие под запрос пользователя. если успеем прикрутить в асситента голосовой ввод, добавить авторизацию, и отражать в БД бронирование активности + показыввать бронирование пользователю.
• итак, у нас есть проект в курсоре, который работает и мы можем его запустить локально. в БД есть какая-то информация - ее сгенерил lovable и она нам по факту не нужна. первая задача наполнить БД реальной инфой.
• открываем exa - регимся - берем ключ api. в разделе документации ищем информацию про MCP server - и настраиваем MCP in cursor. exa при регистрации даст сколько-то кредитов - их хватит для того, чтобы сделать пару сотен поисковых запросов.
• 13:00
• собираем данные для наполнения нашей БД - открываем cursor - показываем ему структуру нашей БД скриншотом и просим сделать образец json файла, который мы сможем наполнить информацией из exa MCP, и потом преобразовать для внесения в БД. еще можно добавить описание изначальное из chatGPT, чтобы cursor лучше понял контекст. Получаем образец json.
• Далее, просим cursor заполнить по образцу реальными данными набор таких json - в нашем случае было 9 файлов по категориям, в каждом 15 активностей. данные берем через exa MCP - обязательно указываем в запросе.
• через 10 минут у вас должно получиться 9 json файлов, заполненных реальными данными. пишем следующий запрос - теперь создай SQL скрипт, для внесения этих данных в нашу БД. получаем скрипт - вносим в БД. это займет еще минут 10.
• итого - в БД есть реальные данные + эти данные фронт забирает из БД и отображает локально в браузере.
• дальше скучная часть - ходить на unsplash, искать картинки, добавлять в БД - просто для красоты, мне быстро надоело и добавил только часть.
• дальше - подключаем vercel прямо из cursor - нужно только зарегиться сначала, он все подскажет как сделать и настраиваем подключение github репозитория к vercel
• важно - в cursor обязательно добавьте правило - после каждого значимого изменения делай коммит и пуш - потом поможет откатиться, ситуации когда модели что-то портят происходят очень часто.
• получаем проект развернутый на vercel - можем уже смотреть вживую
• дальше все просто - в cursor правим то, что не нравится, при необходимости откатываемся и так до бесконечности.
• пока я этим занимался, Миша сделал эндпоинт на бэке, где был подключен openai ассистент с доступом к tool supabase - когда к нему прилетал запрос, он мог ходить в supabase и смотреть в спиоск всех активностей и выбирать подходящие. на выходе отдавал json, который мы отображали карточками на фронте. плюс подключил распознавание голоса тоже через openai.
• примерно к 17 весь основной флоу был готов. еще час ушел на поиск мелких ошибок и косяков + мелкие улучшательства.
• в 18 hard stop и отправили ссылку друзьям.

что показалось важным в процессе - супер высокая скорость разработки и необходимость коммуникации каждые 5 минут - как итог = очень устали, в нормальном режиме такой уровень усталости был бы через 10-12 часов работы.

ссылку показать не могу, друзья с которыми спорил, что у нас ничего не получится, решили попробовать продать проект клиенту )))

но вот ссылка https://arty-map.vercel.app/ на вчерашний проект - в одиночку с нуля за 6 часов

если есть вопросы - спрашивайте, буду рад ответить.