From 80dd43f52ded7541b45a5980ce9b0173424749bf Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Wed, 3 Jun 2026 17:23:25 +0300 Subject: [PATCH 1/3] [update] rename AI guide to MCP server guide - docs/guides/ai.md renamed to docs/guides/mcp-server.md - updated sidebar label, title, and description metadata - sidebar reference updated in sidebars.js - redirect added from /suite/guides/ai/ to /suite/guides/mcp-server/ --- docker/redirects.conf | 1 + docs/guides/{ai.md => mcp-server.md} | 6 +++--- sidebars.js | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) rename docs/guides/{ai.md => mcp-server.md} (94%) diff --git a/docker/redirects.conf b/docker/redirects.conf index 444b6291..71c33f4a 100644 --- a/docker/redirects.conf +++ b/docker/redirects.conf @@ -1,5 +1,6 @@ /suite/window/index/ /suite/window/; /usage_rangeselection/ /suite/grid/usage_rangeselection/; +/suite/guides/ai/ /suite/guides/mcp-server/; /window__usage.html /suite/window/usage/; /window__migration.html /suite/migration/; diff --git a/docs/guides/ai.md b/docs/guides/mcp-server.md similarity index 94% rename from docs/guides/ai.md rename to docs/guides/mcp-server.md index 1ad4e320..2be4b9fd 100644 --- a/docs/guides/ai.md +++ b/docs/guides/mcp-server.md @@ -1,7 +1,7 @@ --- -sidebar_label: AI tools (MCP) -title: AI tools (MCP) -description: AI tools (MCP) +sidebar_label: DHTMLX MCP server +title: Getting started with DHTMLX MCP server +description: You can learn about DHTMLX MCP server in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. sidebar_class_name: ai-icon --- diff --git a/sidebars.js b/sidebars.js index 5b0a70a1..c1690137 100644 --- a/sidebars.js +++ b/sidebars.js @@ -5117,7 +5117,7 @@ module.exports = { items: [ "guides/events_guide", "guides/datacollection_guide", - "guides/ai", + "guides/mcp-server", ], }, // end Guides From 50e67002a16f0a96e324de18502c6733d6d40957 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Thu, 4 Jun 2026 16:32:54 +0300 Subject: [PATCH 2/3] [dev] fix redirect link --- docker/redirects.conf | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docker/redirects.conf b/docker/redirects.conf index 71c33f4a..89d6faf6 100644 --- a/docker/redirects.conf +++ b/docker/redirects.conf @@ -1,6 +1,6 @@ /suite/window/index/ /suite/window/; /usage_rangeselection/ /suite/grid/usage_rangeselection/; -/suite/guides/ai/ /suite/guides/mcp-server/; +/guides/ai/ /suite/guides/mcp-server/; /window__usage.html /suite/window/usage/; /window__migration.html /suite/migration/; From c899d09ac449e2700f2a1602366bb4e5427f9a0b Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Thu, 4 Jun 2026 16:37:29 +0300 Subject: [PATCH 3/3] [update] improve MCP server guide content - updated meta description to be product-specific - added Where MCP server helps section with component links - restructured example prompts by component (Grid, Form, Chart, Layout) - added Tips for effective Suite prompts section - fixed incorrect prompt terminology (submit -> send event, multi-column filter phrasing) --- docs/guides/mcp-server.md | 60 ++++++++++++++++++++++++++++++--------- 1 file changed, 47 insertions(+), 13 deletions(-) diff --git a/docs/guides/mcp-server.md b/docs/guides/mcp-server.md index 2be4b9fd..d8d4331e 100644 --- a/docs/guides/mcp-server.md +++ b/docs/guides/mcp-server.md @@ -1,7 +1,7 @@ --- sidebar_label: DHTMLX MCP server title: Getting started with DHTMLX MCP server -description: You can learn about DHTMLX MCP server in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. +description: Connect AI coding assistants to live DHTMLX Suite documentation via the MCP server. Covers Grid, Form, Tree, Calendar, and all other Suite UI components. sidebar_class_name: ai-icon --- @@ -21,11 +21,19 @@ https://docs.dhtmlx.com/mcp The DHTMLX MCP server is a shared service for all major DHTMLX products, not only DHTMLX Suite. The configuration instructions apply to any DHTMLX component you are working with. ::: -Typical use cases include: +## Where MCP server helps with Suite -- Retrieving documentation for a specific component. -- Generating code examples based on current APIs. -- Understanding configuration options, methods, and events. +The MCP server indexes the full DHTMLX Suite documentation across all components. Common scenarios include: + +- Looking up the current API for any Suite component, including [Grid](/grid/), [Form](/form/), [Chart](/chart/), [Tree](/tree/), [Calendar](/calendar/), and others. +- Generating ready-to-run initialization and configuration code for any component based on a description. +- Configuring [Grid](/grid/) features: sorting, filtering, inline editing, column resizing, and drag-and-drop between grids. +- Building [Form](/form/) layouts with validation rules, built-in controls, and event-driven behavior. +- Creating [Chart](/chart/) configurations across bar, line, pie, area, radar, and other chart types. +- Loading and managing data using [DataCollection](/data_collection/) across components. +- Handling component events to respond to user interactions, value changes, and data updates. +- Composing multiple components in a shared [Layout](/layout/) with rows, columns, and cells. +- Exploring [TypeScript support](/common_features/using_typescript/) and integration with [React](/integration/suite_and_react/), [Vue](/integration/suite_and_vue/), [Angular](/integration/suite_and_angular/), and [Svelte](/integration/suite_and_svelte/). ## How DHTMLX MCP server works @@ -196,29 +204,55 @@ Queries may be logged for debugging and service improvements. Organizations that require stricter privacy guarantees can request commercial deployment options with no query logging. For inquiries: `info@dhtmlx.com`. -## Usage tips +## Example prompts for Suite with AI -Once the MCP server is configured, use concrete, task-oriented prompts so the assistant can call the docs effectively. +Once you connect the MCP server, phrase your prompts around a concrete goal so the assistant knows which component and feature to look up. The prompts below are organized by component. Copy and adapt them as needed. -You can copy and test the example prompts given below: +**Grid** ~~~ -How do I add custom validation to DHTMLX Form? Use the docs. +I want to create a grid with the possibility to sort, resize and edit column cells. ~~~ ~~~ -I want to create a layout with a calendar in one cell, and a grid in another. +I want to create two grids with the possibility to drag item rows from one grid to another, but not vice versa. ~~~ ~~~ -I want to create a grid with the possibility to sort, resize and edit column cells. +How do I apply multiple filters to a DHTMLX Grid? +~~~ + +**Form** + +~~~ +How do I add custom validation to DHTMLX Form? Use the docs. +~~~ ~~~ +How do I get all form values as an object and handle the send event in DHTMLX Form? +~~~ + +**Chart** + ~~~ I have a chart with the bar type, how can I also add a line chart above it? ~~~ ~~~ -I want to create two grids with the possibility to drag item rows from one grid to another, but not vice versa. +How do I load data into a DHTMLX Chart from a JSON array? ~~~ -More specific prompts result in more relevant snippets and fewer follow-up questions. +**Layout and composition** + +~~~ +I want to create a layout with a calendar in one cell, and a grid in another. +~~~ +~~~ +How do I resize layout cells and handle the resize event in DHTMLX Layout? +~~~ **Related sample**: [Kanban and Chatbot. Example built with MCP](https://snippet.dhtmlx.com/rp3dzkei) +## Tips for effective Suite prompts + +- **Name the component.** DHTMLX Suite contains many components, each with its own API. Always specify the component in your prompt (for example, "in DHTMLX Grid" vs. "in DHTMLX Form"). Without this, the assistant may retrieve documentation for the wrong component. +- **Include the feature or behavior.** Prompts like "drag-and-drop between two grids" or "form validation on send" retrieve more relevant documentation than a generic description. The more specific the feature, the more precise the retrieval. +- **Add "Use the docs"** to your prompt. This phrase signals to the assistant that it should trigger an MCP lookup instead of answering from training data alone. It is especially useful for event names, method signatures, and configuration properties that change between versions. +- **Describe the expected interaction.** Suite components often support multiple ways to achieve a goal (a configuration property, a method call, or an event handler). Describing the expected behavior helps the assistant pick the right approach. +