ローカルLLMでbolt.newを動かしてみた

はじめに

どんな人向けの記事？

• 生成AIやローカルLLMに興味のある方
• OSS版bolt.newに興味のある方
• ローカルLLMの性能に興味のある方

実行環境

1. Mac Studio（M2 Ultra 128GB） # ollamaサーバ
2. Ubuntu 24.04.1 LTS (Core i5-8400 + メインメモリ 16GB) # bolt.new実行サーバ

概要

今回の記事では、ローカルLLMを用いてOSS版のbolt.newを動かしてみようと思います。目的としては、下記のとおりです。

• 何がすごいのかまったく理解できなかったbolt.newについて少しでも理解する
• bolt.newの実行結果を通じてローカルLLMの現在地を知る

そもそもbolt.newとは何なのかが気になる方は、例えば下記の記事などを参考にしてください。

https://zenn.dev/tsuruo/scraps/b76f5914f53a4b

背景

私はtypescriptのコーディングやweb開発などの経験がなく、正直v0や今回のbolt.newなどが何の役に立つかすらよくわかっていませんでした。この記事を書いている今でさえ、5%も理解できていないと思います。

ではなぜ私がbolt.newに触れてみようかと思ったかというと、理由は2つあります。

1. Xの生成AI界隈で話題になっていたから。→これだけなら興味があることしか追わない。
2. OSSとして公開されており、ローカルLLMが使えそうだったから。

というわけで、「ローカルLLMを使って、今まで自分にできなかったことが出来るようになりそうなら、とりあえず挑戦してみる」という信念でbolt.newを触ってみることにしました。

ollama対応リポジトリ

まず、ホーダチさんが公式のリポジトリからフォークしたbolt.new-multiLLMを公開されています。

https://x.com/hokazuya/status/1843466194143326422

そして、さらにこれをM.Aさんがフォークしてollamaで使えるようにしたものが下記のリポジトリになります。

https://github.com/Tomatio13/bolt.new-multiLLM

今回はこちらを使用させていただきました。
M.Aさんの下記のポストから、ollamaを使ってbolt.newが動作するリポジトリの存在を知りました。

https://x.com/Masato13/status/1845080662954606959

実は最初、ollamaでbolt.newがうまく機能してくれないという問題が発生しました。その後、M.Aさんに色々とアドバイスをいただくことで、ようやくローカルLLMを用いてbolt.newを動かせるようになったという経緯があります。M.Aさん、本当にありがとうございました！

導入

導入自体は簡単で、基本的にはリポジトリのREADMEに記載されている通りに進めればよいです。

1. リポジトリからgit cloneする
   $ git clone https://github.com/Tomatio13/bolt.new-multiLLM.git
2. $ pnpm install
   • pnpmがインストールされていない場合は公式ドキュメントを参考にしてください。
3. .env.localの作成

.env.local

OPENAI_API_KEY=<YOUR OPENAI API KEY>
ANTHROPIC_API_KEY=<YOUR ANTHROPIC API KEY>
OLLAMA_BASE_URL=http://localhost:11434/v1/
VITE_LOG_LEVEL=debug

4. app/llms.jsonの作成

[
    {
        "provider": "anthropic",
        "model": "claude-3-5-sonnet-20240620",
        "capt": "Claude 3.5"
    },
    {
        "provider": "openai",
        "model": "gpt-4o",
        "capt": "OpenAI GPT-4o"
    },
    {
        "provider": "ollama",
        "model": "deepseek-coder-v2:16b",
        "capt": "deepseek-coder-v2"
    },
    {
        "provider": "ollama",
        "model": "7shi/ezo-gemma-2-jpn:2b-instruct-q8_0",
        "capt": "ezo-gemma-2-jpn"
    }
]

5. ビルド
   $ pnpm run build

6. 起動
   $ pnpm run start

はじめbolt.newはMac上で動かしていたのですが、権限の問題かファイルを生成できない、という問題が発生したため、今はUbuntu上でbolt.newを実行しています。一方、ollamaはMac上で動かしていたのでOLLAMA_BASE_URLは下記のように変更しています(macの部分はollama serverアドレス)。
OLLAMA_BASE_URL=http://mac:11434/v1/

これで、bolt.newが起動できたと思います。Webブラウザでhttp://localhost:8788/にアクセスして、下記のような画面が表示されたらOKです！

