はじめに

みなさん、コード生成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』〜これから触ってみる方への体験ガイド〜に記載しております。お時間がある時にでもどうぞ！