今日は、ご自身のPCでAIを活用した開発を可能にする、画期的なオープンソースツール**「Bolt.diy」**について深掘りしていきます。
Bolt.diyは、クラウドサービス版のBolt.newを自分のPC上で再現できるオープンソース版で、ブラウザ内でAIを使ったフルスタック開発環境を提供します。OpenAIをはじめ複数の大規模言語モデル(LLM)に対応し、AIがファイル操作やターミナル操作までこなし、コード生成からデプロイまで自動化できる点が最大の特徴です。コードのバージョン管理、画像添付プロンプト、プロジェクトのZIPダウンロード、Docker対応、統合ターミナル表示など、高度な機能も充実しています。
ローカルでのセットアップはご安心ください、とても丁寧なガイドがあります。まず、Git、Node.js、そしてNode.jsのパッケージマネージャであるpnpmをインストールします。Windows環境では、もし「0xc0000005: access violation」エラーが出たら、Visual C++ Redistributableの更新も忘れずに。
次に、Bolt.diyのソースコードをGitでクローンし、「pnpm install」コマンドで依存関係をインストールすれば、準備はほぼ完了です。ここで重要なのがOpenAIのAPIキーの設定です。Bolt.diyフォルダ内の.env.exampleをコピーして.env.localを作成し、そこに取得したAPIキーを貼り付けるか、起動後の画面からGUIで直接設定することも可能です。
いよいよ起動です!Bolt.diyディレクトリ内で「pnpm run dev」と入力すれば開発サーバーが立ち上がり、「http://localhost:5173」にアクセスするとWebインターフェースが表示されます。
使い方は非常に直感的です。画面右側のチャット入力フィールドに自然言語で指示(プロンプト)を入力するだけ。例えば、「ReactとTypeScriptでモダンなToDoアプリを作って」と依頼すると、AIがプロジェクトの骨組み作成、必要なパッケージのインストール、コード生成、そして開発サーバーの起動まで自動で行ってくれます。さらに驚くべきは、AIが生成したコードにエラーがあれば、それを検知して自動で修正を試みる機能です。
ユーザーはAIが生成したコードを直接編集することも可能で、その変更をAIに認識させて追加指示を出すことで、AIと対話しながらプロジェクトを完成させられます。画像や既存ファイルをプロンプトに添付し、より具体的な要望を伝えることもできます。完成したプロジェクトはZIPファイルとして簡単にダウンロードできるため、ローカルでの継続開発もスムーズです。
もし途中で問題が発生しても大丈夫です。「There was an error...」といった高レベルのエラーメッセージが出た際は、起動ターミナルやブラウザの開発者コンソール(F12キー→Consoleタブ)で詳細なエラーログを確認しましょう。画面が真っ白でプレビューが表示されない場合は、AIが不完全なコードを生成している可能性があるので、AIに修正を依頼してみてください。
Bolt.diyは、まさにAIと協調して開発を進めるための頼もしいパートナーとなるツールです。ぜひお手持ちのPCで、この快適なAIコーディング体験を始めてみてください!それではまた次回!