Joget AI Composer

Introduction

Joget AI Composers enable users to build forms, UIs, lists, processes, and themes directly through a lightweight chatbox interface. Designed as an add‑on pop‑up builder, it allows users to describe requirements conversationally and generate basic components without complex configuration, mirroring the AI Designer experience but on a smaller, more focused scale.

Prerequisites

Before you can use the AI Composers, ensure the following prerequisites are met:

For step-by-step instructions on installing plugins and configuring your LLM credentials, refer to the AI Central Config Setup Guide. 

How does it work?

1. Create a new or open any existing Visual Builders in the Joget App Composer. These visual builders include Form Builder, List Builder, UI Builder, Theme Builder, or Process Builder.
2. On the bottom right side of the Builder's UI, click the Builder's respective AI Composer icon.
   
3. In the chatbox, describe how the AI will design your builder by typing in a prompt or uploading an image, and click Send.
   
4. Once the changes are generated, you are given the option to Apply or Cancel the changes.
   
5. Click Save in the builder.
   

Vibe Composition Overview

Vibe Composition is a new way to build Joget apps. Instead of manually dragging and dropping components into your builders, you describe what you want in plain language, and AI composes it for you.

Everything stays inside Joget's standard builders. The same components, the same configuration, the same governance, just built through conversation instead of drag and drop. Not code, but components.

The AI Composers are the tools that make this possible. There are five of them, one for each layer of a Joget app. Form, List, Process, UI, and Theme. Together, they cover everything from your data entry forms to your workflows to your dashboards.

You can use them after generating a skeleton app with AI Designer, or open any builder directly and start composing from scratch

AI Composers

There are five AI Composers in Joget, one for each layer of your app. Each one sits inside its respective builder and lets you work entirely through conversation.

• Form Composer
• Datalist Composer
• Theme Composer
• Process Composer
• UI Composer

Two Modes of Composing

Targeted Edit

Select any component or section within the canvas. An inline composer prompt will appear directly on that element. Enter your instruction to apply changes specifically to the selected component without affecting the rest of the layout.

Use this when you want to:

• Modify a specific element’s properties, label, or content
• Adjust styling for a particular section or component
• Update configurations such as read-only, required, or type
• Replace or refine a single element

Full Composition

Use the main composer panel to describe changes at a broader level. This mode is suited for creating new structures or making updates that span across multiple components.

Use this when you want to:

• Build from scratch using a description or reference
• Add new sections or groups of elements
• Restructure layout or flow
• Apply changes across multiple components

How to vibe compose an app: The development flow

There are a few ways to get started. The quickest is to open AI Designer, describe the app you want in plain language, an image, a PDF, or a process sketch, and let it generate a working skeleton app in minutes. You get a process, a set of forms, and a basic structure ready to build on.

From there, open any builder and use the composer for that layer to refine and extend. Add fields, adjust routing, update your lists, restyle your UI, just describe what you want, and the composer handles it.

Prefer to build from scratch? 

You can skip AI Designer entirely and start composing directly in any builder: Form, Process, UI, or Datalist without going through AI Designer. The composers work independently, so you can begin wherever it makes sense.

However, following a structured approach helps you move faster and get better results with the Composer.

Start by mapping out your application:

• Define the processes you need
• Identify the forms required
• Understand what UI and datalists are needed
• Decide on an overall design theme or UX direction

If you have a custom design in mind, set up your theme early. Otherwise, start with the default theme and refine it later.

Recommended Build Flow

1. Process (Workflow First):  Define the workflow; activities, routing, and participants. This acts as the backbone of your application.

2. Forms (Data & Interaction):  Build the forms that support each step in the process. Focus on structure and data capture.

3. UI / CRUD Generation (Baseline First):  Use Joget’s built-in CRUD generation to quickly create a working baseline UI and data flow. This is significantly faster than building manually and ensures standard configurations (like select box handling and basic structure) are applied correctly out of the box. You can then use the Composer to refine and enhance the generated UI.

4. Datalists (Refinement & Advanced Use Cases): Use the Composer to refine datalists:

• • Rearrange and clean up columns
  • Add filters, sorting, and pagination
  • Improve layout and readability
  • Enhance UI with card layouts, tags, and formatting

For more advanced cases, the Composer can also help configure joins and more complex list behavior, which can then be fine-tuned manually if needed.

5. UI Assembly (Final Layer): Assemble the UI by connecting forms, processes, and datalists together.
   
   Since datalist actions often depend on UI links, it’s best to finalize UI after your forms and processes are in place.

The five composers

Below is a summary of what each composer covers. For the full capability breakdown, prompting examples, and known limitations, see the individual guide for each composer.

