Generate Your Screen Using AI Assistant
Add a control that uses ProcessMaker's Artificial Intelligence (AI) to generate Screen components that use natural language to describe how they work.
Control Description
Use ProcessMaker's AI Assistant to generate a Screen without knowing how to use Screen Builder controls. From within Screen Builder, use the AI Generated control to use ProcessMaker Artificial Intelligence (AI) to generate functional Screen controls by describing in natural language how those controls function.
AI Generated controls are a no-code way to design a Screen quickly:
Add an AI Generated control to your Screen.
Enter text into the AI Generated control using almost any natural language that describes the functional needs of a section or the entirety of your Screen. You may enter your natural language Screen description in one language, but specify that the Screen user interface labels be in a different language. Multiple AI Controls may be used in a Screen, one to describe and generate different sections of that Screen without even understanding what each Screen Builder control does.
The AI Generated control previews the layout of the Screen based on its interpretation of your natural language.
Optionally regenerate a new preview based on the same or different description, or accept the layout.
After accepting the layout preview, the AI Generated control renders the preview into functional controls that are ready to use. You may further configure those controls if necessary: these are now standard controls like any other.
The following Screen Builder controls are supported. These are listed in alphabetical order.
This control is only available for Form-type Screens. See Screen Types.
Permissions Required
Your user account or group membership must have the following permissions to design a Screen unless your user account has the Make this user a Super Admin setting selected:
Screens: Edit Screens
Screens: View Screens
See the Screens permissions or ask your Administrator for assistance.
Add the Control to a Screen
Follow these steps to add this control to the Screen:
View the Screen page to which to add the control.
Locate the AI Generated icon
in the panel to the left of the Screen Builder canvas.
Drag the AI Generated icon into the Screen Builder canvas. Existing controls on the Screen Builder canvas adjust positioning based on where you drag the control.
Place into the Screen Builder canvas where you want the control to display on the Screen.
After the AI Control renders the control(s) for your Screen, review configuration settings and then validate your Screen.
The AI Control does not render in Preview mode until the AI-generated components are applied to the Screen. In Preview mode the following message displays: AI Assistant is unavailable until you apply changes.
Describe the Functional Components for Your Screen Using Natural Language
After adding an AI Generated control to a Screen page, enter a functional natural language description for the Screen components that the AI Generated control will generate.
Follow these steps to describe how the Screen components are to function:
Select the AI Generated control into which to enter your natural language description of its functionality.
Expand the Configuration panel to the right of the right-side of the Screen Builder canvas if it is not already. The Description setting displays.
In the Description setting, enter a functional natural language description for the components that the AI Generated control will generate. One AI Generated control description may use no more than 1000 tokens. A token is a common sequence of characters found in text for a particular language. Generally, one token corresponds to approximately four (4) characters of common English-language text. This corresponds to approximately 100 tokens to about 75 words in English. To the right of the Description label displays how many tokens your description currently uses. If your description exceeds 1000 tokens, shorten the length of your description.
Click the Generate button. The AI Generated control displays a progress bar for the percentage completion of a Screen preview based on your description. When complete, a preview of your Screen control(s) displays within the AI Generated control. Use this preview to evaluate if the AI Generated control provides the control(s) you intended.
Do one of the following:
Regenerate the preview: Revise and/or regenerate the AI Generated control's preview of the Screen layout based on the same or a different description.
Accept the preview: Click the Apply Changes button above the preview. The AI Generated control immediately renders the preview as functional controls which can be configured from the default settings the AI Generated control provides. The Variable Name setting for each rendered control uses a placeholder value since this setting is required for all controls.
Move the Control on the Page
See Move a Control on the Page.
Copy the Control with its Settings
Copying a control also copies the current settings of that control. The copied control displays below other controls placed on that Screen page.
Follow these steps to copy a control:
Select the control to be copied.
As a best practice, after copying a control, change the Variable Name setting value for the copied control to its own unique variable value. Otherwise, in-progress Requests that use this Screen read from and send data to both controls.
Delete the Control from a Screen
Deleting a control also deletes configuration for that control. If you add another control, it will have default settings.
Follow these steps to delete a control from a Screen page:
Select the control to be deleted.
Settings
The AI Generated control has the following panels that contain settings:
Configuration Panel Settings
Enter a functional natural language description for the components that the AI Generated control will generate. As you enter a description, the number of tokens that the AI Generated control will use to generate those components displays. A maximum of 1000 tokens may be used per AI Generated control. See Describe the Functional Components for Your Screen Using Natural Language.
Advanced Panel Settings
Below are settings for the AI Generated control in the Advanced panel:
Visibility Rule
Note the following regarding how to use visibility rules:
To make this control hidden until another control contains a value, enter the Variable Name setting value of that control to this control's Visibility Rule setting.
Device Visibility
Select on which device types this control displays:
Desktop: The control displays only on desktop devices. Enable the Show for Desktop toggle key.
Mobile: The control displays only on mobile devices. Enable the Show for Mobile toggle key.
The AI Generated control does not render in Preview mode until the AI-generated components are applied to the Screen. In Preview mode the following message displays: AI Assistant is unavailable until you apply changes.
CSS Selector Name
See the following best practices regarding custom CSS in Screens:
Related Topics
Screen TypesScreen Builder ModesValidate Your ScreenBootstrap Component Control SettingsBootstrap Wrapper Control SettingsCheckbox Control SettingsDate Picker Control SettingsFile Download Control SettingsFile Preview Control SettingsFile Upload Control SettingsGoogle Places Control SettingsImage Control SettingsLine Input Control SettingsLoop Control SettingsMulticolumn / Table Control SettingsNested Screen Control SettingsPage Navigation Control SettingsPhoto/Video Control SettingsRecord List Control SettingsRich Text Control SettingsSelect List Control SettingsSignature Control SettingsSubmit Button Control SettingsTextarea Control SettingsExpression Syntax ComponentsValidation Rules for "Validation Rules" SettingsReference Magic Variables in ProcessMaker Platform AssetsLast updated