OpenAI integration

8min

Integrating OpenAI into your

 offers tremendous potential to enhance functionality, improve user experiences, and drive innovation. By leveraging the power of advanced AI models, you can create smarter, more responsive, and engaging apps that meet users' evolving needs. Whether building a new app or enhancing an existing one, OpenAI provides the tools and capabilities to transform your vision into reality.

What AI models do we support?

 provides an integration layer allowing you to call any REST-based service. AI services such as ChatGPT provide a REST service.

supports any AI service that is exposed to a REST service.

Considerations

  • Use your ChatGPT API key or AI model key to authorize the function calls.
  • When integrating OpenAI's language models into your app, configure prompts to ensure optimal performance. Effective prompting can significantly influence the quality of responses generated by the AI.
  • Refer to https://platform.openai.com/docs/ for more information on OpenAPI.

Prompts

A prompt is the input you provide the AI model to generate a response. This input can range from a simple question to a complex set of instructions. The effectiveness of the response largely depends on how well the prompt is crafted.

The ChatGPT REST API allows prompts in the JSON body parameter you send to the ChatGPT REST API. You can configure this in

 functions and the prompting tags are found within the JSON body under messages and content, as shown in the example below. Review the examples below and compare the bland and engaging prompt examples. Configuring these prompts correctly will significantly improve your outcomes.

bland-prompt
engaging-prompts


How to integrate with OpenAI

  • Select your
    
    visual component, such as chat, media picker, checklists and your use case.
  • Configure the REST API integration.
  • Show it in your Jigx mobile app.
OpenAI integration
OpenAI integration


High-level steps

  1. Open
    
    in
    
    and create a
    
    solution.
  2. Under the functions folder create a function.jigx file to configure the OpenAI REST API. For more information on configuring a REST function see REST Overview.
  3. In the functions file configure the REST Authentication required by the REST API.
  4. Configure the prompts to tell AI what it should do and how it must act in the messages >"content:" property in the inputTransform in the functions file.
  5. Create a Jigs (screens) under the
    
    s folder.
  6. Add Components (controls) to the
    
    and configure accordingly.
  7. Configure an action to call the OpenAI function. In most instances a sync-entities action is configured to return the reponse from the AI server.

Function configuration



 functions are used to configure the REST integration with AI models such as ChatGPT. Once a

function has been configured you can call it anywhere from your visual components. See the section on REST integration to understand how to use REST in

. Below is an explanation describing how the parameters are configured to integrate

and the AI model. It is important to refer to the AI model REST API you have selected to use, to ensure you have provided the required input and configured the output to return the correct response from the model.

Parameter

Description

method

POST -The POST request can be used to send training data to the server where the AI model is hosted. The server can then use this data to train the model.

url

Specify the URL for the AI model's REST API. For example, the URL for ChatGPT is: https://api.openai.com/v1/chat/completions

outputTransform

The ouputTransform is where you configure the AI reponse. Check the AI API response to ensure you add the correct configuration. For example, OpenAPI response shows the following code:

{ "id": "chatcmpl-123", "object": "chat.completion", "created": 1677652288, "model": "gpt-3.5-turbo-0125", "system_fingerprint": "fp_44709d6fcb", "choices": [{ "index": 0, "message": { "role": "assistant", "content": "\n\nHello there, how may I assist you today?", }, "logprobs": null, "finish_reason": "stop" }], "usage": { "prompt_tokens": 9, "completion_tokens": 12, "total_tokens": 21 } }

In the

 outputTransform you configure the following:

outputTransform: | { "content": $.choices[0].message.content }

inputTransform

Provide the AI with the information it requires to return the response/chat message. model - is the name and version of the AI model. response_format - the expected input type, for example, json_object. message - under this property configure the prompts to train the AI, by specifying the role and content. You can configure multiple sets.

parameters

Configure authorization and authentication depending on the AI model you using. Configure the type, required and location of the parameters.

Examples and code samples

Chatbot with OpenAI

In this example, you set up an AI chat experience using the

 chatbot visual component configured to integrate with the OpenAI ChatGPT REST endpoint - https://api.openai.com/v1/chat/completions. The REST API is configured in the ai-function.jigx and the chat component in the ai-chat.jigx file.

The configuration for the function file called ai-chat.jigx contains:

  1. The URL for the OpenAI REST API for chat.
  2. The outputTransform specifies what to return from the OpenAI REST call.
  3. The inputTransform contains the structure and prompts set that the AI requires, in this instance model, response format, and messages.
  4. The parameters include Authorization, which depends on your AI model; in this example, a Bearer token is used; question, author, and user.

Configure the

 ai-chat.jigx file with:

  1. onRefresh action - this allows the chat screen to be cleared/reset by deleting the messages.
  2. datasource (local data provider) to return chat history while in the app.
  3. component-chat configured to show the message and sender details.
  4. onSend action executes the global action that pushes the chat message (input) to the local data provider and then a sync-entities action syncs chat with the REST API by executing the function to return the answer (response).

The component.chat is currently in preview. Contact [email protected] for access to the component.

AI chatbot
AI chatbot

ai-chat.jigx (function)
ai-chat.jigx
ai-chat-action.jigx


Anaylze images with OpenAI

In this example, an image is analyzed by integrating with the OpenAI ChatGPT REST service to analyze the image to provide a general reponse. An image is uploaded in a

 using the media-field component. When the Analyze image button is pressed a sync-entities action is configured which calls the function to execute the OpenAI REST API call. The result returned from the OpenAI call is used to add a description for the image in an entity-field component.

AI description for image
AI description for image

ai-image-function.jigx
ai-image.jigx