最近、開発者の間で話題となっている「Bolt.new」。このAIツールは、コードを自動生成し、複雑なアプリケーションを短時間で構築することができます。
今回は、「Bolt.new」をローカルシステムで動かす方法を紹介します。
構築環境
Bolt.newをローカルで動かした環境です。
- Ubuntu Desktop 24.04 LTS
- Node.js (v20.15.1)
- pnpm(v9.4.0)
また、Windowsで実行する場合は「WSL2」を使うことができます。
WSL2の設定に関しては、過去に作成した記事をご覧ください。
依存ソフトウェアをインストール
bolt.newをインストールする時に必要なソフトをインストールする。 必要になるソフト
- Node.js (v20.15.1)
- pnpm(v9.4.0)
Node.js をインストール
公式サイトにアクセスする。
選択肢を「Install Node.js v20.18.0 (LTS) on Linux using nvm」にします。 そして表示したコマンドを入力します。最初に「nvm」をインストールします。
<-- nvm (Node Version Manager) をインストールします。 -->
$ curl -o- <https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh> | bash
インストールができたら、再起動します。 再起動できたら「Node.js」をインストールします。
<-- Node.jsをダウンロードしてインストールします。 -->
$ nvm install 20
Downloading and installing node v20.18.0...
Downloading <https://nodejs.org/dist/v20.18.0/node-v20.18.0-linux-x64.tar.xz>...
################################################################################################################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v20.18.0 (npm v10.8.2)
Creating default alias: default -> 20 (-> v20.18.0)
「Creating default alias」と表示したらインストール完了です。
一応、正しくインストールできているかを、以下のコマンドを実行して確認します。
<-- 正しいNode.jsのバージョンが環境にあることを確認する。 -->
$ node -v
v20.18.0
<-- 正しいnpmのバージョンが環境にあることを確認する。 -->
$ npm -v
10.8.2
pnpm をインストール
公式ページにあるインストールガイドを開きます。 そして、「POSIXシステムの場合」をみます。今回は「curl」を使用してインストールします。
$ curl -fsSL <https://get.pnpm.io/install.sh> | sh -
==> Downloading pnpm binaries 9.12.2
WARN using --force I sure hope you know what you are doing
Copying pnpm CLI from /tmp/tmp.muTSjSPe3Y/pnpm to /home/ubuntu/.local/share/pnpm/pnpm
Appended new lines to /home/ubuntu/.bashrc
Next configuration changes were made:
export PNPM_HOME="/home/ubuntu/.local/share/pnpm"
case ":$PATH:" in
*":$PNPM_HOME:"*) ;;
*) export PATH="$PNPM_HOME:$PATH" ;;
esac
To start using pnpm, run:
source /home/ubuntu/.bashrc
インストールできたら、再起動します。 これで、依存ソフトウェアのインストールが全て終わりました。
bolt.newをインストール
環境構築には以下の３ステップをする必要があります。
Step01. リポジトリをクローンする
Step02. 依存関係をインストールする
Step03. .env.localファイルを作成し、APIキーを追加する。
順番に解説していきます。
Step01
リポジトリをクローンします。
今回使用するリポジトリは、coleam00様のものを使用させていただきます。
以下のコマンドを実行してリポジトリをクローンします。
※[ユーザー名]の部分は各環境によって異なります。
$ pwd
/home/[ユーザー名]
$ git clone <https://github.com/coleam00/bolt.new-any-llm.git>これでクローンができたと思います。 「git clone」の部分でエラーが出た場合、「git」がインストールされていない可能性があります。 以下のコマンドを実行してインストールしてみてください。
$ sudo apt install gitStep02
依存関係をインストールしていきます。先ほどクローンしたディレクトリに移動します。
$ cd bolt.new-any-llm
$ pwd
/home/[ユーザー名]/bolt.new-any-llmこの状態でインストールコマンドを実行します。
$ pnpm install
+ isbot 4.4.0
+ istextorbinary 9.5.0
+ jose 5.6.3
+ nanostores 0.10.3
+ react 18.3.1
+ react-dom 18.3.1
+ react-hotkeys-hook 4.5.0
+ react-markdown 9.0.1
+ react-resizable-panels 2.0.20
+ react-toastify 10.0.5
+ rehype-raw 7.0.0
+ rehype-sanitize 6.0.0
+ remark-gfm 4.0.0
+ remix-island 0.2.0
+ remix-utils 7.6.0
+ shiki 1.9.1
+ unist-util-visit 5.0.0
devDependencies:
+ @blitz/eslint-plugin 0.1.0
+ @cloudflare/workers-types 4.20240620.0
+ @remix-run/dev 2.10.0
+ @types/diff 5.2.1
+ @types/react 18.3.3
+ @types/react-dom 18.3.0
+ fast-glob 3.3.2
+ is-ci 3.0.1
+ node-fetch 3.3.2
+ prettier 3.3.2
+ typescript 5.5.2
+ unified 11.0.5
+ unocss 0.61.3
+ vite 5.3.1
+ vite-plugin-node-polyfills 0.22.0
+ vite-plugin-optimize-css-modules 1.1.0
+ vite-tsconfig-paths 4.3.2
+ vitest 2.0.1
+ wrangler 3.63.2
+ zod 3.23.8
Done in 32.1s
「Done in 〇〇.〇s」と表示すれば完了です。
Step03
.env.localファイルを作成します。
$ sudo nano .env.localそして、ファイルに以下のテンプレートをコピー&ペーストします。
# Rename this file to .env.local once you have filled in the below environment variables!
# Get your GROQ API Key here -
# <https://console.groq.com/keys>
# You only need this environment variable set if you want to use Groq models
GROQ_API_KEY=
# Get your Open AI API Key by following these instructions -
# <https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key>
# You only need this environment variable set if you want to use GPT models
OPENAI_API_KEY=
# Get your Anthropic API Key in your account settings -
# <https://console.anthropic.com/settings/keys>
# You only need this environment variable set if you want to use Claude models
ANTHROPIC_API_KEY=
# Get your OpenRouter API Key in your account settings -
# <https://openrouter.ai/settings/keys>
# You only need this environment variable set if you want to use OpenRouter models
OPEN_ROUTER_API_KEY=
# Get your Google Generative AI API Key by following these instructions -
# <https://console.cloud.google.com/apis/credentials>
# You only need this environment variable set if you want to use Google Generative AI models
GOOGLE_GENERATIVE_AI_API_KEY=
# You only need this environment variable set if you want to use oLLAMA models
# EXAMPLE <http://localhost:11434>
OLLAMA_API_BASE_URL=
# Include this environment variable if you want more logging for debugging locally
VITE_LOG_LEVEL=debugマーカーを引いている部分にAPIキーを入力します。
「=」の後に発行したAPIキーを入力してください。
以下が入力例です。
# Get your Open AI API Key by following these instructions -
# <https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key>
# You only need this environment variable set if you want to use GPT models
OPENAI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxx変更したら「Control」＋「x」で保存してください。
これでAPI Keyを設定することができました。
bolt.newを起動してみる
全ての作業が終わったので実際に動くか確認します。
その前に、設定ファイルなどの変更を加えた場合、ビルドをする必要があります。
今回の場合、「.env.local」を作成したのでビルドしないと、システムに反映されません。
$ pwd
/home/[ユーザー名]/bolt.new-any-llm
$ pnpm run build
.......
vite v5.3.1 building SSR bundle for production...
✓ 40 modules transformed.
build/server/.vite/manifest.json 1.32 kB
build/server/assets/tailwind-compat-CC20SAMN.css 2.25 kB
build/server/assets/xterm-lQO2bNqs.css 4.08 kB
build/server/assets/ReactToastify-CYivYX3d.css 14.19 kB
build/server/assets/index-CPTzpSUP.css 17.01 kB
build/server/assets/server-build-DW0-2Rlk.css 26.50 kB
build/server/index.js 42.37 kB
✓ built in 1.17s「built in 〇.〇〇s」と表示すればビルド完了です。
ビルドができたのでサービスを起動します。
$ pnpm run start
> bolt@ start /home/ubuntu/bolt.new-any-llm
> bindings=$(./bindings.sh) && wrangler pages dev ./build/client $bindings
⛅️ wrangler 3.63.2 (update available 3.81.0)
-------------------------------------------------------
✨ Compiled Worker successfully
✔ Would you like to help improve Wrangler by sending usage metrics to Cloudflare? … yes
Your choice has been saved in the following file: ../.config/.wrangler/metrics.json.
You can override the user level setting for a project in `wrangler.toml`:
- to disable sending metrics for a project: `send_metrics = false`
- to enable sending metrics for a project: `send_metrics = true`
Your worker has access to the following bindings:
- Vars:
- ANTHROPIC_API_KEY: "(hidden)"
⎔ Starting local server...
[wrangler:inf] Ready on <http://localhost:8788>
╭─────────────────────────────────────────────────────────────────────────╮
│ [b] open a browser, [d] open Devtools, [c] clear console, [x] to exit │
╰─────────────────────────────────────────────────────────────────────────╯このような感じになれば成功です。
下の方に「Ready on http://localhost:8788」と表示していると思います。
このリンクをブラウザのリンクバーに入力してアクセスしてください。
ログインできたら画像のようなページが開くと思います。
あとは、真ん中にあるテキストボックスに何か入力して実行した時にエラーなく出力できれば完成です。
補足情報
２つのコマンド「pnpm run build」と「pnpm run start」の使い方についてまとめておきます。
ズバリ！
| コマンド | 実行内容 |
| pnpm run build | 設定ファイルなどを変更した時に実行 |
| pnpm run start | サービスを起動する時に実行 |
このように使い分けます。
再度、サービスを起動したい場合は「pnpm run start」だけを実行すればいいし、APIキーなどを変更したときは、「pnpm run build」と「pnpm run start」を実行すればいいということです。
まとめ
この記事では、Bolt.newをローカル環境で動かす手順を詳しく解説しました。以下のステップを経て、実際にアプリケーションを実行できるようになります。
- 依存ソフトウェアのインストール: Node.jsとpnpmを利用して環境を整えました。
- リポジトリのクローン: GitHubから必要なコードをダウンロードしました。
- 依存関係のインストール:
pnpm installを使ってプロジェクトに必要なパッケージを取得しました。 - APIキーの設定:
.env.localファイルに必要なAPIキーを追加し、アプリケーションの動作に必要な環境変数を設定しました。 - アプリケーションのビルドと起動: 設定変更後はビルドを行い、サービスを起動して動作確認をしました。
これらの手順を踏むことで、Bolt.newをスムーズにローカルで実行することができ、さまざまなAIモデルと連携することが可能になります。
参考リンク
コメント