From 6188d2555523fba442d923e8189d935f0df03f55 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Tue, 21 Jul 2026 11:51:51 +0300 Subject: [PATCH 1/2] [update] refresh DHTMLX MCP server guide wording - reworded title, H1, and all H2 headings in mcp-server.md for unique phrasing against sibling product MCP guides (no shared skeletons) - documented the Search/Inference workflow split the server exposes - linked the guide from guides/overview.md and docs/overview.md so it has inbound prose links beyond the sidebar entry --- docs/guides/ai-integrations/mcp-server.md | 38 +++++++++++------------ docs/guides/overview.md | 6 ++++ docs/overview.md | 2 +- 3 files changed, 26 insertions(+), 20 deletions(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index 84adeaec..9664adad 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -1,14 +1,14 @@ --- 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 connectors +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: a live check on shape and connector 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](/) tracks a lot at once: shape geometry, connector routing, layout rules, and whatever the editor is configured to allow. Outdated training data catches an AI tool off guard here, producing shape properties the library renamed, connector methods that moved, or layout options that no longer ship with it. -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.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. **MCP endpoint** @@ -20,9 +20,9 @@ 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/). - Generating ready-to-run Diagram code based on a description. @@ -33,13 +33,13 @@ The MCP server indexes the full DHTMLX Diagram documentation. Common scenarios w - 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. -## 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. +Under the DHTMLX Diagram MCP server sit two separate workflows, *Search* and *Inference*, and the assistant chooses between them based on the request. Both draw on the same Retrieval-Augmented Generation (RAG) index built from the documentation. *Search* is the one that hands the assistant reference pages to work from; *Inference* skips that step and answers the question itself. -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. +For example, ask *"How do I configure a swimlane diagram with custom cell headers?"* and the assistant sends that one to *Search*: it matches the swimlanes documentation, hands back the reference pages, and the assistant writes the configuration from them rather than from memory. A prompt with a single factual answer, like which method controls auto-layout, is one the assistant can route to *Inference* instead, which reads the same kind of pages and returns the answer on its own. -## Connecting AI tools to Diagram +## Bringing the MCP server into your AI tool 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: @@ -148,7 +148,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. +See the [official documentation](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt) for the complete guide on connecting MCP servers to ChatGPT. ::: Follow these steps to connect DHTMLX MCP server to ChatGPT: @@ -169,25 +169,25 @@ 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 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. Teams that require stricter privacy guarantees can request a commercial deployment with query logging disabled. Contact us at `info@dhtmlx.com` for details. -## 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. +Vague prompts get vague retrieval. Say which Diagram feature you're after (a shape, the editor, export) and the assistant knows exactly where to look; the groups below sort examples by feature. **Creating diagrams** @@ -234,7 +234,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". diff --git a/docs/guides/overview.md b/docs/guides/overview.md index dda2d572..f9d97de0 100644 --- a/docs/guides/overview.md +++ b/docs/guides/overview.md @@ -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. diff --git a/docs/overview.md b/docs/overview.md index 8fcc343b..84815ede 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -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). From ccc96b163888a090537df66414a96e45382db321 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Fri, 24 Jul 2026 14:30:32 +0300 Subject: [PATCH 2/2] [update] vary Setup-section wording in MCP guide - reworded the Setup section's intro sentence and four tool-specific info boxes (Cursor, Antigravity 2.0, Antigravity CLI, ChatGPT) so they no longer read as verbatim-identical to the same section in the Kanban, Spreadsheet, Todolist, Booking, and Pivot MCP guides - same links and facts, different sentence construction per box --- docs/guides/ai-integrations/mcp-server.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index 9664adad..189635f4 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -41,7 +41,7 @@ For example, ask *"How do I configure a swimlane diagram with custom cell header ## Bringing the MCP server into your AI tool -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: +Every tool below reaches the same MCP endpoint through a different door: type a CLI flag into one, paste a JSON block into the next. Register it once per tool, and the connection carries over to every Diagram project you open there: ~~~ https://docs.dhtmlx.com/mcp @@ -77,7 +77,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: @@ -102,7 +102,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: @@ -123,7 +123,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: @@ -148,7 +148,7 @@ Then run `agy` in the terminal. ### ChatGPT setup :::info -See the [official documentation](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt) 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: