はじめに
こんにちは。虎の穴ラボNSエンジニアのHoshiです。
今回は以前2024年アドベントカレンダーで投稿した記事である、Bolt.newとは？AIで簡単に作るWebアプリで紹介したBolt.newの公式OSS版であるBolt.diyをローカルで動かしてみた実践を紹介したいと思います。
目次
Bolt.newとは
Bolt自体の紹介は以前投稿したBolt.newとは？AIで簡単に作るWebアプリに記載がありますので割愛いたします。
Bolt.diyの構築
前提環境
- Windows11
- Node.js（v20.15.1以上）
- pnpm（v9.4.0以上） WSL2を使用してUbuntu環境で操作しています
構築
Ollamaをインストール
Docker版でのインストールなどは、弊社iwadyが執筆した下記ブログで紹介があります。 toranoana-lab.hatenablog.com
今回はWSL内でOllamaをインストールします。
curl -fsSL https://ollama.com/install.sh | sh
使用するモデルの取得
次に使用するモデルを取得します。下記のコマンドで取得が可能です。
ollama pull [モデル]
今回は例としてllama3.2を取得します。
ollama pull llama3.2
Ollamaで取得できるモデルは下記サイトを参照ください。パラメータ名なども指定することが可能です。 ollama.com
Ollamaの実行
実際にOllamaでモデルを指定して実行します。
先ほど取得したllama3.2を実行します。
ollama run llama3.2
実行されているかの確認は下記URLへアクセスすることで可能です。
実行されていればOllama is runningと出力されるはずです。
curl http://127.0.0.1:11434
Bolt.diyをgit cloneしてくる
やっとBolt.diyソースの取得です。今回は安定版であるstableブランチで構築します。
git clone -b stable https://github.com/stackblitz-labs/bolt.diy.git
.env.localファイルの作成
pullしてきたリポジトリ内に.env.exampleファイルが存在するので、コピーして.env.localファイルを作成します。
cp .env.example .env.local
そして立ち上がっているOllamaのURLを.env.localファイルに指定します。
# You only need this environment variable set if you want to use oLLAMA models # DONT USE http://localhost:11434 due to IPV6 issues # USE EXAMPLE http://127.0.0.1:11434 OLLAMA_API_BASE_URL=http://127.0.0.1:11434
.env.localファイルには他にも様々なLLMのAPIキーを指定することで、後述する設定UIで使用するLLMの選択が可能です。
Bolt.diyの実行
いよいよBolt.diyを実行します。
git cloneしてきたルートディレクトリで以下のコマンドを実行して立ち上げます。
pnpm install pnpm run dev
ここまででローカルにサーバーが立ち上がります。任意のブラウザでhttp://localhost:5173/にアクセスしてみてください。
動かしてみる
機能などは後述しますがとりあえず動かしてみましょう。
プロンプトの入力欄の上にLLMの選択と使用するモデルを選択するドロップダウンがあります。
今回使用するLLMはOllamaで、モデルは前述のllama3.2を使用します。
あとはプロンプトを入力していざ動かします！
プロンプトのサンプルがTOPに用意されているのでそちらを使用してみます。
Build a todo app in React using Tailwind
上記をクリックでプロンプトが実行されます。
ローカルLLMであるOllamaはCPUやメモリを多く消費します。
さて、実行結果は…
あれ。プレビューが表示されませんね。
画面左の実行履歴も途中で終わっています。
Bolt.diyのログには下記のように出力されているので、Ollamaから返答が返ってきてはいます。
トークンの上限が指定されており、使い切ってしまったのでしょうか。
INFO stream-text Sending llm call to Ollama with model llama3.2:latest
DEBUG Ollama Base Url used: http://127.0.0.1:11434
DEBUG api.chat usage {"promptTokens":4815,"completionTokens":8000,"totalTokens":12815}
一旦Geminiに切り替えて実行してみましょう。
TOP画面でGemini 2.0 Flashを選択して同じプロンプトで実行してみます。
使用する場合はGoogle AI StudioからAPIキーを取得して.env.localファイルに記述して再度Bolt.diyを起動します。
今度はプレビューまで表示されました。
使用するLLMやモデルに大分左右されますね。
Bolt.diyの機能
画面左上のロゴ横の四角のマークにマウスをホバーすることで開くことができるメニューの下の方に設定を開く歯車マークがあります。
その設定から様々な機能が使えますが、主な機能を紹介します。
Cloud Providers
「Cloud Providers」から使用するクラウドLLMの設定が出来ます。
もちろんAPIキーが必要なプロバイダは、キーを取得後に先ほど作成した.env.localファイルに設定する必要があります。
ここでONにしたプロバイダがプロンプト入力画面で選択できるようになります。
Local Providers
「Local Providers」から使用するローカルLLMの設定が可能です。Ollamaもここですね。
OllamaはAPIキーが必要ないので、.env.localに指定したURLが設定されています。
このGUIから設定が上書きもできます。
その他Ollamaのモデルのインストールやアップデートも可能なUIが用意されています。
（今回はCUIでインストールなどを行いましたので使用していませんが…）
他にも設定が可能な機能がありますが、主に使用するプロバイダの選択や設定が可能な箇所を紹介しました。
まとめ
今回はBolt.diyをOllamaで動かしてみた実践を紹介しました。
自分の環境ではllama3.2での生成がうまくいかなかったですが、ローカルLLMは設定画面で「BETA」と表示されているようにまだベータ版の機能なようです。
他のモデルでもうまくいくのか今後試してみたいと思います。
ローカルPCでLLMを起動させるためマシンの負荷等もありますが、ローカルで完結するAIシステムができるのは希望を感じます。
クラウドのAIでハイスペックなモデルを使用したほうが安定した結果は得られるようですが、AIの発展は目覚ましいものがあるのでこれからに期待したいです。
採用情報
虎の穴ラボでは一緒に働く仲間を募集中です！
この記事を読んで、興味を持っていただけた方はぜひ弊社の採用情報をご覧ください。
toranoana-lab.co.jp
