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:
- Be registered on OpenAI.
- Have your OpenAI API key.
- Have your OpenAI organization ID.
To start creating your API, proceed as follows:
- On Real-Time Manager (RTM), on the upper-left corner, select Edge Functions in the Edge Libraries section.
- Click on Add a Function.
- Choose a name for your function.
- Delete the placeholder function that is inside the code editor.
- 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.
- 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>`
- 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
- 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'}]
};
- Add the
handleRequest
function, containing aswitch case
, with aGET
and aPOST
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 aJSON
object, that was generated by theChatGPT: Generate
option. - The
GET
method returns the HTMLconst
that was declared on step 6.
- Copy and paste the
PreviewProvider
function, responsible for simulating requests:
function PreviewProvider(args) {
var request = {
body: {},
headers: {},
method: "GET",
redirect: "",
}
return handleRequest(request)
}
- Add the
addEventListener
function, which triggers the whole processing of the edge function:
addEventListener("fetch", event => {
return event.respondWith(handleRequest(event.request))
})
- 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.
- 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.
Related documentation
- Edge Functions Code Editor
- Edge Functions ChatGPT integration
- Azion Preview Deployment
- Edge Functions - JavaScript Runtime APIs
- Edge Functions
- Edge Functions on Edge Firewall
Didn’t find what you were looking for? Open a support ticket.