How to integrate ChatGPT AI into a UI Builder app

[mark-piller]

Unlock the potential of Artificial Intelligence and take your UI app to new heights with the seamless integration of OpenAI ChatGPT API service, now available on the Backendless Marketplace! This exciting addition empowers developers to harness the incredible capabilities of ChatGPT and enrich their applications with AI-driven functionalities. In this article, we’ll delve into a step-by-step guide on how to integrate the ChatGPT API service into your UI Builder app. By understanding the data flow and implementation process, you’ll be well-equipped to explore a wide array of possibilities.

To get started, head over to the Marketplace by navigating to BACKEND > Marketplace > API Services and locate the OpenAI API Service. Follow the service’s installation instructions.

Once the service is installed, navigate to FRONTEND > UI Builder. The first step would be creating a ChatGPT session. This should be done early on in the life cycle of your UI app. For instance, a good candidate for this is the On Page Loaded event of the default page. Select the page and navigate to the Logic section:

In the Logic Editor screen, you will see a list of available API services on the left side of the interface, the OpenAI service will also appear there with the Codeless blocks corresponding to the available service methods:

The following logic creates a new ChatGPT session. Notice the session ID is stored in Page Data. This will work for the demo created in this article, however, if your app has more than one page and you plan on using the AI integration on a page other than the default one, it would make sense to place the session ID into App Data instead:

The sessionId property will be used in the API requests to communicate with OpenAI.

Return to the USER INTERFACE tab and add the following components as shown below:

• TextArea - this is where you will enter a prompt to be sent to ChatGPT
• Button - clicking the button will send the prompt and get a response
• Paragraph - it will render AI responses
  
  

Let’s establish data binding as it will be critical to get the demo working:

1. Click the TextArea component and navigate to its Logic:
   
   
2. Locate the Value Logic handler and assign a property name, let’s call it prompt. What this will do is automatically place any value entered in the TextArea into the prompt property of Page Data:
   
3. Return to USER INTERFACE and select the Paragraph component. Switch to its logic:
   
   
4. Locate the Content Logic handler and assign a property name, let’s call it gptResponse. This will automatically render a response from AI in the paragraph when the gptResponse property is updated in Page Data:
   

Now that the data-binding is in place, what’s left is to add the logic for sending a prompt to AI and get the response. The logic will be in the Button’s On Click Event. Select the Button in the USER INTERFACE and click the Logic icon:

Below is the logic for handling the button click. Please note the following details:

• The message connector gets its value from the prompt property in Page Data. The data gets there when the user enters anything in the Text Area component.
• The sessionId connector gets its value from the sessionId property in Page Data. The value of that property is populated when the page is loaded - this is the first thing we did in the article.
• The result of the sendMessage API call is assigned to the gptResponseObject variable.
• The logic gets the responseMessage property from the gptResponseObject variable and puts it into the gptResponse property of Page Data. This in turn triggers a re-render which displays the response value in the Paragraph component.
  
  

Now run the page and enjoy the power of ChatGPT in your UI Builder app:

IMPORTANT: Please note that for some prompts, ChatGPT may take longer than 5 seconds to respond. This is important because the default execution time of Cloud Code in Backendless is 5 seconds. The OpenAI API service runs in Cloud Code and subsequently is subject to the limit. It is possible to expand the limit to the multiples of 20 seconds through a function page available in the Backendless Marketplace: