Summary

To build a Serverless ChatGPT API using Azure Functions, start by setting up an Azure account and obtaining an API key from OpenAI. Install the necessary tools, including Azure Functions Core Tools, and create a new project with an HTTP-triggered function. Install dependencies, such as an HTTP client library, and then customize the function code in ChatFunction.cs to call the OpenAI GPT API. Test the function locally using func start and tools like curl or Postman. Once satisfied, deploy the function to Azure using func azure functionapp publish . Ensure the secure handling of sensitive information, such as API keys, in production by leveraging Azure Key Vault or Functions application settings. Now, your Serverless ChatGPT API is deployed on Azure and ready for use, providing an efficient and scalable solution for chat-based interactions with the GPT model.

This notebook will explain details of building Serverless app with ChatGPT.

OpenAI API Account Sign-Up

Open https://openai.com/ and go to API and sign in. We are in API:

what is cool is we can have access to playground

Azure Account Creation

We need to create an Azure account because it allows you to execute codes without having a server on cloud. OpenAI app requires a server to be run. Open a Free Azure Account

then go subscription as below Link:

We now should create an azure function by going to this link. Type "function" in search bar

Now we should go and create an app:

Fill out the forms as below:

We should receive the message "Your deployment is complete":

Next we need to have Visual Studio Code to enable to deploy function. Create a folder as Scratch:

Next install Azure function extension

Next we need to sign in to Azure account that we had created:

We can see the function app we created:

Create Serverless ChatGPT API

In fact the API we created enable us to open API or any other responses we want.

First install openai

pip install openai

Building a Serveless ChatGPT API

Request OpenAI using Python

This is the first step for serverless ChatGPT API. Below is Python script to access OpenAI API:

secret_key = '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'
prompt = 'tell me a joke'

import openai
openai.api_key = secret_key

output = openai.Completion.create (  # creat a completed response based on a prompt
      model='text-davinci-003',
      prompt=prompt,
      temperature=1,
      max_tokens=100,
      top_p=1,
      frequency_penalty=0,
      presence_penalty=0
) 

print(output)

{
  "warning": "This model version is deprecated. Migrate before January 4, 2024 to avoid disruption of service. Learn more https://platform.openai.com/docs/deprecations",
  "id": "cmpl-8HGYu15uVHk2cGM116cCc2SXimsfr",
  "object": "text_completion",
  "created": 1699125932,
  "model": "text-davinci-003",
  "choices": [
    {
      "text": "\n\nQ: How do trees get online?\n\nA: They just log on!",
      "index": 0,
      "logprobs": null,
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 4,
    "completion_tokens": 19,
    "total_tokens": 23
  }
}

print(output["choices"][0]["text"])

Q: How do trees get online?

A: They just log on!

Next step is to make this script as a serverless API. We should put this in Azure function

Create Basic Azure Function

Create New Project

First we should make sure Azure extension is active. Then, go to WORKSPACE and press on "create a new project", following up the instruction by selecting Python language and version etc.

Then select template as "HTTP trigger":

Select name for app as "openaiBasic", and Athorization level as "ANONYMOUS" to make things easy. However, for final version we should make it as "Admin". Then, it will start creating our virtual environment and function. Finally the app "openai_basic" is created in function_app.py:

Create a Function app:

When we run the code for first time, it gives error for running Activate.ps1since it is block on this computer.

To solve this problem, we need to change the execution policy on our system. We can google it to find solution:

We need to run this command set-ExecutionPolicy unrestricted. We need to open up VS Code as adminstrator:

Execute Function

Run function_app.py again. It makes our Azure function works locally. To test this, we can go to Azure, workspace, to the function we created and press "Execute Function Now"

Now the function is run locally:

Deploy Function

This means that our Azure function is hosted locally. We do not want to do this locally since if computer breaks down, we will have problem. Since it is hosted on Azure environment, we can access it from every single application and from anywhere in the word. Next we should Deploy the function:

Test on portal.Azure.com

Go to www.portal.Azure.com, click on Function App, we can see name of apps created by VS code:

Get Function Url

Our function is hosted on the link provided on "Get Function Url", anybody who accesses this link will be able to access our function:

Serverless Function Testing with Postman

To pass a name in the query string, we should go to postman.com which is a platform to test an API. First step is to sign in.

Create a new request for the KPI and call it test and finally we insert the URL and send it:

Go to Body/raw and make a jason. This is something if we want to test the function locally:

Now the function is accessible by anyone or any app in the world can use this function for their Apps and workflow.

OpenAI ChatGPT and Azure Functions Integration

Go to Azure workspace and create a new HTTP Trigger function called APIcompletion:

Add openai to requirement.txt

import azure.functions as func import logging app = func.FunctionApp(http_auth_level=func.AuthLevel.ANONYMOUS) @app.route(route="SimpleApp") def SimpleApp(req: func.HttpRequest) -> func.HttpResponse: logging.info('Python HTTP trigger function processed a request.') name = req.params.get('name') if not name: try: req_body = req.get_json() except ValueError: pass else: name = req_body.get('name') if name: return func.HttpResponse(f"Hello, {name}. This HTTP triggered function executed successfully.") else: return func.HttpResponse( "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.", status_code=200 )

Change the function APIcompletion as below. This is where our main logic should go.

@app.route(route="APIcompletion", auth_level=func.AuthLevel.ANONYMOUS) def APIcompletion(req: func.HttpRequest) -> func.HttpResponse: logging.info('Python HTTP trigger function processed a request.') # give OpenAI access to secret_key # attain variables from HTTP request body # call OpenAI API # format response # provide repsonse # keep this file to make sure the function run correctly return func.HttpResponse( "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.", status_code=200)

We can fill out the function as below:

import openai import azure.functions as func import logging app = func.FunctionApp(http_auth_level=func.AuthLevel.ANONYMOUS) # sample request #{"model":"text-davinci-003","prompt":"tell me how to avoid smoking","temperature":1, #"max_tokens":50,"top_p":1,"frequency_penalty":0,"presence_penalty":0} @app.route(route="APIcompletion") def APIcompletion(req: func.HttpRequest) -> func.HttpResponse: logging.info('Python HTTP trigger function processed a request.') # give OpenAI access to secret_key secret_key = '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' openai.api_key = secret_key # attain variables from HTTP request body req_body = req.get_json() # call OpenAI API output = openai.Completion.create ( # creat a completed response based on a prompt model=req_body["model"], prompt=req_body["prompt"], temperature=req_body["temperature"], max_tokens=req_body["max_tokens"], top_p=req_body["top_p"], frequency_penalty=req_body["frequency_penalty"], presence_penalty=req_body["presence_penalty"] ) # format response output_txt = output["choices"][0]["text"] # echo repsonse return func.HttpResponse(output_txt,status_code=200)

Run this function and then execute the function APIcompletion HTTP. For Enter request body, we should put JSON string {"model":"text-davinci-003","prompt":"tell me how to avoid smoking","temperature":1, "max_tokens":50,"top_p":1,"frequency_penalty":0,"presence_penalty":0}

It is very important to have exact python packages in requirement.txt. Otherwise, the deployed function will give 500 Internal Server Error while deploying function run without any problem.

Deploying OpenAI ChatGPT to Azure Functions

Deploy function APIcompletion

Next Get Function Url. Running this Url locally gives error because it does not have access to request body. So, we can use postman to run the API. In Body, raw, we should put JSON string {"model":"text-davinci-003","prompt":"tell me how to avoid smoking","temperature":1, "max_tokens":50,"top_p":1,"frequency_penalty":0,"presence_penalty":0}

We have created an serverless API; we can add it to any application that we want. Next step is to integrate this API in application.

Power Automate & ChatGPT

Create Power Automate Flow

After creating our serverless ChatGPT API, now we can actually plug it in difference software. One software that can be freely used is Microsoft Power Automate. We can automate our manual repetitive tasks. For example, receiving email every day, export it to excel file and forward it someone else. We can automate this process.

For this notebook, we are going to automate the ChatGPT API we created with Power Automate. Power Automate is the engine of the APP.

First step is to create a flow. Go to Create> Manual trigger

HTTP Request to Integrate OpenAI ChatGPT

Type http in connector:

Fill out HTTP as below:

Initialize a variable:

Save the file and test it:

The current account is not capable of running an app.

Create Team Chatbot with CahtGPT

Log in https://teams.microsoft.com/ with the same account as Power Automate. Open a channel ExampleChatbot

Go to Power Automate Flow and create a Team "When a new channel message is added":

Power Apps & ChatGPT

Power apps is a platform to enable real life business application very quickly because it says no code/no code system. For example, this power apps can be used to create the whole system expense app system. There are a lot more benefit. First step is to make Blank app>canvas app named ExampleChatGPT:

Now we can add elements to such as Text Label, Text Input and Button to our Power Apps:

Playing this App does not do anything, so hover on Power Automate and create a new flow:

Choose an operation and put http:

Make sure you save the app and then open it again:

Next we need to return it back to power apps, go to next step, powerapps and select Responds to a PowerApp or flow PowerApps:

Next, we should add an output which is a text:

We call it response and the value of the response is HTTP request which is body:

We want the bottom we created do something: click on bottom, go on the left and select OnSelect

My account does not support "Respond to a PowerApp or flow" so I cannot run and get the result.

ChatGPT for Outlook

Install dependencies

Outlook is a simple email client. we need to have this app and install Node.js which is a javascript run time environment and it allows you to create apps with javascript. We do not need to know javascript very well because we only need it to run that app.

Open the terminal in VScode and type node --version and npm --version:

Next thing to install is Yeoman. Microsoft uses Yeoman to configure your outlook configuration to make sue we make an extension.

Type npm install -g yo generator-office. This is yo builder for office specifically. Now we create our app with Yeoman which is very simple. Type yo office in VScode terminal. Next select continue and choose Office Add-in Task Pane project

Next choose the language you want to you as 'JavaScript'. Next, What do you want to name your add-in as Outlooktest and choose outlook:

It will add project name on explorer IN VScode. Goring through manifest.xml define what the icon should look like.

However, the main code is in source (srd) and taskpane this is where the app leave in and fires from. A website has , html thais website design; skeleton of classes), css defines what different classes in html looks like. It is for styling such as padding, header, footer, display..) and js is underline engine of application which is a JavaScript file. This run codes when someone clicks on the application button

