Azure Open AI ChatGPT with Power Apps

Balamurugan Balakreshnan

·

Follow

4 min read

·

Apr 29, 2023

--

Listen

Share

Let’s build a Power App to use Azure Open AI ChatGPT for various use cases

What’s needed

• Register for Azure Open AI — https://learn.microsoft.com/en-us/azure/cognitive-services/openai/overview
• Once got approved create a azure open ai resource in Azure portal
• Select region as East US
• At the time of writing this article davinci-003 is only available in East US
• Create a deployment inside the resource

Create a Power App

• To create a power app first need to create a power flow
• Flow is invoked by a powerapp trigger
• Text information will be passed to the flow
• on the default screen assign values to variables

Set(inputvar, "{ \""messages\"": [{ \""role\"": \""system\"", \""content\"": \""You are a helpful assistant.\"" }, { \""role\"": \""user\"", \""content \"": \""hi there\"" } ]}"); Collect(convlist, { role : "system", content: " You are a helpful assistant." }); Set(outvar, "");

Power Flow

• Let’s create a power flow
• On the left menu in power apps click on flows
• https://make.preview.powerapps.com/
• Click on flows
• Click New Flow
• Name it as chatgptprocessing
• here is the entire flow

• First add trigger as Power Apps
• then Initialize a variable

• Bring Parse JSON to parse the input variable

• here is the schema

{
    "type": "array",
    "items": {
        "type": "object",
        "properties": {
            "content": {
                "type": "string"
            },
            "role": {
                "type": "string"
            }
        },
        "required": [
            "content",
            "role"
        ]
    }
}

• Now lets send the data to openai API to use davinci model using chatgpt model

• First bring HTTP action
• Then select the action as POST
• here is the URL

https://resourcename.openai.azure.com/openai/deployments/chatgpt/chat/completions?api-version=2023-03-15-preview

• Note we need content-type:application/json
• also need api-key: <your_api_key>
• here is the body

{
  "messages": @{body('Parse_JSON')}
}

• Now initialize a variable to store the response

• name the variable as output
• set the value as “”
• now assign the variable to the output variable

• Now assign the put to respond to power app

• Now lets test the flow
• Save the flow
• Move to power apps

Power Apps

• NOw in the power app drag a label and assign the value to the variable outvar
• Now in the default screen assign values to variables

Set(inputvar, "{ \""messages\"": [{ \""role\"": \""system\"", \""content\"": \""You are a helpful assistant.\"" }, { \""role\"": \""user\"", \""content \"": \""hi there\"" } ]}"); Collect(convlist, { role : "system", content: " You are a helpful assistant." }); Set(outvar, "");

• Bring Text box and assign the value to inputvar
• Create a button to call the flow

Collect(convlist, { role : "user", content: TextInput9.Text } );Set(outputvar, chatgptprocessing.Run(JSON(convlist)));Set(outvar, Text(ParseJSON(outputvar.output).choices.'0'.message.content));Collect(convlist, { role : "assistant", content: outvar});

• Now create a gallery to show the conversation
• drop the vertical gallery
• assing the value to convlist

convlist

• Now bring a create a clear button

Clear(convlist);Collect(convlist, { role : "system", content: " I am Chat bot - helpful assistant." });Set(outvar, "");

• Now save and test the app

Original article — Samples2023/powerappchtgpt.md at main · balakreshnan/Samples2023 · GitHub

BECOME a WRITER at MLearning.ai