Bolt.diy初体験

Bolt.newを使っていますが、有料プランを思うように使うことができず、歯がゆい思いをしていました。
先日bolt.newのフォークで、ローカル環境で使えるbolt.diyを知りました。
早速リポジトリにアクセスして、試しました。

https://github.com/stackblitz-labs/bolt.diy?tab=readme-ov-file

リポジトリのクローンを作りました。
私は、Windowsの環境で始めたので、Dockerを使い起動しました。

こちらで、Dockerのビルドを始めました。
```
npm run dockerbuild       # Development build  
```
こちらのコマンドで、起動しました。
```
docker-compose --profile development up  # Development 
```
起動した画面で、LLMのAPIキーを入力する画面になりました。
LLMを選ぶプルダウンメニューの中に、LM Studioの文字があったので、すごいと思いました。
![スクリーンショット 2024-12-14 131216.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/272fff43-da31-672f-a81d-ca7fbbef8ab6.png)

ターミナルに、この表示が出ました。
```
★═══════════════════════════════════════★
app-dev-1  |           B O L T . D I Y                                                                                                                                
app-dev-1  |          ⚡️  Welcome  ⚡️                                                                                                                                 
app-dev-1  | ★═══════════════════════════════════════★                                                                                                                
app-dev-1  |                                                                                                                                                          
app-dev-1  | 📍 Current Commit Version: ****************************                                                                                      
app-dev-1  | ★═══════════════════════════════════════★                                                                                                                
app-dev-1  | [warn] Route discovery/manifest behavior is changing in React Router v7                                                                                  
app-dev-1  | ┃ You can use the `v3_lazyRouteDiscovery` future flag to opt-in early.
app-dev-1  | ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_lazyRouteDiscovery                                                                           
app-dev-1  | ┗                                                                                                                                                        
app-dev-1  | [warn] Data fetching is changing to a single fetch in React Router v7                                                                                    
app-dev-1  | ┃ You can use the `v3_singleFetch` future flag to opt-in early.
app-dev-1  | ┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_singleFetch
app-dev-1  | ┗
app-dev-1  |   ➜  Local:   http://localhost:5173/
app-dev-1  |   ➜  Network: http://172.19.0.2:5173/
```
OllamaのLLMは、APIKEYが不要と書かれていました。
でも、ローカルにダウンロードしないといけないようです。
![スクリーンショット 2024-12-14 132524.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/510bef16-b881-3185-3ec6-9320e4cc11db.png)

Windows版をインストールしました。
https://ollama.com/download

Powershellで、確認しました。
```
PS C:\Users\hoge> ollama --version
ollama version is 0.5.1
```
Windowsのタスクバーに、Ollamaのアイコンが表示されますので、そこから起動、停止を操作できます。
![スクリーンショット 2024-12-14 161851.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/d180889a-0d52-9e91-b26c-605b2a6a95b8.png)


Modelのダウンロードが、必要です。
```
PS C:\Users\hoge> ollama run llama2
```
ヘルプを確認しました。
```
PS C:\Users\hoge> ollama
Usage:
  ollama [flags]
  ollama [command]

Available Commands:
  serve       Start ollama
  create      Create a model from a Modelfile
  show        Show information for a model
  run         Run a model
  stop        Stop a running model
  pull        Pull a model from a registry
  push        Push a model to a registry
  list        List models
  ps          List running models
  cp          Copy a model
  rm          Remove a model
  help        Help about any command

Flags:
  -h, --help      help for ollama
  -v, --version   Show version information
  ```
  下記のURLにアクセスすると、起動確認ができます。
  http://localhost:11434/ 
  Ollama is running　と表示されたら、起動できています。

### Modelのインストールできました。
```
PS C:\Users\hoge> ollama run llama2
pulling manifest
pulling 8934d96d3f08... 100% ▕████████████████████████████████████████████████████████▏ 3.8 GB
pulling 8c17c2ebb0ea... 100% ▕████████████████████████████████████████████████████████▏ 7.0 KB
pulling 7c23fb36d801... 100% ▕████████████████████████████████████████████████████████▏ 4.8 KB
pulling 2e0493f67d0c... 100% ▕████████████████████████████████████████████████████████▏   59 B
pulling fa304d675061... 100% ▕████████████████████████████████████████████████████████▏   91 B
pulling 42ba7f8a01dd... 100% ▕████████████████████████████████████████████████████████▏  557 B
verifying sha256 digest
writing manifest
success
>>> Hello
Hello there! How are you today?

>>> Send a message (/? for help)
```
Modelのインストールがきたら、そのままターミナルで、会話できました。

```
Use Ctrl + d or /bye to exit.
```
で、会話を終えることができます。

Modelのインストールしたら、モデルを選べるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/b088cde0-e37d-ef5f-fa33-65b091df038b.png)

```
ollama run llama2
```
でインストールしたモデルは、システムのメモリが18GB必要でした。
私は、12GBしか利用できないので、エラーになってしまいました。

```
PS C:\Users\hoge> ollama run llama3.2
```
llama3.2の３Bで、使えました。
私のパソコンは、RAM16GB、RTX3060のノートパソコンなので、VRAMは6GBです。
日本で、指示できました。


![スクリーンショット 2024-12-14 161142.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/600f1100-4888-b715-0ac5-0d30a5d655a4.png)


