bolt.newにチャットボットUIを作ってもらったら期待以上だった件

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/f8da9ee4-f345-1c76-0b27-feb1bb8b00e5.png)

# はじめに
みなさん、コード生成AIは使ってますか？
コード生成AIソリューションといえば、マイクロソフト社の**Github Copilot**が有名ですが、IBMからも**watsonx Code Assistant**が提供されています。
「え！IBMも提供しているの？」と思った方は、こちらの記事で紹介していますので、興味のある方は参照してみてください。

https://qiita.com/yanagih/items/63fd0ff497bb22fc50bd

今回もコード生成AIに関する記事を書きたいと思い、ネタを色々と考えていたところ、

『チャットボットのUIを一から開発するのって面倒だよね？というか、コード生成AIにお願いしたらちゃんと動くUIができるのだろうか』

という神からのお告げが降りてきました。(大袈裟)

ということで、**チャットボットのUI開発**にチャレンジしてみます。

今回は、コード生成AIソリューションにStackBlitz社が開発した**bolt.new**を使ってみます。

理由としては2つです。
* フルスタック・アプリケーションをサポートするbolt.newで、どこまでちゃんと動くソースコードが開発できるのか興味がある
* これまでbolt.newに関する記事を書いたことがない事

**bolt.new**について初めてという方は、こちらのQiita記事が参考になると思います。

https://qiita.com/Maki-HamarukiLab/items/e8a0af85b7f4c6b1845c

それでは早速、試してみます。

# 準備
**bolt.new**は、フルスタック・アプリケーション開発をブラウザだけで可能！と謳っているように、準備がとても簡単です。Githubアカウントを持っていれば、無償ですぐに試せます。
こちらの記事で、『利用手順』が解説されていますので、「実際に自分も試したい」という方は参考にしてみてください。

https://qiita.com/ak2618/items/76fc45ba4bab455a6440

**bolt.new**にSign Inした直後の画面です。
プロンプト入力欄があるだけ。
『フルスタック・アプリケーション開発を支援する』という事から、もっと複雑なUIをイメージしていましたが、非常にシンプルです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d187a35f-3a71-ae50-544f-043579d7a19a.png)

# チャットボットUIを作成してもらうプロンプト

それでは、チャットボットUIを作成してもらうプロンプトを入力してみます。
```text:プロンプト
LINE風のチャットボットUIを作成してください
```

確かに、これでも良いのですが、bolt.newは『フルスタック・アプリケーション開発を支援する』と他社ソリューションとの差別化を謳っています。
このままでは、UIの作成だけを指示する**こぢんまりとした内容**になってしまいます。

せっかくなので、プロンプトの内容は「ちゃんと動くアプリケーションの開発をイメージさせるプロンプト」にすべきではないか！？

# チャットボット・アプリケーションを開発してもらうプロンプト

それでは、プロンプトの内容をどうするべきか？

要件として
* チャットボット・エンジンにはIBM watsonx Assistantを使用する
* IBM watsonx Assistantへの接続情報は、.envファイルから読み込む
* UIはLINE風とする

を想定しました。

この３点を踏まえ、新たに考えたプロンプトはこちらです。
```text:コピペ用
バックエンドに、IBM watsonx Assistantを使用したLINE風のチャットボットをを作成してください。実際に、watsonx Assistantに接続するための設定は、.envから読み込むようにしてください。
```

ところで、

:::note
突然、IBM watsonx Assistantという名前が出て来ましたが、IBM watsonx Assistantの概要、構成方法、アクセス方法等については、[初めての『IBM Watson Assistant』〜これから触ってみる方への体験ガイド〜](https://qiita.com/yanagih/items/27dc6e0561340168724f)に記載しております。お時間がある時にでもどうぞ！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/1ce1c6b4-df8f-99ca-c805-4c728184981a.png)
:::

# 実行結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/6377542a-f3e9-1b7b-d4d2-b15b3dce87d0.png)

Node.jsを前提としたソースコードが生成されました。追加パッケージ内容を含むpackage.jsonに始まり、私が指定した.envファイル、具体的なソースコード類は、srcディレクトリ配下に生成してくれました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/ed837717-2d7e-ebce-273f-2a7808568647.png)

