Azure OpenAI Service をノーコード開発してみる(3) ~ Power Platform でクライアントサイド開発 ~

NTTデータ先端技術株式会社の原田です。

Azure OpenAI Service の学習にあたって試してみたフルノーコードによる開発のご紹介です。  
この記事は2023/11/15時点の情報で記載しています、アップデートにより変わってしまっている部分がありましたらご容赦ください。

今回は全6回の第3回~ Power Platform でクライアントサイド開発 ~になります。  

## 記事一覧
[第1回. Logic Apps でサーバーサイド開発(構築編) ](https://qiita.com/koutaro_harada/items/ba5646e2d90a56f9ec3b)   
[第2回. Logic Apps でサーバーサイド開発(開発編) ](https://qiita.com/koutaro_harada/items/bbb4271e333943e09061)    
**第3回. Power Platform でクライアントサイド開発**  
第4回. ServiceNow でクライアントサイド開発  
第5回. Azure リソースのセキュリティ強化  
第6回. Azure OpenAI Service をノーコード開発してみるのまとめ  

## はじめに
ここから2回サーバーサイド API と連携したチャットボットを開発します、第3回では Power Virtual Agent を使用します。  
↓がトピックの全体フローです、次のセクションからポイントとなる実装をピックアップしてご紹介していきます。  
なお諸々の理由から今回開発するチャットボットはクラシック形式となっておりまして、最新の情報とは少し乖離があることをご容赦ください。  
![ac074acb2264bcaed28d_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620633/6f9061b3-c9fa-55c8-eecd-00a229d9888a.gif)

## 行いたいことの質問
挨拶メッセージのあとに行いたいことの質問を配置しています。   
今回開発できているのはチャットのみですが、のちのちクレジット確認や履歴ダウンロード機能の付加も考えてます。  
![ac074acb2264bcaed28d_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620633/4fe586c1-83c5-bbcb-f5b9-64ecbda124b0.png)  

## SessionId 生成
API に引き渡す SessionId の生成を行うアクションを配置しています。  
![ac074acb2264bcaed28d_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620633/891de855-24ec-dba8-54cd-14b1cf497f48.png)    
呼び出し先の Power Automate フローでは Guid を生成して Power Virtual Agent に返却しています。
![ac074acb2264bcaed28d_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620633/3f799f89-4cb6-c848-b974-e074887afa4b.png)    
クラシックでなければ[変数を設定する](https://learn.microsoft.com/ja-jp/microsoft-copilot-studio/authoring-variables?tabs=webApp#set-a-variable)でも同じことができると思います。

## API 呼び出し
SessionId 作成の後続でメッセージ入力の質問を配置し、いよいよ API の呼び出し処理です。  
ここでは SessionId とメッセージと合わせてボット変数の UserId を引き渡しているのがポイントです。  
![ac074acb2264bcaed28d_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620633/4f2609fd-5f62-6258-d743-801cd97ece40.png)    
まずユーザー情報の取得のため Office 365 ユーザーコネクターのユーザー プロフィールの取得アクションを実行します、パラメータには引き渡された UserId(実体はボット変数) を指定します。  
![ac074acb2264bcaed28d_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620633/e8abf662-7f99-3041-c59b-a7dcdabd16b1.png)  
そして HTTP アクションにて SessionId + メッセージ + ユーザー情報 を Json 形式で付加して API を呼び出します、Content-Type の指定をお忘れなく。  
![ac074acb2264bcaed28d_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620633/40c2b435-0adf-0965-5b9e-707edd43cddd.png)   

## メッセージ表示
Power Automate フローから返却されたメッセージを表示します。  
![ac074acb2264bcaed28d_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620633/14df4256-7e07-a982-3d5c-7e6390894123.png)  

## 繰り返し制御
ここが SessionId 生成と対になる繰り返しの制御箇所です、はいが選択された場合はメッセージ入力の質問に戻ります。  
この際 SessionId の再生成を行わないので、サーバーサイド API 側では同一セッションとみなされて履歴の積み上げが行われる形になります。  
![ac074acb2264bcaed28d_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620633/8ce52a94-f5c9-a0ff-ea2b-09434d5f7c7d.png)  

## テスト
チャットボットのテストを行います。   
![ac074acb2264bcaed28d_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620633/42d32bb0-c1dc-d929-b87d-9712c3ceaf2c.png)  
上手くいっていそうですね、セッション情報にも↓のように格納されていましたので履歴の積み上げも問題なさそうです。  
```
{
    "Messages": [
        {
            "content": "You are a helpful assistant.",
            "role": "system"
        },
        {
            "content": "NTTデータ先端技術株式会社について教えてください。",
            "role": "user"
        },
        {
            "role": "assistant",
            "content": "NTTデータ先端技術株式会社は、情報技術に関する研究開発やコンサルティング、システムインテグレーション、ITインフラ構築・運用管理などの事業を行っている企業です。日本のNTTグループの一員であり、2019年には世界的な情報技術コンサルティング会社であるAcquisitive Infotech Pvt. Ltd.を買収しており、グローバルにも活動しています。NTTデータグループの中でも、先端技術の研究・開発に専念するために設立された子会社であり、AIやロボティクス、ブロックチェーンなどの分野に特化したサービスを提供しています。"
        },
        {
            "content": "NTTデータ先端技術株式会社についてより詳しく教えてください。",
            "role": "user"
        },
        {
            "role": "assistant",
            "content": "NTTデータ先端技術株式会社は、NTTグループの中でも先端技術の研究・開発に特化した子会社です。主な事業内容としては、以下のようなものが挙げられます。\n\n・情報技術に関する研究開発\n　AI、ロボティクス、ブロックチェーンなど、様々な先端技術の研究開発を行っています。将来的な社会課題に対して、先進的なソリューションを提供することを目的としています。\n\n・コンサルティング\n　ビジネスプロセスの改善やデジタルトランスフォーメーションの支援など、企業の課題解決に向けたコンサルティングを提供しています。\n\n・システムインテグレーション\n　ビッグデータの分析やシステムの構築、アプリケーションの開発など、企業のITインフラ整備を支援しています。\n\n・ITインフラ構築・運用管理\n　クラウドサービスの提供やネットワークの設置・運用管理など、企業のITインフラ構築・運用を支援しています。\n\nNTTデータ先端技術株式会社は、グローバルな展開も積極的に行っており、アジアやアメリカ、ヨーロッパなど世界中で事業を展開しています。また、日本の政府機関や自治体、大手企業など、幅広いお客様にサービスを提供しています。"
        }
    ],
    "SessionId": "9a173948-e818-451a-a451-4b7b63596071",
    "UserId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    ---
}
```  
クレジットが超過している場合はこんな感じです。  
![ac074acb2264bcaed28d_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3620633/552ede09-0c0d-82c5-fce9-ed0438e2f1e1.png)   

## おわりに
今回も技術的に難しところはあんまりなかったですが、条件分岐の際の線の繋ぎ変えのマウス操作がちょっと面倒でした。  
開発期間はこちらも 1.5～2.0 日くらいです。
あと Power Automate フローでプレミアムコネクタを使用している関係で、公開しての使用には Power Virtual Agents のライセンスが必要となります。  
これがなければ Teams で公開できたんですが…、と言うところで次回に続きます。  

## 次回
次回は今回と同じものを ServiceNow の仮想エージェントにて開発していきます。