はじめに
最近 bolt.new を知り試行錯誤しながら生成AIでのアプリ開発を楽しんでいます。
しかし、無料枠だと利用できるToken数に制限があるため、歯がゆい思いをしていました。
そんなところローカルで使える bolt.diy を知ったため早速試してみました。
bolt.diy とは
bolt.diy とは bolt.new の公式オープンソースです。
各プロンプトで使用する LLM を選択でき、他のモデルを使用するように拡張することもできます。
bolt.diy のセットアップ
基本的には 公式ドキュメント に沿ってセットアップを進めます。
私は Mac の手順でセットアップを行いました。
1. bolt.diy のダウンロード
GitHubのリポジトリからクローンしてきます。
cd [任意のフォルダ]
git clone -b stable https://github.com/stackblitz-labs/bolt.diy
2. LLM(Amazon Bedrock)のセットアップ
bolt.diy で利用する LLM の API Key を準備します。
私は Amazon Bedrock を利用しました。
- AWS コンソールにログイン
- Amazon Bedrock のサービスに移動
- リージョンを「バージニア北部(us-east-1)」に変更
- 左ペインから「モデルアクセス」を選択
- 「Claude 3.5 Sonnet」を選択し有効化（数分待つと有効化されます）
続いて、モデルを呼び出すためにAWSのセッショントークンを取得します。
AWS CLI を利用し下記コマンドを実行します。
aws sts get-session-token
出力
{
"Credentials": {
"AccessKeyId": "[YOUR ACCESS KEY ID]",
"SecretAccessKey": "[YOUR SECRET ACCESS KEY]",
"SessionToken": "[YOUR SESSION TOKEN]",
"Expiration": "2024-01-19T18:06:10+00:00"
}
}
bolt.diy をクローンしたフォルダに .env.local ファイルを作成します。
.env.example を参考に、作成したファイルに先ほど取得したセッショントークンの情報を記載します。
AWS_BEDROCK_CONFIG='{"region": "us-east-1", "accessKeyId": "[YOUR ACCESS KEY ID]", "secretAccessKey": "[YOUR SECRET ACCESS KEY]", "sessionToken": "[YOUR SESSION TOKEN]"}'
3. Dockerでアプリケーションを起動
npm で Docker Image をビルドします。
npm run dockerbuild
Docker Image が作成されたことを確認します。
Docker Container を起動します。
私は --env.file オプションを指定しないとうまく起動しませんでした。
docker compose --profile development --env-file .env.local up --build
コンソールに以下のような出力が確認できたら成功です。
app-dev-1 | ★═══════════════════════════════════════★
app-dev-1 | B O L T . D I Y
app-dev-1 | ⚡️ Welcome ⚡️
app-dev-1 | ★═══════════════════════════════════════★
http://localhost:5173/ にアクセスできるようになっているか確認しましょう。
アプリケーションの作成
せっかくなのでアプリケーションを作ってみます。
今回はマインスイーパーを作ってみます。
以下のプロンプトを画面のテキストボックスに入力します。
# Summary
create minesweeper app
## requirements
- coloring number
- toggl mine flag for right mouse click
- include header with setting icon
- create setting page to change board size and mine size
## tech stacks
- Typescript
- Tailwind CSS
以下のようにリアルタイムでコードが生成され、アプリケーションが作られていくことがわかります。
（※うまくアプリケーションが生成できない場合は何回か繰り返し試してみてください。）
作成できたアプリケーションはこちら
リトライボタンが無かったりと不足はありますが、一発でおおよそ動くものを作ることができました。
修正したい場合は追加で指示すると直してくれます。
生成したコードはローカルに落としたり、GitHubにpushしたりすることもできるので便利ですね。
最後に
今回は英語のプロンプトを用意して実行しましたが、日本語でも十分アプリを生成できます。
リアルタイムでコードが生成されアプリケーションが組み上がっていくのは視覚的にもとても面白いです。
本記事で生成AIでのアプリケーション開発に興味を持っていただけると嬉しいです。