Overview of DHTMLX Demo: Structure and Workflow<\/h2>\n
Our tutorial is based on the ready-made AI Gantt Theme Builder demo delivered by the DHTMLX team. <\/p>\n
The UI structure of this demo app includes two interactive panels:<\/p>\n
- \n
- The Gantt chart with uploaded project data on the left.<\/li>\n
- The Chat panel with the Chat and Code tabs on the right.<\/li>\n<\/ul>\n
This intuitive user interface allows end-users to showcase their UI design skills by sending prompts in plain English to the AI Assistant (Chatbot) rather than manual coding. <\/p>\n
For instance, you can request a new theme with a warm color palette (orange, beige, soft red), make links thicker, and increase the row height. <\/p>\n
![\"Gantt](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/12\/Gantt-Theme-Builder.gif\")
Open live demo ><\/a><\/p>\nThe full demo project and technology stack details are provided in the GitHub repository<\/a>. <\/p>\n
Let us explain the workflow in the example above step by step:<\/p>\n
- \n
- The user sends a request (prompt) with the desired Gantt theme\/configuration via the Chat tab.<\/li>\n
- The frontend passes this message to the backend, where it is analyzed and prepared for the AI service (LLM).<\/li>\n
- The backend forwards the user request to the LLM for creating the new configuration based on the allowed functions.<\/li>\n
- The LLM returns a structured JSON configuration, which includes a set of custom CSS variables and configuration settings.<\/li>\n
- The frontend applies new parameters and updates the Gantt chart.<\/li>\n<\/ol>\n
Technically, the most curious part of this workflow, namely the transformation of user prompts into actionable code, is performed via OpenAI API or a compatible service, supporting the function-calling (tool-calling<\/a>) feature. <\/p>\n
Are you ready to learn the implementation details of this core feature and other peculiarities required for your own AI Gantt Theme Builder?<\/p>\n
Let us explore everything in its due order.<\/p>\n
Setting Up AI-Ready User Interface<\/h2>\n
In this section, we\u2019ll walk through initializing the Gantt component, configuring the AI Assistant panel, and transmitting user prompts to the backend.<\/p>\n
Gantt Chart Initialization and Its Styling Peculiarities<\/h3>\n
First, you need to add a Gantt chart to a web page. To do that, you initialize the DHTMLX JavaScript Gantt component<\/a> and configure columns, plugins, and helper functions (main.js<\/a>):<\/p>\n
const<\/span> gantt =<\/span> Gantt.getGanttInstance<\/span>(<\/span>)<\/span>;<\/span>
\ngantt.config<\/span>.columns<\/span> =<\/span> [<\/span>
\n {<\/span> name:<\/span> 'wbs'<\/span>,<\/span> label:<\/span> 'WBS'<\/span>,<\/span> width:<\/span> 60<\/span>,<\/span> resize:<\/span> true<\/span>,<\/span> template:<\/span> gantt.getWBSCode<\/span> }<\/span>,<\/span>
\n {<\/span> name:<\/span> 'text'<\/span>,<\/span> label:<\/span> 'Task name'<\/span>,<\/span> tree:<\/span> true<\/span>,<\/span> width:<\/span> 250<\/span>,<\/span> resize:<\/span> true<\/span> }<\/span>,<\/span>
\n {<\/span> name:<\/span> 'start_date'<\/span>,<\/span> align:<\/span> 'center'<\/span>,<\/span> width:<\/span> 100<\/span>,<\/span> resize:<\/span> true<\/span> }<\/span>,<\/span>
\n {<\/span> name:<\/span> 'duration'<\/span>,<\/span> align:<\/span> 'center'<\/span>,<\/span> width:<\/span> 80<\/span>,<\/span> resize:<\/span> true<\/span> }<\/span>,<\/span>
\n {<\/span> name:<\/span> 'add'<\/span>,<\/span> width:<\/span> 40<\/span> }<\/span>,<\/span>
\n]<\/span>;<\/span>
\ngantt.plugins<\/span>(<\/span>{<\/span>
\n auto_scheduling:<\/span> true<\/span>,<\/span>
\n undo:<\/span> true<\/span>,<\/span>
\n export_api:<\/span> true<\/span>,<\/span>
\n marker:<\/span> true<\/span>,<\/span>
\n tooltip:<\/span> true<\/span>,<\/span>
\n}<\/span>)<\/span>;<\/span>
\n
\ngantt.config<\/span>.auto_scheduling<\/span> =<\/span> true<\/span>;<\/span>
\ngantt.config<\/span>.open_tree_initially<\/span> =<\/span> true<\/span>;<\/span>
\ngantt.config<\/span>.auto_types<\/span> =<\/span> true<\/span>;<\/span>
\ngantt.config<\/span>.scale_height<\/span> =<\/span> 60<\/span>;<\/span>
\ngantt.config<\/span>.link_radius<\/span> =<\/span> 4<\/span>;<\/span>
\ninitZoom(<\/span>gantt)<\/span>;<\/span>
\nfitTaskText(<\/span>gantt)<\/span>;<\/span><\/div><\/div>\nAs for the Gantt appearance, we should mention that this part of the Gantt configuration is dynamically controlled by CSS variables (colors, fonts, etc.) and the gantt.config object (row\/task height, link width, etc.). Therefore, AI-generated updates can be applied instantly.<\/p>\n
The AI Gantt Theme Builder maintains the current state of both the theme and configuration. When a new theme is applied via the AI assistant, it is merged with the previous one, preserving all previous changes.<\/p>\n
Note:<\/strong> Currently, we are working on a temporary storage system (messages), which will enable the conversation history feature. It will store user messages, LLM responses, and the results of tool calls.<\/em><\/p>\n
Assistant Panel: Chat and Code Tabs<\/h3>\n
As stated above, the AI assistant of our demo includes Chat and Code tabs. The Chat tab serves for natural language communication between users and the AI service. It is based on a simple chat widget that can be added to your project in the following way:<\/p>\n
...
\n \/\/ Initialize the chat widget with dependencies<\/span>
\nexport<\/span> const<\/span> initChat =<\/span> (<\/span>{<\/span> socket,<\/span> runCommand,<\/span> getTheme,<\/span> getConfigs }<\/span>)<\/span> =><\/span> {<\/span>
\n
\n \/\/ Create and set up the chat UI<\/span>
\n const<\/span> chatWidgetContainer =<\/span> document.querySelector<\/span>(<\/span>'#chat-tab'<\/span>)<\/span>;<\/span>
\n chatWidgetContainer.dataset<\/span>.id<\/span> =<\/span> '0'<\/span>;<\/span>
\n
\n chatWidgetContainer.innerHTML<\/span> =<\/span> `
\n <<\/span>div id=<\/span>"chat-popup"<\/span> class<\/span>=<\/span>"relative left-0 bottom-0 h-full w-full bg-white rounded-md shadow-md flex flex-col transition-all"<\/span>><\/span>
\n <<\/span>div id=<\/span>"chat-header"<\/span> class<\/span>=<\/span>"flex justify-between items-center p-4 bg-gray-800 text-white rounded-t-md"<\/span>><\/span>
\n <<\/span>h3 class<\/span>=<\/span>"m-0 text-lg"<\/span>><\/span>DHX Assistant<\/<\/span>h3><\/span>
\n <<\/span>button data-<\/span>micromodal-<\/span>trigger=<\/span>"modal-1"<\/span> class<\/span>=<\/span>"help-btn"<\/span>>?<\/<\/span>button><\/span>
\n <\/<\/span>div><\/span>
\n <<\/span>div id=<\/span>"chat-messages"<\/span> class<\/span>=<\/span>"flex-1 p-4 overflow-y-auto text-base"<\/span>><\/<\/span>div><\/span>
\n <<\/span>div id=<\/span>"loader"<\/span> class<\/span>=<\/span>"hidden justify-start mb-3"<\/span>><\/span>
\n <<\/span>div class<\/span>=<\/span>"spinner m-auto"<\/span>><\/<\/span>div><\/span>
\n <\/<\/span>div><\/span>
\n <<\/span>div id=<\/span>"chat-input-container"<\/span> class<\/span>=<\/span>"p-4 border-t border-gray-200"<\/span>><\/span>
\n <<\/span>div class<\/span>=<\/span>"flex space-x-4 items-center"<\/span>><\/span>
\n <<\/span>input type=<\/span>"text"<\/span> id