トップ > Power Apps > Power Automateを使ったPower AppsとAzure OpenAI Serviceの連携

Power Automateを使ったPower AppsとAzure OpenAI Serviceの連携

Power Apps Power Automate Azure OpenAI カスタムコネクタ

前に投稿した記事では、Power AppsとAzure OpenAI Service（以下、Azure OpenAI）をカスタムコネクタ経由で連携する方法を紹介しました。

この実装ですが、Power Appsではなく、Power Automateを利用して行う事も可能です。

今回は、Power Automate上でカスタムコネクタを使用してAzure OpenAIと連携する方法と、カスタムコネクタを使用しないで連携する方法の2つをご紹介します。

アーキテクチャと完成イメージ

本記事で作成するアプリのアーキテクチャは以下となります。

▼カスタムコネクタを使用

▼カスタムコネクタを使用しない

また、本記事のハンズオンを実施した後のアプリの完成系は以下となります。

入力欄に質問を入れ、[送信ボタン]を押下するとAIからの返答が表示されるようなアプリとなります。

フローの完成系はこちらです。

▼カスタムコネクタを使用する場合のフロー

▼カスタムコネクタを使用しない場合のフロー

フローの作成を始める前に

実際にフローの作成を始める前に、以下のものを準備してください。

  • Power Apps Premium ライセンス
  • Azure サブスクリプション
  • Azure OpenAI Serviceの利用申請
  • Azure OpenAI Serviceリソース
    • Azure OpneAIのエンドポイント、キーの部分もコピーしておく
  • カスタムコネクタ
  • 検証用アプリ

Azure OpenAI Serviceリソース（エンドポイント・キー）・カスタムコネクタ・検証用アプリは、以下の記事にそれぞれの作成方法があるので参考に準備してください。

blog.jbs.co.jp

準備ができたら早速フローを作成していきましょう。

カスタムコネクタを使用したフローの作成方法

フローの準備

1. Power Automateを開き、クラウドフローを作成します。

※以下では「自動化したクラウドフロー」で作成しています。

2. トリガーは"PowerApps (V2)"を選択し、[Add an output]に以下を設定します。

  • Text型：role
  • Text型：content

3. [アクションの追加]から対象のカスタムコネクタを選択します。本記事では、以前に作成した"AzureOpenAIQuery"を選択します。

4. アクションに追加されたら、アクションをクリックします。画面左側に設定値入力ペインが表示されるので、その中の[すべてを表示]をクリックします。

5. 各設定値の入力欄が表示されるので、以下のように入力してください。

  • Api-Version：< フローの作成を始める前に で準備したAzure OpenAI のエンドポイントの末尾に記載されている値>　※https://~~?api-version=xxx
  • Content-Type：application/json
  • Body/Messages > Role：<トリガーの動的コンテンツ：role>
  • Body/Messages > content：<トリガーの動的コンテンツ：content>

※Body/Messages項目は、[Add new item]を1度クリックしてください。

6. [アクションの追加]から"組み込み"の"作成"アクションを追加します。追加したら、[値]に以下を記載します。

@{outputs('AzureOpenAIQuery')?['body']?['choices'][0]?['message']}

7. [アクションの追加]から"PowerApp または Flow に応答する"を追加します。追加したら、[Add an output]に以下を設定します。

role：@{outputs('作成')?['role']}
content：@{outputs('作成')?['content']}

8. [保存]をクリックします。

これで、フローの作成は完了です。

Power AppsアプリとPower Automateフローを連携

次にアプリとフローを連携します。

1. フローの作成を始める前に で準備したアプリの編集画面を開き、画面左側にあるアイコン群の[Power Automate]をクリックします。

2. [フローの追加]をクリックし、作成したフローを選択します。

3. フロー一覧に追加されたことを確認します。

4. [送信]アイコンのOnSelectプロパティに以下の関数を記載します。

//質問内容をコレクションに格納
Collect(colConversationHist,
    {
        role:"user",
        content:txtQuestion.Text
    }
);
//フローに質問内容を投げ、結果をresult変数に格納
Set(result,
    AzureOpenAIフロー.Run("user",txtQuestion.Text)
);
//結果をコレクションに格納
Collect(colConversationHist,
    {
        role:result.role,
        content:result.content
    }
);

5. f5キーを押し、質問内容を入力したうえで[送信]を押下します。

6. 回答がギャラリー上に表示されたらOKです。

カスタムコネクタを経由しないフローの作成方法

フローの準備

