AI Designer

Introduction

This plugin adds a new option under the Design New App page to assist with app creation using a Generative AI language model. It builds a foundational app skeleton based on user instructions or prompts. You can further enhance the app’s functionality after generation. This article demonstrates how to create a Expenses Claims App using the plugin.

Plugin information

Plugins Available in the Joget AI Designer bundle:

• AI Designer
• AI Designer - Agent Injector
• AI Designer - Form Injector
• AI Designer Governance

Get started

Prerequisites

To use this plugin, ensure you have:

• AI Designer 8.2.4 is required to run on Joget Enterprise versions 8.2.7 and 9.0.3. Use AI Designer 8.2.3 for older versions of Joget DX 8 and DX 9.
• The Joget AI Designer Plugin was downloaded and installed.
• The Process Enhancement Plugin DX was downloaded and installed.
• The AI Central Configuration plugin was downloaded and installed.
• An LLM Key from Google, Anthropic, OpenAI, or custom models. For example, you can obtain one from OpenAI.
• A backend Python container (optional if you are using a Joget-hosted container)

Where to get the plugin

You can get the plugin from the Joget Marketplace.

How to install

1. Download the plugin JAR file from the releases page.
2. In Joget DX, go to Settings > Manage Plugins > Upload Plugin.
3. Once uploaded, the plugin will be available in your Joget environment.

How to use it?

Configuring a new AI Service

Before using the Joget AI Designer, an AI service must be configured after obtaining an API Key from your desired AI Service. This tutorial uses OpenAI as the AI Service. Follow these steps:

1. Navigate to Design App > Create New App from the left sidebar in the App Center.
2. Select the AI Designer option.
   

3. Click Launch Joget AI Designer.
   

4. Click Configure your AI Services. You can refer to AI Central Configuration plugin for steps on configuring your AI services to use AI Designer. Alternatively, you may configure your AI service in the Settings tab if you have the AI Central Configuration plugin installed.

Creating an app with AI Designer

1. After setup, click Design your app on the top right.
2. Select Create App for the How can I help you? prompt.
   
3. Select either of the following options:
   • Text: Creates an app design based on text.
   • File: Creates an app design based on an image or PDF file.
     This tutorial uses the Text option.
     
4. Input your prompt text.
   As an example:

   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.

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

• • 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.
  Please note that PII Masking is temporarily unavailable in Joget AI Designer 8.2.3.

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

Core App Design Stages

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.

1. After clicking Skip, a summary of the process proposal is displayed: 

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

   • Regenerate: Regenerate a new project proposal.

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

2. Once the process proposal is confirmed, click Form and Participants. A list of forms and participants will then be displayed.
   

3. Click Process Design. A preview of the process, including all forms and processes, is displayed. The process can be displayed either in Visual view or Code view by clicking on the toggle on the top-right.
   

4. Click Form Design. Click the ellipses beside the form to display two optional options:
   

   • Replace: Replace the form by providing an option to design a new form with a prompt using AI.

   • Remove: Deletes the form.

5. 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.
   

6. Click Dashboard Generations to generate a dashboard for your application. You will be prompted with the following:
   
   • Yes, Create with Dashboard
   • No, Create App Only
7. If no further changes are necessary, click Create App.
8. Provide an App ID and App Name, and click Save to create the app.

Supported Form Fields

The following are form fields that can be generated using AI Agent Builder using the right prompt:

• Check Box
• Calculation Field
• Date Picker
• File Upload
• Hidden Field
• ID Generator
• Image Upload
• Text Field
• Text Area
• Select Box
• Password Field
• Radio
• Grid
• Captcha
• Signature
• Time Picker
• Rich Text Editor

AI Designer Governance

AI Designer Governance allows users to monitor logs related to their AI usage.

Governance page:

Table columns:

• App ID: Which app was being designed
• App Name: Name of the app
• User ID: Who ran the session
• Session ID: Unique session identifier
• Total Tokens: Combined token usage for the entire session
• Created At: When the session started (default sort: newest first)

Filters:

• Filter by App ID (dropdown)
• Search by App Name or App ID

Clicking any row on the page will display a detailed audit trail view:

Expected outcome

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

Video tutorial

Download plugin

•  Joget AI Designer Plugin
• Process Enhancement Plugin DX

Download sample app

Plugin Changelogs

• 8.2.5:
  • Custom Model Support
    The AI model selection field in AI Designer now accepts free-text input, allowing users to enter any model name directly rather than being restricted to the preset list. Available models are still shown as suggestions in a dropdown for convenience. This means users can immediately take advantage of newly released models from providers like Anthropic without waiting for a Joget update.