前回まででChatGPT APIの応答・要求や仕組みなどを解説しまして、カスタムコネクタを生成するところまでいきました。
次はいよいよPower Apps アプリを作成して、言葉のキャッチボールをしてみましょう。

Power Apps キャンバスアプリを作成する

①Power Appsホーム画面から「アプリ」→「新しいアプリ」→「キャンバス」を選択します。

②アプリ名を入力して「作成」をクリックし、しばらく待ちます。

③ユーザーがメッセージを入力するための「テキスト入力」と送信ボタンとして利用する「ボタン」を配置します。

テキスト入力のプロパティを変更します。必要そうなのは既定を空白にすることと、モードを「複数行」にすることぐらいでしょうか。文字のサイズなどは任意に設定ください。

④ボタンのテキストは「送信」に変更しておきます。

大きさや位置を変更して配置します。

カスタムコネクタに接続する

画面の左側に並んでいるアイコンのうち「データベース型」のアイコンをクリックし、データの追加をクリックします。
データソースの選択のほうの検索テキストに、前回作成したコネクタの名前を入力します。

作成したコネクタが出てきますので（2回）クリックします。

これでこのアプリからカスタムコネクタが利用可能になりました。

ギャラリーを作成する

実際にやりとりを表示するためのエリアを作成します。今回の場合「ユーザーとGPTの言葉のキャッチボール」を表示したいので、複数のテキストを表示したいです。またテキストの量は各contentによって変わります。そこで、今回は「高さが伸縮可能な空のギャラリー」を利用します。

①挿入から「レイアウト」を展開して「高さが伸縮可能な空のギャラリー」をクリックします。

以下のように表示されますが、まだメッセージを格納する領域（コレクション）が用意されていないので、いったん配置だけして次に進みます。

ボタンを押したらGPTにメッセージを送信する

次は、送信ボタンを押したらテキスト入力の内容をカスタムコネクタに送信する部分を実装します。
ボタンのOnSelectを以下のように記述します。

コードは以下のようになります。

Set(varResponse,ChatGPTTestConnector.SendUserMessage("gpt-3.5-turbo",Collect(colChat,{role:"user",content:TextInput1.Text})));
Collect(colChat,First(varResponse.choices).message);
Reset(TextInput1)

Set(varResponse,ChatGPTTestConnector.SendUserMessage(〇〇));
この部分はカスタムコネクタChatGPTTestConnectorのアクションであるSendUserMessageを実行して、実行結果を変数であるvarResponseに入れる、という意味です。作成したコネクタ名とアクション名によってこの部分は変わります。〇〇の中身については以下のようになります。

～～.SendUserMessage("gpt-3.5-turbo",Collect(△△));

作成したアクションは model とmessage を要求としています。 model と role と content じゃないの？と思いますが、 role と model は合わせて messages でした。なのでここでは messages として{user:●● , content:▲▲} を必要とします。

Collect(colChat,{role:"user",content:TextInput1.Text})

さらに前回説明した通り、今までの会話のやり取りやシステムもメッセージとして複数、要求に含めることができます。
これをPower Apps で記載する場合は「コレクション」が利用できます。
この分は今までのやり取りが入っているcolChatに新しく{role:"user",content:TextInput1.Text}を追加している、という意味です。
ここまでが1行目の意味になります。

Collect(colChat,First(varResponse.choices).message);

2行目では応答として得られた内容をさらにコレクションに追加しています。

Reset(TextInput1)

3行目は次のテキストを入力しやすくするため、リセット（空白にする）しています。