今回はAIフルスタック開発で人気のあるBolt.newのOSS版「Bolt.diy」をローカル環境に構築します。
せっかくなのでローカルLLMを使用したアプリ開発にチャレンジしてみようと思います。
Bolt.diyの構築手順は公式ドキュメントを元に進めていくので詳細を確認されたい方はこちらを参考にしてください。
ローカルLLMは筆者の環境ではGPUがないため、CPUで動かすことができる「LMStudio」を使用します。LMStudioのインストール手順については割愛します。
Bolt.diyとは？
Bolt.diy は AI を活用した Web 開発エージェントで、ブラウザから直接フルスタック アプリケーションをプロンプト、実行、編集、デプロイが可能です。
https://stackblitz-labs.github.io/bolt.diy/
環境
- Windows11（RAM 32GB）
- Docker Desktop
- LMStudio
- bolt.diy（v0.0.3）
環境構築
1. LMStudioの起動
LMStudioを起動し、モデルをセットします。今回は「Llama3-Elyza」で試してみます。
CORSを有効化し、「Start Server」で起動しましょう。
2. リポジトリのクローン
Bolt.diyのリポジトリをクローンします。
git clone -b stable https://github.com/stackblitz-labs/bolt.diy
3. LMStudioのURLを設定
.env.localを作成し、LLMStudioのURLを設定します。LMStudioを使用せず、OpenAI等を使用したい場合はそれぞれのAPIキーを設定してください。
cd bolt.diy
cp .env.example .env.local
ホスト上のLMStudioと接続するため、host.docker.internalを指定します。
# Get LMStudio Base URL from LM Studio Developer Console
# Make sure to enable CORS
# Example: http://localhost:1234
LMSTUDIO_API_BASE_URL=http://host.docker.internal:1234
3. build & 起動
続いて以下のコマンドでbuildを実行してください。
docker build . --target bolt-ai-development
buildが正常に終了しましたら、以下のコマンドで起動しましょう！
docker-compose --profile development up -d
以下のメッセージが出力されればOKです。
[+] Running 2/2
✔ Network boltdiy_default Created 0.2s
✔ Container boltdiy-app-dev-1 Started
ブラウザからhttp://localhost:5173/にアクセスするとbolt.diyの画面が表示されます。
4. Bolt.diyをローカルLLMで動かしてみる
では、ローカルLLMでbolt.diyを動かしてみましょう。
プルダウンから「LMStudio」を選択して作りたいアプリを入力します。モデルは指定しなくてもLMStudioでセットされたモデルが使用されます。
今回は簡単な電卓アプリが作れるか試してみましょう。
ローカルLLMが頑張って出力しているのをPCファンの音で実感をしつつ、じっくり待っているとなんとかそれっぽいのを作ってくれました。
viteで作ってくれたのでnpm installとnpm install -D viteをTerminalから実行して準備完了！
早速動かしてみます。
ちょっと想像してた電卓とは違いますが、とりあえず計算してくれるアプリが作れたようです。
ちなみに計算してみたら画面遷移して真っ白な画面が表示されました笑
5. まとめ
今回はローカルでbolt.diyを構築し、ローカルLLMで動かすというローカル尽くしの構成でチャレンジしてみました。
実用性があるかと言われると正直首をかしげるところではありますが、楽しくチャレンジすることができました。
bolt.diyのプロンプトやLMStudio側の設定次第では、精度を上げられるかもしれませんので引き続き検証していきたいと思います。