早速使ってみる

今回はコーディングがメインの用途になるため、基本的にAiderのCode editing leaderboardに記載のモデルを中心に試してみようと思います。

https://aider.chat/docs/leaderboards/

具体的には下記のとおりです。

• Anthropic
  • claude-3-5-sonnet-20240620
• OpenAI
  • gpt-4o-2024-08-06
• Ollama（ローカルLLM）
  • Dracarys2-72B-Instruct（Q4_K_M）
  • qwen-2.5-72b-instruct（Q8_0）
  • Mistral-Large-Instruct-2407（Q4_K_M）
  • qwen-2.5-32b-instruct（Q8_0）
  • gemma-2-27B-it（Q8_0）
  • gemma-2-9B-it-SimPO（fp16）
  • Yi Coder 9B Chat（fp16）
  • qwen2.5-coder:7b-instruct（fp16）

ollamaのモデルを使う際の注意点として、デフォルトの設定ではコンテキストウィンドウサイズが2048となっており、Bolt.newのシステムプロンプト（3000超）に耐えられない（一部の情報が失われる）というのがあります。そのため、Bolt.newでollamaのモデルを使用する際は、Modelfileのnum_ctxのサイズを十分大きくする必要があります。

また、私が試したときはnum_ctxを大きくしてもシステムプロンプトを認識しなかったため、苦肉の策としてソースコード（app/lib/.server/llm/stream-text.ts）を一部修正してシステムプロンプトをuserプロンプトに埋め込んで渡すように修正しました。具体的には下記のとおりです。

app/lib/.server/llm/stream-text.ts

  // console.log('system:' + getSystemPrompt())
  // console.log('message: '+messages)
+  const mergedMessages = [{
+    role: 'user',
+    content: [
+      `# system prompt\n${getSystemPrompt()}`, // systemプロンプトの内容をフォ
ーマット
+      ...convertToCoreMessages(messages).map(message => `# user prompt\n${message.content}`) // userメッセージをフォーマット
+    ].join('\n\n') // 2行の間に空行を挿入
+  }];
  return _streamText({
    model: getOllamaModel(model, getOllamBaseUrl(env)),
    maxTokens: MAX_TOKENS,
-    messages: [...convertToCoreMessages(messages), { role: 'system', content: getSystemPrompt() }],
+    messages: mergedMessages,
    headers: {},
    ...options,
  });
}

（参考）システムプロンプト

https://github.com/Tomatio13/bolt.new-multiLLM/blob/main/app/lib/.server/llm/prompts.ts

お題

お題は無数に考えられるのですが、今回はM.Aさんがポストされていたお題「Next.jsを使ってMermaidの記述・プレビューができるMarkdownエディタを作って下さい。」で試すことにしました。それぞれのモデルの実行結果を下記にまとめます。

Claude 3.5 Sonnet

1回目はエラーが出たものの、一度エラーメッセージをプロンプトに入れてデバッグを依頼することで所望の動作をするアプリを作成できました。bolt.newのデフォルトで使われている言語がClaude 3.5 Sonnetである理由も納得がいきました。

GPT-4o

GPT-4oはmarkdownの記述・プレビュー機能はできましたが、mermaidのプレビュー機能のところでエラーが出ました。

デバッグを試みましたが、1往復では解決しませんでした。ローカルLLM含め、時間の都合上2往復以上試すのはやめておきます。

Dracarys2-72B-Instruct（Q4_K_M）

Dracarys2-72B-InstructはQwen2.5-72B-Instructをコーディング向けにFTしたモデルのようです。
ファイルの生成はされましたが、残念ながら自動で実行してくれなかったです。

コンソールを自分で開いてnpm installを実行してみたもののエラーで実行できませんでした。エラーを修正するように依頼しても解決せず。ちなみに、エラーメッセージをコピペしてGPT-4oに聞いたらこのエラーに関しては解決できそうでしたが、ローカルLLMとは？という疑問が湧き、実用的とは言い難い状況でした。

qwen-2.5-72b-instruct（Q8_0）

Dracarys2-72B-Instructと同じような結果でした。まあ、Dracarys2-72B-Instructがqwen-2.5-72b-instructをベースにしているので、当然といえば当然ですね。

