In recent years, artificial intelligence has been rightly considered one of the most rapidly growing and influential areas for the entire IT industry, and web development in particular. The DHTMLX team continues to deepen its expertise in AI and explore ways to turn new ideas into practical value for users of our JavaScript UI components. Not long ago, we shared with you ready-made scenarios of using DHTMLX Grid and Form widgets with AI. Our recent efforts in this field have resulted in three new demo apps that empower DHTMLX Gantt and Diagram with LLM-driven AI assistants.
In this blog post, you’ll discover how simple commands in natural language can help quickly create and manage projects in Gantt charts, customize the Gantt chart appearance with fancy themes, and generate org charts of any complexity.
AI Gantt Maker
The DHTMLX AI Gantt Maker demo demonstrates how you can utilize an AI chatbot as a project assistant that brings your vision of project delivery in Gantt charts to reality via text prompts. You can delegate the following operations to AI:
- Create a project structure from scratch
- Manage tasks (CRUD) and dependency types
- Change the appearance of Gantt elements (tasks, progress bars, text styles, etc.)
- Specify the required zoom level, markers, or time scale in the timeline
- Export your Gantt chart to PDF/PNG
Here is an example of a prompt: “Create a new project called Stadium Construction with Site Preparation, Foundation Work, and Structural Assembly stages.”
Once your project is generated, the DHX assistant will offer possible options to continue shaping your Gantt chart. Alternatively, there is also a Command Guide accessible via the help (question mark) icon in the assistant menu, including examples of prompts that can be copied and put to action.
This kind of solution can give teams a boost during the early planning stages by transforming rough ideas into well-defined Gantt project concepts with minimal manual effort.
AI Gantt Theme Builder
The DHTMLX AI Theme Builder is designed to make the styling of your Gantt project fast and enjoyable. Instead of digging through styling parameters manually, you can just input your preferences in a command like: “Create a new theme using autumn-inspired colors like golden yellow, deep orange, and dark brown.”
AI will help adjust the overall look of your Gantt chart using generated CSS variables and configs with Gantt parameters (task height, link width, etc.) in real time. The interaction with the AI assistant takes place in the Chat tab, but the demo also includes the Code tab, where you can review the code part of the AI response, edit it, and all changes will be reflected in the UI right away. Just like in the Gantt Maker demo, you can take advantage of further AI assistant recommendations and the Command Guide.
As a result, you can quickly obtain a visual design option, introduce necessary changes directly in code, and instantly make your Gantt project look exactly the way you need.
AI Org Chart Builder
The DHTMLX AI Org Chart Builder is a vivid example of how you can extend the capabilities of DHTMLX Diagram in visualizing a company’s internal structure and commanding relationships via org charts with AI.
You just express the desired company structure in natural language, and the integrated AI-based mechanism will deliver the visualization.
Here is how it works using the following scenario: “Create an org chart for a law firm with a Managing Partner, Practice Leads, Senior Attorneys, Associates, and Paralegals.”
Before building the chart, the AI assistant carefully arranges the structure of your chart in text format, giving you the opportunity to make final changes without any code. Once you click on the “Build diagram” button, various forms of the generated org chart structure appear in two editors:
- DHTMLX Diagram editor. In this editor, the org chart is fully interactive and modifiable, allowing you to add, delete, and edit shapes.
- Built-in code editor. It gives access to the JSON configuration of the generated org chart, which can be updated on the fly without sending another request via the chatbot. All configuration changes will be visualized in the Diagram editor.
Both editors include exporting options to JSON, PDF, and PNG formats.
With such a tool at your disposal, it becomes possible to automatically visualize the structures of large and fast-evolving teams, which otherwise would be a time-consuming, manual undertaking.
Common AI Interaction Model
Each new demo offers a distinct range of AI-assisted operations, but all of them use a similar approach to automate data generation. In each case, you use the AI assistant to send natural language instructions (prompts) from the component to LLM on the backend. Using the OpenAI API or a compatible service, the LLM produces a structured response that is sent back to the app. Finally, the frontend interprets the result and applies it to update the UI components in real-time.
That’s how the AI interaction model generally works in these new demos. If you are interested in learning more technical details and peculiarities in the integration logic of each demo, check out the GitHub repositories:
All in all, these new DHTMLX demos confirm a great potential for rational AI utilization in combination with our JavaScript UI components. So, stay tuned for more exciting materials on the matter.