🎯 О чём этот конспект: Пошаговое руководство по локальному развертыванию 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] — Перейдите в папку проекта и установите все необходимые библиотеки:

cd bolt.new
pnpm install

• Шаг 4: Запуск проекта — [pnpm] — Запустите локальный сервер разработки:

pnpm run dev

После запуска откройте в браузере 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.

Как оценить результат:

1. Скорость: Grok 3 быстро генерирует логику и стили.
2. Качество кода: Проверьте анимации и адаптивность (в примере автора они были на высоком уровне).
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