Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 44 additions & 33 deletions docs/guides/ai-integrations/mcp-server.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
sidebar_label: DHTMLX MCP server
title: Using DHTMLX MCP server with AI coding assistants
description: Connect AI coding assistants to live DHTMLX Diagram documentation via the MCP server. Covers shapes, swimlanes, org charts, the Diagram Editor, and more.
title: DHTMLX Diagram MCP server for shapes and connector APIs
description: Point an AI assistant at the MCP server and it finds current DHTMLX Diagram docs on shapes, swimlanes, org charts, and the Diagram Editor.
---

# Using DHTMLX MCP server with AI coding assistants
# DHTMLX Diagram MCP server: shapes, connectors, and editor APIs

Building diagram applications requires precise control over shapes, connections, layout, and editor configuration. When an AI tool generates [DHTMLX Diagram](/) code from outdated training data, the result is mismatched APIs, missing properties, and configuration options that no longer exist.
[DHTMLX Diagram](/) gives you real control over [shape geometry](/shapes/configuration_properties), [connector routing](/lines/), and [layout rules](/guides/diagram/configuration), plus any options the editor is configured to allow. Generated code needs to reflect current shape properties, connector methods, and layout options, not the state of an earlier training snapshot.

The DHTMLX Model Context Protocol (MCP) server solves this by giving AI tools direct access to the live Diagram documentation. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](shapes/custom_shape.md), the [Diagram Editor](guides/diagram_editor/initialization.md), or any other part of the library, the assistant retrieves the current reference material before generating a response.
The DHTMLX MCP server exists precisely for this: it puts the current Diagram documentation in front of the assistant before a single shape gets drawn. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](/shapes/custom_shape), the [Diagram Editor](/guides/diagram_editor/initialization), or any other part of the library, the assistant retrieves the current reference material before generating a response.

**MCP endpoint**
### MCP endpoint

~~~
https://docs.dhtmlx.com/mcp
Expand All @@ -20,28 +20,37 @@ https://docs.dhtmlx.com/mcp
The DHTMLX MCP server covers all major DHTMLX products, not only DHTMLX Diagram. The same endpoint and configuration steps apply regardless of which component you are working with.
:::

## Where MCP server helps with Diagram
## Diagram work the MCP server speeds up

The MCP server indexes the full DHTMLX Diagram documentation. Common scenarios where the MCP server is useful:
DHTMLX Diagram's documentation lives in the MCP server's index. Developers query it for things such as:

- Looking up the current API for [shapes](shapes/default_shapes.md), [lines](/lines/), [groups](/groups/), or [swimlanes](/swimlanes/).
- Looking up the current API for [shapes](/shapes/default_shapes), [lines](/lines/), [groups](/groups/), or [swimlanes](/swimlanes/).
- Generating ready-to-run Diagram code based on a description.
- Exploring [Editor](guides/diagram_editor/initialization.md) configuration options, toolbar controls, and event handling.
- Checking [export](guides/data_export.md) options and understanding how to produce PDF or PNG output.
- Configuring auto-layout options for default-mode diagrams using the [diagram configuration](guides/diagram/configuration.md).
- Loading diagram data and serializing it back with the available [data methods](guides/loading_data.md).
- Handling [Diagram and Editor events](guides/event_handling.md) to respond to user interactions.
- Exploring [TypeScript support](guides/using_typescript.md) and framework integration for React, Vue, Angular and Svelte.
- Exploring [Editor](/guides/diagram_editor/initialization) configuration options, toolbar controls, and event handling.
- Checking [export](/guides/data_export) options and understanding how to produce PDF or PNG output.
- Configuring auto-layout options for default-mode diagrams using the [diagram configuration](/guides/diagram/configuration).
- Loading diagram data and serializing it back with the available [data methods](/guides/loading_data).
- Handling [Diagram and Editor events](/guides/event_handling) to respond to user interactions.
- Exploring [TypeScript support](/guides/using_typescript) and framework integration for React, Vue, Angular and Svelte.

