{"id":15208,"date":"2026-03-05T16:16:38","date_gmt":"2026-03-05T13:16:38","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=15208"},"modified":"2026-09-22T15:41:27","modified_gmt":"2026-09-22T12:41:27","slug":"integrating-dhtmlx-react-gantt-lovable-ai-app-part-2-context-strategies","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/integrating-dhtmlx-react-gantt-lovable-ai-app-part-2-context-strategies\/","title":{"rendered":"Integrating DHTMLX React Gantt into Lovable AI App (Part 2): Context Strategies"},"content":{"rendered":"<p>We continue exploring the peculiarities of using DHTMLX React Gantt in AI-powered development with <a href=\"https:\/\/lovable.dev\/\" rel=\"nofollow\" target=\"_blank\">Lovable AI<\/a>. Previously, we covered the basics of this integration, including embedding the Gantt functionality in the dashboard layout,  and learned that AI scaffolding tools like Lovable require extra context to work with specialized UI components properly.<\/p>\n<p>Now, it is time to consider how to address context-related issues in projects built with Lovable. In practice, there are only three ways to provide an LLM with additional context about a third-party API:<\/p>\n<ul>\n<li>by embedding the details directly into the prompt,<\/li>\n<li>by supplying curated documentation via a Knowledge Base,<\/li>\n<li>or by connecting to an online documentation source through an MCP server.<\/li>\n<\/ul>\n<p>In this guide, we\u2019ll explore each of these options, including the one with <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlx-mcp-server\/\" rel=\"noopener\" target=\"_blank\">DHTMLX MCP server<\/a>, and see how well they work in the AI-generated React admin panel based on <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt-for-React\/\" rel=\"noopener\" target=\"_blank\">DHTMLX React Gantt<\/a> that you set up in <a href=\"https:\/\/dhtmlx.com\/blog\/integrating-dhtmlx-react-gantt-chart-lovable-ai-app-part-1\/\" rel=\"noopener\" target=\"_blank\">Part 1<\/a>.<\/p>\n<h2>Passing Context via Prompt Only<\/h2>\n<p>Last time, we fixed a runtime issue caused by an incorrect date format in task data. In that case, the problem was resolved by applying a local code fix. This time, instead of modifying the code manually, we\u2019ll try to solve the same issue using Lovable.<\/p>\n<p>One way to do this is to describe the required Gantt API behavior directly in the prompt. To test this, you should keep the local fix only as a reference and ask Lovable to fix the same problem using a prompt like this:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Gantt renders, but tasks are not displayed.<br \/>\nstart_date is an ISO string and is not valid here. Use Date values instead.<\/div><\/div>\n<p>After applying this change, the tasks will appear on the timeline.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/51.png\" alt=\"Gantt chart embedded into a dashboard\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15254\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/51.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/51-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/51-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>At the same time, it seems risky to rely on the prompt-only approach. In such integrations, many details should be taken into account, and it is hard to include them in a single prompt. When some necessary data is missing, Lovable will rely on the Gantt API to fill in these gaps, which may turn out to be incorrect at runtime.<\/p>\n<p>It\u2019s also worth noting that prompts are not reusable. Each new project, page, or change requires repeating the same explanations again, often with small variations. Over time, this makes the process harder to maintain and increases the chance of errors.<\/p>\n<p>This leads to the next question:<br \/>\n<strong>Can we provide AI developer tools like Lovable with a stable, reusable source of truth instead of repeating everything in prompts?<\/strong><\/p>\n<p>The solution is to use a Knowledge Base to supply curated documentation to the AI and see how much it improves the integration experience.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/51-1.png\" alt=\"Gantt chart after fixing runtime error\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15209\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/51-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/51-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/51-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<h2>Passing Context via Knowledge Base for AI<\/h2>\n<p>Instead of repeating API details in prompts, Lovable allows you to provide a Knowledge Base, which serves as a persistent source of information reused across requests. Before adding any Knowledge Base, you can try a simple example using prompts only.<\/p>\n<p>Ask Lovable to add a global theme toggle:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Add a global Light<span class=\"sy0\">\/<\/span>Dark theme toggle <span class=\"kw3\">for<\/span> the application, including the Gantt chart.<\/div><\/div>\n<p>Here is what you get:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/56.gif\" alt=\"toggle between Light and Dark themes\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15242\" \/><\/p>\n<p>A theme toggle appears, and the application colors change when switching between Light and Dark modes. Now let\u2019s look at how this behavior is implemented in the generated code.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/58-1.png\" alt=\"theme toggle implementation in code\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15210\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/58-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/58-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/58-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>Lovable added a global Light\/Dark theme toggle using next-themes and updated the application styles accordingly.<\/p>\n<p>The Gantt chart appearance also changed, but not via the Gantt API. Instead, Lovable applied global CSS overrides that affect Gantt DOM elements when the application is in dark mode. As a result, the Gantt visuals change indirectly, but its internal theming mechanism remains unused.<\/p>\n<p>To guide Lovable in the right direction, you need to add a minimal set of Gantt theming rules to the project Knowledge Base.<br \/>\nOpen the project settings in Lovable.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/63-1.png\" alt=\"Project settings in Lovable\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15211\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/63-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/63-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/63-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nGo to the <strong>Knowledge<\/strong> section:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/64-1.png\" alt=\"Knowledge section in Project settings\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15212\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/64-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/64-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/64-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nAdd a new entry with the following content:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Theme:<br \/>\n- Gantt supports theming via the <span class=\"st0\">&quot;theme&quot;<\/span> prop.<br \/>\n- Allowed values: <span class=\"st0\">&quot;terrace&quot;<\/span> <span class=\"br0\">&#40;<\/span>light<span class=\"br0\">&#41;<\/span> and <span class=\"st0\">&quot;dark&quot;<\/span> <span class=\"br0\">&#40;<\/span>dark<span class=\"br0\">&#41;<\/span>.<br \/>\n- When the app has a global theme, map:<br \/>\n&nbsp; light -&gt; <span class=\"st0\">&quot;terrace&quot;<\/span><br \/>\n&nbsp; dark &nbsp;-&gt; <span class=\"st0\">&quot;dark&quot;<\/span><br \/>\n- Pass the mapped <span class=\"kw3\">value<\/span> to the Gantt as theme<span class=\"sy0\">=<\/span><span class=\"br0\">&#123;<\/span>ganttTheme<span class=\"br0\">&#125;<\/span>.<\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/65-1-1.png\" alt=\"knowledge base\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15213\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/65-1-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/65-1-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/65-1-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>After adding custom knowledge about your project to the base, you can ask Lovable to fix the theme integration.<br \/>\nNow submit the following prompt:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Use the project Knowledge Base to fix the Gantt theme switching.<br \/>\nIt currently relies on CSS instead of the Gantt API.<\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/68-1.png\" alt=\"submitting the prompt\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15214\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/68-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/68-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/68-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nAfter submitting the prompt, Lovable updates the project.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/71.gif\" alt=\"theme swithing\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15243\" \/><br \/>\nLet\u2019s look at what changed in the generated code.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/72-1.png\" alt=\"impact of Knowledge Base (in code)\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15217\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/72-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/72-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/72-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nYou can see that Lovable now uses the Gantt API for theming.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/74-1.png\" alt=\"Lovable uses Gantt API for theming\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15218\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/74-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/74-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/74-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nTo confirm that this approach works beyond theming, try another small change using the Knowledge Base.<\/p>\n<p>For instance, adjust the Gantt grid row height. Open the project Knowledge section and add a new entry with the following content:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Grid row <span class=\"kw3\">height<\/span>:<br \/>\n- Set row <span class=\"kw3\">height<\/span> via the Gantt config <span class=\"kw3\">object<\/span>.<br \/>\n- Use config.row_height <span class=\"br0\">&#40;<\/span>number, in pixels<span class=\"br0\">&#41;<\/span>.<br \/>\n- Pass the config into the ReactGantt component:<br \/>\n&nbsp; &lt;ReactGantt config<span class=\"sy0\">=<\/span><span class=\"br0\">&#123;<\/span>config<span class=\"br0\">&#125;<\/span> ... <span class=\"sy0\">\/<\/span>&gt;<br \/>\n<br \/>\nExample:<br \/>\nconst config <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span> row_height: <span class=\"nu0\">40<\/span> <span class=\"br0\">&#125;<\/span>;<\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/75-1.png\" alt=\"Updating the knowledge base\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15219\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/75-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/75-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/75-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>With the Knowledge Base updated, you submit a new prompt:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Use the project Knowledge Base.<br \/>\nSet the Gantt grid row <span class=\"kw3\">height<\/span> to <span class=\"nu0\">60<\/span>.<\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/76-1.png\" alt=\"submitting the prompt\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15220\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/76-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/76-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/76-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>As a result, the grid height in the Gantt chart is updated to 60px:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/77-1.png\" alt=\"updating the grid row height in the Gantt chart\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15221\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/77-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/77-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/77-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>From these examples, you can see that Lovable can use information from the Knowledge Base and apply the Gantt API correctly.<\/p>\n<p>At the same time, the Knowledge Base has practical limits. Its total size is capped (around 100k characters), which makes it impossible to add the <a href=\"https:\/\/github.com\/DHTMLX\/gantt-docs\" rel=\"noopener\" target=\"_blank\">full documentation<\/a> for a large library like DHTMLX Gantt.<\/p>\n<p>It means that you have to be selective. Instead of adding the complete documentation to the base, you can try to include only the essential parts. For instance, it can be React-specific sections or API descriptions with examples. This can work for some scenarios, but it becomes an issue over time. When most of the Knowledge Base capacity is dedicated to a single library, there is little room left for anything else.<\/p>\n<p>For a broader and more flexible usage, a different approach is needed. It should allow the AI tool to access the full, up-to-date API without size constraints. The most suitable solution for low-code AI development is to add an MCP server that will provide the necessary information from the official Gantt documentation on demand. <\/p>\n<h2>Using DHTMLX MCP Server for Gantt Integration in Lovable AI<\/h2>\n<p>This approach is particularly applicable for DHTMLX products thanks to the availability of the <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/integrations\/ai-tools\/mcp-server\/\" rel=\"noopener\" target=\"_blank\">official DHTMLX MCP server<\/a>. However, connecting custom MCP servers to Lovable requires a paid subscription.<\/p>\n<p>On the free plan, a practical workaround is to use a Notion MCP connector. Lovable can read documentation from Notion and use it as an on-demand context for the Gantt API.<br \/>\nLet us start by exploring the Notion-based approach, and then move on to the official DHTMLX MCP server.<\/p>\n<p>In the project settings, open the Connectors section and connect your Notion workspace.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/81.png\" alt=\"connecting Notion workspace\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15222\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/81.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/81-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/81-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>After that, Lovable can read pages from Notion and use them as on-demand context while generating or modifying code. You can add a curated subset of the DHTMLX React Gantt documentation to a <a href=\"https:\/\/www.notion.so\/DHTMLX-React-Gantt-API-2f780b85e0ee80868aa2ea63b9bc9b45\" rel=\"noopener\" target=\"_blank\">Notion page<\/a>. Now that Notion is connected, you can explicitly ask Lovable to rely on it.<\/p>\n<p>Try to ask Lovable to configure the Gantt chart with Day and Month scales, using the following prompt:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Before making any changes, look up the DHTMLX React Gantt configuration <span class=\"kw3\">rules<\/span> on the Notion page <span class=\"st0\">&quot;DHTMLX React Gantt API.<br \/>\nConfigure the Gantt timeline scale to use a monthly with daily subscale.<\/span><\/div><\/div>\n<p>When processing this prompt, Lovable will request permission to access Notion data via Notion Search and Notion Fetch. Grant these permissions so Lovable can locate the \u201cDHTMLX React Gantt API\u201d page and read the relevant configuration rules.<br \/>\nHere is the result:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/89-1.png\" alt=\"Lovable uses the info from Notion to configure the Gantt chart\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15223\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/89-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/89-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/89-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nLovable correctly used the information from Notion and configured the Gantt timeline scale as requested. However, the Notion approach still relies on manually curated documentation. The quality of the results depends on how complete and up-to-date the content is, and maintaining it becomes an additional task as the project evolves.<\/p>\n<p>To explore a more scalable workflow, switch to a Lovable paid account and create a new project. After that, connect the official DHTMLX MCP server and repeat similar changes with direct access to the full Gantt API. Open the Lovable project settings and connect the MCP server:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/92-1.png\" alt=\"connecting the MCP server\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15224\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/92-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/92-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/92-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>After the connection is established, Lovable can fetch official documentation on demand while generating or modifying code. Then, ask Lovable to generate a new admin project from scratch, similar to the one created earlier.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/97-1.png\" alt=\"Lovable uses MCP to create  a new admin project from scratch\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15225\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/97-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/97-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/97-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nNext, you should request replacing the Sales chart with a Gantt chart and explicitly instruct Lovable to use the MCP server as the source of truth.<\/p>\n<p>Submit the following prompt:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Use the DHTMLX MCP server as the source of truth. Replace the Sales chart with a DHTMLX React Gantt chart using @dhtmlx<span class=\"sy0\">\/<\/span>trial-react-gantt.<\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/98-1.png\" alt=\"asking Loable to use MCP as the single source of truth\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15226\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/98-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/98-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/98-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nLovable asks for permission to access the MCP server. Approve the request so it can retrieve the documentation and proceed.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/99-1.png\" alt=\"Allowing Lovable to access the MCP server\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15227\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/99-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/99-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/99-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nLovable obtains the necessary context and replaces the Sales chart with the DHTMLX React Gantt chart.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/107-1.png\" alt=\"Replacing the Sales chart with the Gantt chart\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15229\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/107-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/107-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/107-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nHowever, after reloading the page, you can notice a small issue unrelated to the Gantt integration itself. The app theme and the sidebar behavior become inconsistent. The sidebar still collapses, but the main content does not always expand to occupy the freed space, and the theme colors may shift unexpectedly.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/102-1.png\" alt=\"Issues with the app theme and the sidebar behavior\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15231\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/102-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/102-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/102-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nAsk Lovable to fix this with the following prompt:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Fix the layout so that when the sidebar is collapsed, the main <span class=\"kw3\">content<\/span> expands to use the full available <span class=\"kw3\">width<\/span>.<br \/>\nEnsure the sidebar, layout, and theme remain consistent across navigation and state changes.<\/div><\/div>\n<p>Lovable will update the project and resolve the layout and theme inconsistencies.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/108-1.png\" alt=\"Lovable fixes inconsistencies\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15232\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/108-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/108-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/108-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><\/p>\n<p>Next, you check how Lovable handles additional Gantt configuration by adding theme switching:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Use the DHTMLX MCP server as the source of truth.<br \/>\nAdd a UI toggle that switches the application theme between light and dark mode, and ensure the DHTMLX React Gantt theme switches accordingly.<\/div><\/div>\n<p>Sometimes the request may take a bit longer to process, but Lovable will eventually complete the update and applies theme switching to the Gantt chart.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/110.gif\" alt=\"Gantt with theme switching\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15244\" \/><\/p>\n<p>After that, ask Lovable to change the Gantt row height:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Use the DHTMLX MCP server as the source of truth.<br \/>\nSet the Gantt grid row <span class=\"kw3\">height<\/span> to <span class=\"nu0\">60<\/span> pixels.<\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/112-1.png\" alt=\"Lovable uses the info from MCP to change the height\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15233\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/112-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/112-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/112-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nLovable retrieves the configuration from the MCP server and updates the row height. Finally, let\u2019s adjust the timeline scale:<\/p>\n<div class=\"codecolorer-container html4strict default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"html4strict codecolorer\">Use the DHTMLX MCP server as the source of truth.<br \/>\nConfigure the Gantt timeline to use a daily scale only.<\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/114-1.png\" alt=\"Lovable configures the Gantt chart with a daily scale only\" width=\"880\" height=\"650\" class=\"aligncenter size-full wp-image-15235\" srcset=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/114-1.png 880w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/114-1-300x222.png 300w, https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2026\/03\/114-1-768x567.png 768w\" sizes=\"auto, (max-width: 880px) 100vw, 880px\" \/><br \/>\nAs a result, Lovable successfully applies the requested configuration. This approach is perfect for more complex scenarios of AI-assisted frontend development, where prompts alone or a limited Knowledge Base are not enough.<\/p>\n<p>Here is the <a href=\"https:\/\/admin-heartbeat-dash.lovable.app\/\" rel=\"noopener\" target=\"_blank\">live demo<\/a> of the React project with the embedded Gantt functionality generated with Lovable AI.<\/p>\n<h2>Final Result<\/h2>\n<p>When integrating advanced UI libraries like DHTMLX React Gantt in the AI development workflow of Lovable, context is a key to success. With a reliable source of truth about the <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/api\/api-overview\/\" rel=\"noopener\" target=\"_blank\">Gantt API<\/a>, the AI app builder will reply to prompts as accurately as possible and implement the Gantt chart in the desired way. Prompts and a knowledge base are workable options in terms of context provision, but the MCP-based strategy promises the most reliable results.  Therefore, if you want to minimize the possibility of errors in AI UI generation with Lovable and DHTMLX React Gantt, we recommend using the DHTMLX MCP server.<\/p>\n<h2>Next Steps<\/h2>\n<p>From here, you can:<\/p>\n<ul>\n<li>replace the trial Gantt with a licensed version,<\/li>\n<li>load real project data instead of static tasks,<\/li>\n<li>customize scales, columns, and interactions,<\/li>\n<li>turn the dashboard into a production-ready project planning software.<\/li>\n<\/ul>\n<h2>Related Materials<\/h2>\n<ul>\n<li><a href=\"https:\/\/dhtmlx.com\/blog\/integrating-dhtmlx-react-gantt-chart-lovable-ai-app-part-1\/\" rel=\"noopener\" target=\"_blank\">Integrating DHTMLX React Gantt Chart into a Lovable AI App (Part 1)<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/gantt\/integrations\/ai-tools\/lovable-ai\/\" rel=\"noopener\" target=\"_blank\">DHTMLX React Gantt integration with Lovalbe AI (Guide)<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/gantt\/integrations\/react\/\" rel=\"noopener\" target=\"_blank\">DHTMLX React Gantt documentation<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/@dhtmlx\/trial-react-gantt\" rel=\"noopener\" target=\"_blank\">DHTMLX React Gantt (npm package for evaluation)<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlx-mcp-server\/\" rel=\"noopener\" target=\"_blank\">DHTMLX MCP server<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We continue exploring the peculiarities of using DHTMLX React Gantt in AI-powered development with Lovable AI. Previously, we covered the basics of this integration, including embedding the Gantt functionality &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":15236,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[77,33,20,81,56],"class_list":["post-15208","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-ai","tag-all-posts","tag-gantt","tag-lovable-ai","tag-react"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/15208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=15208"}],"version-history":[{"count":18,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/15208\/revisions"}],"predecessor-version":[{"id":15968,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/15208\/revisions\/15968"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/15236"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=15208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=15208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=15208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}