Power Apps で ChatGPT と連携する実用的なアプリを作ってみました


# はじめに

皆さん、ChatGPT 使っていますか？
ChatGPT など、既に何かしらの対話型 AI を沢山利用している人も沢山いると思います。ただ、情報漏洩の懸念から仕事では現状禁止されているというケースもあると思います。

しかし、仕事で活用することで効率化が大きく期待できることから、「とにかく使ってみたい」、「早く利用したい」という現場からの声が日に日に大きくなっているケースもあると思います。

そのため、Azure Open AI Service を利用し、早く ChatGPT を利用できるようにしたいという相談をいただいております。

https://learn.microsoft.com/ja-jp/azure/cognitive-services/openai/overview

https://learn.microsoft.com/ja-jp/azure/cognitive-services/openai/faq

`Azure OpenAI では、モデルの再トレーニングに顧客データは使用されません。`

ただし、Azure Open AI Service を利用するものの、**入口の部分をどうやって作ればいいか悩まれているケースもあると思います。**

そのうちの一つの手段が、**入口にローコードを利用する方法です**。

考えられる方法として、まず、Power Virtual Agents を利用するアプローチがございます。この場合、ChatGPT と同様な感じでチャットが出来る感じになると思います。
もちろん、こちらでもいいのですが、今回は、Power Apps を用いた、ローコードの強みを活かした方法を紹介します。

https://powervirtualagents.microsoft.com/ja-jp/?ef_id=_k_EAIaIQobChMI9vnPmbG0_gIViKyWCh2Q6QwSEAAYASAAEgKaYPD_BwE_k_&OCID=AIDcmm2ymsfv2b_SEM__k_EAIaIQobChMI9vnPmbG0_gIViKyWCh2Q6QwSEAAYASAAEgKaYPD_BwE_k_&gclid=EAIaIQobChMI9vnPmbG0_gIViKyWCh2Q6QwSEAAYASAAEgKaYPD_BwE

# 作成したアプリ

アプリの外観はこんな感じです。特徴は、**シナリオやアウトプット形式など、個人や組織で汎用的な使い方をアプリ利用者が登録でき再利用、共有が出来ることです。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b23358dc-42b6-8e72-5161-c10332f283d6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/6f84b207-ed1c-494c-e494-c3d403f8d849.png)

## シナリオ登録

こんな感じで、良いシナリオをアプリ利用者が登録できるようにしています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/54ef0a8c-f964-ebfc-7d71-fe762339d80a.png)

現在、ChatGPT の活用方法を見つけ既に実践している人、現在模索している人、これから模索する人がいると思いますが、まだまだ、**「こんな活用方法があったんだ！」という発見があると思いますし、今後の進化により新たな発見が生まれてくると思います。**

**これらの活用方法を組織内で効率的に共有することは非常に重要と考えます。**

例えば、上記画面のようなシナリオの場合、毎回依頼文を全て入力するのは面倒だと思います。そのため、**シナリオを選択すると、補足プロンプトが勝手に入るようにしています。** そのため、単にチャットなどで共有され、毎回補足プロンプトを入力したり、どこかからコピペしたりするより効率がいいと思います。


このようなアプリを介して ChatGPT を利用することで、**組織における ChatGPT を用いた生産性向上がより促進されると思います。**
また、**組織としてプロンプトエンジニアリングの強化のような効果もあると思います。**

## アウトプット形式登録

アウトプット形式も登録できるようにしています。こういうアウトプット形式も対応しているんだ？という発見もあると思っています。
その結果、その他サービスとのシームレスな連携を見据えた、このアプリではないアプローチでの活用方法の発見にもつながる可能性もあると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/573b8725-7e7b-0690-2996-dc6952a18cd1.png)

# ロジックについて

まず、アーキテクチャは以下のような感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/d80539ac-d06b-3299-5a2b-c71e4b64dd48.png)

Power Apps および Power Automate それぞれの実装について説明します。

:::note
もう少し本格的に実装したバージョンをこちらの記事で紹介しています。
:::
https://qiita.com/Takashi_Masumori/items/12095390a633b8789522

## Power Apps