Form Composer

• Creates forms from a text description or an image.
• Adds, edits, and modifies fields.
• Supports all field types in the Joget palette, including any additional plugins you have installed.
• Handles multi-column layouts, section styling, and field styling.
• Works with all standard form operations: reorder fields, rename sections, adjust properties.

See more at Form Composer

List Composer

• Adds and configures columns: text, date, status, category, and more.
• Sets up filters, full-text search, date range, and custom filters.
• Configures display templates for table, card, and list views.
• Handles row actions, toolbar actions, sorting, and page size.
• Supports table joins and binder property updates.

See more at Datalist Composer

Process Composer

• Adds and removes activities, transitions, and participants.
• Sets up routing conditions and decision gateways.
• Assigns forms to user tasks.
• Configures approval steps with approved, rejected, and other status options.
• Supports tool plugin activities: Email, JSON API, Database Update, BeanShell, AI Agent, and more.
• Configure any additional plugins you have installed.

See more at Process Composer

UI Composer

• Composes UI pages and dashboards.
• Supports navigation menus, CRUD, datalist, form, process list, run process, dashboard, and more.
• Adds page components: information tiles, charts, buttons, containers, accordions, and more.

See more at UI Composer

Theme Composer

• Sets global theme settings, base theme, sizing, and style.
• Configures individual component styles, buttons, forms, inputs, tables, typography, and more.
• Supports all standard theme components, including accordion, breadcrumb, card, checkbox, dropdown, and more.

See more at Theme Composer

Recommended models

The AI Composers work with multiple LLM providers. Here is what we recommend based on testing.

Current context window length is: 16k tokens

Governance and best practices

All token usage is tracked in AI Central Config under the Governance Dashboard for visibility and monitoring. Composer agent execution logs are available under Monitor > Agent Execution Audit Trail (System Agent), allowing administrators to review activity and maintain oversight.

Best practices for each Composer are documented within their respective documentation pages.

Video Tutorial

Related Documentation

• AI Agent Builder
• AI Designer
• AI Central Configuration plugin
• Agent Execution Audit Trail

Plugin Changelogs

• 8.2.1
  • Agentic List Composition

    The Datalist Builder now includes an embedded AI Composer chat panel. Users can describe the data list they need in plain language, and the AI will build it automatically, including columns, filters, row actions, formatters, and table joins. It also supports replicating a list layout from an uploaded screenshot, eliminating the need for full manual configuration.

  • Agentic Process Composition

    The Process Builder now supports AI-driven workflow design. Users can describe a process in natural language, and the AI Composer will create participants, activities, transitions, and decision routing automatically. This removes the need to manually wire together every element of a workflow from scratch.

  • Agentic UI Composition

    The Userview Builder now supports AI-assisted page composition. Users can describe the pages they want or upload a screenshot of a UI mockup, and the AI Composer will generate the corresponding Joget userview structure, including adding, arranging, and configuring page components automatically.

  • Agentic Theme Composition

    Theme customisation is now AI-assisted. Users can interact with the AI Composer inside the Theme Builder to modify styles, layouts, and visual behaviour using natural language, replacing what was previously a fully manual, static process.

  • Fixed Multiple stability and correctness issues

    Seven issues were identified and resolved, including: errors occurring when uploading a newer version of the AI plugins, the Backspace key unintentionally deleting similar API key configurations, the chat history being cleared on WebSocket reconnect, the AI incorrectly applying columns in Form Composer, incorrect CSS styling for form sections and headers, image upload instability when switching between modes, and malformed AI responses wiping out form content.

  • Smarter action button behaviour and cleaner status indicator

    The Apply and Cancel buttons in the AI Composer are now hidden when the AI's response involves no changes to the builder (for example, when sending a greeting or asking a general question). Additionally, the processing status indicator now displays "Joget Composer is thinking…" instead of showing the name of the underlying AI model or provider.

  • Updated chat window appearance

    The AI Composer chat panel has received a visual refresh with improved button colours (green for Apply, grey for Cancel, black for Hide/Show Steps), hover effects, a new triangle-style send button, a cleaner input area, and a new reset button to clear chat history.

  • Known Issues
    • AI Composer (UI Builder)

      Dashboard page components may produce errors; some components, such as Rich Text, may not generate correctly, and image-to-UI layout generation may not be reflected as expected. These are known limitations of this initial release and will be addressed in a future update.

    • Minor cosmetic issues remaining

      The AI Composer icon may disappear when switching between builders within the same session. The send button currently lacks a tooltip and a hover effect. These items are noted for a future fix.