HOW TO: Integrate ChatGPT into Intelligent Agent  

In our latest ‘How To’ guide, Awaken Head of Innovation, Andrew Hemingway, looks at a step-by-step process for integrating and customising ChatGPT within our dynamic scripting and workflow tool, Intelligent Agent. 

Step One.  

Create an account with OpenAI and create an API key that will allow authentication for API calls. 

Step Two. 

Look on the OpenAI website for JavaScript code examples, such as: (https://platform.openai.com/docs/api-reference/chat). 

Step Three. 

Take the cURL code provided in the example and import it into postman (file->import->cURL). 

Step Four. 

Replace the $OPENAI_API_KEY with the API you generated and then click ‘Send’ to prove communiations work. 

Step Five. 

Click the code button in top right corner and select JavaScript XHR. 

Step Six. 

Create a script and paste the JavaScript XHR code into a JavaScript button in the script and then alter the “messages” section of the API call. Run the script with the browser dev tools open and click the button and you will see the response from ChatGPT logged into the console (this is due to the code on line 17). 

Step Seven. 

Alter the messages section of the code to now use field values instead of hardcoded values. In my case I added a conversations field (to pass in as context) and a prompt field (to pass in as the prompt). 

Step Eight. 

Instead of logging the response out to the console, now push the response into another field on the page that I have called “Summary”. I’ve mapped the specific part of the response that contains the data I want into the field and then I need to tell the script that the field value has altered by calling CS.Script.DoCalculations() so any calcs on the page will re-run once the summary comes back.  

Step Nine. 

This script will now allow a conversation to be pasted into the conversations field, a prompt to be entered in the prompt field (such as summarise the call in 4 bullet points) and when the button is clicked these values will be passed to the OpenAI API code, along with the API key and when the response comes back it will populate the summary field with the response. 

Simplifying configuration 

Now that we have some working code within the script, we need to make it easier for script designers who are not familiar with JavaScript to also use the GPT integration as well as hiding the API key and logic from users who may choose to try and alter things.  

Step One. 

Create a control from the code we are currently running inside the JavaScript button.  

Name the new control “GPT control” and paste the code from the JavaScript button into the control code encapsulated by <script> tags.  

Step Two.  

Then add the following code to present a button on screen to the user to allow them to invoke the API call by a button click: 

<tr> <td colspan=”2″ align=”center”> 

    <button class=”btn btn-success” type=”button” onclick=”GPT()”>Ask GPT</button> 

</td></tr> 

Step Three. 

Currently the control code will not know what JSON.stringify([Prompt]) is as the control will not have any reference to other controls such as the prompt field we added in part 1.  

So, we will add a control attribute and call it “Prompt”. When the control is added to the page, the script builder will enter a value for this attribute to control the prompt that is passed into the API call. We will also add two other attributes for “Conversation” and “Response”. 

Step Four.  

At this stage the control could be added to the script and the script designer could enter a prompt and a conversation into the control attributes and click the button to fire those off to the API call.  

But usually this information comes from fields in the script and they are dynamic instead of the script designer passing values into the control attributes we will ask them to pass in field names that contain the values we want to use i.e. in the Prompt attribute they would enter [Prompt], in the conversation attribute they would enter [Conversation] and in the summary attribute they would enter [Summary] as these are the fields in the script we want to interact with and take values from.  

Step Five. 

You will now need to amend the control code slightly so instead of using the control attribute directly in the code, it will need to take the field name from the attribute and grab the value for that field. The way we do this is with the following code: 

JSON.stringify(Script.Utils.GetCSObject(‘[attr]Prompt[/attr]’).value) 

 So, the control code now passes in the values from the field names specified in the control attributes. 

Step Six. 

We then need to do the reverse with the Summary field as we want to pass the response back out into the field and then fire the calculations on the page. So, in order to do that we use the following code. 

Script.Utils.GetCSObject(‘[attr]Response[/attr]’).value = response.choices[0].message.content; 

CS.Script.DoCalculations(); 

 This will take the response object and the property that contains the value we want and it sets the value back into the field that is specified as the Response field and then fires doCalculations() which requires any JS code logic on the page.  

Step Seven. 

When the new GPT control is added to the page it will have the ability to configure which field to get the conversation from, which to get the prompt from and which field to update with the response 

Provided these field names exist on the current page, the control will allow the user to click a button and the values will be passed dynamically into the API call and the necessary field updated with the results. 

For more information on anything you have read in this article, please get in touch.