送信ボタンの`[OnSelect]`の処理は以下のような感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/37ed1189-8b7b-a703-908d-5d38c379cef4.png)

```
UpdateContext({locLoading: true});
Set(
    gblChatGPTResponse,
    ChatGTPAzureOpenAI.Run(
        JSON(
            Collect(
                colChat,
                {
                    role: "user",
                    content: txtChatMessage.Text
                }
            )
        )
    );
    
);
Collect(
    colChat,
    {
        role: gblChatGPTResponse.role,
        content: gblChatGPTResponse.content
    }
);
Select(
    galChat,
    CountRows(galChat.AllItems)
);
Reset(txtChatMessage);
UpdateContext({locLoading: false});
//Notify("成功しました",NotificationType.Success)
```

会話形式にするため、Collection に格納していくのがポイントです。

:::note
Power Apps でチャットエクスペリエンスを実装するアプローチについては、こちらの記事の方に書きました。
:::
https://qiita.com/Takashi_Masumori/items/12095390a633b8789522

## Power Automate

フローの全体イメージです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/91415a04-127d-bfa7-ecf1-f84a867ca83b.png)

以下の箇所で、Request の JSON を生成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/54174fc0-9fef-2bb6-6004-3d2b7028b514.png)

以下は Power Apps から受け取った内容です。Power Apps から受け取る引数は以下のみです。

```
json(triggerBody()['text'])
```

リクエストは以下のような感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/60751bf3-7d95-38b3-d8a6-5d3060e56e3e.png)

必要に応じてこちらの記事も参考にしてください。

https://qiita.com/Takashi_Masumori/items/96b9e0f1590762fd6fad

`JSON の解析`は、実際のレスポンスをサンプルにして生成します。一応、手元では以下のようになっています。

```
{
    "type": "object",
    "properties": {
        "id": {
            "type": "string"
        },
        "object": {
            "type": "string"
        },
        "created": {
            "type": "integer"
        },
        "model": {
            "type": "string"
        },
        "choices": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "index": {
                        "type": "integer"
                    },
                    "finish_reason": {
                        "type": "string"
                    },
                    "message": {
                        "type": "object",
                        "properties": {
                            "role": {
                                "type": "string"
                            },
                            "content": {
                                "type": "string"
                            }
                        }
                    }
                },
                "required": [
                    "index",
                    "finish_reason",
                    "message"
                ]
            }
        },
        "usage": {
            "type": "object",
            "properties": {
                "completion_tokens": {
                    "type": "integer"
                },
                "prompt_tokens": {
                    "type": "integer"
                },
                "total_tokens": {
                    "type": "integer"
                }
            }
        }
    }
}
```

Power Apps への応答は以下のような感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/cc5a7537-9492-f706-877d-93c32fda23a9.png)

構文はそれぞれ以下のような感じです。

```

first(body('JSON_の解析')?['choices'])?['message']?['content']

first(body('JSON_の解析')?['choices'])?['message']?['role']

```

# その他

まだ、「ChatGPT って何？」、「どんな使い方が出来るの？」といった方もいると思います。
ローコードのため、どんな用途に使えるかなどの使い方のサンプルを登録することも容易です。こちらは、アプリ管理者側で事前にデータ登録しておくのでもいいかと思っています。

注意事項などをアプリ内に追加することももちろん容易です。

# まとめ

今回は、Power Apps で ChatGPT と連携する実用的なアプリを紹介しました。
Azure Open AI Service と連携し、ChatGPT を早くリリースしたい、入口について、少しカスタマイズしたいといった場合は、このように、Power Apps を利用して実現するのも良いかなと思います。
しかも、ローコードのため、**かなり早く作成できますし、ちょっとした修正もすぐに出来ます。**
※事前に API 自体は軽く触ったこともあり、このアプリ、1 日程度でできました

また、Power Apps のため、作成したアプリを Teams の左側にピン止めして利用することも可能なため、組織へ展開、利活用を促進することも容易と思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/835d6cdd-055e-f4de-78ca-86e8eb4f9440.png)

:::note
ちなみに、最近の UI こんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f3891f69-5a0e-0632-041c-b428b9965a8f.png)
:::