🎯 О чём этот конспект: Пошаговое руководство по установке и настройке Bolt.DIY — open-source альтернативы популярного AI-кодера Bolt.new. Вы узнаете, как развернуть инструмент локально, подключить любые LLM (Claude, GPT-4o, Gemini, DeepSeek) через API-ключи и создавать полноценные веб-приложения бесплатно или по цене API.

👤 Кому будет полезно: Вайбкодерам, разработчикам и фаундерам, которые хотят обойти лимиты платных подписок ($20/мес+) и использовать мощь AI-агентов с гибким выбором моделей.

✨ Что получите: Полностью рабочую среду для генерации Fullstack-приложений (Next.js, React, Vue) на вашем компьютере с возможностью подключения бесплатных API-ключей (например, Gemini Free).

1. Подготовка окружения и клонирование репозитория

Контекст: Bolt.DIY — это форк оригинального Bolt, который позволяет использовать «Bring Your Own Key» (свой ключ). Для работы вам понадобится Git для копирования файлов и Node.js с пакетным менеджером (npm или pnpm). Локальный запуск дает вам полный контроль над файлами проекта и отсутствие ограничений по времени сессии, которые есть в веб-версии.

Выгода: Полная независимость от платных планов StackBlitz/Bolt.new и возможность работать с локальными файлами.

Как применить:

• Шаг 1: Создание папки — Создайте на рабочем столе или в удобном месте папку, например bolt-projects.
• Шаг 2: Клонирование репозитория — Откройте терминал (CMD или PowerShell), перейдите в созданную папку и выполните команду:

git clone https://github.com/stackblitz-labs/bolt.diy

• Шаг 3: Переход в директорию — Зайдите в скачанную папку проекта:

cd bolt.diy

Результат: У вас на компьютере есть все исходные коды инструмента, готовые к сборке.

2. Установка зависимостей и запуск сервера

Контекст: Bolt.DIY написан на TypeScript и требует установки библиотек-зависимостей. Автор видео рекомендует использовать npm install, хотя поддерживается и pnpm. Важный нюанс: для корректной работы превью и функций редактирования разработчики настоятельно рекомендуют использовать браузер Chrome Canary (версия для разработчиков), так как обычный Chrome может блокировать некоторые локальные воркеры.

Выгода: Стабильная работа AI-агента без вылетов и ошибок рендеринга.

Как применить:

• Шаг 1: Установка библиотек — В терминале внутри папки проекта выполните:

npm install

• Шаг 2: Установка Chrome Canary — Скачайте и установите Chrome Canary с официального сайта.
• Шаг 3: Запуск сервера — Выполните команду для старта локального хоста:

npm run dev