## How DHTMLX MCP server works
## Inside a Diagram MCP server request

The server combines a Retrieval-Augmented Generation (RAG) pipeline with MCP so that AI assistants can query documentation on demand rather than relying solely on training data.
The DHTMLX MCP server runs a Retrieval-Augmented Generation (RAG) pipeline over the Model Context Protocol (MCP), routing each query to one of two workflows: *Search*, which retrieves matching reference pages for the assistant to work from, or *Inference*, which reads those pages and returns a finished answer directly. Only part of a request actually needs Diagram's documentation, and the assistant extracts just that piece first, handling the rest on its own.

For example, when you ask *"How do I configure a swimlane diagram with custom cell headers?"*, the assistant sends the prompt via the MCP endpoint. The server matches it against the swimlanes documentation, retrieves the relevant reference pages, and returns them as context. The assistant then generates code based on the current API rather than a training snapshot.
Here's how that plays out for the prompt *"How do I build a DHTMLX Diagram org chart that pulls employee records from my internal HR API and auto-arranges them by department?"*:

## Connecting AI tools to Diagram
1. The assistant picks out the part that needs documentation: how to configure auto-layout for an org chart built from a JSON dataset.
2. The server matches it to the diagram configuration documentation.
3. Since the answer requires generated code, it routes to *Search* (a narrower factual question, like which method controls auto-layout, would go to *Inference*).
4. *Search* pulls the matching pages from a vector index built on the current Diagram docs.
5. Those pages return to the assistant as context.
6. The assistant configures the auto-layout using that context, then writes the HR API fetch logic from its own knowledge instead of guessing at the Diagram API.

AI development tools typically support MCP through a CLI command or a JSON configuration file. In both cases the core step is registering the server URL:
This keeps generated Diagram code aligned with the documentation as it stands today.

## Bringing the MCP server into your AI tool

Each tool below connects to the same MCP endpoint using its own method: a CLI flag for some, a JSON configuration block for others. Register it once per tool, and the connection carries over to every Diagram project you open there:

~~~
https://docs.dhtmlx.com/mcp
Expand Down Expand Up @@ -77,7 +86,7 @@ To configure it manually, add the following entry to your `.mcp.json`:
### Cursor setup

