Embedding ChatGPT in Your Jigx Mobile App

Mobile apps have transformed how businesses interact with customers across industries. From e-commerce to on-demand transportation, apps streamline processes and enhance user experiences. By integrating artificial intelligence (AI) through ChatGPT, you can unlock even greater potential for your mobile app. Leveraging OpenAI’s APIs, you can tap into ChatGPT’s features, like customer support, natural language processing, and content generation.

In this article, you’ll build a Jigx mobile app and connect it to ChatGPT via OpenAI’s APIs, which you’ll use to add a ChatGPT-powered feature to your app.

Prerequisites

To integrate ChatGPT into a Jigx mobile app, you will need the following:

An OpenAI account with credits
A Jigx account
The Jigx iOS or Android app downloaded and installed
The Jigx Builder extension in Microsoft Visual Studio Code installed

Set Up a New Jigx Project

Jigx is a low-code platform that simplifies app development in various ways. It offers an extension called Jigx Builder that assists with code completion, provides a dashboard to view your solutions and their data, and includes an app for testing as you code.

To set up a new Jigx project, please follow these instructions:

Open VS Code and click the Jigx Builder icon on the left sidebar.
Click the Create New Jigx Solution button.
Fill in the solution’s title, use ChatterAI for this tutorial, select a category, and pick a folder to save the project.

VS Code will open your project and sync the Jigx files. You will need to publish your solution to the Jigx dashboard to interact with it. You can do this as follows:

Click the Jigx Builder icon, and you should see the Jigx solution you have created.
Click the rocket icon to publish the solution to your dashboard. You should see the solution in your Jigx dashboard.

Open the Jigx solution to view its details and the various settings you can change. Additionally, you can open the Jigx app, and you should be able to see and interact with the solution you created above.

Connect to ChatGPT via the OpenAI REST API

Before connecting the OpenAI API to the app, you need to understand how it should be constructed and the response it gives back. A tool like Postman can help you build and make requests to OpenAI and view the response from the API.

The OpenAI API responds with a JSON object. To use the object in the Jigx app, you need to transform it and extract the necessary values. In this tutorial, you will need the id, role, and content from the data. You can use JSONata to view and write the various query transformations you need, as shown below:

Let’s start by making a request from the Jigx mobile app. In your Jigx project, open the functions folder and create the file openai-request.jigx. Add the code below to connect to the REST API:

provider: DATA_PROVIDER_REST
method: POST
url: "https://api.openai.com/v1/chat/completions"
format: json

parameters:
  Authorization:
      location: header
      type: secret
      value: openai-secret
  Content-Type:
      location: header
      type: string
      value: application/json
  userContent:
    type: string
    location: body
    required: true
  systemContent:
    type: string
    location: body
    required: true
      
inputTransform: |
  $.{
    "model": "gpt-3.5-turbo",
    "messages": [
      $.{
        "role": "system",
        "content" : $.systemContent
      },
      $.{
        "role": "user",
        "content": $.userContent
      }
    ]
  }
  
outputTransform: |
  {
    "id":$.id,
    "role":$.choices[0].message.role,
    "content":$.choices[0].message.content
  }

The above code declares a REST function that makes a POST request to the OpenAI endpoint. The parameters section declares the various values that should be passed to the function when making the request. You should take note of the Authorization parameter, which is a secret-type parameter and has a defined value. Since its value is a credential, this will be configured in the Jigx dashboard later in this section.

The inputTransform builds the JSON data that will be sent to the REST API. It collects and includes the values of userContent and systemContent passed to the function. The outputTransform decodes the JSON response from the API and returns the values you have requested—in this case, the id, role, and content. Furthermore, Jigx saves this data in the SQLite database, where you’ll access them later on when displaying it to the user.

To configure the openai-secret secret, open your solution in the Jigx dashboard and click the Credentials tab. Create a new credential named openai-secret, select the type to be Secret, and fill in the secret as shown: Bearer your-open-ai-key.

To test the API, publish your solution and then navigate to the dashboard’s REST Functions tab. On the right tab, you should see the function you created earlier. Click on it to preview and test the connection.

Once the REST API is ready, you need to connect it to the app’s UI for user interaction, as detailed in the next section.