• Шаг 4: Открытие интерфейса — Скопируйте появившийся URL (обычно http://localhost:5173) и вставьте его в адресную строку Chrome Canary.

Результат: В браузере откроется интерфейс, идентичный Bolt.new, запущенный с вашего ПК.

3. Подключение LLM-провайдеров и API-ключей

Контекст: Главная фишка Bolt.DIY — поддержка десятков провайдеров: Anthropic, OpenAI, Google Gemini, DeepSeek, Groq, Mistral и даже локальных моделей через LM Studio. Если интерфейс ввода ключа не появился сразу, просто обновите страницу. Вы можете использовать бесплатный уровень Gemini 2.0 Flash или дешевый DeepSeek, чтобы разработка стоила копейки.

Выгода: Экономия до $20-50 в месяц на подписках при сохранении качества кодинга.

Как применить:

• Шаг 1: Выбор провайдера — В интерфейсе Bolt.DIY выберите нужного провайдера (например, Google или OpenAI).
• Шаг 2: Получение ключа (на примере Gemini) — Перейдите в Google AI Studio, создайте API Key.
• Шаг 3: Настройка в Bolt — Нажмите на иконку карандаша (Settings) в Bolt.DIY, выберите модель (например, gemini-2.0-flash-exp) и вставьте ключ:

[Ваш API Ключ]

• Шаг 4: Сохранение — Нажмите галочку/Save. Теперь агент готов к работе.

Результат: Инструмент подключен к «мозгам» выбранной нейросети.

4. Процесс разработки и итерации (Prompting)

Контекст: Работа в Bolt.DIY строится по принципу чата. Вы пишете запрос, AI создает структуру файлов, устанавливает зависимости и запускает превью. Вы можете сразу видеть результат в правой панели. Если чего-то не хватает (например, кнопки удаления в To-Do приложении), вы просто просите AI добавить это вторым промптом.

Выгода: Скорость создания MVP (Minimum Viable Product) увеличивается в 10 раз по сравнению с ручным написанием кода.

Как применить:

• Шаг 1: Начальный промпт — Введите описание задачи, например:

Create a modern SaaS landing page for a fitness app using Next.js and Tailwind CSS. Use Lucide icons and Framer Motion for animations.

• Шаг 2: Улучшение функционала — После генерации базы напишите уточнение:

Add a pricing section with three tiers and a functional contact form using React Hook Form.

• Шаг 3: Использование доп. функций — Используйте иконку скрепки для загрузки скриншотов дизайна (UI/UX), чтобы AI повторил стиль.

Результат: Готовое веб-приложение с чистым кодом, которое можно скачать или задеплоить.

5. Продвинутые возможности: Импорт и GitHub

Контекст: Bolt.DIY позволяет не только создавать проекты с нуля, но и работать с существующим кодом. Вы можете подключить GitHub-репозиторий или импортировать локальную папку с проектом, чтобы AI помог провести рефакторинг или добавить новые фичи.

Выгода: Возможность дорабатывать старые проекты с помощью мощных AI-агентов.

Как применить:

• Шаг 1: Подключение GitHub — Нажмите кнопку "Connect a GitHub repo" и вставьте ссылку на ваш репозиторий.
• Шаг 2: Локальный импорт — Используйте кнопку "Import folder", чтобы выбрать папку на вашем диске.
• Шаг 3: Выбор фреймворка — Bolt.DIY автоматически определит стек (Astro, Next.js, Remix, Vue, Svelte) и предложит соответствующие правки.

Результат: Ваш существующий проект открыт в AI-редакторе для мгновенных правок.

FAQ

В: Почему автор рекомендует Chrome Canary вместо обычного Chrome?

О: В Bolt.DIY используются специфические технологии браузерных воркеров и WebContainers для запуска кода прямо в браузере. Обычные версии Chrome могут иметь ограничения безопасности или кэширования, которые мешают стабильной работе локального сервера разработки.

В: Можно ли использовать Bolt.DIY абсолютно бесплатно?

О: Да, если вы подключите провайдеров с бесплатными лимитами. Например, Google Gemini API предоставляет щедрый бесплатный уровень (Free Tier), а провайдеры вроде Groq часто дают бесплатный доступ к моделям Llama 3 на период бета-тестирования.

В: Какие модели лучше всего подходят для кодинга в Bolt.DIY?

О: Для сложных задач лучшим выбором остается Claude 3.5 Sonnet (через Anthropic API). Для быстрых и экономных правок отлично подходит Gemini 2.0 Flash или DeepSeek V3.

В: Сохраняются ли мои проекты после закрытия терминала?

О: Да, все файлы проекта физически находятся в папке, которую создал Bolt.DIY внутри своего каталога. Однако история чата может сброситься, если вы не используете функцию экспорта/сохранения чата, доступную в интерфейсе.

В: Нужно ли мне знать программирование, чтобы пользоваться этим?

О: Базовые знания помогут вам лучше формулировать промпты и исправлять мелкие ошибки, но Bolt.DIY спроектирован так, чтобы создавать работающие приложения на основе чистого текста (вайбкодинг).

Конспект создан на основе видео «Bolt.DIY: The Best Open Source Bolt.new Alternative (Install Locally)» канала TechXperience. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=6cHR9_D8xv4