【徹底解説】bolt.diy を使いこなす！セットアップからLLM連携、Bolt.newとの違いまで

はじめに

「AIにWebアプリを作ってもらいたい」「コーディングをもっと効率化したい」
そんな願いを叶えるツールとして注目されているのが、AI開発エージェント「Bolt」です。特に、オープンソース版である bolt.diy は、柔軟なカスタマイズ性と多様な大規模言語モデル（LLM）への対応が魅力です。

この記事では、bolt.diyのセットアップ方法から基本的な使い方、公式サービスであるBolt.newとの比較、そして利用可能なLLMの一覧まで、網羅的に解説します。

• bolt.diyの紹介画像にある特徴: 複数のLLMサポート、コードのバージョン管理、画像付きプロンプト、ZIPダウンロード、Docker対応、統合ターミナル、活発なコミュニティなどが挙げられています。

bolt.newについて知りたい方はこちr

bolt.diyのセットアップと使用方法

セットアップ手順

bolt.diyをローカル環境で動かすための手順は以下の通りです。

1. リポジトリの入手:
   • GitHubの公式リポジトリ stackblitz-labs/bolt.diy からソースコードを入手します。安定版のZIPファイルをダウンロードするか、git cloneコマンドを使用します。
2. 環境準備:
   • Node.jsのインストール: bolt.diyの実行にはNode.jsが必要です。LTS（長期サポート版）のインストールを推奨します。
   • PNPMのインストール: パッケージマネージャとしてPNPMを使用します。以下のコマンドでグローバルにインストールします。

     npm install -g pnpm
     

   • 依存パッケージのインストール: ダウンロードまたはクローンしたリポジトリのディレクトリ内で、以下のコマンドを実行します。

     pnpm install
     

   • 開発サーバーの起動: 以下のコマンドで開発サーバーを起動します。

     pnpm run dev
     

3. アクセス:
   • 起動後、デフォルトではWebブラウザで http://localhost:5173 にアクセスすると、bolt.diyのUIが表示されます。

Dockerを利用する場合:
Dockerを使えば、ローカル環境への依存を減らしてセットアップすることも可能です。

1. リポジトリをクローンします。
2. 以下のコマンドでDockerイメージをビルドします。

   npm run dockerbuild
   # または
   docker build . --target bolt-ai-development
   

3. 以下のコマンドでコンテナを起動します。

   docker compose --profile development up
   

基本的なセットアップはPNPMを使う方が簡単ですが、環境をクリーンに保ちたい場合はDockerが便利です。

APIキーの設定

bolt.diyでAIモデルを利用するには、各LLMプロバイダーのAPIキーが必要です。
設定方法は2つあります。

1. .env.localファイルを使用する方法:
   • リポジトリ内にある .env.example ファイルをコピーして .env.local という名前に変更します。
   • ファイルを開き、利用したいLLMプロバイダー（OpenAI, Anthropicなど）のAPIキーを記述します。
   • bolt.diyを起動すると、このファイルからAPIキーが自動的に読み込まれます。
2. アプリケーションUIから設定する方法:
   • bolt.diyのUIを開き、ホーム画面上部にあるプロバイダー選択ドロップダウンから利用したいLLMを選びます。
   • 隣にある鉛筆アイコン（編集）をクリックし、APIキーを入力・保存します。
   • ローカルLLMやカスタムエンドポイントの場合: サイドバーの「Settings」→「Providers」タブを開き、該当するプロバイダー（例: Ollama, LM Studio）を選択します。ベースURL（例: http://localhost:11434）など、自分の環境に合わせたAPIエンドポイント情報を設定します。

基本的な使用方法

UIの概要

bolt.diyを起動すると、チャットインターフェースが表示されます。

• 右側: チャット入力欄があり、ここに作りたいアプリや機能の指示を自然言語で入力します。
• 上部: 利用するLLMプロバイダーとモデル（例: Google - Gemini 1.5 Pro）を選択するドロップダウン、APIキー設定アイコンがあります。
• 下部:
  • Import Chat: 以前のチャット履歴をインポートして作業を再開できます。
  • Import Folder: ローカルの既存プロジェクトフォルダを読み込めます。
  • Clone a Git Repo: Gitリポジトリをクローンして開発を開始できます。

プロンプトを使った開発フロー

1. 指示を出す: チャット欄に、作りたいもの（例: 「ReactとTypeScriptでモダンなToDoアプリを作って」）を5〜10語程度の短い指示から始められます。もちろん、詳細な要件を伝えるほど良い結果が得られます。
2. AIが作業: 指示を受け取ったAIエージェント（Bolt）は、プロジェクトのセットアップ、必要なライブラリのインストール（npm install ...など）、コードファイル（Reactコンポーネント、CSSなど）の生成といった作業を自動的に行います。これはStackBlitz社のWebContainer技術により、ブラウザ内でNode.js環境が動作し、AIがそれを操作できるためです。
3. リアルタイム反映: 生成されたコードは仮想ファイルシステムに保存され、プレビュー画面や統合ターミナルに結果がリアルタイムで反映されます。