エラーメッセージもDracarys2-72B-Instructとほぼ同じ。

Mistral-Large-Instruct-2407（Q4_K_M）

チャット欄にはコードを記載していますが、ファイル群を自動生成してくれなかったです。

qwen-2.5-32b-instruct（Q8_0）

こちらは意外なことに、ファイル生成をした上でnpm installまでは実行できました。ただし、コンパイルでエラーが出ました。

このケースに限らず、ローカルLLMでエラーが出た場合自己解決は基本難しそうな印象です。エラーの大半はライブラリ関係で、文法というよりパッケージやバージョン情報が必要だからです。

gemma-2-27B-it（Q8_0）

こちらもファイルの生成からnpm installまではできました。

ただし、コンパイルに失敗してPreviewは表示されず。

gemma-2-9B-it-SimPO（fp16）

ファイル群の生成はできたものの、npm installに失敗。

Yi Coder 9B Chat（q8_0）

ファイル群の生成ができず。

qwen2.5-coder:7b-instruct（fp16）

こちらはなんと反復無しでファイル群の生成、npm installのみならず、コンパイルおよびプレビュー画面の表示までできました！ただし、markdownのプレビューが出来るもののmermaidのプレビューに失敗するという感じです。

各モデルの出力まとめ

一例のみかつ一発勝負の検証ですが、今回の出力結果をまとめると以下の通りです。

モデル名	パラメータ サイズ	精度	ファイル群生成	'npm install'	Preview	所望のアプリが 作れたか？
claude-3-5-sonnet-20240620	N/A	N/A	○	○	○	○
gpt-4o-2024-08-06	N/A	N/A	○	○	○	☓
Dracarys2-72B-Instruct	72B	Q4_K_M	○	☓	☓	☓
qwen-2.5-72b-instruct	72B	Q8_0	○	☓	☓	☓
Mistral-Large-Instruct-2407	123B	Q4_K_M	☓	☓	☓	☓
qwen-2.5-32b-instruct	32B	Q8_0	○	○	☓	☓
gemma-2-27B-it	27B	Q8_0	○	○	☓	☓
gemma-2-9B-it-SimPO	9B	fp16	○	☓	☓	☓
Yi Coder 9B Chat	9B	fp16	☓	☓	☓	☓
qwen2.5-coder:7b-instruct	7B	fp16	○	○	○	☓

知見・所感など

• リリースされてからすでに4ヶ月近く経っているのにこの安定感。さすがはClaude 3.5 Sonnet。今回はお題がNext.jsを用いたアプリ開発なので、Claudeの得意分野だったという認識です。

• ローカルLLMの結果は、かなり予想と反する結果になりました。

  • パラメータサイズが大きいモデルはnpm installにすら到達しない一方で、より小型なモデルが先のフェーズに進んでいる。
  • この中で一番小型なqwen2.5-coder:7b-instructが唯一Preview画面出力まで達成していて、gpt-4oと同程度のアウトプットができている。

• 正直上記の理由についてはまったく検討もついていません。

  • 憶測ですが、小型パラメータサイズのモデルほど複雑な機能を省略しがちで、そのおかげでシンプル故に作りやすいという可能性はあります。
  • 後は量子化の影響もあるやも知れません。

• qwen2.5-coderは32Bモデルが将来的に公開されるとのことなので、この結果だけ見るととても楽しみになります！

• 反復するたびにかなりのトークン数が消費されてしまうため、デバッグを簡単にできるモードがあれば、もっと使いやすくなると感じました。

まとめ

今回は、ローカルLLMでbolt.newを動かしてみました。開発したいアプリにもよると思いますが、今回のお題ではbolt.newと最も相性が良さそうなLLMはClaude 3.5 Sonnetという結果になりました。

ローカルLLMだけでの運用は、正直まだ実用に耐えないという認識ですが、意外なことに今回使用した最も小型なパラメータサイズのqwen2.5-coder:7b-instructが、GPT-4oと同程度のアウトプットを出すという結果になりました。比較的大型のパラメータサイズのLLMが振るわなかったのも意外な結果でした。

今回は一例だけの検証なので統計的なことはまったく言えませんが、qwen2.5-coderの32bモデルが公開されるのがより楽しみになりました！

最後までご覧いただきありがとうございました。次回もぜひよろしくお願いします。