はじめに
みなさん、コード生成AIは使ってますか？
コード生成AIソリューションといえば、マイクロソフト社のGithub Copilotが有名ですが、IBMからもwatsonx Code Assistantが提供されています。
「え！IBMも提供しているの？」と思った方は、こちらの記事で紹介していますので、興味のある方は参照してみてください。
今回もコード生成AIに関する記事を書きたいと思い、ネタを色々と考えていたところ、
『チャットボットのUIを一から開発するのって面倒だよね？というか、コード生成AIにお願いしたらちゃんと動くUIができるのだろうか』
という神からのお告げが降りてきました。(大袈裟)
ということで、チャットボットのUI開発にチャレンジしてみます。
今回は、コード生成AIソリューションにStackBlitz社が開発したbolt.newを使ってみます。
理由としては2つです。
- フルスタック・アプリケーションをサポートするbolt.newで、どこまでちゃんと動くソースコードが開発できるのか興味がある
- これまでbolt.newに関する記事を書いたことがない事
bolt.newについて初めてという方は、こちらのQiita記事が参考になると思います。
それでは早速、試してみます。
準備
bolt.newは、フルスタック・アプリケーション開発をブラウザだけで可能！と謳っているように、準備がとても簡単です。Githubアカウントを持っていれば、無償ですぐに試せます。
こちらの記事で、『利用手順』が解説されていますので、「実際に自分も試したい」という方は参考にしてみてください。
bolt.newにSign Inした直後の画面です。
プロンプト入力欄があるだけ。
『フルスタック・アプリケーション開発を支援する』という事から、もっと複雑なUIをイメージしていましたが、非常にシンプルです。
チャットボットUIを作成してもらうプロンプト
それでは、チャットボットUIを作成してもらうプロンプトを入力してみます。
LINE風のチャットボットUIを作成してください
確かに、これでも良いのですが、bolt.newは『フルスタック・アプリケーション開発を支援する』と他社ソリューションとの差別化を謳っています。
このままでは、UIの作成だけを指示するこぢんまりとした内容になってしまいます。
せっかくなので、プロンプトの内容は「ちゃんと動くアプリケーションの開発をイメージさせるプロンプト」にすべきではないか！？
チャットボット・アプリケーションを開発してもらうプロンプト
それでは、プロンプトの内容をどうするべきか？
要件として
- チャットボット・エンジンにはIBM watsonx Assistantを使用する
- IBM watsonx Assistantへの接続情報は、.envファイルから読み込む
- UIはLINE風とする
を想定しました。
この３点を踏まえ、新たに考えたプロンプトはこちらです。
バックエンドに、IBM watsonx Assistantを使用したLINE風のチャットボットをを作成してください。実際に、watsonx Assistantに接続するための設定は、.envから読み込むようにしてください。
ところで、
突然、IBM watsonx Assistantという名前が出て来ましたが、IBM watsonx Assistantの概要、構成方法、アクセス方法等については、初めての『IBM Watson Assistant』〜これから触ってみる方への体験ガイド〜に記載しております。お時間がある時にでもどうぞ！
実行結果
Node.jsを前提としたソースコードが生成されました。追加パッケージ内容を含むpackage.jsonに始まり、私が指定した.envファイル、具体的なソースコード類は、srcディレクトリ配下に生成してくれました。
さらに、使用方法までも出力してくれています。
「すごい！」というのが率直な感想ですが、右側の実行結果を見ると『Cannot GET /』というメッセージが表示されて正常に動作していません。
こういう時は、エラーメッセージをチャット欄に入力して、プログラムを修正してもらうのが手順です。
エラーメッセージをチャット欄に入力します。
Cannot GET /
と表示されます
プログラムの修正が開始されました。
変更内容が続きます。
今度は、LINE風のUIが表示されました。素晴らしい！
続いて、.envファイルにIBM watsonx Assistantへのアクセス情報をセットします。
動作テストに使用する『ピザの注文シナリオ』ファイルは、Githubにアップしておきます。
実際に試してみたい方はどうぞ。
(ピザの注文シナリオのフローチャート)
「ピザの注文をお願いします」と入力し、[送信]ボタンをクリックします。
あれ！？送信した内容や応答等が全く表示されません。
ソースコード側を見ると、エラーが発生しています。
IBM watsonx Assistantに実際に接続しようとしたところで発生したエラーのようです。
デバッグのため、生成されたソースコードをダウンロードして、PC上で動かしてみます。
画面上部の[Download]ボタンをクリックします。
zipファイルを展開すると、projectディレクトリーが含まれています。
bolt.newがソースコードと一緒に出力した使用方法を実行してみます。
cd project
npm run dev
(実際の実行イメージ)
先程、bolt.new側で表示されていた、エラーは特に発生していません。
3000ポートにブラウザからアクセスしてみます。
Devtoolを表示してみたところ、特にエラーは発生していません。
サーバー側もクライアント側もエラーが発生していないので、『ピザの注文』シナリオを実行してみます。
な、なんと！IBM watsonx Assistantと正常に通信し、ピザの注文が正常に動作しました！
開始から、ほんの数分で、要件として指定した
- チャットボット・エンジンにはIBM watsonx Assistantを使用する
- IBM watsonx Assistantへの接続情報は、.envファイルから読み込む
- UIはLINE風とする
上記3つをしっかりと守り、実際に動くアプリケーションが生成されたことには正直、驚きました。
というか、期待以上です。
おわりに
bolt.new側のブラウザで正常動作しなかった理由は不明ですが、PC環境で正常に動作するアプリケーションが開発でき、当初の目的は達成されました。
また、bolt.newからダウンロードしたソースコードをGithubにアップロードしておきます。
bolt.newが生成したソースコードのツリー構造
bolt.newが生成したソースコード
参考
watsonx Assistant用 ピザ注文シナリオ
初めての『IBM Watson Assistant』〜これから触ってみる方への体験ガイド〜