Introduction

This plugin The Generative AI Plugin is a plugin that adds a new option under the the Design New App page  page to help assist with app creation using the a Generative AI language model. It is used to build a skeleton/foundation of an app through instructions/prompts by users and builds a foundational app skeleton based on user instructions or prompts. You can further enhance the app app’s functionality as desiredafter generation. This article will explore the functionality and capability of this plugin by creating a Purchase Requisition App using this demonstrates how to create a Purchase Requisition App using the plugin.Prerequisite

Prerequisite 

The following requirements are required to use the plugin:

• Joget Enterprise

...

• version 8.1.0

...

• or later.
• Generative AI Plugin downloaded and installed.
• Process Enhancement Plugin DX downloaded.
• An

...

• API Server URL and Server API key. The URL and API key can be requested from the Joget Intelligence website.
• An LLM Key. For example, you can obtain one from OpenAI.
• A backend Python container (optional if you are using a Joget-hosted container).

Figure 1: Obtain Obtaining API keys from OpenAI

Where to get the plugin

You can download the AI Agent Builder plugin from the Joget Marketplace.

Steps Example

Step 1

Once everything is set up, select the Design App -> and click the Create New App option located at the left sidebar in the App Center.

...

Figure 2: Design App > Create New App

Step 2

Select the Generative AI (Beta) option.

Image RemovedImage Addeda

Figure 3: Generative AI (Beta) option

Step 3

Once clicked, you'll see the following, simply click on "Configure Service". Click Launch Joget AI Designer.
Image RemovedImage Added

Figure 4: Configure Service

Step 4

Under the Link your API Server icon, paste an API Server URL and API Server Key into the provided fields. Click Save.

Image AddedSelect "Configure ChatGPT Service" and paste your API Key into the API Key field.
Image Removed

Figure 5: Configure API Service Configuration

Step 5

Once the setup is done, you'll see the following screens and you may begin to prompt the App requirements.

Image Removed

Figure 6: Generative AI (Beta) prompt

Step 6

Fill in the App ID and Name respectively. For this example, "purchaseRequisition" as App ID, and "Purchase Requisition App" as App Name. The provided text will used as the text prompt in generating the app. Once everything are filled in, click on "Save".

Click the Setup AI Services icon and click Configure.
Image Added 

Configure the following:

1. For AI Service Name, provide a display name for the AI model.
2. For Model Class, select an AI model from the drop-down list.
3. For Model Name, select the model version from the drop-down list.
4. Optionally, re-enter the API Key for API Key (Optional).
5. Click Create and click Save.
6. Optionally, click the PII Masking to configure PII Masking.

Image Added

Figure 6: Configure new AI Service

Step 6

After setup, click Design your app on the top right. Select either of the following options:

• • Text: Creates an app design based on text.

  • Image: Creates an app design based on an image.

This tutorial uses the Text option.

Image AddedImage Removed 

Figure 7: Text Promptoption

The textInput your prompt text. As an example:

"Generate a purchase requisition application which involves employee, HOD & Finance. If the total price is greater than $10000, it requires approval from the
HOD before getting approval from finance. If the total price is lesser than or equals to $10000, then it does not require approval from HOD."

Step 7

Once the app finishes generating, you'll see the following indicating a success. 
Image Removed

Figure 8: Result 

Design an expenses claim application. The process begins with the employee submitting an expense claim form detailing the expenses incurred. The claim is then reviewed by the immediate supervisor for initial approval. Once approved, it is forwarded to the finance department for verification of receipts and compliance with company policy. If the claim exceeds $500, it requires additional approval from the department head. After all approvals, the finance department processes the reimbursement and notifies the employee of the payment status."

Step 7

An Any further adjustments to your query? reply message is displayed in the chatbox with the following options available:
Image Added

Figure 8: Making further adjustments to the text prompt.

• Enhance Query: Uses AI to improve the query presented by adding additional details to yield improved results.

  • Revert: Reverts the Enhanced Query response back to the original query.

  • Regenerate: Regenerate a new Enhanced Query response.

  • Continue: Proceed to the Process Proposal stage.

• PII Masking: Redacts sensitive information presented in the query to improve security and anonymity.

  • Revert: Reverts the PII Masking response back to the original query.

  • Regenerate: Regenerate a new PII Masking response.

  • Continue: Proceed to the Process Proposal stage.

• Skip: Skips any adjustments and proceeds to the Process Proposal stage.

Step 8

The process of designing an app using Joget AI Designer consists of four main stages which include Process Proposal, Forms and Participants, Process Design, and Form Design. Complete all of these steps to generate a functional app.

In the Shall we proceed to the Process Proposal stage? page, click Process Proposal.

Image Added

Figure 9: Moving to the Process Proposal stage

Step 9

A summary of the app design is displayed. The following options are available:

Image Added

Figure 10: A summary of the project proposal

• Refine: Allows users to refine the project proposal by adding additional prompts.

• Regenerate: Regenerate a new project proposal.

• Form Design: Proceed to the Forms and Participants stage.

Step 10

Add a new form or additional form by clicking Add Form to input a prompt for a new form. The AI will generate a new form.

Image Added

Figure 11: Additional form generation

If no further changes are necessary, click Create App. Provide an App ID and App Name, and click Save to create the app.

Expected outcome

After completing the steps, you will be prompted to Launch App Composer and have created an Expense Claims App. It can handle approvals based on the total claim amount criteria. The app can be configured further, just like any other Joget app.

Image AddedTest the app and customize it accordingly to your needs.

Sample Generated App: