How to build an API with Edge Functions and ChatGPT

Learn about the required process to create an API with Edge Functions and ChatGPT and have the response shown on the Azion Preview Deployment.

To do so, you need to:

To start creating your API, proceed as follows:

  1. On Azion Console, on the upper-left corner, select Edge Functions in the Edge Libraries section.
  2. Click on Add a Function.
  3. Choose a name for your function.
  4. Delete the placeholder function that is inside the code editor.
  5. Add your OpenAI API key and organization ID to the code as a comment:
    /*
    ChatGPTKey=sk-xxxxxxx
    ChatGPTOrg=org-xxxxxx
    */

Note: the preview will present a warning mentioning the necessity of the PreviewProvider function. Don’t worry, this situation will be covered by the upcoming steps.

  1. Copy and paste the following const:
    const html = `<!DOCTYPE html>
    <body>
      <h1>Hello World</h1>
      <p>This markup was generated by Azion - Edge Functions.</p>
    </body>`
  1. Write the following prompt inside the function, right below the OpenAI credentials that were pasted on step 5:
    // generate an object with 5 properties being 2 of them array of objects
  1. Select the prompt > click on it with the right button > choose ChatGPT: Generate. Wait a few seconds for it to complete the request.

The expected output should be similar to:

    let myObject = {
        property_1: 'value_1',
        property_2: 10,
        property_3: true,
        property_4: [{object_1: 'value_1'}, {object_2: 'value_2'}],
        property_5: [{object_3: 'value_3'}, {object_4: 'value_4'}]
    };
  1. Add the handleRequest function, containing a switch case, with a GET and a POST method:
async function handleRequest(request) {
  switch (request.method) {
    case 'POST':
      return new Response(JSON.stringify(myObject), { // Returning the object generated by ChatGPT
        headers: {
          "content-type": "application/json",// Altering the content-type to application/json
        }
      })
    case 'GET':
      return new Response(html, {
        headers: {
          "content-type": "text/html:charset=UTF-8",
        }
      })
  }
}
  • The POST method returns a JSON object, that was generated by the ChatGPT: Generate option.
  • The GET method returns the HTML const that was declared on step 6.
  1. Copy and paste the PreviewProvider function, responsible for simulating requests:
    function PreviewProvider(args) {
      var request = {
        body: {},
        headers: {},
        method: "GET",
        redirect: "",
      }
      return handleRequest(request)
    }
  1. Add the addEventListener function, which triggers the whole processing of the edge function:
    addEventListener("fetch", event => {
            return event.respondWith(handleRequest(event.request))
          })
  1. Click with the right button anywhere inside the code editor and select Format Document.

At this point, your edge function should look like this:

    /*
    ChatGPTKey=sk-xxxxxxx
    ChatGPTOrg=org-xxxxxx
    */
    const html = `<!DOCTYPE html>
    <body>
      <h1>Hello World</h1>
      <p>This markup was generated by Azion - Edge Functions.</p>
    </body>`


    let myObject = {
            property_1: 'value_1',
            property_2: 10,
            property_3: true,
            property_4: [{object_1: 'value_1'}, {object_2: 'value_2'}],
            property_5: [{object_3: 'value_3'}, {object_4: 'value_4'}]
        };


    async function handleRequest(request) {
      switch (request.method) {
        case 'POST':
          return new Response(JSON.stringify(myObject), { // Returning the object generated by ChatGPT
            headers: {
              "content-type": "application/json",// Altering the content-type to application/json
            }
          })
        case 'GET':
          return new Response(html, {
            headers: {
              "content-type": "text/html:charset=UTF-8",
            }
          })
      }
    }


     function PreviewProvider(args) {
      var request = {
        body: {},
        headers: {},
        method: "GET", //or POST
        redirect: "",
      }
      return handleRequest(request)
    }


      addEventListener("fetch", event => {
        return event.respondWith(handleRequest(event.request))
      })

If you want, you can switch the method inside the PreviewProvider function and get a live preview of the responses on the Azion Preview Deployment.

  1. Click the Save button.

Now, the function is ready to be instantiated in an edge application. Check how to instantiate and execute the functions in your edge application and try it out.

Contributors