HAQM Web Services ブログ

生成 AI で生成 AI アプリケーションを生成しよう!

こんにちは!日夜アップデートされる新技術の波に揉まれている、ソリューションアーキテクトの岩根です。
普段は製造業にまつわるブログばかり書いていますが、生成 AI 関連のブログにチャレンジしてみようと思います。

はじめに

昨今、コーディング支援エージェントが話題となっています。大規模言語モデルに自然言語で指示を与えることで、ソフトウェアのコードを生成・修正させるという、新しいプログラミング体験を提供するものです。OSS などでも広がりを見せています。AWS からは、HAQM Q Developer をご提供していますが、その中でも、HAQM Q Developer CLI がスゴイ!と社内でも話題になっているので、いろいろ試してみたところ「こういうお客様に合っているのでは?」と考えたので、ブログを書いてみることにしました。

よくあるお客様の困りごと

生成 AI の業務活用や、サービスへの組み込みを検討されるお客様は多いです。私はエンタープライズのお客様を担当していますが、エンタープライズのお客様だと、その検討をする主体は IS 部門か R&D 部門であることが多いです。なかでもどちらかといえば R&D 部門であることが多く、普段 AI/ML を検討する部署が担当される例がよく見られます。彼らは AI/ML には詳しく、Jupyter Notebook と Python を駆使してデータ分析や学習などを行うことには慣れてらっしゃいますが、ユーザインタフェースを持った Web アプリケーションには明るくないことがほとんどです。以後、本ブログのペルソナとして「R&D 部門で普段は AI/ML の研究をしている方」を据えていきます。
そういったお客様に、私達がまずお勧めしているのは、Generative AI Use Cases (GenU) です。これは、日本の AWS メンバー有志が中心となって開発している OSS で、HAQM Bedrock を使った様々なユースケースが収録されています。例えば自社データを使った RAG のアプローチや、エージェント、画像生成などです。

GenU

GenU

OSS なので、自由に改変して自社のユースケースを作り込むこともできます。実際に、試行環境として GenU をデプロイいただく事例は多いです。しかしながら、実際の自社のユースケースを、プロンプトエンジニアリングなどだけで実現できるとは限りません。UI の部分に手を入れる必要が出てくることもあります。Web アプリケーションに明るくないと、この段階で手が止まってしまう、あるいはちょっと試したいだけなのに他部門の協力や SIer に入ってもらって時間やお金がかかってしまう、ということもあると思います。

コーディング支援エージェントでどこまでできるか

そこで、HAQM Q Developer CLI を使った コーディング支援で、GenU の機能追加をどこまでできるのか、実際に試してみました。求めるクオリティとしては、「やりたいことが実際に動くモノとして実現できる」に置きたいと思います。プロダクションレベルのパフォーマンスやコードの可読性・保守性などについては、コーディング支援エージェントを利用したとしてもかなりのノウハウが必要なので、本ブログではスコープ外とします。結論としては、「動くモノを作ることは可能」でした。

機能追加内容の説明

ここでは実際にお客様から相談を受けたことのある機能追加をしていきたいと思います。
チャットのユースケースにおいて、ユーザと LLM の会話履歴の文脈を理解して、「次に来る質問」を LLM に予想させ、質問候補として3つボタンを表示します。ユーザは候補から選択して追加質問することも、従来通り入力して質問することもできる、というものです。あったら便利そうですよね。後付けですが、下図にイメージを書いてみました。

画面デザイン
機能追加イメージ

準備

まずは HAQM Q Developer CLI をインストールする必要があります。こちらを参照してインストールしてください。IAM Identity Center の ID か AWS Builder ID が必要です。Windows の場合、WSL 上に Ubuntu を構築する必要があります。今回は、デプロイ済みの GenU のフロントエンドをローカル環境で改造していくので、動作確認のために GenU がデプロイされた AWS アカウントが必要です。また、AWS CLIのインストールと、GenU アカウントへの Config が必要です。GenU のリポジトリをローカルに Clone しておきましょう。

開発

コマンドラインから、ローカルのリポジトリのフォルダに移動します。
この記事執筆時点では、リポジトリ名が多言語対応のため generative-ai-use-cases-jp から generative-ai-use-cases に変わっています。Clone したタイミングによって読み替えていただければと思います。

cd generative-ai-usecases/

q chat と入力して、HAQM Q Developer CLI を起動します。

q chat
Q Chatの初期画面

Q Chatの画面

図のようなプロンプトの画面になりました。ここでいきなり改造を指示するプロンプトを入れていきましょう。

