Маркетинг-стратег, IT-предприниматель, ментор по вайбкодингу
10+ лет в маркетинге, 300+ клиентских проектов: сайты, реклама, боты. Создатель GoBanana (228K+ пользователей, 11.6 млн ₽ выручки) и VibeCoderz. Делаю AI-продукты сам через Claude Code, Cursor, Windsurf и консультирую тех, кто хочет так же.
🎯 О чём этот конспект: Пошаговое руководство по локальному развертыванию open-source версии Bolt.new (Bolt.diy) и интеграции модели Grok 3 от xAI через сервис OpenRouter. В видео разбирается процесс установки зависимостей, настройки API и тестирование модели на создании веб-приложений.
👤 Кому будет полезно: Вайбкодерам, разработчикам и AI-энтузиастам, которые хотят использовать топовые модели для кодинга без ограничений веб-интерфейсов и с минимальными затратами.
✨ Что получите: Полностью рабочую локальную среду Bolt.new с подключенной моделью Grok 3, готовую к генерации сложных Fullstack-приложений с оплатой только за использованные токены.
1. Локальная установка Bolt.new (Bolt.diy)
Контекст: Использование облачной версии Bolt.new может быть ограничено лимитами подписки. Локальная установка (часто используемая в форке Bolt.diy) позволяет гибко настраивать провайдеров моделей и работать без ограничений интерфейса. Для работы потребуются установленные Git, Node.js и менеджер пакетов pnpm. Это база для любого вайбкодера, позволяющая запускать AI-агента прямо на своей машине.
Выгода: Полный контроль над средой, отсутствие ежемесячных подписок (оплата только за токены) и возможность подключения любых моделей через OpenRouter.
Как применить:
Шаг 1: Клонирование репозитория — [Git] — Откройте терминал в нужной папке и выполните команду для копирования исходного кода:
git clone https://github.com/stackblitz/bolt.new
(Примечание: в видео используется форк, часто называемый bolt.diy, убедитесь, что используете актуальный репозиторий с поддержкой нескольких провайдеров).
Шаг 2: Установка пакетного менеджера — [pnpm] — Если у вас не установлен pnpm, выполните команду из репозитория для его инициализации:
corepack enable pnpm
Шаг 3: Установка зависимостей — [pnpm] — Перейдите в папку проекта и установите все необходимые библиотеки:
После запуска откройте в браузере http://localhost:5173. Если экран черный или белый — просто обновите страницу (F5).
Результат: У вас запущена собственная копия Bolt.new, работающая локально.
2. Подключение Grok 3 через OpenRouter
Контекст: Grok 3 (в транскрипте упоминается как Grok 4, но актуальная топовая модель — Grok 3) от xAI показывает выдающиеся результаты в кодинге, сопоставимые с Claude 3.5 Sonnet. Чтобы использовать её в Bolt.new, проще всего воспользоваться агрегатором OpenRouter, который предоставляет единый API-ключ для сотен моделей. Стоимость составляет примерно $3 за 1 млн входных токенов и $15 за 1 млн выходных.
Выгода: Доступ к самой мощной кодинг-модели без необходимости иметь прямой аккаунт xAI, с прозрачной оплатой по факту использования.
Как применить:
Шаг 1: Получение API ключа — [OpenRouter] — Зайдите на openrouter.ai, авторизуйтесь, перейдите в раздел "Keys" и создайте новый ключ. Скопируйте его.
Шаг 2: Активация провайдера в Bolt — [Settings] — В локальном интерфейсе Bolt нажмите на иконку шестеренки (Settings). Перейдите в раздел Providers и убедитесь, что чекбокс OpenRouter включен.
Шаг 3: Выбор модели — [Interface] — В главном окне Bolt в выпадающем списке моделей выберите OpenRouter, а затем найдите в поиске x-ai/grok-3 (или актуальную версию Grok).
Шаг 4: Настройка ключа — [API Config] — Нажмите на иконку карандаша рядом с выбором модели и вставьте ваш API ключ от OpenRouter.
Результат: Bolt.new теперь использует интеллект Grok 3 для написания вашего кода.
3. Практическое тестирование и экономика разработки
Контекст: Автор демонстрирует возможности связки на двух примерах: To-Do приложение на React + Tailwind и игра Tic-Tac-Toe на чистом HTML/CSS. Модель Grok 3 отлично справляется с инициализацией проекта (Vite template), созданием структуры файлов и стилизацией. Важно следить за расходом токенов, чтобы понимать стоимость разработки одного мини-приложения.
Выгода: Понимание реальной стоимости генерации: создание двух полноценных небольших приложений обошлось автору примерно в $0.50.
Пример промпта для проверки:
Create a beautiful and fully featured Tic-Tac-Toe game using pure HTML, CSS and JavaScript. Make sure it has smooth animations and a modern UI.
Как оценить результат:
Скорость: Grok 3 быстро генерирует логику и стили.
Качество кода: Проверьте анимации и адаптивность (в примере автора они были на высоком уровне).
Стоимость: В OpenRouter в разделе "Activity" можно увидеть точную стоимость каждого запроса.
Результат: Готовое, работающее приложение с чистым кодом, созданное за несколько минут и несколько центов.
FAQ
В: Почему Bolt.new лучше запускать локально, а не использовать сайт? О: Локальная версия (особенно форки типа Bolt.diy) позволяет подключать любые модели через OpenRouter или Ollama, использовать свои API-ключи и не зависеть от лимитов бесплатного плана или подписки StackBlitz.
В: Сколько стоит использование Grok 3 через OpenRouter? О: Цена динамическая, но ориентировочно это $3 за 1 млн входных токенов и $15 за 1 млн выходных. Создание среднего компонента или небольшой игры обходится в диапазоне от $0.10 до $0.30.
В: Что делать, если после запуска pnpm run dev в браузере просто черный экран? О: Это известная особенность локальной сборки Bolt. Просто обновите страницу (Reload) в браузере. Иногда требуется подождать 10-15 секунд, пока завершится компиляция на стороне сервера.
В: Можно ли подключить базу данных к проектам в Bolt.new? О: Да, Bolt поддерживает интеграцию с Supabase. Вы можете создать проект в Supabase, получить URL и анонимный ключ, и вставить их в настройки Bolt (иконка карандаша), чтобы AI мог генерировать бэкенд-логику и таблицы БД.
В: Можно ли скачать код, который сгенерировал Bolt? О: Да, в интерфейсе Bolt есть кнопка "Download", которая выгружает весь проект в виде ZIP-архива. Также вы можете напрямую копировать файлы из локальной папки, если используете Bolt.diy.
Конспект создан на основе видео «How to use Grok 4 in Bolt.new» канала Tech 101. Все права на оригинальный материал принадлежат авторам.Источник: https://www.youtube.com/watch?v=a5t2HRTYd1Y
bolt.diy