## Google APIKEYで使うことができました
私は、OpenAIなどのAPI KEYの料金の心配があり、API KEYを使いづらい心境です。
それで、無料で使える Google API KEYを試しにセットしたら、Google Gemini2.0 flashで使うことができました。

  ![スクリーンショット 2024-12-14 141859.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/7dcaff86-f25c-d966-5e9e-3e360cb0aa63.png)

## API KEYを得ることができないときは
API KEYを得ることができないときは、llama3.2の３BのModelを使うと良いかもしれないです。
ターミナルでは、なぜか下記のエラーが出ました。
```
 responseBody: '{"error":"model \\"claude-3-5-sonnet-latest\\" not found, try pulling it first"}',
 ```
 私は、bolt.diyを起動したままModelを入れ替えていたので、反映されなかったかもしれないです。
 でもページを再読み込みしたら、スクリーンショットのようにコードを生成できました。
 
## 補足
もし、一度ビルドした後にエラーが出たときは、このコマンドの実行が必要かもしれません。
```
docker build -t bolt-ai:development .
```
Docker Scout CLIの新しいバージョンがリリースされているという通知が出たときに、このコマンドの実行が必要になります。

## 追記
私は、LMStudioを試したいと思いました。
パソコンのメインメモリが16GBということもあり、DockerとLMStudioの両方を起動することに不安でした。
それで、WSLを利用して、bolt.diyを起動して、LMStudioを使おうとしました。
でも、Dockerを使わない形のbolt.diyでは、LM Studioを使うとエラーが出てしまいました。
Githubで、質問しています。
https://github.com/stackblitz-labs/bolt.diy/issues/821

そのためDockerで起動して、LMStudioを使うことにしました。
LMStudioでは、CORSを有効しました。
そして、ローカルネットワークでサービングをONにしました。
発行されたURLを.env.localと.env.exampleの両方に設定して、Dockerのビルドからやり直しました。
そうしたら、LMStudioのModelを使うことができました。
![スクリーンショット 2024-12-18 235018.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/af445817-33ee-6aac-1725-7e8a971b3170.png)

今回トークン数が4096では足りないとLMStudioのサーバーでエラーになりましたので、画像のように、トークン数を増やしました。
![スクリーンショット 2024-12-18 235721.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/f7f4e47e-fd45-26f4-9a46-8b65e909d5d3.png)

## WSLでも使えました
2024年12月19日repositoryのクローンを作り直しました。
そして/root/WSL-boltdiy/bolt.diy/.env.exampleのファイルに、LM Studioのサーバーの「ローカルネットワークでサービング」をONにして発行されたURLをセットしました。
そして、/root/WSL-boltdiy/bolt.diy/.env.localと名前を変えて保存しました。

```
# Get LMStudio Base URL from LM Studio Developer Console
# Make sure to enable CORS
# Example: http://localhost:1234
LMSTUDIO_API_BASE_URL=http://***.***.***.***:1234

```


このあと下記のように、インストールのあと起動したら、bolt.diyを使うことができました。

```
pnpm install  

root@MSI:~/WSL-boltdiy/bolt.diy# pnpm run dev  

> bolt@0.0.3 dev /root/WSL-boltdiy/bolt.diy
> node pre-start.cjs  && remix vite:dev


★═══════════════════════════════════════★
          B O L T . D I Y
         ⚡️  Welcome  ⚡️
★═══════════════════════════════════════★

📍 Current Commit Version: eb6d4353565be31c6e20bfca2c5aea29e4f45b6d
★═══════════════════════════════════════★
 warn  Data fetching is changing to a single fetch in React Router v7
┃ You can use the `v3_singleFetch` future flag to opt-in early.
┃ -> https://remix.run/docs/en/2.13.1/start/future-flags#v3_singleFetch
┗
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
WARN Constants Failed to get Ollama models:  fetch failed
10:37:06 AM [vite] ✨ new dependencies optimized: remix-island, ai/react, framer-motion, node:path, jszip, file-saver, @octokit/rest, date-fns, @radix-ui/react-dialog, react-resizable-panels, istextorbinary, diff, @codemirror/autocomplete, @codemirror/commands, @codemirror/language, @codemirror/search, @codemirror/state, @codemirror/view, @radix-ui/react-dropdown-menu, @radix-ui/react-context-menu, react-markdown, @uiw/codemirror-theme-vscode, @codemirror/lang-vue, @codemirror/lang-javascript, @codemirror/lang-html, @codemirror/lang-css, @codemirror/lang-sass, @codemirror/lang-json, @codemirror/lang-markdown, @codemirror/lang-wast, @codemirror/lang-python, @codemirror/lang-cpp, rehype-raw, remark-gfm, rehype-sanitize, unist-util-visit, shiki, @xterm/addon-fit, @xterm/addon-web-links, @xterm/xterm, @radix-ui/react-switch
10:37:06 AM [vite] ✨ optimized dependencies changed. reloading
The file does not exist at "/root/WSL-boltdiy/bolt.diy/node_modules/.vite/deps/chunk-TF2QXV2V.js?v=071e51fb" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`.
WARN Constants Failed to get Ollama models:  fetch failed
WARN Constants Failed to get Ollama models:  fetch failed
usage { promptTokens: NaN, completionTokens: NaN, totalTokens: NaN }
```