カレントディレクトリの git リポジトリを理解して、注意点を考慮しながら、以下の改造を実施してください。改造内容:チャットのユースケースにおいて、会話履歴を考慮して考えられるユーザからの追加質問を候補として3つ、LLMで生成して選択肢として表示する。ユーザは選択肢をクリックしてその内容を追加質問することもできるし、従来通り自分で入力して質問することもできる。注意点:改造にあたっては、新規にブランチを作成してください。バックエンドやCDKインフラの改造はせず、フロントエンドだけで完結するようにしてください。改造内容は都度単一のドキュメントに起こし、追加の要望を出したらそれも反映してください。Commitは私からのリクエストごとに必ず実施してください。ベースとなるブランチの状態を可能な限り維持し、不要な修正は行わないでください。

Qへのプロンプト

プロンプトを入力した直後の画面

デフォルトでは外部コマンドやファイル出力のたびに良いかどうか尋ねてきます。t を入力すると、Trust となり、以後同じツールでの操作は自動化されます。今回は聞かれたら t を入力していきます。新規のブランチが作成され、useSuggestedQuestions.ts (名称は場合により異なるかも知れません)という新しいコンポーネントが作成されていく様を確認できると思います。作成の過程では下図のように、失敗することもあります。これはファイルを検索して見つからなかった例ですが、メゲずに他の方法を考えてくれます。

エラーのトラブルシューティング

AI による試行錯誤

完了したら動かしてみましょう。こちらを参照して、フロントエンドだけをローカルで動かします。

npm run web:devw

ブラウザで確認します。 私の場合はエラーが出ました。エラーの内容をそのまま貼り付けましょう。

エラーのトラブルシュート

エラーを貼り付けて修正依頼

このような感じで、エラーが出る場合はブラウザのデベロッパーツールの出力を貼り付けたり、振る舞いが期待と違う場合は、期待する振る舞いに対するギャップを説明したりしながら、改善を繰り返していきます。例えば LLM に質問候補を生成させたいのに、API エラーが出ると質問候補を静的にしたり、クライアントサイドで無理やり生成したりしてくるので、方向修正をしてあげます。すべてのやり取りをここに載せはしませんが、git の commit 履歴を見てみましょう。

Git履歴

Commit 履歴

この commit 履歴の数だけ、Q Chat とやりとりしたことになります。更に、下図のようにドキュメントを見ると、新規に何を作成して、どこに修正を加えたかがわかるようになっています。

ドキュメント

生成されたドキュメントの抜粋

動作確認

動作を見ていきましょう。チャットのユースケースでは、サンプルのプロンプトとして、フィボナッチ数列を生成するプログラムの作成プロンプトが入っています。これを実行してみます。

動作確認1
入力したプロンプト

実行すると、フィボナッチ数列の生成プログラムのあとに、追加質問候補が3つ生成されています。

動作確認2

回答と追加質問候補

その中から 1 つを選択すると、次の質問として LLM に聞いてくれました。

動作確認3

追加機能が動いた様子

まとめ

いかがでしたでしょうか。R&D 部門の AI/ML 関連部隊で、ユーザインタフェースを持った Web アプリケーションには明るくない方をペルソナにおいて実験をしてみました。私自身もデベロッパー出身ではありますが、react などの Web 技術にはそこまで明るくなく、今回の修正をスクラッチで実施したらかなりの時間を要したと思います。今回は、1 時間ちょっと LLM と対話するだけで、動くプログラムとしてアイディアを形にできました。一方で、可読性や保守性を加味したリファクタリングやテスト自動化などは、利用者側にソフトウェアエンジニアリングの知識が必要というところは、現状でも変わりないと思いました。ここは技術的な知見を持ったエンジニアをフルアサインするのではなく、エンジニアの支援をスポットで受けながら、プロンプトに工夫を加えるなどで補完できる可能性があります。今回試したように git の操作がわかる、ブラウザのデベロッパーツールからエラーを拾ってくる、レベルの知識であっても、動くモノが作れるというのは、ソフトウェア開発の民主化に向けた大きな一歩だと思います。これからも コーディング支援関連の技術の進歩には注目していきたいと思いました。

著者紹介

自己紹介 岩根 義忠 (Yoshitada Iwane)
アマゾン ウェブ サービス ジャパン合同会社
ソリューションアーキテクト

自動車メーカーの生産技術開発部門を経て AWS Japan に入社し、エンタープライズ事業本部でソリューションアーキテクトとして活動中。前職でソフトウェア開発のアジャイル/スクラムに出逢い、自部門での導入やスケールを主導したことにより、モダンな開発手法やクラウドに目覚める。
趣味はバイクの他にギター演奏、自分の部屋の飾り付けなど。二児の父だが二人とも実家を出ているため、現在は妻と気楽な二人暮らし。栃木県那須塩原市在住。