さらに、使用方法までも出力してくれています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/7736c916-b0f7-d5ae-af0a-cae0f0b8b4ae.png)

「すごい！」というのが率直な感想ですが、右側の実行結果を見ると『Cannot GET /』というメッセージが表示されて正常に動作していません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/4de7e399-bb19-8324-d3c2-39168190b3ac.png)

こういう時は、エラーメッセージをチャット欄に入力して、プログラムを修正してもらうのが手順です。
エラーメッセージをチャット欄に入力します。

```text:コピペ用
Cannot GET / 
と表示されます
```
プログラムの修正が開始されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d1a17852-f2c8-5bf3-3eda-81a20750de10.png)

変更内容が続きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/9e1e65dc-a3cf-32c9-3f92-156fd4caebf0.png)

今度は、LINE風のUIが表示されました。素晴らしい！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/363c2b20-7c21-c53b-3397-766102838c70.png)

続いて、.envファイルにIBM watsonx Assistantへのアクセス情報をセットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/a088d58a-cbb8-8532-193d-6a981c229e5b.png)


動作テストに使用する『ピザの注文シナリオ』ファイルは、Githubにアップしておきます。
実際に試してみたい方はどうぞ。

https://github.com/Watson-bx-04/1st-actions/blob/main/初めてのアクション-action.json

(ピザの注文シナリオのフローチャート)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/830929d5-1c68-c5fb-a6ab-6104ce5a63e9.png)

「ピザの注文をお願いします」と入力し、[送信]ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/01def482-a291-409e-6a5e-53c4183b9c0a.png)

あれ！？送信した内容や応答等が全く表示されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d22da161-bd6b-90cd-f9cf-4987e1b46e4d.png)

ソースコード側を見ると、エラーが発生しています。
IBM watsonx Assistantに実際に接続しようとしたところで発生したエラーのようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/4e641221-4b7f-8e9a-2b7a-6d3e66fc025d.png)

デバッグのため、生成されたソースコードをダウンロードして、PC上で動かしてみます。
画面上部の[Download]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/bc66296b-69e8-513d-cc50-c8935ff38cf3.png)
zipファイルを展開すると、projectディレクトリーが含まれています。
bolt.newがソースコードと一緒に出力した使用方法を実行してみます。
```shell
cd project
npm run dev
```
(実際の実行イメージ)
先程、bolt.new側で表示されていた、エラーは特に発生していません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/d866bb37-0537-43ce-1247-e4f0910b1f0a.png)

3000ポートにブラウザからアクセスしてみます。
Devtoolを表示してみたところ、特にエラーは発生していません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/fc77165c-0c1a-df40-c0d8-4c951dc217d4.png)

サーバー側もクライアント側もエラーが発生していないので、『ピザの注文』シナリオを実行してみます。

な、なんと！IBM watsonx Assistantと正常に通信し、ピザの注文が正常に動作しました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/ac4b2b55-9b20-5801-f5ee-53f80a09f8d5.png)

開始から、ほんの数分で、要件として指定した

* チャットボット・エンジンにはIBM watsonx Assistantを使用する
* IBM watsonx Assistantへの接続情報は、.envファイルから読み込む
* UIはLINE風とする

上記3つをしっかりと守り、実際に動くアプリケーションが生成されたことには正直、驚きました。
というか、期待以上です。

# おわりに

bolt.new側のブラウザで正常動作しなかった理由は不明ですが、PC環境で正常に動作するアプリケーションが開発でき、当初の目的は達成されました。

また、bolt.newからダウンロードしたソースコードをGithubにアップロードしておきます。

### bolt.newが生成したソースコードのツリー構造

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52151/c0257485-36a2-037f-4f3a-d4cb2339c7c5.png)

### bolt.newが生成したソースコード
https://github.com/Watson-bx-04/wxa-ui-app/blob/main/project.zip

# 参考

### watsonx Assistant用 ピザ注文シナリオ
https://github.com/Watson-bx-04/1st-actions/blob/main/初めてのアクション-action.json

### 初めての『IBM Watson Assistant』〜これから触ってみる方への体験ガイド〜
https://qiita.com/yanagih/items/27dc6e0561340168724f