:::info
You can find step-by-step MCP setup instructions for Cursor in the [official documentation](https://cursor.com/en-US/docs/mcp).
Cursor's [official documentation](https://cursor.com/en-US/docs/mcp) walks through every MCP configuration option.
:::

Follow the steps below to connect the DHTMLX MCP server to Cursor:
Expand All @@ -102,7 +111,7 @@ Follow the steps below to connect the DHTMLX MCP server to Cursor:
#### Antigravity 2.0

:::info
Refer to the [official documentation](https://antigravity.google/docs/mcp) for full details on MCP server integration in Antigravity.
Antigravity's [official documentation](https://antigravity.google/docs/mcp) covers MCP server integration in full.
:::

These are the steps to complete for connecting DHTMLX MCP server with Google Antigravity:
Expand All @@ -123,7 +132,7 @@ https://docs.dhtmlx.com/mcp
#### Antigravity CLI

:::info
Check the [related guide](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) to learn about migration from Gemini CLI to Antigravity CLI.
Migrating from Gemini CLI to Antigravity CLI? The [related guide](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) covers the change.
:::

To connect the DHTMLX MCP server to Antigravity CLI, create `mcp_config.json` in one of these locations:
Expand All @@ -148,7 +157,7 @@ Then run `agy` in the terminal.
### ChatGPT setup

:::info
See the [official documentation](https://developers.openai.com/api/docs/guides/tools-connectors-mcp) for the complete guide on connecting MCP servers to ChatGPT.
The [official documentation](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt) covers every step of connecting an MCP server to ChatGPT.
:::

Follow these steps to connect DHTMLX MCP server to ChatGPT:
Expand All @@ -169,25 +178,27 @@ https://docs.dhtmlx.com/mcp
- Authentication: `No authentication`
6. Click **Create**

Once connected, ChatGPT will retrieve Diagram documentation when answering questions during your conversations.
Once connected, ChatGPT retrieves Diagram documentation when answering questions during your conversations.

:::note
Note that MCP integration with ChatGPT may result in slower response times. For a faster experience, consider one of the other tools listed on this page.
:::info
For intensive coding workflows, other MCP-aware tools may be more efficient.
:::

### Other tools

Most modern AI coding tools (including Windsurf, Cline, Continue.dev, etc.) surface MCP under names such as "Model Context Protocol", "Context Sources", or "Custom integrations" in their settings. Add `https://docs.dhtmlx.com/mcp` as the source URL.

## Privacy and data handling
## The privacy side of the MCP server

Nothing about this runs on your machine: the DHTMLX MCP server operates entirely as a remote service, and it keeps no copy of your personal data.

The DHTMLX MCP server is a cloud-only service that runs remotely, leaves your local environment untouched, and stores no personal user data. Queries may be logged for debugging and service improvement purposes.
Debugging and service improvements are the only reasons the server logs a query.

Teams that require stricter privacy guarantees can request a commercial deployment with query logging disabled. Contact us at `info@dhtmlx.com` for details.
Prefer logging off entirely? A commercial deployment supports that. Set it up through `info@dhtmlx.com`.

## Example prompts for Diagram with AI
## Prompts for common Diagram tasks

Once the MCP server is connected, phrase your prompts around a concrete goal so the assistant knows which part of the Diagram API to look up. The prompts below are organized by the task type. You can copy and adapt them as needed.
A prompt that names the specific Diagram feature you need (a shape, the editor, export) retrieves more relevant results than a vague one. The groups below sort examples by feature.

**Creating diagrams**

Expand Down Expand Up @@ -234,7 +245,7 @@ How do I export a DHTMLX Diagram to a PNG file?
What format does DHTMLX Diagram use for serialized data, and how do I reload it?
~~~

## Tips for effective Diagram prompts
## Writing prompts the MCP server can act on

- **Name the API surface.** Distinguish between the diagram instance and the editor, for example: "in the DHTMLX Diagram Editor" vs. "on the diagram object". The server retrieves more relevant docs when the target is clear.
- **Include the shape type.** Prompts like "a swimlane shape" or "a custom shape with HTML content" retrieve the correct reference pages faster than generic "a shape".
Expand Down
6 changes: 6 additions & 0 deletions docs/guides/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,12 @@ The articles give you examples of using Diagram with different client-side frame
- [Integration with React](guides/integrations/react_integration.md)
- [Integration with Vue.js](guides/integrations/vue_integration.md)

## AI integrations

Connect an AI coding assistant to live DHTMLX Diagram documentation so it generates code from the current API instead of outdated training data.

- [DHTMLX MCP server](guides/ai-integrations/mcp-server.md)

## Touch support

You can create responsive web applications with DHTMLX Diagram thanks to built-in touch support. Check out how UI widgets work on touch devices in the [Touch support](guides/touch_support.md) guide.
Expand Down
2 changes: 1 addition & 1 deletion docs/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,4 +143,4 @@ You can apply the zoom template to your diagram to change its appearance by zoom

## What's next

Now you can learn about using DHTMLX Diagram Editor in your application. Read the [Diagram Editor overview](editor_overview.md) to learn more about this tool.
Now you can learn about using DHTMLX Diagram Editor in your application. Read the [Diagram Editor overview](editor_overview.md) to learn more about this tool. If you build with an AI coding assistant, connect it to the live documentation through the [DHTMLX MCP server](guides/ai-integrations/mcp-server.md).
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: Verbinden Sie KI-Coding-Assistenten über den MCP-Server mit der ak

Der Aufbau von Diagrammanwendungen erfordert präzise Kontrolle über Formen, Verbindungen, Layout und Editor-Konfiguration. Wenn ein KI-Tool anhand veralteter Trainingsdaten Code für [DHTMLX Diagram](/) generiert, entstehen inkompatible APIs, fehlende Eigenschaften und Konfigurationsoptionen, die es nicht mehr gibt.

Der DHTMLX Model Context Protocol (MCP)-Server löst dieses Problem, indem er KI-Tools direkten Zugriff auf die aktuelle Diagram-Dokumentation gibt. Egal, ob Sie mit [Swimlanes](/swimlanes/), [benutzerdefinierten Formen](shapes/custom_shape.md), dem [Diagram Editor](guides/diagram_editor/initialization.md) oder einem anderen Teil der Bibliothek arbeiten – der Assistent ruft das aktuelle Referenzmaterial ab, bevor er eine Antwort generiert.
Der DHTMLX Model Context Protocol (MCP)-Server löst dieses Problem, indem er KI-Tools direkten Zugriff auf die aktuelle Diagram-Dokumentation gibt. Egal, ob Sie mit [Swimlanes](/swimlanes/), [benutzerdefinierten Formen](/shapes/custom_shape), dem [Diagram Editor](/guides/diagram_editor/initialization) oder einem anderen Teil der Bibliothek arbeiten – der Assistent ruft das aktuelle Referenzmaterial ab, bevor er eine Antwort generiert.

**MCP-Endpunkt**

Expand All @@ -24,14 +24,14 @@ Der DHTMLX MCP-Server deckt alle wichtigen DHTMLX-Produkte ab, nicht nur DHTMLX

Der MCP-Server indiziert die vollständige DHTMLX-Diagram-Dokumentation. Häufige Szenarien, in denen der MCP-Server nützlich ist:

- Nachschlagen der aktuellen API für [Formen](shapes/default_shapes.md), [Linien](/lines/), [Gruppen](/groups/) oder [Swimlanes](/swimlanes/).
- Nachschlagen der aktuellen API für [Formen](/shapes/default_shapes), [Linien](/lines/), [Gruppen](/groups/) oder [Swimlanes](/swimlanes/).
- Generieren von sofort lauffähigem Diagram-Code auf Grundlage einer Beschreibung.
- Erkunden von [Editor](guides/diagram_editor/initialization.md)-Konfigurationsoptionen, Toolbar-Steuerelementen und Event-Handling.
- Prüfen der [Export](guides/data_export.md)-Optionen und Verstehen, wie PDF- oder PNG-Ausgaben erzeugt werden.
- Konfigurieren von Auto-Layout-Optionen für Diagramme im Standardmodus mithilfe der [Diagram-Konfiguration](guides/diagram/configuration.md).
- Laden von Diagrammdaten und deren Serialisierung mithilfe der verfügbaren [Datenmethoden](guides/loading_data.md).
- Verarbeiten von [Diagram- und Editor-Events](guides/event_handling.md), um auf Benutzerinteraktionen zu reagieren.
- Erkunden der [TypeScript-Unterstützung](guides/using_typescript.md) und der Framework-Integration für React, Vue, Angular und Svelte.
- Erkunden von [Editor](/guides/diagram_editor/initialization)-Konfigurationsoptionen, Toolbar-Steuerelementen und Event-Handling.
- Prüfen der [Export](/guides/data_export)-Optionen und Verstehen, wie PDF- oder PNG-Ausgaben erzeugt werden.
- Konfigurieren von Auto-Layout-Optionen für Diagramme im Standardmodus mithilfe der [Diagram-Konfiguration](/guides/diagram/configuration).
- Laden von Diagrammdaten und deren Serialisierung mithilfe der verfügbaren [Datenmethoden](/guides/loading_data).
- Verarbeiten von [Diagram- und Editor-Events](/guides/event_handling), um auf Benutzerinteraktionen zu reagieren.
- Erkunden der [TypeScript-Unterstützung](/guides/using_typescript) und der Framework-Integration für React, Vue, Angular und Svelte.

## Wie der DHTMLX MCP-Server funktioniert {#how-dhtmlx-mcp-server-works}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: MCP 서버를 통해 AI 코딩 어시스턴트를 실시간 DHTMLX

다이어그램 애플리케이션을 구축하려면 도형, 연결, 레이아웃, 에디터 구성에 대한 정밀한 제어가 필요합니다. AI 도구가 오래된 학습 데이터를 기반으로 [DHTMLX Diagram](/) 코드를 생성하면 API가 일치하지 않거나 속성이 누락되거나 더 이상 존재하지 않는 구성 옵션이 사용되는 결과가 발생합니다.

DHTMLX Model Context Protocol(MCP) 서버는 AI 도구에 실시간 Diagram 문서에 대한 직접적인 액세스 권한을 부여하여 이 문제를 해결합니다. [스윔레인](/swimlanes/), [커스텀 도형](shapes/custom_shape.md), [Diagram Editor](guides/diagram_editor/initialization.md) 또는 라이브러리의 다른 어떤 부분을 다루든, 어시스턴트는 응답을 생성하기 전에 최신 참조 자료를 가져옵니다.
DHTMLX Model Context Protocol(MCP) 서버는 AI 도구에 실시간 Diagram 문서에 대한 직접적인 액세스 권한을 부여하여 이 문제를 해결합니다. [스윔레인](/swimlanes/), [커스텀 도형](/shapes/custom_shape), [Diagram Editor](/guides/diagram_editor/initialization) 또는 라이브러리의 다른 어떤 부분을 다루든, 어시스턴트는 응답을 생성하기 전에 최신 참조 자료를 가져옵니다.

**MCP 엔드포인트**

Expand All @@ -24,14 +24,14 @@ DHTMLX MCP 서버는 DHTMLX Diagram뿐만 아니라 모든 주요 DHTMLX 제품

MCP 서버는 전체 DHTMLX Diagram 문서를 인덱싱합니다. MCP 서버가 유용하게 사용되는 일반적인 시나리오는 다음과 같습니다.

- [도형](shapes/default_shapes.md), [선](/lines/), [그룹](/groups/), [스윔레인](/swimlanes/)의 최신 API 조회.
- [도형](/shapes/default_shapes), [선](/lines/), [그룹](/groups/), [스윔레인](/swimlanes/)의 최신 API 조회.
- 설명을 기반으로 즉시 실행 가능한 Diagram 코드를 생성.
- [Editor](guides/diagram_editor/initialization.md) 구성 옵션, 툴바 컨트롤, 이벤트 처리 방식 탐색.
- [내보내기](guides/data_export.md) 옵션을 확인하고 PDF 또는 PNG 출력을 생성하는 방법을 이해.
- [다이어그램 구성](guides/diagram/configuration.md)을 사용하여 기본 모드 다이어그램의 자동 레이아웃 옵션을 구성.
- 사용 가능한 [데이터 메서드](guides/loading_data.md)를 사용하여 다이어그램 데이터를 로드하고 다시 직렬화.
- 사용자 상호작용에 대응하기 위해 [Diagram 및 Editor 이벤트](guides/event_handling.md)를 처리.
- React, Vue, Angular, Svelte에 대한 [TypeScript 지원](guides/using_typescript.md) 및 프레임워크 통합 탐색.
- [Editor](/guides/diagram_editor/initialization) 구성 옵션, 툴바 컨트롤, 이벤트 처리 방식 탐색.
- [내보내기](/guides/data_export) 옵션을 확인하고 PDF 또는 PNG 출력을 생성하는 방법을 이해.
- [다이어그램 구성](/guides/diagram/configuration)을 사용하여 기본 모드 다이어그램의 자동 레이아웃 옵션을 구성.
- 사용 가능한 [데이터 메서드](/guides/loading_data)를 사용하여 다이어그램 데이터를 로드하고 다시 직렬화.
- 사용자 상호작용에 대응하기 위해 [Diagram 및 Editor 이벤트](/guides/event_handling)를 처리.
- React, Vue, Angular, Svelte에 대한 [TypeScript 지원](/guides/using_typescript) 및 프레임워크 통합 탐색.

## DHTMLX MCP 서버의 작동 방식 {#how-dhtmlx-mcp-server-works}

Expand Down
Loading
Loading