1. Power Automateを開き、クラウドフローを作成します。

※以下では「自動化したクラウドフロー」で作成しています。

2. トリガーは"PowerApps (V2)"を選択し、[Add an output]に以下を設定します。

  • Text型：role
  • Text型：content

3. 次に「変数を初期化する」アクションを2つ追加します。

4. アクションが追加されたら、設定値を入力していきます。

今回追加したアクション名を適宜変更し、以下の値を設定してください。

<変数を初期化する -strApiKey->（変数を初期化する）

  • Name：strApiKey
  • Type：String
  • Value：<フローの作成を始める前に で準備したAzure OpenAI のキー>

<変数を初期化する -strBody->（変数を初期化する 1）

  • Name：strBody
  • Type：String
  • Value：<以下に記載>
{
  "messages": [
    {
      "role": "@{triggerBody()?['text']}",
      "content": "@{triggerBody()?['text_1']}"
    }
  ],
  "temperature": 0.7,
  "top_p": 0.95,
  "frequency_penalty": 0,
  "presence_penalty": 0,
  "max_tokens": 800,
  "stop": null
}

※temperatureやtop_pなどのパラメーターの意味は以下を参照ください。

learn.microsoft.com

5. [アクションの追加]からHTTPコネクタの[HTTP]アクションを選択します。

6. アクションが追加されたら、以下の設定値を入力します。

  • URI：<ハンズオンを始める前に で準備したAzure OpenAI のエンドポイント>
  • Method：POST
  • Headers：<以下に記載> 
    Content-Type：Application/json
    api-key：@{variables('strApiKey')}
  • Body：@{variables('strBody')}

8. ここでフローを保存し、テスト実行してください。

9. フローが正常に実行されたら、[HTTP]アクションの出力結果 > body をコピーしてください。次の手順で使用します。

9. フローの編集画面に戻り、[アクションの追加]から[JSONの解析]アクションを追加します。

8. アクションが追加されたら、まず以下の設定値を入力します。

  • Content：@{body('HTTP')}

9, 続いてSchemaを設定するために、Schema内にある[サンプルのペイロードを使用してスキーマを生成する]をクリックします。

10. 画面にサンプル入力画面が表示されたら、前手順の[HTTP]アクションの出力結果をコピーしたしたものをここに貼り付け、[完了]をクリックします。

11. Schemaに自動で値が入力されることを確認します。

12. [アクションの追加]からPowerAppsコネクタの[PowerApp または Flow に応答する]アクションを追加します。

13. アクションが追加されたら、以下の設定値を入力します。

  • role（Text型）：@{first(body('JSON_の解析')?['choices'])?['message']?['role']}
  • content（Text型）：@{first(body('JSON_の解析')?['choices'])?['message']?['content']}

14. [保存]をクリックします。

これで、フローの作成は完了です。

Power AppsアプリとPower Automateフローを連携

次にアプリとフローを連携します。

1. フローの作成を始める前に で準備したアプリの編集画面を開き、画面左側にあるアイコン群の[Power Automate]をクリックします。

2. [フローの追加]をクリックし、作成したフローを選択します。

3. フロー一覧に追加されたことを確認します。

4. [送信]アイコンのOnSelectプロパティに以下の関数を記載します。

//質問内容をコレクションに格納
Collect(colConversationHist,
    {
        role:"user",
        content:txtQuestion.Text
    }
);
//フローに質問内容を投げ、結果をresult変数に格納
Set(result,
    AzureOpenAIフロー.Run("user",txtQuestion.Text)
);
//結果をコレクションに格納
Collect(colConversationHist,
    {
        role:result.role,
        content:result.content
    }
);

5. f5キーを押し、質問内容を入力したうえで[送信]を押下します。

6. 回答がギャラリー上に表示されたらOKです。

おわりに

今回は、Power Automate上でカスタムコネクタを使用してAzure OpenAIと連携する方法と、カスタムコネクタを使用しないで連携する方法の2つをご紹介しました！

Power Automateを活用することで、他のコネクタと組み合わせてより高度なアプリケーションを構築することができます。

Power PlatformとAzure OpenAIを組み合わせたアプリ開発に少しでもお役に立てれば幸いです！

執筆担当者プロフィール
茶谷 亮佑

茶谷 亮佑（日本ビジネスシステムズ株式会社）

クラウドソリューション事業本部に所属。 現在はPower Platform（特にPower Apps、Power Automate）を活用したアプリ開発業務に従事しています。好きなアーティストは星野源です。

担当記事一覧