Build next-gen apps with OpenAI and Microsoft Power Platform

Power Apps integration with OpenAI and Azure API Management

1. Sign into Azure portal and go to your API Management instance.
2. In the left menu, select APIs > + Add API and select HTTP.
    
    

    

   
3. Enter the following settings. Then select Create.

   Settings	Value
   Display name	openAIAPI
   Name	openaiapi
   Web service URL	https://api.openai.com/v1
   API URL suffix	openaiapi

4. Navigate to the newly created API and select Add Operation. Enter the following settings and select Save.

   Settings	Value
   Display name	createimage
   URL for POST	/images/generations

5. Select your newly created operation and edit Frontend.

   
6. Next, we need to add a Request Body to our API. For this, within our Frontend section scroll down and select Request. Now Add representation and insert the following information:

   Representations
   CONTENT TYPE	application/json
   DEFINITION	{"prompt":"A cute baby sea otter","n":1,"size":"512x512"}

   

7. Next, we will add a Response to our API. Select Responses and insert the following information via + Add response for 200 OK:

   Representations
   CONTENT TYPE	application/json
   DEFINITION	{"created": 1589478378,"data": [{"url": "https://..."},{"url": "https://..."}]}

   

8. Select Save.

Step 2: Configure a policy in Azure API Management

1. Next, we need to assign a policy to our API to make sure we are passing along an API key for authentication.
   • Note: OpenAI API uses API keys for authentication. Visit your API Keys page to retrieve the API key you'll use in your requests.
2. Select your operation and in the Inbound processing section, select the (</>) (code editor) icon:

   <policies>
       <inbound>
           <base />
           <set-header name="Authorization" exists-action="override">
               <value>Bearer YOUR_API_KEY</value>
           </set-header>
       </inbound>
       <backend>
           <base />
       </backend>
       <outbound>
           <base />
       </outbound>
       <on-error>
           <base />
       </on-error>
   </policies>

3. Select Save and we can now test our API in Azure API Management:
   • Select your operation.
   • Go to the Test tab.
   • Select Send.

Step 3: Create a custom connector via Azure API Management

As soon as your API was tested successfully, you are now able to export your web API to the Microsoft Power Platform. Please find a detailed guide here: Export APIs from Azure API Management to the Power Platform. If you want to add additional security to your API, check out our blog post on 10. Secure Connectors with API Management.

Step 4: Call your web API via your Power App

Next, we want to integrate our newly create custom connector in our Power App and make an API call.

1. In your Power App, add your custom connector to your Power App via the tab data > + Add data.
2. Next, we modify our Generate Picture Button with the following PowerFX formula:

   ClearCollect(_datacollection, OpenAIAPI.createimage({prompt:TextInput1.Text,n:1,size:"512x512"}).data); 
   Reset(TextInput1)

   
3. Next, we modify our Image2 with the following PowerFX formula:

   $"{First(_datacollection).url}"

   
4. Now, you are able to test your Power App and create a picture via your text input parameters. This picture will be generated using OpenAI's DALL·E model. Enjoy generating some fun pictures.

Let us know what you think! @Julia Kasper