AI Form Fill Element

Introduction

The AI Form Fill Element plugin is designed to automatically generate and populate data for form elements using OpenAI's GPT models. This feature can enhance your Joget forms by auto-filling fields based on the chosen AI model.

Plugin information

The AI Form Fill Element plugin uses OpenAI's GPT models to generate and populate data for form elements automatically. This plugin bundle is compatible with Joget DX 8.

Get started

Prerequisites

1. Sign Up for OpenAI API:
   • Go to the OpenAI platform and sign up for an account if you don’t already have one.
   • After signing up, log in to the OpenAI platform.
2. Obtain API Key:
   • Go to the API keys page on the OpenAI platform.
   • Generate an API key.
   • Copy the API key; you will need it for the AI Form Fill Element plugin configuration.
3. Choose a Model:
   • Go to the OpenAI Models Documentation to understand the available models.
   • Select a model that you would like to use (e.g., gpt-3.5-turbo and gpt-4-turbo).
   • Note the model name for later use in the configuration.

Where to get the plugin

You can obtain the latest release of the plugin jar file from the Joget Marketplace.

How to install

1. Download the plugin jar file from the link above.
2. In Joget, go to Settings > Manage Plugins and upload the jar file.
3. You can choose to import the demo app or create the app from scratch.

How to use it

Importing the demo app

1. Download the demo app from Download sample app (.jwa file).
2. In Joget, go to Home or All Apps and click on Import App to import the demo app.

Creating the app from scratch

1. Create a Form with the desired fields such as Name, Email, Contact, Status, Address, Gender, and Date of Birth.
2. Add the FormAutoFillAI to the form.
   

3. Click the FormAutoFillAI element and enter the necessary configurations:

   • Enter the model name you selected earlier.
   • Input the API key from OpenAI (you can add the API key to App variables and use a hash variable to reference the values; for more information, see App Variable).
   • Set the Proxy Domain (e.g., https://api.openai.com).
   • Define the number of rows the AI should fill in the form grid.

   

4. After configuring, click on the auto-fill icon to populate the form with dummy data generated by GPT.
   
   
5. The form grid is filled with data according to the number of rows specified during the configuration.
   

Configure AI form fill element properties

Below are the configurations for the AI Form Fill Configuration section.

• Model *: Choose the AI model you want to use (e.g., gpt-3.5-turbo).
• API Key *: Enter the API Key obtained from the OpenAI platform.
• Proxy Domain: Define the proxy domain for accessing the OpenAI API (e.g., https://api.openai.com).
• Number of Rows for Form Grid *: Specify the number of rows the AI should fill in the form grid.

Using non-OpenAI models

With AI Form Fill Element version 8.0.1 of the plugin, other models such as Google Gemini and OpenRouter are now supported. This can be done by using the ContextFormFillAI element bundled in the plugin.

1. In Form Builder, drag and drop the ContextFormFillAI element to the form.
   

2. Click the ContextFormFillAI element and enter the necessary configurations:

   • Enter the non-OpenAI model of your choice, for example, Google Gemini (gemini-2.5-flash).
   • Set the Proxy Domain (e.g., https://generativelanguage.googleapis.com/v1beta/openai/chat/completions).
   • Input the API key from the model of your choice (you can add the API key to App variables and use a hash variable to reference the values; for more information, see App Variable).
     
3. After configuring the model, click Apply Change and Save the form. Repeat steps 4 and 5 from the previous section.

Configure AI context form fill element properties

Below are the configurations for the AI Form Fill Configuration section.

• Model *: Choose the non-OpenAI model of your choice, for example, Google Gemini (gemini-2.5-flash).
• Proxy Domain: Define the Proxy Domain (e.g., https://generativelanguage.googleapis.com/v1beta/openai/chat/completions).
• API Key *: Enter the API key from the model of your choice (you can add the API key to App variables and use a hash variable to reference the values; for more information, see App Variable).

Video Tutorial

The video below provides a visual representation of the steps mentioned.

Expected outcome

The AI Form Fill Element can generate and populate data for form elements.

Related documentation

• See the OpenAI platform to sign up.
• See the OpenAI Models Documentation for information on available OpenAI models.
• See the API Keys page for generating and managing your API keys.
• See App Variable to learn more about using App Variables in Joget.

Download sample app