Интеграция с Lovable AI
Эта статья описывает, как добавить DHTMLX React Gantt в проект Lovable и получить точный сгенерированный код.
Как Lovable обрабатывает DHTMLX Gantt
Lovable генерирует приложения React по запросам на естественном языке. Он хорошо справляется с распространенными схемами UI — макетами, маршрутами, стандартными компонентами — потому что модель увидела достаточно примеров во время обучения. DHTMLX Gantt — специализированный компонент с собственным API конфигурации, именами свойств и форматами данных. Здесь у модели меньше информации, поэтому она делает догадки. Иногда правильно, часто нет.
Уточнение — контекст. Существует три механизма, которые позволяют подать Lovable точную информацию об API на разном масштабе:
| Метод | Наиболее подходит для | Масштаб |
|---|---|---|
| Inline prompts | Одноразовые корректировки, когда вы точно знаете свойство | Единственный запрос |
| Knowledge Base | Повторно используемые правила на нескольких запросах | На уровне проекта |
| MCP | Полное покрытие API без копирования и вставки | Подключение к внешнему серверу |
Они не взаимоисключающие. Knowledge Base и MCP хорошо работают вместе — используйте Knowledge Base для конвенций проекта, MCP — для общей точности API.
Разделы ниже пройдутся по всему рабочему процессу: создание каркаса приложения, добавление Gantt, затем улучшение качества вывода с помощью каждого метода.
Требования
- Аккаунт Lovable
Для локальной разработки (опционально):
- Node.js 18+
- npm
Для деталей, специфичных для платформы, смотрите документацию Lovable.
Генерация базового приложения
Начните с обычного административного макета. Этот запрос создаёт панель управления с навигацией, KPI-карточками и областью графика:
Создайте административное приложение.
Требования:
- Каждый пункт навигации отк рывает отдельный маршрут
- Панель управления включает KPI-карточки и основной блок контента с графиком продаж.
После генерации продолжайте редактирование в Lovable или клонируйте Git-репозиторий и работайте локально. Изменения синхронизируются в обоих направлениях.
Держите первый запрос сфокусированным на структуре и навигации — настройка компонентов идёт далее.
Добавление DHTMLX React Gantt
Ссылайтесь на trial-пакет в запросе:
Замените график продаж диаграммой DHTMLX React Gantt, используя @dhtmlx/trial-react-gantt.
Lovable генерирует приложения React, поэтому обёртка на React — естественный выбор. В руководстве используется @dhtmlx/trial-react-gantt — сбо рка для оценки DHTMLX React Gantt. Она общедоступна на npm, что означает, что Lovable может установить её без дополнительной настройки.
Тестовая сборка полностью функциональна, но содержит водяной знак для проверки. Для продакшна переключитесь на @dhx/react-gantt, который требует аутентификации в частном npm-реесте DHTMLX. Либо добавьте файлы пакета в локальный проект.
Lovable устанавливает пакет, создаёт импорт и рендерит базовый Gantt с образцовыми задачами и таймлайном. Вывод часто не совпадает с API полностью — конфигурация столбцов, настройка масштаба и форматы данных подбираются наугад. Ниже приведены способы устранить этот разрыв.
Улучшение вывода с помощью Inline prompts
Когда вы точно знаете вызов API, укажите имя свойства и фрагмент кода, чтобы Lovable не догадывался:
Обновите конфигурацию DHTMLX React Gantt:
- Установите высоту ряда на
40pxс использованиемconfig.row_height- Передайте объект конфигурации в компонент ReactGantt
Пример:
const config = {
row_height: 40
};
<ReactGantt config={config} />
Это хорошо подходит для изолированных изменений. По мере роста конфигурации задача усложняется — вы будете вставлять одни и те же детали API в каждый запрос.
Хранение правил в Knowledge Base
Knowledge Base хранит повторно используемые правила, которые применяются ко всем запросам в проекте. Определяйте особенности API один раз, вместо повторения:
Theme:
- Gantt поддерживает темизацию через свойство "theme".
- Разрешённые значения:
"terrace"(светлая) и"dark"(тёмная).- Когда приложение имеет глобальную тему, выполните отображение:
- light ->
"terrace"- dark ->
"dark"- Передайте полученное отображение в Gantt как
theme={ganttTheme}.Grid row height:
Установите высоту ряда через конфигурационный объект Gantt.
Используйте
config.row_height(число, в пикселях).Передайте конфигурацию в компонент ReactGantt:
const config = { row_height: 40 };
<ReactGantt config={config} />
С правилами на месте запросы могут быть короче:
Используйте Knowledge Base проекта. Установите высоту ряда грида Gantt на 60.
Knowledge Base ограничен примерно до ~100k символов — достаточно для узко сфокусированного справочника по конфигурации, но не для полного DHTMLX Gantt API. Для более широкого охвата подключите MCP.
По дключение MCP для полного доступа к API
MCP (Model Context Protocol) соединяет Lovable с внешним сервером документации. Это даёт Lovable доступ к полному, актуальному API без ручного копирования.
Подключите DHTMLX MCP Server в настройках проекта Lovable:
Затем ссылайтесь на него в запросах, чтобы Lovable получал соответствующую документацию перед генерацией кода:
Используйте DHTMLX MCP сервер. Установите высоту ряда грида Gantt в 60 пикселей.
Lovable определяет имена свойств, форматы данных и конфигурационные паттерны из реального API-справочника вместо догадок.
Практические советы
- Одно изменение за запрос. Короткие запросы упрощают локализацию проблем, когда результат оказывается неверным.
- Проверяйте импорты. Lovable иногда импортирует из неверного пути к пакету или путает именованные и экспорт по умолчанию. Проверяйте строку импорта после каждого изменения.
- Сочетайте Knowledge Base и MCP. Knowledge Base для конвенций проекта (отображение темы, макет колонок), MCP для общей точности API. Они дополняют друг друга.
- Проверяйте объект конфигурации. Когда Gantt не рендерится должным образом, залогируйте объект config, переданный в
<ReactGantt />, и сравните его с опорой по пропсам конфигурации. Большинство проблем связано с отсутствующим или неправильно названным свойством.
Что читать дальше
- Обзор DHTMLX React Gantt — API компонента и возможности
- Руководство по установке — настройка профессионального пакета
- Сервер MCP DHTMLX — подключение MCP к другим инструментам ИИ