Configure the UI of the Jigx App

The mobile app will have two screens: home and chat. The home screen lists various ChatGPT model roles. When a role is clicked, the app will navigate to the chat screen, where you can send a message and view the response from the API.

The different ChatGPT model roles will be static data. To define them, open the datasources folder, create the file chatter-list.jigx, and add the following code:

type: datasource.static
options:
  data:
    - id: 1
      title: Translate
      subtitle: Translate natural language text.
      system: You will be provided with statements from different languages to translate. You should identify the language and provide the requested translation.
    - id: 2
      title: Mood to color
      subtitle: Turn a text description into a color.
      system: You will be provided with a description of a mood, and your task is to respond back with a color that can best represent the mood.
    - id: 3
      title: Marv the sarcastic chat bot
      subtitle: Marv is a factual chatbot that is also sarcastic.
      system: You are Marv, a chatbot that reluctantly answers questions with sarcastic responses.

This list defines the roles of the ChatGPT model, including translating, providing sarcastic responses, and representing moods with colors. To view these roles in the app, you will hook them with the UI. Open the jigs folder and create a new file named home.jigx. Add the following code:

title: ChatAI Prompts
type: jig.list

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1679403766665-67ed6cd2df30?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
        title: Welcome to Chatter
        subtitle: Your AI Companion


data: =@ctx.datasources.chatter-list
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.title
    subtitle: =@ctx.current.item.subtitle
    rightElement:
      element: button
      title: "Chat"
      onPress:
        type: action.go-to
        options:
          linkTo: chatter
          parameters:
            system-content: =@ctx.current.item.system

This code defines a header that displays an image, title, and subtitle. It also displays the ChatGPT roles in a list and defines an action to move to the next screen—chatter—when a role is clicked while passing the value system-content.

To declare the chatter screen, open the jigs folder and create a new file, chatter.jigx. Add the code below:

title: Chats
type: jig.default

datasources:
  content:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_LOCAL
      entities:
        - entity: chats
      query: SELECT id, '$.role', '$.content' FROM chats

children:
  - type: component.form
    options:
      children:
        - type: component.text-field
          instanceId: messageInput
          options:
            isAutoFocused: true
            isMultiline: true
            isRequired: true
            isReturnKeyEnabledAutomatically: true
            textArea: medium
            label: "Enter a message"
            style:
              isBusy: false

  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: =@ctx.datasources.content.role
            value: =@ctx.datasources.content.content
            contentType: default

actions:
  - children:
      - type: action.execute-entity
        options:
          title: Send
          goBack: stay
          method: functionCall
          entity: chats
          provider: DATA_PROVIDER_REST
          function: openai-request
          functionParameters:
            userContent: =@ctx.components.messageInput.state.value
            systemContent: =@ctx.jig.inputs.system-content

This screen displays a text input field called messageInput, an entity field to display the ChatGPT response, and a button to send the API request. When clicked, the button passes the user input and the ChatGPT role from the previous screen to the REST function, which in turn makes the request to the OpenAI endpoint.

Once a response is received, the data is saved locally in sqlite. For this reason, the datasources section is used to retrieve the most recent response from the database, which is then displayed to the user. The entity key acts as a reference, linking the data structure in the response to the corresponding table in the SQLite database. In this case, the value chats ensures consistent mapping across the response, data source, and actions sections.

Finally, open the index.jigx file and change the jigId to home.

widgets:
  - size: 1x1
    jigId: home

Publish the solution and open the Jigx app to view and test it.

Conclusion

In this article, you learned how to embed ChatGPT into a Jigx mobile app via the OpenAI API. You defined a REST function with the necessary parameters, configured a secret key to connect to OpenAI, and transformed the API response into meaningful data for display to the user. You built AI assistants with ChatGPT to respond to questions sarcastically, translate natural language, and give a color representing a mood. From these examples, you have learned how to leverage the power of AI via ChatGPT and what it takes to integrate it into a Jigx app.

Jigx is a low-code platform that accelerates mobile app development for your business. It features an intuitive dashboard for viewing your app’s data and testing various functions, enabling you to swiftly go from zero to publication.