{Step by step} Build a Canvas Apps using Chat GPT API Key:

deepeshsomani2013 Power Platform

Requirement:

In this blog, we will learn to create a Canvas App to get a response from Chat GPT by using the chat GPT API key.

Implementation:

  • Click on “+New custom connector.”
  • And select “Create from blank.”
  • Give a title to your connector.
  • Click on “Continue.”
  • Add an icon and description.
  • In scheme select “HTTPS.”
  • Host: api.openai.com
  • Now click on “Security.”

In “Security” fill the following:

  • Click on “Edit.”
  • Select “API Key” in the authentication.
  • Parameter label: API Key.
  • Parameter name: Authorization.
  • Parameter Location: Header.
  • Now go to “Definition.”
  • Create a “new action.”
  • Provide a name to the Chat GPT API.
  • Add “Operation ID.”
  • Now click on “Import from sample.”
      {
        "model": "gpt-3.5-turbo",
        "messages": [{"role": "user", "content": ""}]
      }
  • Click on “import.”
  • In request, there is a header “Content-type.”
  • Click on the Content-type -> Edit.
  • Add a default value “application/json.”
  • Make it “Required” & “Internal.”
  • Go back.
  • Now click on “body.”
  • Make it “required.”
  • And set visibility at “Important.”
  • Do the same with “Content”, “Role”, and “Model.”
  • Now go to “Test” and create a “Test connector.”
  • Now open your custom connector.
  • Click on “Edit.”
  • Go to the “Test.”
  • Fill model “gpt-3.5-turbo.”
  • Role as “User.”
  • In “content” ask your question.
  • Click on “Test operation.”
  • You can see the Chat GPT response in the “response body.”
  • Now copy the “Response body.”
  • Go back to the “Definition.”
  • In the response section, click on “default.”
  • Click on “+Import from sample.”
  • Paste the “Response body.”
  • And click on “Import.”
  • Now update your custom connector by clicking “Updateconnector.”

Let’s create a Canvas App.

  • Go to https://make.powerapps.com.
  • Sign into power apps.
  • Click on “Apps” from the left navigation panel.
  • “+New app,” Select “Canvas.”
  • Give a title to your Canvas app.
  • Select any format.
  • Click on “Create.”
  • Click on “Insert.”
  • Add a “Text input” and “Send” icon.
  • On the “OnSelect” property of the icon, write this function.
    • Set(varResponse,TestConnector.ChatGPTAPI(“gpt-3.5-turbo”,”gpt-3.5-turbo-0301″,Collect(colChats,{role:”user”,content:TextInput1.Text})));Collect(colChats,First(varResponse.choices).message);Reset(TextInput1)
  • Now add a “Flexible gallery.”
  • Click on Gallery and go to the property pane of the gallery.
  • Set the layout as “Blank.”
  • Edit a gallery.
  • Add two “Text label.”
  • Turn on the “Auto height” of “label3.”
  • And write “ThisItem.content” on the “text” property of label.
  • On the text property of “Label2”, Write “ThisItem.role.”
  • Save and publish your app.

Output:

Hope it helps! 

Power 365ing as usual! 

Any requirements, implementation or consulting work in Power Platform or Dynamics 365 – end user, Microsoft partner or an individual? 

Problem Area – Technical, Functional, Training, Development or consulting? 

Me and my team are here to assist, please fill the following form for your business needs: Click here 

Leave a comment