bolt.diyを構築し生成AIでアプリ開発してみた

## はじめに

最近 [bolt.new](https://bolt.new/) を知り試行錯誤しながら生成AIでのアプリ開発を楽しんでいます。  
しかし、無料枠だと利用できるToken数に制限があるため、歯がゆい思いをしていました。  
そんなところローカルで使える [bolt.diy](https://github.com/stackblitz-labs/bolt.diy) を知ったため早速試してみました。

## bolt.diy とは

[bolt.diy](https://github.com/stackblitz-labs/bolt.diy) とは [bolt.new](https://bolt.new/) の公式オープンソースです。  
各プロンプトで使用する LLM を選択でき、他のモデルを使用するように拡張することもできます。

## bolt.diy のセットアップ

基本的には [公式ドキュメント](https://stackblitz-labs.github.io/bolt.diy/) に沿ってセットアップを進めます。
私は Mac の手順でセットアップを行いました。

### 1. bolt.diy のダウンロード

GitHubのリポジトリからクローンしてきます。

```sh
cd [任意のフォルダ]
git clone -b stable https://github.com/stackblitz-labs/bolt.diy
```

### 2. LLM(Amazon Bedrock)のセットアップ

bolt.diy で利用する LLM の API Key を準備します。  
私は Amazon Bedrock を利用しました。

1. AWS コンソールにログイン
2. Amazon Bedrock のサービスに移動
3. リージョンを「バージニア北部(us-east-1)」に変更
4. 左ペインから「モデルアクセス」を選択
5. 「Claude 3.5 Sonnet」を選択し有効化（数分待つと有効化されます）

続いて、モデルを呼び出すためにAWSのセッショントークンを取得します。  
AWS CLI を利用し下記コマンドを実行します。
```sh
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 をビルドします。
```sh
npm run dockerbuild
```
Docker Image が作成されたことを確認します。
![build_docker_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37998/e10714c7-fb05-40d2-cdaa-4a80596a98ad.png)

Docker Container を起動します。  
私は `--env.file` オプションを指定しないとうまく起動しませんでした。
```sh
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/ にアクセスできるようになっているか確認しましょう。
![bolt.diy_startup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37998/4a853153-015c-99f9-dfb1-17dd69ca4e95.png)

## アプリケーションの作成

せっかくなのでアプリケーションを作ってみます。  
今回はマインスイーパーを作ってみます。  
以下のプロンプトを画面のテキストボックスに入力します。  
```
# 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
```
以下のようにリアルタイムでコードが生成され、アプリケーションが作られていくことがわかります。  
（※うまくアプリケーションが生成できない場合は何回か繰り返し試してみてください。）
![workbench.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37998/0a905ac2-17da-67e0-9028-a2eeb92414d2.png)

作成できたアプリケーションはこちら 
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37998/c5d3108e-e79c-bd1b-9cdf-6385155c6b2d.png" width="50%">

リトライボタンが無かったりと不足はありますが、一発でおおよそ動くものを作ることができました。  
修正したい場合は追加で指示すると直してくれます。  
生成したコードはローカルに落としたり、GitHubにpushしたりすることもできるので便利ですね。

## 最後に
  
今回は英語のプロンプトを用意して実行しましたが、日本語でも十分アプリを生成できます。  
リアルタイムでコードが生成されアプリケーションが組み上がっていくのは視覚的にもとても面白いです。  
本記事で生成AIでのアプリケーション開発に興味を持っていただけると嬉しいです。