From 4164521f989f6b43eed7e9d258534de2acdd7529 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Mon, 13 Apr 2026 15:55:24 +0300 Subject: [PATCH 1/3] [add] draft for mcp server guide, sidebar and ai demo guide updated --- .../ai_integration_demo.md} | 8 +- docs/guides/ai_integrations/ai_tools.md | 209 ++++++++++++++++++ sidebars.js | 14 +- 3 files changed, 226 insertions(+), 5 deletions(-) rename docs/guides/{integrations/ai_integration.md => ai_integrations/ai_integration_demo.md} (90%) create mode 100644 docs/guides/ai_integrations/ai_tools.md diff --git a/docs/guides/integrations/ai_integration.md b/docs/guides/ai_integrations/ai_integration_demo.md similarity index 90% rename from docs/guides/integrations/ai_integration.md rename to docs/guides/ai_integrations/ai_integration_demo.md index 66067e4e..7a338948 100644 --- a/docs/guides/integrations/ai_integration.md +++ b/docs/guides/ai_integrations/ai_integration_demo.md @@ -1,10 +1,10 @@ --- -sidebar_label: Integrating Diagram with AI -title: Integrating Diagram with AI -description: You can learn about the Integrating Diagram with AI in the documentation of the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram. +sidebar_label: DHTMLX Diagram AI integration +title: DHTMLX Diagram AI integration +description: Step-by-step guide to running the DHTMLX Diagram AI demo. Text-to-diagram org chart generation using the OpenAI API, with a live preview and JSON editor. --- -# Integrating Diagram with AI +# DHTMLX Diagram AI integration DHTMLX Diagram can be integrated with AI for creating AI-powered diagramming applications. We have prepared an example on how to use DHTMLX Diagram with AI to build an application for creating an org chart out of a request provided in natural language. diff --git a/docs/guides/ai_integrations/ai_tools.md b/docs/guides/ai_integrations/ai_tools.md new file mode 100644 index 00000000..63a31002 --- /dev/null +++ b/docs/guides/ai_integrations/ai_tools.md @@ -0,0 +1,209 @@ +--- +sidebar_label: DHTMLX Diagram and MCP server +title: DHTMLX Diagram and MCP server +description: Give AI coding assistants access to live DHTMLX JavaScript Diagram documentation via the DHTMLX MCP server. Includes setup guides for Claude Code, Cursor, Gemini CLI, and ChatGPT. +--- + +# DHTMLX Diagram and MCP server + +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. + +The DHTMLX MCP server (built on the Model Context Protocol) 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/), 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** + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +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. +::: + +Common scenarios where the MCP server is useful: + +- Looking up the current API for [shapes](/shapes/default_shapes/), lines, [groups](/groups/), or [swimlanes](/swimlanes/). +- Generating ready-to-run Diagram code based on a description. +- 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. + +## How DHTMLX MCP server pipeline works + +The server combines a Retrieval-Augmented Generation (RAG) pipeline with MCP (Model Context Protocol) so that AI assistants can query documentation on demand rather than relying solely on training data. + +When you submit a prompt, the assistant sends it via the MCP endpoint. From there: + +1. The server identifies which product documentation is relevant to the query. +2. Matching content is retrieved from a vector index of the current docs. +3. The retrieved documentation is returned to the assistant as context. +4. The assistant composes its response using that context rather than a fixed training snapshot. + +## Connecting AI tools to DHTMLX Diagram + +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: + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +Setup instructions for the most commonly used tools are listed below. + +### Claude Code + +:::info +Full details on connecting MCP servers to Claude Code are available in the [official documentation](https://code.claude.com/docs/en/mcp). +::: + +The fastest way to register the server is through the CLI: + +~~~jsx +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +To configure it manually, add the following entry to your `mcp.json`: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor + +:::info +Step-by-step MCP setup instructions for Cursor can be found in the [official documentation](https://cursor.com/en-US/docs/mcp). +::: + +Follow the steps below: + +1. Open Settings (`Cmd+Shift+J` on Mac, `Ctrl+Shift+J` on Windows/Linux) +2. Go to **Tools & MCP** +3. Click **Add Custom MCP** +4. Paste this config: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Gemini CLI + +:::info +A full walkthrough for adding MCP servers to Gemini CLI is available in the [official documentation](https://geminicli.com/docs/tools/mcp-server/). +::: + +To connect via the CLI, use: + +~~~jsx +gemini mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +Alternatively, open `~/.gemini/settings.json` and add: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +Restart Gemini CLI after saving the file. + +### Antigravity (Google) + +:::info +Refer to the [official documentation](https://antigravity.google/docs/mcp) for full details on MCP server integration in Antigravity. +::: + +These are the steps to complete: + +1. Open the command palette +2. Type "mcp add" +3. Select "HTTP" +4. Provide the following values: +- Name: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +### ChatGPT + +:::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. +::: + +Follow these steps: + +1. Go to **Settings** → **Apps & Connectors** +2. Click **Advanced settings** +3. Enable **Developer mode** +4. Return to the **Apps & Connectors** screen and click "Create" +5. Configure the connector: +- Name: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ +- Authentication: `No authentication` +6. Click **Create** + +Once connected, ChatGPT will retrieve Diagram documentation when answering questions during your conversations. + +:::warning +When working on intensive coding tasks, other MCP-aware tools tend to be more efficient. +::: + +### Other tools + +Most modern AI coding tools (including Windsurf, Cline, and Continue.dev) 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 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 DHTMLX Diagram with AI + +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. + +You can copy and test the example prompts given below: + +~~~ +How do I create a swimlane diagram with custom sections in DHTMLX Diagram? Use the docs. +~~~ +~~~ +I want to add custom shapes with icons to DHTMLX Diagram. How do I do that? +~~~ +~~~ +How do I configure auto-layout for an org chart in DHTMLX Diagram? +~~~ +~~~ +I want to enable inline editing for shape text in DHTMLX Diagram. +~~~ +~~~ +How do I export a DHTMLX Diagram to a PNG file? +~~~ + +The more specific the prompt is, the more relevant documentation the server retrieves and the more accurate the generated code is. + diff --git a/sidebars.js b/sidebars.js index 0c7b5248..a801d5f9 100644 --- a/sidebars.js +++ b/sidebars.js @@ -873,7 +873,19 @@ module.exports = { "guides/integrations/svelte_integration" ], }, - "guides/integrations/ai_integration", + { + type: "category", + label: "AI Integrations", + link: { + type: 'generated-index', + title: "AI Integrations", + keywords: ['mcp', 'ai', 'ai tools','ai integration'], + }, + items: [ + "guides/ai_integrations/ai_integration_demo", + "guides/ai_integrations/ai_tools" + ], + }, "guides/touch_support", "guides/using_typescript" ] From 03d1e5eca44f2a94fe19ac1ddf712b6228d6bf1e Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Tue, 14 Apr 2026 15:20:19 +0300 Subject: [PATCH 2/3] [update] mcp server guide content, sidebar structure --- .../ai-demo.md} | 6 +- docs/guides/ai-integrations/mcp-server.md | 241 ++++++++++++++++++ docs/guides/ai_integrations/ai_tools.md | 209 --------------- sidebars.js | 4 +- 4 files changed, 246 insertions(+), 214 deletions(-) rename docs/guides/{ai_integrations/ai_integration_demo.md => ai-integrations/ai-demo.md} (97%) create mode 100644 docs/guides/ai-integrations/mcp-server.md delete mode 100644 docs/guides/ai_integrations/ai_tools.md diff --git a/docs/guides/ai_integrations/ai_integration_demo.md b/docs/guides/ai-integrations/ai-demo.md similarity index 97% rename from docs/guides/ai_integrations/ai_integration_demo.md rename to docs/guides/ai-integrations/ai-demo.md index 7a338948..d7995a4c 100644 --- a/docs/guides/ai_integrations/ai_integration_demo.md +++ b/docs/guides/ai-integrations/ai-demo.md @@ -1,10 +1,10 @@ --- -sidebar_label: DHTMLX Diagram AI integration -title: DHTMLX Diagram AI integration +sidebar_label: AI integration demo +title: Building AI-powered Diagram description: Step-by-step guide to running the DHTMLX Diagram AI demo. Text-to-diagram org chart generation using the OpenAI API, with a live preview and JSON editor. --- -# DHTMLX Diagram AI integration +# Building AI-powered Diagram DHTMLX Diagram can be integrated with AI for creating AI-powered diagramming applications. We have prepared an example on how to use DHTMLX Diagram with AI to build an application for creating an org chart out of a request provided in natural language. diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md new file mode 100644 index 00000000..f16f4904 --- /dev/null +++ b/docs/guides/ai-integrations/mcp-server.md @@ -0,0 +1,241 @@ +--- +sidebar_label: DHTMLX MCP server +title: Using DHTMLX MCP server with AI coding assistants +description: Access live DHTMLX Diagram documentation in AI coding assistants via the DHTMLX MCP server. Setup guides for Claude Code, Cursor, Gemini CLI, and ChatGPT. +--- + +# Using DHTMLX MCP server with AI coding assistants + +Building diagram applications requires precise control over shapes, connections, layout, and editor configuration. When an AI tool generates [DHTMLX Diagram](/diagram/) code from outdated training data, the result is mismatched APIs, missing properties, and configuration options that no longer exist. + +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/), 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** + +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +:::note +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 + +The MCP server indexes the full DHTMLX Diagram documentation. Common scenarios where the MCP server is useful: + +- 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/) 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 org chart and hierarchical diagram arrangements 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, and Angular. + +## How DHTMLX MCP server works + +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. + +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. + +## Connecting AI tools to Diagram + +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: + +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +Setup instructions for the most commonly used tools are listed below. + +### Claude Code setup + +:::info +Full details on connecting MCP servers to Claude Code are available in the [official documentation](https://code.claude.com/docs/en/mcp). +::: + +The fastest way to add the DHTMLX MCP server to Claude Code is through the CLI: + +~~~bash +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +To configure it manually, add the following entry to your `mcp.json`: + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor setup + +:::info +Step-by-step MCP setup instructions for Cursor can be found in the [official documentation](https://cursor.com/en-US/docs/mcp). +::: + +Follow the steps below to connect the DHTMLX MCP server to Cursor: + +1. Open Settings (`Cmd+Shift+J` on Mac, `Ctrl+Shift+J` on Windows/Linux) +2. Go to **Tools & MCP** +3. Click **Add Custom MCP** +4. Paste this config: + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Gemini CLI setup + +:::info +A full walkthrough for adding MCP servers to Gemini CLI is available in the [official documentation](https://geminicli.com/docs/tools/mcp-server/). +::: + +To connect DHTMLX MCP server to Gemini via the CLI, use: + +~~~bash +gemini mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +Alternatively, open `~/.gemini/settings.json` and add: + +~~~json +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +Restart Gemini CLI after saving the file. + +### Antigravity (Google) setup + +:::info +Refer to the [official documentation](https://antigravity.google/docs/mcp) for full details on MCP server integration in Antigravity. +::: + +These are the steps to complete for connecting DHTMLX MCP server with Google Antigravity: + +1. Open the command palette +2. Type "mcp add" +3. Select "HTTP" +4. Provide the following values: +- Name: +~~~ +dhtmlx-mcp +~~~ +- URL: +~~~ +https://docs.dhtmlx.com/mcp +~~~ + +### 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. +::: + +Follow these steps to connect DHTMLX MCP server to ChatGPT: + +1. Go to **Settings** → **Apps & Connectors** +2. Click **Advanced settings** +3. Enable **Developer mode** +4. Return to the **Apps & Connectors** screen and click "Create" +5. Configure the connector: +- Name: +~~~ +dhtmlx-mcp +~~~ +- URL: +~~~ +https://docs.dhtmlx.com/mcp +~~~ +- Authentication: `No authentication` +6. Click **Create** + +Once connected, ChatGPT will retrieve 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. +::: + +### Other tools + +Most modern AI coding tools (including Windsurf, Cline, and Continue.dev) 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 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 + +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. + +**Creating diagrams** + +~~~ +How do I create a swimlane diagram with custom sections in DHTMLX Diagram? Use the docs. +~~~ +~~~ +I want to build an org chart from a JSON data set in DHTMLX Diagram. How do I configure the auto-layout? +~~~ +~~~ +How do I create a flowchart with decision nodes and multiple links in DHTMLX Diagram? +~~~ + +**Working with shapes** + +~~~ +I want to add custom shapes with icons to DHTMLX Diagram. How do I define a shape template? +~~~ +~~~ +How do I restrict which shapes a user can place in the DHTMLX Diagram Editor? +~~~ +~~~ +How do I change the default text style and background color for all shapes in DHTMLX Diagram? +~~~ + +**Configuring the editor** + +~~~ +How do I configure auto-layout for an org chart in DHTMLX Diagram Editor? +~~~ +~~~ +I want to enable inline editing for shape text in DHTMLX Diagram. +~~~ +~~~ +How do I add a custom toolbar button to the DHTMLX Diagram Editor? +~~~ + +**Data and export** + +~~~ +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 + +- **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". +- **Add "Use the docs"** to your prompt. This phrasing signals to the assistant that it should trigger an MCP lookup rather than answering from training data. +- **Be specific about the version behavior you expect.** If the generated code doesn't match what you see in the docs, add "based on the current DHTMLX Diagram documentation" to force a fresh retrieval. diff --git a/docs/guides/ai_integrations/ai_tools.md b/docs/guides/ai_integrations/ai_tools.md deleted file mode 100644 index 63a31002..00000000 --- a/docs/guides/ai_integrations/ai_tools.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -sidebar_label: DHTMLX Diagram and MCP server -title: DHTMLX Diagram and MCP server -description: Give AI coding assistants access to live DHTMLX JavaScript Diagram documentation via the DHTMLX MCP server. Includes setup guides for Claude Code, Cursor, Gemini CLI, and ChatGPT. ---- - -# DHTMLX Diagram and MCP server - -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. - -The DHTMLX MCP server (built on the Model Context Protocol) 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/), 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** - -~~~jsx -https://docs.dhtmlx.com/mcp -~~~ - -:::note -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. -::: - -Common scenarios where the MCP server is useful: - -- Looking up the current API for [shapes](/shapes/default_shapes/), lines, [groups](/groups/), or [swimlanes](/swimlanes/). -- Generating ready-to-run Diagram code based on a description. -- 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. - -## How DHTMLX MCP server pipeline works - -The server combines a Retrieval-Augmented Generation (RAG) pipeline with MCP (Model Context Protocol) so that AI assistants can query documentation on demand rather than relying solely on training data. - -When you submit a prompt, the assistant sends it via the MCP endpoint. From there: - -1. The server identifies which product documentation is relevant to the query. -2. Matching content is retrieved from a vector index of the current docs. -3. The retrieved documentation is returned to the assistant as context. -4. The assistant composes its response using that context rather than a fixed training snapshot. - -## Connecting AI tools to DHTMLX Diagram - -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: - -~~~jsx -https://docs.dhtmlx.com/mcp -~~~ - -Setup instructions for the most commonly used tools are listed below. - -### Claude Code - -:::info -Full details on connecting MCP servers to Claude Code are available in the [official documentation](https://code.claude.com/docs/en/mcp). -::: - -The fastest way to register the server is through the CLI: - -~~~jsx -claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp -~~~ - -To configure it manually, add the following entry to your `mcp.json`: - -~~~jsx -{ - "mcpServers": { - "dhtmlx-mcp": { - "type": "http", - "url": "https://docs.dhtmlx.com/mcp" - } - } -} -~~~ - -### Cursor - -:::info -Step-by-step MCP setup instructions for Cursor can be found in the [official documentation](https://cursor.com/en-US/docs/mcp). -::: - -Follow the steps below: - -1. Open Settings (`Cmd+Shift+J` on Mac, `Ctrl+Shift+J` on Windows/Linux) -2. Go to **Tools & MCP** -3. Click **Add Custom MCP** -4. Paste this config: - -~~~jsx -{ - "mcpServers": { - "dhtmlx-mcp": { - "url": "https://docs.dhtmlx.com/mcp" - } - } -} -~~~ - -### Gemini CLI - -:::info -A full walkthrough for adding MCP servers to Gemini CLI is available in the [official documentation](https://geminicli.com/docs/tools/mcp-server/). -::: - -To connect via the CLI, use: - -~~~jsx -gemini mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp -~~~ - -Alternatively, open `~/.gemini/settings.json` and add: - -~~~jsx -{ - "mcpServers": { - "dhtmlx-mcp": { - "url": "https://docs.dhtmlx.com/mcp" - } - } -} -~~~ - -Restart Gemini CLI after saving the file. - -### Antigravity (Google) - -:::info -Refer to the [official documentation](https://antigravity.google/docs/mcp) for full details on MCP server integration in Antigravity. -::: - -These are the steps to complete: - -1. Open the command palette -2. Type "mcp add" -3. Select "HTTP" -4. Provide the following values: -- Name: -~~~jsx -dhtmlx-mcp -~~~ -- URL: -~~~jsx -https://docs.dhtmlx.com/mcp -~~~ - -### ChatGPT - -:::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. -::: - -Follow these steps: - -1. Go to **Settings** → **Apps & Connectors** -2. Click **Advanced settings** -3. Enable **Developer mode** -4. Return to the **Apps & Connectors** screen and click "Create" -5. Configure the connector: -- Name: -~~~jsx -dhtmlx-mcp -~~~ -- URL: -~~~jsx -https://docs.dhtmlx.com/mcp -~~~ -- Authentication: `No authentication` -6. Click **Create** - -Once connected, ChatGPT will retrieve Diagram documentation when answering questions during your conversations. - -:::warning -When working on intensive coding tasks, other MCP-aware tools tend to be more efficient. -::: - -### Other tools - -Most modern AI coding tools (including Windsurf, Cline, and Continue.dev) 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 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 DHTMLX Diagram with AI - -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. - -You can copy and test the example prompts given below: - -~~~ -How do I create a swimlane diagram with custom sections in DHTMLX Diagram? Use the docs. -~~~ -~~~ -I want to add custom shapes with icons to DHTMLX Diagram. How do I do that? -~~~ -~~~ -How do I configure auto-layout for an org chart in DHTMLX Diagram? -~~~ -~~~ -I want to enable inline editing for shape text in DHTMLX Diagram. -~~~ -~~~ -How do I export a DHTMLX Diagram to a PNG file? -~~~ - -The more specific the prompt is, the more relevant documentation the server retrieves and the more accurate the generated code is. - diff --git a/sidebars.js b/sidebars.js index a801d5f9..b0ec6a81 100644 --- a/sidebars.js +++ b/sidebars.js @@ -882,8 +882,8 @@ module.exports = { keywords: ['mcp', 'ai', 'ai tools','ai integration'], }, items: [ - "guides/ai_integrations/ai_integration_demo", - "guides/ai_integrations/ai_tools" + "guides/ai-integrations/mcp-server", + "guides/ai-integrations/ai-demo" ], }, "guides/touch_support", From 0d91ddd612be2d356346a3730f29750d25576e47 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Wed, 15 Apr 2026 11:32:43 +0300 Subject: [PATCH 3/3] [update] minor corrections in the mcp server guide --- docs/guides/ai-integrations/mcp-server.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index f16f4904..bfabf015 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -31,7 +31,7 @@ The MCP server indexes the full DHTMLX Diagram documentation. Common scenarios w - Configuring auto-layout options for org chart and hierarchical diagram arrangements 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, and Angular. +- Exploring [TypeScript support](/guides/using_typescript/) and framework integration for React, Vue, Angular and Svelte. ## How DHTMLX MCP server works @@ -77,7 +77,7 @@ To configure it manually, add the following entry to your `mcp.json`: ### Cursor setup :::info -Step-by-step MCP setup instructions for Cursor can be found in the [official documentation](https://cursor.com/en-US/docs/mcp). +You can find step-by-step MCP setup instructions for Cursor in the [official documentation](https://cursor.com/en-US/docs/mcp). ::: Follow the steps below to connect the DHTMLX MCP server to Cursor: @@ -176,7 +176,7 @@ Note that MCP integration with ChatGPT may result in slower response times. For ### Other tools -Most modern AI coding tools (including Windsurf, Cline, and Continue.dev) 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. +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