Last thing is go to the folder created from Yeo:

Now if we open up the terminal, we will be in correct space (Outlooktest is created by Yeo):

Launch Quick Add-In

Write npm start in terminal, we should make sure we are in right folder. Receive a security warning, say yes and allow Node.js to make changes:

This open Outlook with adding "Show Taskpane":

Here is our app when we click on Show Taskpane. Clicking on Run does not make any action because we have not added any thing:

Click on action does not do anything since we have add any function to it:

We can change the app by changing "taskpane.html":

Saving this on VScode changes the app:

Run ChatGPT API for Outlook

We can use fetch function in JavaScript to run ChatGPT url as below

export async function run() { /** * Insert your Outlook code here */ const Url = 'https://chatgptmehdiopenai.azurewebsites.net/api/APIcompletion?' const Parameters = { body: JSON.stringify({ "model": "text-davinci-003", "prompt": "tell me how to avoid smoking", "temperature": 1, "max_tokens": 50, "top_p": 1, "frequency_penalty": 0, "presence_penalty": 0 }), method: 'POST' }; const response = await fetch(Url, Parameters); var output = await response.text() console.log(output) }

Write npm start in VScode command line. This will open an Outlook. Next, right click on Outlooktext and press inspect:

As can be seen, there is no access to chatGPT; it is blocked because of CORS policy. It shows that your Outlook does not allow to connect with random API. Therefore, we should resolve CORS and security Errors.

Go to Azure Function App> CORS, put asterisk in Allowed Origions:

Then go to Overview and refresh the function.

If still does not work, it means the Outlook is very secure. In this case, we should go to API Management, fill out the forms and create:

Go to API Management and the created function and then choose APIs, then create a HTTP API:

Deselect Subscription required and save. Go to All APIs.

Go to API Management and choose Completion API and click on Link api:

Transfer Email body to ChatGPT

In this sections, email body is transfered to ChatGPT, get summarized and get back to Outlook.

Step 1

javascript function to get body of email

%%javascript 

let body = '' //body of email

//async function to get body of email
 async function GetBody(body) {
   Office.context.mailbox.item.body.getAsync("text", function(result){   //give context of email
    if (result.status === Office.AsyncResultStatus.Succeeded) {      //if the result of getting body is successful
     body = result.value  // make a variable as body
     ResultOutput(body)  // output body of email
    }
   })
 }

Step 2

javascript function to wrap up everything together

%%javascript 

//function to wrap up everything together
async function ResultOutput(body){
  console.log(body)
  let response = await Azurerun(body) //get the body and pass it to Azure function
  console.log(response.output)
  document.getElementById('app-body').innerHTML = "<b> Summary: </b> <br/> " + response.output
}