エージェントによるコード実行と修正

Boltの大きな特徴は、単にコードを生成するだけでなく、生成したコードを実行し、エラーがあれば自動で修正を試みる点です。

• 統合ターミナル: UIにはターミナルが組み込まれており、AIが実行したコマンド（サーバー起動、ビルドなど）のログを確認できます。
• 自律的な修正: コードにエラー（タイプエラー、実行時エラーなど）が発生すると、Boltはそのエラーメッセージを検知し、自ら修正のためのプロンプトを生成してコードを修正しようとします。
• 環境制御: Boltはファイルシステムへの書き込み、Nodeサーバーの起動、パッケージ管理、ターミナル操作などを自動で行えるよう設計されており、アプリ生成からデプロイまで一貫してAIが担当できる可能性があります。

ユーザーの介入と補助

AIがすべてを完璧にこなすわけではありません。ユーザーはチャットを通じて、適宜指示を追加したり、修正を依頼したりする必要があります。

• 共同作業: UIにはファイルツリーとエディタも備わっており、AIが生成したコードをユーザーが直接編集したり、「ここのデザインを変えて」「この機能を追加して」といった具体的な指示をAIに与えたりすることで、人間とAIが協力して開発を進めます。

成果物の保存・デプロイ

開発したプロジェクトは、以下の方法で保存・共有できます。

• ZIPダウンロード: 「Download as ZIP」ボタンでプロジェクト全体をZIPファイルとしてダウンロードできます。
• GitHub連携: プロジェクトをGitHubリポジトリにプッシュする機能があります。
• Netlifyデプロイ: チャットコマンド経由で、直接NetlifyにデプロイしてWeb上に公開できます。（Bolt.newと同様の機能）
• その他サービス連携: Supabase（データベース、認証）やExpo（モバイルアプリ開発）など、外部サービスを利用するコードや設定をAIに生成させることも可能です。「Supabaseでユーザー認証を追加して」のように指示します。

カスタマイズや拡張のポイント

bolt.diyはオープンソースであるため、様々なカスタマイズが可能です。

• LLMプロバイダの追加: bolt.diyの最大の魅力は、利用するLLMを自由に追加・選択できる点です。Vercel AI SDKに対応しているモデルであれば、比較的容易に組み込めます。OpenAI互換APIを提供するサービス（例: Groq）や、Ollama/LM Studio経由でのローカルLLMも利用可能です。社内向けカスタムLLMの統合なども考えられます。
• プロンプトやUIの改良: エージェントの挙動を決めるシステムプロンプトやUIコンポーネントなどを直接編集できます。コミュニティでは、モデルごとに最適化されたシステムプロンプトを切り替える機能などが議論・開発されています。
• 活発なコミュニティ: bolt.diyはコミュニティによって活発に開発が進められています。GitHubでバグ報告や機能要望を出したり、プルリクエストを送って開発に参加したりできます。ドキュメントやフォーラムも整備されており、カスタマイズの情報交換も行われています。

想定ユースケース

bolt.diyは特にフルスタックWebアプリケーションのプロトタイピングや開発支援に役立ちます。

• ゼロからのWebアプリ開発: アイデアを素早く形にしたい時、簡単な指示でプロジェクトの雛形を作成できます。（例: 「Next.jsでレスポンシブなブログサイトを作って」）
• コードリファクタリング・バグ修正: 既存コードの改善（例: 「TypeScriptに書き換えて」）や、エラーログを元にしたバグ修正をAIに任せられます。
• 複数技術の利用: React, Vue, Svelte, Next.js, Node.js, Expressなど、主要なWeb技術に対応。フロントエンドとバックエンドを横断した開発も可能です。
• 学習・スキル向上: AIが生成したコードを読むことで学習したり、分からない点をAIに質問したりできます。新しいフレームワークの学習にも役立ちます。
• アイデア検証・LLM比較: 複数のLLMを切り替えながら同じタスクを実行し、生成されるコードの質、開発スピード、コストなどを比較検討できます。
• オフライン/オンプレミス開発: 機密性の高いプロジェクト向けに、OllamaやLM Studioを使ってローカルLLMと連携させれば、コードを外部に送信することなくAIの支援を受けられます。企業内ツールとしての利用も可能です。

ただし、AIは万能ではありません。複雑なアプリ開発には、ユーザー自身の適切なプロンプト設計能力や開発知識が必要です。AIを「共同開発者」と捉え、人間の指示と創造性を組み合わせることが重要です。

bolt.diy と Bolt.new の違い

bolt.diyは、StackBlitz社が提供するクラウドサービス「Bolt.new」のオープンソース版という位置づけです。両者は似ていますが、重要な違いがあります。

項目	bolt.diy (オープンソース版)	Bolt.new (公式ホスト版)
提供形態	自分のPC/サーバー上で動作 (ローカルアプリ)	StackBlitz社のクラウドサービス (ブラウザでアクセス)
ソースコード	オープンソース (MITライセンス)	クローズド (一部StackBlitz独自技術を含む)
セットアップ	Node.js/PNPMインストールが必要 (Docker利用可)	セットアップ不要 (ブラウザで即利用可能)
利用できるLLM	複数選択可能 (OpenAI, Anthropic, Google, ローカルLLM等)	固定 (Anthropic Claude系モデルが主)
APIキー管理	ユーザーが各プロバイダーのAPIキーを設定	サービス側がモデル提供 (ユーザーはキー不要)
モデル利用コスト	API利用料 (ユーザー契約依存) or ローカル実行無料	トークン制課金 (従量課金、高価になる可能性あり)
オフライン利用	可能 (ローカルモデル使用時)	不可 (インターネット接続必須)
機能拡張性	高い (コード改変や拡張が可能)	低い (提供側のアップデート依存)
主な特徴	コミュニティ主導、LLM選択の自由度、最新モデル対応が早い	セットアップ容易、高性能モデル(Claude 3.5等)利用可、URL共有
想定ユーザー	開発者、カスタマイズしたい上級者、企業導入	初心者、手軽に試したいユーザー、短期プロジェクト
デプロイ/共有	Netlifyデプロイ, ZIPダウンロード, GitHubプッシュ	ブラウザ上でライブプレビュー共有 (URL発行), Netlifyデプロイ等

主な違いのポイント:

• LLMの選択肢: bolt.diyは非常に多くのLLMから選べるのが最大のメリット。Bolt.newは高性能なClaudeモデルに固定。
• コスト: Bolt.newは手軽ですが、トークン課金が高額になる可能性があります。bolt.diyはAPI利用料実費またはローカル実行で無料にできます。
• セットアップ: Bolt.newはブラウザだけで簡単。bolt.diyはローカル環境構築が必要。
• プライバシー: bolt.diyはローカルLLMと組み合わせればオフライン/オンプレミスで機密情報を扱えます。Bolt.newはクラウドサービスのためデータが外部に送信されます。
• 拡張性: bolt.diyはオープンソースなので自由に改造できます。

※Bolt.newの利用には招待制や待機リストがある場合があります。最新情報は公式サイトをご確認ください。

bolt.diyで利用可能なLLM一覧 (2025年初頭時点)

bolt.diyは「好きなLLMを使える」ことを重視しており、非常に多くのモデルに対応しています。

カテゴリ	LLMプロバイダー/モデル	bolt.diyでの対応状況
クラウドAPI型	OpenAI (GPT-3.5/GPT-4)	○ (APIキー設定)
	Anthropic (Claude 1/2/3.5)	○ (APIキー設定)
	Google (Gemini 1.x/2.0)	○ (要APIキー, Flash/Pro対応)
	xAI (Grok)	○ (Beta統合, 要APIキー)
	Hugging Face (各種モデル)	○ (要APIトークン)
	OpenRouter	○ (APIキー設定)
	DeepSeek (R1 他)	○ (APIキー設定)
	Groq (APIサービス)	○ (OpenAI互換APIとして利用)
ローカル実行型	Ollama (LLaMA2, CodeLlama等)	○ (ローカルでOllamaを起動し連携)
	LM Studio (Mistral, Llama2等)	○ (ローカルで起動したモデルに連携)
	Mistral 7B	○ (OpenRouterやHF, ローカル(Ollama/LM Studio)経由)
	LLaMA/CodeLlama 系	○ (Ollama/LM Studio経由)

ポイント:

• クラウドAPI: 高性能なモデルを利用できますが、APIキーと利用料が必要です。
• ローカル実行: OllamaやLM Studioを使えば、自分のPC上でLLMを動かし、無料かつオフラインでbolt.diyを利用できます。GPUがない環境でもCPUで動作する軽量モデルが利用可能です。
• OpenAI互換API: これに対応するサービス（自社製カスタムモデルなど）も設定次第で利用できます。
• コミュニティによる拡張: Together API、Cohere、Vertex AIなど、今後も対応プロバイダーが増える可能性があります。

※対応状況「○」でも、API登録やローカル環境構築はユーザー自身で行う必要があります。
※一部モデル（例: Gemini 2.0系）は安定性に課題が報告されている場合もあります。最新情報は公式リポジトリやコミュニティを確認してください。

まとめ

bolt.diyは、AIを活用した開発を強力に支援するオープンソースツールです。多様なLLMを選択でき、ローカル環境での実行も可能なため、柔軟性、コスト、プライバシーの面で大きなメリットがあります。

セットアップには多少の手間が必要ですが、一度環境を構築すれば、自然言語による指示でWebアプリケーションのプロトタイピングや開発を効率的に進めることができます。

Bolt.newの手軽さも魅力ですが、より深くAI開発エージェントを使いこなし、自分のニーズに合わせてカスタマイズしたい開発者にとって、bolt.diyは非常に強力な選択肢となるでしょう。

ぜひ、bolt.diyを試して、AIとの共同開発体験をあなたのプロジェクトに取り入れてみてください。