Build an API function with ChatGPT

Generate the JSON payload of a function with the ChatGPT integration of the Azion Console editor, then read the response with Preview deployment.

Last updated

View as Markdown Agent setup

You build a function that answers a GET request with HTML and a POST request with JSON. The ChatGPT integration of the Azion Console code editor writes the JSON payload from a comment.

Two neighboring pages own the parts this one leaves out:

Prerequisites

Declare the OpenAI credentials

The integration runs on the credentials of your own OpenAI account. It reads them from a comment in the source code of the function, so the credentials come first.

To put the credentials in the source code of a new function:

Open the Functions page

Access Azion Console > Products Menu > Libraries > Functions.

Select + Function
Name the function

Enter a name for the function. For example: chatgpt-api.

Replace the placeholder code in the Code tab

In the Code tab, replace the placeholder code with the two values of your OpenAI account:

JavaScript
01/*
02ChatGPTKey=[TOKEN VALUE]
03ChatGPTOrg=<your-organization-id>
04*/

The editor commands of the integration now authenticate with your OpenAI account.

Azion Console renders no preview while the source code carries no PreviewProvider function. The preview shows a warning that names the missing function. A later section adds that function.

Generate the response data with ChatGPT

Code generation turns a comment into JavaScript. The ChatGPT: Generate command reads the selected comment as the prompt and writes the code it returns.

To generate the object the API returns:

Enter the prompt as a comment

Below the credentials, enter the comment that describes the object:

// generate an object with 5 properties being 2 of them array of objects
Select the comment
Open the context menu of the editor and select ChatGPT: Generate

The request takes a few seconds.

Read the generated code

The integration writes the object in the editor. The output is similar to:

JavaScript
01let myObject = {
02 property_1: 'value_1',
03 property_2: 10,
04 property_3: true,
05 property_4: [{object_1: 'value_1'}, {object_2: 'value_2'}],
06 property_5: [{object_3: 'value_3'}, {object_4: 'value_4'}]
07};

The source code now carries the object the API returns for a POST request.

Assemble the handler

The generated object is data. The handler decides what the function returns for each request method. A fetch handler branches on request.method: the markup for a GET, the object for a POST.

Complete the source code with the HTML constant, the handler, and the default export:

JavaScript
01const html = `<!DOCTYPE html>
02<body>
03 <h1>Hello World</h1>
04 <p>This markup was generated by Azion Functions.</p>
05</body>`;
06
07let myObject = {
08 property_1: 'value_1',
09 property_2: 10,
10 property_3: true,
11 property_4: [{object_1: 'value_1'}, {object_2: 'value_2'}],
12 property_5: [{object_3: 'value_3'}, {object_4: 'value_4'}]
13};
14
15async function handleRequest(request) {
16 switch (request.method) {
17 case 'GET':
18 return new Response(html, {
19 headers: {
20 'content-type': 'text/html;charset=UTF-8',
21 },
22 });
23 case 'POST':
24 return new Response(JSON.stringify(myObject), {
25 headers: {
26 'content-type': 'application/json',
27 },
28 });
29 }
30}
31
32export default {
33 async fetch(request, env, ctx) {
34 return handleRequest(request);
35 },
36};

Each branch declares the format it returns in the content-type header:

  • The GET case returns the html constant as text/html;charset=UTF-8.
  • The POST case returns the generated object as application/json.

The switch covers GET and POST. Add a case for every other method the API answers.

The default export is the ES Modules pattern, the recommended way to structure a function. To move existing code off the legacy Service Worker pattern, refer to Migrate handler patterns in Functions.

The source code now holds the complete handler of the API.

Preview the response

Preview deployment runs the function in Azion Console and shows the response the code returns. It calls PreviewProvider, an auxiliary function in the source code that builds a simulated request for the handler.

To read both responses before the function serves traffic:

Add a PreviewProvider function to the source code

PreviewProvider builds the request the preview sends and returns the response the preview renders. Add it below the default export, with GET as the method:

JavaScript
01function PreviewProvider(args) {
02 var request = new Request("https://www.azion.com/example", {
03 method: "GET",
04 headers: {
05 "Content-Type": "application/json",
06 },
07 redirect: "follow",
08 });
09 return handleRequest(request);
10}

For every value the simulated request carries, refer to PreviewProvider function.

Open the context menu of the editor and select Format Document
Read the output in the code editor

The preview renders the text/html response as the page. Select Open to read the same output in a separate browser tab.

Change the method inside PreviewProvider to POST
Read the output again

The preview renders the application/json response as the JSON body of the generated object.

Both responses of the function appear in Azion Console, with no deployment.

Save the function

The complete source code carries the credentials, the generated object, the handler, and the preview function:

JavaScript
01/*
02ChatGPTKey=[TOKEN VALUE]
03ChatGPTOrg=<your-organization-id>
04*/
05
06const html = `<!DOCTYPE html>
07<body>
08 <h1>Hello World</h1>
09 <p>This markup was generated by Azion Functions.</p>
10</body>`;
11
12let myObject = {
13 property_1: 'value_1',
14 property_2: 10,
15 property_3: true,
16 property_4: [{object_1: 'value_1'}, {object_2: 'value_2'}],
17 property_5: [{object_3: 'value_3'}, {object_4: 'value_4'}]
18};
19
20async function handleRequest(request) {
21 switch (request.method) {
22 case 'GET':
23 return new Response(html, {
24 headers: {
25 'content-type': 'text/html;charset=UTF-8',
26 },
27 });
28 case 'POST':
29 return new Response(JSON.stringify(myObject), {
30 headers: {
31 'content-type': 'application/json',
32 },
33 });
34 }
35}
36
37export default {
38 async fetch(request, env, ctx) {
39 return handleRequest(request);
40 },
41};
42
43function PreviewProvider(args) {
44 var request = new Request("https://www.azion.com/example", {
45 method: "GET",
46 headers: {
47 "Content-Type": "application/json",
48 },
49 redirect: "follow",
50 });
51 return handleRequest(request);
52}

To store the code, select Save.

Azion Console stores the function and makes it available to instantiate on an application. The function serves no traffic until an instance binds it and a Rules Engine rule selects that instance.

Next steps

Run a function on an applicationAdd the Rules Engine rule that runs the instance, from Azion Console or the Azion API.ChatGPT integrationThe credentials, the editor commands, and code refactor.Preview deploymentEvery value the simulated request carries, and how the preview renders each format.Write and test a functionThe handler patterns of a function, and where to read its log output.Function instancesPass Args to an instance in JSON.Build a RESTful API with Functions and SQL DatabaseAn API backed by a database, with create, read, update, and delete operations.