Step 3

javascript function to read url, body of email and make prompt for ChatGPT:

%%javascript
//async function makes the function callable
//this function calls url, parameters
  async function Azurerun(body) {

    const Url = 'https://chatgptmehdiopenai.azurewebsites.net/api/APIcompletion?'
    const jasonbody = JSON.stringify({
      model: "text-davinci-003",
      prompt: "summarize the following textin 30 words or less: " + body.replace(/['"]+/g,'').trim().replace(/(\r\n|\n|\r)/gm,""),
      temperature: 1,
      max_tokens: 100,
      top_p: 1,
      frequency_penalty: 0,
      presence_penalty: 0
    })
    console.log(jasonbody)
    const Parameters = {
      body: jasonbody,
      method: 'POST'
    };
    const response = await fetch(Url, Parameters);
    var output = await response.text();

    // Return an object with the 'output' property
    return { output: output };
}

Step 4

javascript function to execute everything

%%javascript 
await GetBody();

Here is an example:

ChatGPT with Airtable

Set up Airtable

Create a workplace to test how Airtable works and make us some synthetic customers. We want to use ChatGPT to send customer a customized email as below:

Go to Automation and create an automation when record is updated:

Choose a record as an example and then add an "Action":

OpenAI Image Generation

Go to Azure workspace and create another function:

Make another HTTP trigger named ImageAI:

Instead of openai.Completion, we should mention openai.Image. See other changes below:

import openai import azure.functions as func import logging app = func.FunctionApp(http_auth_level=func.AuthLevel.ANONYMOUS) # sample request #{"prompt":"Elephant in the room","n":1, "size":"1024x1024","top_p":1} @app.route(route="ImageAPI") def ImageAPI(req: func.HttpRequest) -> func.HttpResponse: logging.info('Python HTTP trigger function processed a request.') # give OpenAI access to secret_key secret_key = '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' openai.api_key = secret_key # attain variables from HTTP request body req_body = req.get_json() # call OpenAI API response = openai.Image.create ( # creat a completed response based on a prompt prompt=req_body["prompt"], n=req_body["n"], size=req_body["size"] ) # response of image is JSON, we choose zero itrerator of urls output_img = response["data"][0]["url"] # echo repsonse return func.HttpResponse(output_img,status_code=200)

Here is url=https://mehdiopenaiimage.azurewebsites.net/api/ImageAPI? after deploying the function. JSON function to run is {"prompt":"Elephant in the room","n":1, "size":"1024x1024","top_p":1}

Bubble and ChatGPT

Create Bubble

The next platform to integrate out Azurefunction ChatGPT is Bubble. Bubble is the best way to create an application on the web without any code. Bubble would be your best friend if you want to make an app with ChatGPT.

First make a free account in Bubble and create an app:

Bubble connect to ChatGPT

Add API Connector to the app because we want to have API connector via bubble to Azure function:

Next, create Text, Input and Buttom and go to Plugins:

Initialize Call leads to response:

Go to design, Workflow the engine of web-developer and JavaScript:

Double click on Click to Answer the directed to Workflow. Then "click here to add an action", and "Plugins", go to APIcompletion we made.

Go to "Element Action", then "Set State"

Make the output as input value:

If we go to preview: whatever with type on input will appear in output:

Modify Prompt to be Dynamic

It is annoying whenever we click on Step 1, JSON file will pop up:

Replace prompt with input value:

The result of Output should be input + running th API:

Itinerary App with ChatGPT

Create an app with the name plantravel5968, go to Plugins and add API Connector.

Design an app as below:

Go ahead and create a new page:

Go to Plugins and add another API:

Double click on the button and start a workflow:

Add columns to prompt:

Next, we need to save this somewhere:

Next step is to move generated text from index page to output:

Go to itinerary page, click on "Text Get data from page URL":

Last thing to do is to add a workflow to come back to previous page:

Here is page 1 of the app (show case is Rasht in Iran:

Here is result:

Add Image to Itinerary

Now we want to add some image to the website (place you want to go). Go to pluging, add another Call:

Finally go to Workflow and add another step to call in new API:

Change the order of steps and add another key for image:

Here is final app adding two images. The url is https://plantravel5968.bubbleapps.io/version-test/?debug_mode=true: