Перейти к основному содержимому

Интеграция с Lovable AI

Эта статья описывает, как добавить DHTMLX React Gantt в проект Lovable и получить точный сгенерированный код.

Как Lovable обрабатывает DHTMLX Gantt​

Lovable генерирует приложения на React из подсказок на естественном языке. Он хорошо справляется с обычными шаблонами UI — макеты, маршруты, стандартные компоненты — потому что модель видела достаточно примеров во время обучения. DHTMLX Gantt — это специализированный компонент с собственным API конфигурации, именами свойств и форматами данных. У модели здесь меньше примеров, поэтому она делает догадки. Иногда верно, часто нет.

Исправление — контекст. Три механизма позволяют подать Lovable точную информацию об API, каждый на своем масштабе:

MethodBest forScope
Inline promptsОдноразовые настройки, когда вы точно знаете свойствоЕдиничный запрос
Knowledge BaseПовторяемые правила для нескольких запросовна уровне проекта
MCPПолное покрытие API без копирования и вставкиВнешний сервер connection

Эти подходы не взаимоисключающие. Knowledge Base и MCP хорошо работают вместе — используйте Knowledge Base для правил, характерных для проекта, MCP — для общей точности API.

Ниже приведены разделы полного рабочего процесса: создать каркас приложения, добавить Gantt, затем улучшать качество вывода с каждым методом.

Избранный стартовый пример: React Gantt + проектный планировщик Supabase​

Если вам нужен полный, полнофункциональный эталон вместо того, чтобы строить всё с нуля, React Gantt Lovable Starter — это много-проектный планировщик, сгенерированный от начала до конца в Lovable, с бэкендом Supabase, CRUD для задач и связей, отмена/возврат, рабочий календарь, загрузка ресурсов и демонстрационная модель ролей.

  • Демо онлайн: https://react-gantt-lovable-starter.lovable.app
  • Исходник: github.com/DHTMLX/react-gantt-lovable-starter
  • Повторяемый рецепт: папка lovable/ содержит точную последовательность промптов (11 шагов), содержимое Knowledge Base, использованное во время сборки, и журнал каждого ручного исправления, применённого к сгенерированному выводу.

Для подробного обзора рецепта и того, как воспроизвести его в вашем рабочем пространстве, смотрите Lovable Starter Walkthrough .

Если вам нужна лишь визуализация Gantt внутри общего административного приложения, продолжайте с шагами ниже.

Требования​

  • Аккаунт Lovable

Для локальной разработки (необязательно):

  • Node.js 18+
  • npm

Для деталей по платформе смотрите документацию Lovable.

Генерация базового приложения​

Начните со стандартного административного макета. Этот промпт создаёт дашборд с навигацией, KPI‑карточками и областью графика:

Create an admin application. Requirements:

  • Each navigation item opens a separate route
  • The Dashboard includes KPI cards and a main content block with a Sales chart.

Lovable-generated admin dashboard layout

После генерации продолжайте редактировать в Lovable или клонируйте Git‑репозиторий и работайте локально. Изменения синхронизируются в обоих направлениях.

Держите первый промпт сфокусированным на структуре и навигации — настройка конфигурации компонентов идёт дальше.

Добавление DHTMLX React Gantt​

Ссылайтесь на trial-пакет в промпте:

Replace the Sales chart with a DHTMLX React Gantt chart using @dhtmlx/trial-react-gantt.

DHTMLX Gantt chart in Lovable dashboard

Lovable генерирует приложения на React, поэтому обертка на React — естественный выбор. Руководство использует @dhtmlx/trial-react-gantt — сборку для оценки из DHTMLX React Gantt. Она публично доступна в npm, что означает, что Lovable может установить её без дополнительной настройки.

Сборка trial полностью функциональна, но включает водяной знак для оценки. Для production переключитесь на @dhx/react-gantt, который требует аутентификации в DHTMLX private npm registry. Либо добавьте файлы пакета в проект локально.

Lovable устанавливает пакет, создаёт импорт и рендерит базовый Gantt с примерами задач и таймлайном. Вывод часто не совпадает с API полностью — конфигурация колонок, настройка масштаба и форматы данных подбираются по догадке. Разделы ниже показывают, как закрыть этот разрыв.

Улучшение вывода с помощью встроенных подсказок​

Когда вы точно знаете вызов API, укажите имя свойства и фрагмент кода, чтобы Lovable не гадал:

Update the DHTMLX React Gantt configuration:

  • Set row height to 40px using config.row_height
  • Pass the config object into the ReactGantt component

Example:

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} />

Lovable Knowledge Base with Gantt configuration rules

С правилами в наличии промпты можно писать короче:

Use the project Knowledge Base. Set the Gantt grid row height to 60.

Gantt after applying Knowledge Base configuration in Lovable

Knowledge Base ограничивает размер примерно до ~100k символов — достаточно для узконастроечного справочного блока конфигурации, но не для полного DHTMLX Gantt API. Для более широкого охвата подключайте MCP.

Подключение MCP для полного доступа к API​

MCP (Model Context Protocol) соединяет Lovable с внешним сервером документации. Он предоставляет Lovable доступ к полному и актуальному API без ручного копирования.

Подключите DHTMLX MCP Server в настройках вашего проекта Lovable:

Adding DHTMLX MCP server in Lovable

Затем укажите его в промптах, чтобы Lovable запрашивал релевантную документацию перед генерацией кода:

Use the DHTMLX MCP server. Set the Gantt grid row height to 60 pixels.

Lovable разрешает имена свойств, форматы данных и конфигурационные паттерны на основе реального API, а не по догадке.

Практические советы​

  • Одно изменение — один промпт. Меньшие промпты облегчают локализацию проблем, когда вывод неверен.
  • Проверяйте импорты. Иногда Lovable импортирует из неверного пути пакета или путает именованные и экспорт по умолчанию. Проверяйте строку импорта после каждого изменения.
  • Комбинируйте Knowledge Base и MCP. Knowledge Base для правил проекта (отображение темы, распределение колонок), MCP — для общей точности API. Они дополняют друг друга.
  • Проверяйте объект config. Когда Gantt не рисуется как ожидалось, залогируйте объект config, переданный в <ReactGantt />, и сравните его с справкой по конфигурационным свойствам. Большинство проблем связано с отсутствующим или неверно названным свойством.

Что читать дальше​

Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support