見出し画像

Bolt.newのOSSバージョン「Bolt.diy」をローカルで動作させてみる

アイドリ | AI-Driven Lab

近年、ブラウザ上でAIを活用してフルスタックなWebアプリケーションを開発できる環境が注目を集めています。その中でも「Bolt.new」は、AIがファイルシステムやターミナル、ブラウザコンソールまで制御し、コード生成からデプロイまでを一気通貫で行える革新的なプロジェクトとして話題です。そして、Bolt.newのオープンソース版である「Bolt.diy」は、より自由度の高いAI駆動開発環境をローカルで構築することができます。本記事では、Bolt.newとBolt.diyの概要から、実際にBolt.diyをローカルで動かす手順、そしてその使い心地までを詳しく解説します。


Bolt.newとは？

Bolt.newは、AIモデルとブラウザ内のフルスタック開発環境を統合した、これまでにないWeb開発体験を提供するプロジェクトです。
これまでのAIアシスタント（たとえばチャットベースのLLMツール）は、コード生成のみを支援してくれる一方で、実際の環境制御（パッケージのインストール、バックエンド起動、コードの再編集、デプロイなど）はユーザーが手動で行う必要がありました。

しかしBolt.newでは、WebContainersによるブラウザ内仮想開発環境と統合されたAIが、ファイル編集からnpmパッケージのインストール、Node.jsサーバー起動、サードパーティAPI接続、さらには本番デプロイまで自動的にこなすことが可能です。

Bolt.diyとは？

「Bolt.diy」は、Bolt.newのオープンソース版であり、ローカル環境で自由にカスタマイズしながら動かせるバージョンです。特に、使用するLLM（大規模言語モデル）を自由に選択できる点が大きな特徴です。OpenAI、Anthropic、Ollama、OpenRouter、Gemini、LMStudio、Mistral、xAI、HuggingFaceなど幅広いモデルがサポートされており、Vercel AI SDKを通じて新たなモデルを追加することも容易です。

Bolt.diyの特徴

  • 使用可能なモデルの選択自由度: OpenAIやAnthropicなどのクラウドベースモデル、Ollamaなどのローカルモデル、さらには独自拡張モデルまで、好みのLLMを利用可能。

  • フルスタックな環境制御: Bolt.new同様、ファイル操作、ターミナルコマンド実行、パッケージ管理、サーバー起動などをAIエージェントが制御可能。

  • 拡張性とコミュニティベースの発展: 多数の機能要望がオープンリスト化されており、誰でも自由にコントリビュートできます。

なぜBolt.diyを使うのか？

  • 自分のローカル環境でBolt.new相当のAIドリブンな開発体験を得たい

  • OpenAIやAnthropic以外のカスタムモデルやローカルモデルを試したい

  • 開発フローの一部を自動化し、生産性を飛躍的に向上させたい

こういったニーズがある方にBolt.diyは最適です。

Bolt.diyをローカルで動かしてみる手順

以下は、Bolt.diyをローカルでセットアップするための手順です。
参考元のREADME情報を整理してご紹介します。

前提条件

  • Gitのインストール

  • Node.jsのインストール

    • Node.jsインストール後、パスの設定などを確認してください。Unix系OSならecho $PATHで/usr/local/binが入っていることを確認します。

リポジトリのクローン

まずは公式GitHubリポジトリbolt.diyをクローンします。

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

環境変数の設定

bolt.diyディレクトリ直下にある.env.exampleをコピーし、.env.localという名前に変更します。

cp .env.example .env.local

.env.local内で使用するLLMのAPIキーを設定します（必要なもののみ設定）。

例：

GROQ_API_KEY=XXX
OPENAI_API_KEY=XXX
ANTHROPIC_API_KEY=XXX
GOOGLE_GENERATIVE_AI_API_KEY=XXX

依存関係のインストール

pnpm install

もしpnpmが見つからない場合は、以下でグローバルインストールします。

npm install -g pnpm

ローカル開発サーバーの起動

pnpm run dev

これで開発用サーバーが起動します。出力の中に、以下のように「Local: http://localhost:5173/」とアドレスが表示されるので、そこにGoogle Chromeでアクセスしてください。

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

そうすると、以下のような画面が表示され、使用準備が整います。

Bolt.diyの初期設定

設定画面を開く

設定画面を開き、Bolt.diyのシステム設定を行います。

まず、左上のアイコンにマウスオーバーします。

そうすると、左サイドバーが開きます。次に左サイドバーの左下にある歯車マークをクリックします。

システム設定画面が開きます。

使用するプロバイダー(LLM)の有効化

次に使用するプロバイダーを有効化します。ここで有効化することで、トップページから有効化したプロバイダーを選択することができます。

まず、設定画面の「Providers」を選択します。

次に有効化するLLMを選択します。今回は、Google Geminiを使いたいので、「Google」を有効化します。下図では、「Anthropic」も有効化していますが、バグがあるようで、Googleのみを有効化すると、トップページで選択できるAPIが何故かAnthropicのものになります。そのバグを避けるため、Anthropicも有効化しています。

GitHubアカウントの設定

GitHubアカウントの設定をすることで、開発したアプリのソースコードをBolt.diyから直接GitHubにプッシュすることができるようになります。

まず、設定画面の「Connection」をクリックします。

次に表示された画面の「GitHub Username」と「Personal Access Token」を入力します。トークンはGitHub上で発行することができます。

トークンを発行する際の権限設定に関しては、「Repository permissions」に以下の権限設定を行なってください。

Bolt.diyの使用

プロンプトを入力して簡単なアプリ開発をしてみる

それでは、実際のBolt.diyで簡単なアプリ開発をしてみましょう。今回は、GoogleのGemini 2.0 Flushを使います。トップページ中央の左側のドロップダウンリストから「Google」を選択し、その右側のドロップダウンリストから「Gemini 2.0 Flush」を選択します。

次に以下のプロンプトを入力して実行します。

Next.jsでToDoアプリを開発してください。

そうすると、以下のように自動でプロジェクトの作成、ライブラリのインストール、コーディング、ビルドと実行を始めます。

最終的に以下のようなToDoアプリが完成しました。今回は簡易的な指示のため、アプリの機能も簡素になっています。

GitHubリポジトリの作成とコミット

作成したアプリのプロジェクトは、GitHubリポジトリにプッシュすることができます。リポジトリの作成から行なってくれるので、事前にリポジトリを用意することもありません。

コード画面で右上の「Push to GitHub」をクリックします。

リポジトリ名を入力し、「OK」をクリックします。既に存在するリポジトリにプッシュしたい場合は、そのリポジトリ名をここで入力します。

無事にプッシュが完了すると、以下のようなメッセージが表示されます。

Bolt.diyを使ってみた感想

Bolt.diyは、通常のLLMと異なり、指示を出すとライブラリのインストールからアプリの実行まで、一連の処理を自動で行ってくれるため、非常に便利ですが、SaaSとして提供されている最新のBolt.newと比べると、いくつか機能が足りていないようです。例えば、エラーが発生した際に、そのエラー内容がメッセージ欄に自動で表示され、Fix errorボタンを押すだけでそのエラーの解消に動いてくれる機能です。他にもSupabaseに直接接続する機能もないので、現状はBolt.newの方が多機能ですが、OSSとして登場したばかりなので、今後の発展が楽しみですし、このような素晴らしいソフトウェアがOSSとして公開してくれることに感謝です。


いいなと思ったら応援しよう！