The system\u2019s architecture includes 3 main elements:<\/p>\n
- \n
- DHTMLX Gantt<\/a><\/strong> – the main project visualisation component<\/li>\n
- AI assistant<\/strong> – a simple chat UI for communicating with AI, i.e., issuing commands in plain English<\/li>\n
- Functions layer<\/strong> – a predefined set of operations (also known as function calling or tool calling<\/a> schema) that are allowed to be utilised by AI models, thereby ensuring predictable and structured responses to user prompts.<\/li>\n<\/ul>\n
Together, these elements enable users to create complete project structures, manage tasks and dependencies, adjust timeline settings, change visual styles, and export the Gantt chart via natural language commands. <\/p>\n
For instance, here is how the AI Gantt Maker will respond to the command like “Create a project called Constructing a Fitness Club, including only the following three stages: Site Preparation, Construction Work, and Equipment Installation”:<\/p>\n
![\"Gantt](\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2025\/11\/image1-2.gif\")
Open live demo ><\/a><\/p>\nTo give you the full picture of how it all works as a single mechanism, here is the workflow overview:<\/p>\n
- \n
- The user enters a natural language instruction (prompt) into the chat UI.<\/li>\n
- The chat (AI assistant) sends the user\u2019s message along with the current Gantt state to the backend.<\/li>\n
- The backend passes it with system prompt and tools to the selected AI service (LLM).<\/li>\n
- LLM responds with a structured function call related to the required operation.<\/li>\n
- The frontend analyses the response and updates the Gantt chart accordingly.<\/li>\n<\/ul>\n
There are a few more things that we want to mention before proceeding to the implementation stage:<\/p>\n
- \n
- Technology stack.<\/strong> Our demo includes a React+Vite frontend, an Express+Socket.IO backend, and an LLM accessed via the OpenAI API (any other compatible AI service can be used as well). Everything is containerised with Docker.<\/li>\n
- AI model compatibility.<\/strong> The project works best with gpt-5-nano and gpt-4.1-mini, while gpt-4.1-nano has noticeable limitations in following the schema. If you decide to choose any other AI service, make sure it supports structured outputs (function calling).<\/li>\n
- Demo on GitHub.<\/strong> The complete, fully styled source code of the AI Gantt Maker project is available in the GitHub repository<\/a>.<\/li>\n<\/ul>\n
Without further ado, let\u2019s explore what you need to do to build your own AI Gantt Maker.<\/p>\n
Frontend Implementation<\/h2>\n
The frontend implementation lays the foundation for how users interact with the AI-assisted Gantt builder. At this stage, you need to initialize the DHTMLX Gantt component, add the AI assistant (chat UI) for prompt input, and establish a connection to the backend.<\/p>\n
1. Initializing Gantt<\/h3>\n
The Gantt component is initialized once (main.ts<\/a>) and configured with columns, plugins (auto-scheduling, undo, export, markers, tooltip), date parsing, and zoom\/fit helpers:<\/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>
\ninitZoom(<\/span>gantt)<\/span>;<\/span>
\nfitTaskText(<\/span>gantt)<\/span>;<\/span><\/div><\/div>\n2. Setting Up the Chat UI<\/h3>\n
The chat UI (right pane) is created with a lightweight chat widget that provides an entry point for interacting with the AI assistant. To add the chat UI to your project, you need the initChat()<\/strong> method, which injects the chat structure and event listeners for sending messages:<\/p>\n
\/\/ chat-widget.ts - The core chat initialization function<\/span>
\nexport<\/span> const<\/span> initChat =<\/span> (<\/span>{<\/span> socket,<\/span> runCommand,<\/span> getProject }<\/span>:<\/span> InitChatOptions)<\/span> =><\/span> {<\/span>
\n\/\/ Injects the chat HTML structure into the page<\/span>
\nconst<\/span> chatWidgetContainer =<\/span> document.querySelector<\/span>(<\/span>"#chat_panel"<\/span>)<\/span> as HTMLElement;<\/span>
\n chatWidgetContainer.innerHTML<\/span> =<\/span> `...`;<\/span> \/\/ HTML for header, messages, input, etc.<\/span>
\n \/\/ Sets up event listeners for sending messages<\/span>
\n chatSubmit.addEventListener<\/span>(<\/span>'click'<\/span>,<\/span> function<\/span> (<\/span>)<\/span> {<\/span>
\n const<\/span> message =<\/span> chatInput.value<\/span>.trim<\/span>(<\/span>)<\/span>;<\/span>
\n \u2026
\n sendUserMessage(<\/span>message)<\/span>;<\/span>
\n }<\/span>)<\/span>;<\/span>
\n \/\/ ... other logic for suggestions and displaying messages<\/span>
\n}<\/span>;<\/span><\/div><\/div>\nThe chat UI is responsible for the following: <\/p>\n
- \n
- accepting natural-language input and sending it (with the current project state) via the WebSocket (Socket.IO) using the sendUserMessage()<\/strong> function<\/li>\n
- displaying AI messages and safely rendering Markdown content with the displayReply()<\/strong> function<\/li>\n
- offering context-aware suggestions for further user actions injected with the onCallback()<\/strong> function<\/li>\n
- providing the command guide with prompt examples<\/li>\n<\/ul>\n
- displaying AI messages and safely rendering Markdown content with the displayReply()<\/strong> function<\/li>\n
- AI model compatibility.<\/strong> The project works best with gpt-5-nano and gpt-4.1-mini, while gpt-4.1-nano has noticeable limitations in following the schema. If you decide to choose any other AI service, make sure it supports structured outputs (function calling).<\/li>\n
- Technology stack.<\/strong> Our demo includes a React+Vite frontend, an Express+Socket.IO backend, and an LLM accessed via the OpenAI API (any other compatible AI service can be used as well). Everything is containerised with Docker.<\/li>\n
- AI assistant<\/strong> – a simple chat UI for communicating with AI, i.e., issuing commands in plain English<\/li>\n