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

👤 Кому будет полезно: Вайбкодерам, разработчикам и энтузиастам, которые хотят использовать возможности AI-агентов для кодинга без ежемесячной подписки в $20, используя свои API-лимиты или бесплатные модели.

✨ Что получите: Полностью рабочую локальную среду для генерации fullstack-приложений, умеющую писать код, исправлять ошибки и сразу показывать результат в превью.

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

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

Выгода: Полная независимость от облачных лимитов оригинального сервиса и возможность работы с любыми моделями.

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

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

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

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

cd bolt.diy

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

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

Контекст: Проект написан на TypeScript и требует установки пакетов через менеджер npm или pnpm. Важной особенностью является рекомендация разработчиков использовать браузер Chrome Canary для локальной разработки, так как стандартный Chrome может накладывать ограничения на некоторые функции WebContainer, которые использует Bolt для запуска кода прямо в браузере.

Выгода: Быстрая работа интерфейса и корректное отображение превью создаваемых приложений.

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

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

npm install

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

npm run dev

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

Результат: Локальный интерфейс Bolt.DIY запущен и доступен в браузере.

3. Подключение API-ключей и выбор моделей

Контекст: Bolt.DIY поддерживает практически всех популярных провайдеров: Anthropic (Claude 3.5 Sonnet), OpenAI (GPT-4o), Google (Gemini 2.0 Flash), DeepSeek, Groq, Mistral и даже локальные модели через LM Studio. Если вы хотите использовать сервис бесплатно, лучше всего подключить Google Gemini или DeepSeek, которые часто предоставляют бесплатные тиры API.

Выгода: Возможность переключаться между моделями в зависимости от задачи (например, Claude для сложной логики, Gemini для быстрых правок).

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

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

[Ваш_API_Ключ_Здесь]

• Шаг 4: Сохранение — Нажмите галочку или Save. Если поля для ввода ключа не видно, просто обновите страницу (F5).

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

4. Создание и итерация приложения

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

Выгода: Создание MVP (минимально жизнеспособного продукта) за считанные минуты без ручного написания boilerplate-кода.

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

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

Создай современное приложение "Список дел" (To-Do App) на Next.js и Tailwind CSS. Добавь возможность добавлять задачи и сохранять их в LocalStorage.

• Шаг 2: Проверка превью — Дождитесь окончания генерации и перейдите во вкладку Preview, чтобы протестировать приложение.
• Шаг 3: Итерация — Если нужно добавить функцию (например, удаление или редактирование), напишите в чат:

Добавь кнопку удаления для каждой задачи и возможность отмечать задачу как выполненную.

• Шаг 4: Дополнительные функции — Вы можете подключать существующие GitHub репозитории или импортировать локальные папки для редактирования через соответствующие кнопки в интерфейсе.

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

FAQ

В: Нужно ли платить за использование Bolt.DIY? О: Сам софт бесплатен и имеет открытый исходный код. Вы платите только провайдерам LLM за использованные токены через API. Однако, используя бесплатные ключи от Google Gemini или DeepSeek, можно пользоваться инструментом полностью бесплатно.

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

В: Можно ли использовать локальные модели (без интернета)? О: Да, Bolt.DIY поддерживает подключение через LM Studio или Ollama. Выберите в списке провайдеров "Custom" или "LM Studio", укажите локальный URL (обычно http://localhost:1234/v1) и работайте с моделями типа Llama 3 или Mistral локально.

В: Что делать, если команда git clone не срабатывает? О: Это значит, что на вашем компьютере не установлен Git. Вам нужно скачать его с официального сайта git-scm.com, установить и перезапустить терминал.

В: Какие фреймворки поддерживает Bolt.DIY? О: Он поддерживает практически все современные веб-стеки: Next.js, React, Vue, Svelte, Astro, Remix, Nuxt и Vite-проекты. AI сам подберет нужные зависимости в зависимости от вашего промпта.

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