diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 186d61a..2aa58c6 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -377,7 +377,7 @@ new kanban.Kanban("#root", { }); ~~~ -### Bind editor fields to card fields +### Bind editor fields to card fields {#bind-editor-fields-to-card-fields} Each editor field links to a card field through a shared `key`. Set the same `key` value in the [`editorShape`](api/config/js_kanban_editorshape_config.md) entry and in the [`cardShape`](api/config/js_kanban_cardshape_config.md) property. For built-in card fields, set the key to `true`. For custom fields, list the key in the `headerFields` array. The same key supplies initial card data. diff --git a/docs/guides/mcp-server.md b/docs/guides/mcp-server.md new file mode 100644 index 0000000..3ad2262 --- /dev/null +++ b/docs/guides/mcp-server.md @@ -0,0 +1,245 @@ +--- +sidebar_label: DHTMLX MCP server +title: DHTMLX Kanban and the MCP server for building with AI +description: The MCP server gives AI tools access to current DHTMLX Kanban documentation, covering cards, columns, swimlanes, editor fields, and REST data sync. +--- + +# DHTMLX Kanban and the MCP server: build with live docs + +A working [DHTMLX Kanban](/) board depends on several pieces fitting together correctly: card and editor fields need to [share a matching key](guides/configuration.md#bind-editor-fields-to-card-fields), the [Toolbar](guides/customization.md#custom-toolbar) runs as its own widget bound to the board, and [server sync](guides/working_with_server.md) relies on a specific set of action handlers. Generated code holds up when it uses a matching key between card and editor fields, the Toolbar wired up on its own, and server sync built on today's action handlers, not a snapshot from training time. + +The DHTMLX MCP server closes that gap by handing the assistant a live line into the Kanban documentation itself. Ask about [binding editor fields to card fields](guides/configuration.md#bind-editor-fields-to-card-fields), [customizing the Toolbar](guides/customization.md#custom-toolbar), or [connecting a RestDataProvider backend](guides/working_with_server.md), and the assistant pulls the current reference before writing any code. + +**MCP endpoint** + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +:::note +The DHTMLX MCP server covers all major DHTMLX products, not only DHTMLX Kanban. The same endpoint and configuration instructions work regardless of which DHTMLX component you are building with. +::: + +## What the MCP server unlocks for Kanban + +Under the hood, the server keeps a full index of the DHTMLX Kanban documentation, ready to serve requests like these: + +- Looking up the current API for Kanban [methods](api/overview/methods_overview.md), [events](api/overview/events_overview.md), and [properties](api/overview/properties_overview.md), including signatures and default values. +- Generating ready-to-run [initialization](guides/initialization.md) code for both the Kanban board and the separate Toolbar constructor. +- Configuring [card and editor fields](guides/configuration.md#cards) (`cardShape`, `editorShape`) and binding them by key, including combo, multiselect, color, date, and file field types. +- [Customizing](guides/customization.md) card templates, context menus, and column headers with the documented template callbacks. +- [Styling](guides/stylization.md) columns, rows, and cards with CSS variables and conditional CSS classes. +- [Localizing](guides/localization.md) the Kanban and Toolbar interfaces with built-in or custom locale objects. +- [Loading, exporting, and modifying](guides/working_with_data.md) cards, columns, rows, links, and comments through the data API. +- Connecting a [REST backend](guides/working_with_server.md) through `RestDataProvider`, or setting up a multiuser board that syncs changes over WebSocket. +- [Integrating](guides/integration.md) Kanban with other DHTMLX widgets such as Gantt and Scheduler, or with [React](guides/integration_with_react.md), [Vue](guides/integration_with_vue.md), [Angular](guides/integration_with_angular.md), and [Svelte](guides/integration_with_svelte.md). + +## Under the hood: how the MCP server responds + +Ask the MCP server the same question twice and you can get two different kinds of response, because the calling agent picks between two workflows depending on the request. *Search* pulls the matching Kanban reference pages and hands them to the assistant, which writes the answer itself; *Inference* reads those same pages and writes the answer for the assistant instead. Both draw on a Retrieval-Augmented Generation (RAG) index built from the current documentation, reached through the Model Context Protocol (MCP) endpoint. + +For example, when you ask *"How do I bind a custom `editorShape` field to a `cardShape` field so the value shows up both on the card and in the editor in DHTMLX Kanban?"*, the assistant sends the prompt through the MCP endpoint. For a code-generation request like this one, it typically calls *Search*: the workflow finds the matching field-binding documentation, returns the relevant reference pages as context, and the assistant turns them into code that reflects the current API, not what it looked like at training time. For a question with a single correct answer, the assistant can call *Inference* instead: the workflow reads the reference pages itself and returns a ready-made answer directly, so the assistant relays that answer rather than composing one from raw pages. + +## Adding the MCP endpoint to your AI tool + +Prefer the terminal or a config file? Either path points your tool at the URL below, and once it's registered, every Kanban board you build in that tool can reach it. + +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +Setup steps for the most common tools follow below. + +### Claude Code + +:::info +See Claude Code's own [documentation](https://code.claude.com/docs/en/mcp) for every supported way to register an MCP server. +::: + +To register the server from the command line, run: + +~~~jsx +claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp +~~~ + +For manual setup, add the following to your `mcp.json`: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "type": "http", + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Cursor + +:::info +For every MCP configuration path Cursor supports, see its [official documentation](https://cursor.com/en-US/docs/mcp). +::: + +Steps to add the server: + +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 the following config: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "url": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +### Google Antigravity + +#### Antigravity 2.0 + +:::info +Full MCP integration details for Antigravity live in the [official documentation](https://antigravity.google/docs/mcp). +::: + +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: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ + +#### Antigravity CLI + +:::info +The [related guide](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) covers migrating from Gemini CLI to Antigravity CLI. +::: + +To connect the DHTMLX MCP server to Antigravity CLI, create `mcp_config.json` in one of these locations: + +- Global: `~/.gemini/config/mcp_config.json` +- Workspace: `.agents/mcp_config.json` + +Add the following configuration: + +~~~jsx +{ + "mcpServers": { + "dhtmlx-mcp": { + "serverUrl": "https://docs.dhtmlx.com/mcp" + } + } +} +~~~ + +Then run `agy` in the terminal. + +### ChatGPT + +:::info +ChatGPT's [official documentation](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt) walks through the full MCP connector setup. +::: + +Steps to configure the connector: + +1. Go to **Settings** → **Apps & Connectors** +2. Click **Advanced settings** +3. Enable **Developer mode** +4. Return to **Apps & Connectors** and click "Create" +5. Fill in the connector details: +- Name: +~~~jsx +dhtmlx-mcp +~~~ +- URL: +~~~jsx +https://docs.dhtmlx.com/mcp +~~~ +- Authentication: `No authentication` +6. Click **Create** + +After you create the connector, ChatGPT pulls documentation from the MCP server during conversations. + +:::info +For intensive coding workflows, other MCP-aware tools may be a better fit. +::: + +### Other tools + +Tools without a dedicated section here usually still support MCP, often labeled "Model Context Protocol" or "Context Sources" in settings. Add `https://docs.dhtmlx.com/mcp` there as a custom source. + +## What the MCP server does with your data + +The MCP server is a hosted service: nothing runs on your machine, no files from your project are read, and no personal data is stored. + +Debugging and service-improvement work may involve logging queries. + +For stricter privacy requirements, organizations can request a commercial deployment with query logging turned off. Reach out to `info@dhtmlx.com` for details. + +## Prompts to try for Kanban boards + +The API surface DHTMLX Kanban exposes is large, so tell the assistant exactly which piece you mean: a card, a column, the Toolbar, or the REST layer. The prompts below are grouped that way; borrow one and adjust the specifics. + +**Cards, columns, and swimlanes** + +~~~ +How do I let users drag cards between columns and rows in DHTMLX Kanban? Use the docs. +~~~ +~~~ +How do I limit the number of cards allowed in a specific column or swimlane? +~~~ +~~~ +How do I duplicate a card and move the copy to a different row using the Kanban API? +~~~ + +**Editor and field types** + +~~~ +How do I bind a custom editorShape field to a cardShape field so it appears on the card and in the editor? +~~~ +~~~ +How do I configure a multiselect field with user avatars in the DHTMLX Kanban editor? +~~~ +~~~ +How do I enable autosave with a debounce delay in the DHTMLX Kanban editor? +~~~ + +**Toolbar and board controls** + +~~~ +How do I add a custom search control to the Kanban Toolbar and bind it to the board? +~~~ +~~~ +How do I remove the undo and redo controls from the DHTMLX Kanban Toolbar? +~~~ + +**REST and multiuser sync** + +~~~ +How do I connect RestDataProvider to a Go backend and load the initial Kanban data? +~~~ +~~~ +How do I override getHandlers() in RestDataProvider to add a custom action handler? +~~~ +~~~ +How do I set up a multiuser DHTMLX Kanban board that syncs changes in real time over WebSocket? +~~~ + +## Getting sharper results from Kanban prompts + +- **Name the target element.** Distinguish between the board, a column, a row (swimlane), and a card (for example, "on the Kanban board" vs. "for a specific row" vs. "on a card in the Testing column"). A precise target helps the server retrieve the right reference pages. +- **Specify the field type.** `cardShape` and `editorShape` support many field types (combo, multiselect, color, date, files). Name the type explicitly (for example, "a multiselect field with avatars") instead of "a field" so the assistant pulls the matching configuration reference. +- **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 matters most for `RestDataProvider` handlers and field configuration, where the API is most likely to have changed. +- **State whether the operation is client-side or server-side.** Kanban works with local data as well as a `RestDataProvider`-backed REST API. Mention which one applies (for example, "using RestDataProvider" or "without a backend") so the assistant does not mix REST-specific calls into a client-only example. diff --git a/docs/how_to_start.md b/docs/how_to_start.md index c57789b..02220a1 100644 --- a/docs/how_to_start.md +++ b/docs/how_to_start.md @@ -126,4 +126,4 @@ new kanban.Toolbar("#toolbar", { ## What's next -That's all. Just three simple steps and you have a handy tool for visualizing and managing the workflow. Now you can start working with your tasks or keep exploring the inner world of JavaScript Kanban. +That's all. Just three simple steps and you have a handy tool for visualizing and managing the workflow. Now you can start working with your tasks or keep exploring the inner world of JavaScript Kanban. Building with an AI coding assistant? Point it at the live docs through the [DHTMLX MCP server](guides/mcp-server.md). diff --git a/docs/howtos.md b/docs/howtos.md index 224bff8..ad1f0db 100644 --- a/docs/howtos.md +++ b/docs/howtos.md @@ -19,6 +19,7 @@ In this section you can find out basic principles of work with Kanban | [Customization](guides/customization.md) | Learn how to customize Kanban | | [Stylization](guides/stylization.md) | Learn how to stylize Kanban | | [Localization](guides/localization.md) | Learn how to localize Kanban ([Example](https://snippet.dhtmlx.com/hrblf1mm?tag=kanban))| +| [DHTMLX MCP server](guides/mcp-server.md) | Connect an AI coding assistant to live Kanban documentation | ## API reference diff --git a/docs/index.md b/docs/index.md index 03d9fb3..d893753 100644 --- a/docs/index.md +++ b/docs/index.md @@ -70,4 +70,4 @@ import editor from '@site/static/img/js_kanban_editor.png'; ## What's next -Now you can get down to using Kanban in your application. Follow the directions of the [How to start](how_to_start.md) tutorial for guidance. +Now you can get down to using Kanban in your application. Follow the directions of the [How to start](how_to_start.md) tutorial for guidance. If you build with an AI coding assistant, connect it to the live documentation through the [DHTMLX MCP server](guides/mcp-server.md). diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md index 431f84f..9c6e3bf 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -377,7 +377,7 @@ new kanban.Kanban("#root", { }); ~~~ -### Editor-Felder an Kartenfelder binden +### Editor-Felder an Kartenfelder binden {#bind-editor-fields-to-card-fields} Jedes Editor-Feld ist über einen gemeinsamen `key` mit einem Kartenfeld verknüpft. Setzen Sie denselben `key`-Wert im [`editorShape`](api/config/js_kanban_editorshape_config.md)-Eintrag und in der [`cardShape`](api/config/js_kanban_cardshape_config.md) Eigenschaft. Bei integrierten Kartenfeldern setzen Sie den Schlüssel auf `true`. Bei benutzerdefinierten Feldern tragen Sie den Schlüssel im `headerFields`-Array ein. Derselbe Schlüssel liefert auch die Anfangsdaten der Karte. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md index c1790b8..22db791 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -377,7 +377,7 @@ new kanban.Kanban("#root", { }); ~~~ -### 에디터 필드와 카드 필드 바인딩 +### 에디터 필드와 카드 필드 바인딩 {#bind-editor-fields-to-card-fields} 각 에디터 필드는 공유 `key`를 통해 카드 필드에 연결됩니다. [`editorShape`](api/config/js_kanban_editorshape_config.md) 항목과 [`cardShape`](api/config/js_kanban_cardshape_config.md) 속성에 동일한 `key` 값을 설정하세요. 내장 카드 필드의 경우 키를 `true`로 설정하고, 커스텀 필드의 경우 `headerFields` 배열에 키를 나열하세요. 동일한 키로 카드의 초기 데이터도 제공할 수 있습니다. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md index afaa7fd..5a15f94 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -377,7 +377,7 @@ new kanban.Kanban("#root", { }); ~~~ -### Привязка полей редактора к полям карточки +### Привязка полей редактора к полям карточки {#bind-editor-fields-to-card-fields} Каждое поле редактора связывается с полем карточки через общий `key`. Укажите одинаковое значение `key` в записи [`editorShape`](api/config/js_kanban_editorshape_config.md) и в свойстве [`cardShape`](api/config/js_kanban_cardshape_config.md). Для встроенных полей карточки установите ключ в `true`. Для кастомных полей перечислите ключ в массиве `headerFields`. Этот же ключ предоставляет начальные данные карточки. diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md index 7c7101b..3161e1e 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/configuration.md @@ -377,7 +377,7 @@ new kanban.Kanban("#root", { }); ~~~ -### 绑定编辑器字段与卡片字段 +### 绑定编辑器字段与卡片字段 {#bind-editor-fields-to-card-fields} 每个编辑器字段通过共享的 `key` 与卡片字段关联。在 [`editorShape`](api/config/js_kanban_editorshape_config.md) 条目和 [`cardShape`](api/config/js_kanban_cardshape_config.md) 属性中设置相同的 `key` 值。对于内置卡片字段，将 key 设为 `true`；对于自定义字段，在 `headerFields` 数组中列出该 key。同一 key 也用于提供卡片的初始数据。 diff --git a/sidebars.js b/sidebars.js index 467c049..b286b15 100644 --- a/sidebars.js +++ b/sidebars.js @@ -477,7 +477,8 @@ module.exports = { //"guides/integration", "guides/working_with_data", //"guides/working_with_server", - "guides/typescript_support" + "guides/typescript_support", + "guides/mcp-server" ] }, { diff --git a/yarn.lock b/yarn.lock index 0015ecb..06385f9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3858,12 +3858,12 @@ chokidar@^3.5.3, chokidar@^3.6.0: optionalDependencies: fsevents "~2.3.2" -chokidar@^4.0.0: - version "4.0.3" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-4.0.3.tgz#7be37a4c03c9aee1ecfe862a4a23b2c70c205d30" - integrity sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA== +chokidar@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-5.0.0.tgz#949c126a9238a80792be9a0265934f098af369a5" + integrity sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw== dependencies: - readdirp "^4.0.1" + readdirp "^5.0.0" chrome-trace-event@^1.0.2: version "1.0.4" @@ -4568,7 +4568,7 @@ dns-packet@^5.2.2: dependencies: "@leichtgewicht/ip-codec" "^2.0.1" -docusaurus-plugin-sass@^0.2.5: +docusaurus-plugin-sass@^0.2.6: version "0.2.6" resolved "https://registry.yarnpkg.com/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.6.tgz#b4930a1fe1cc7bcead639bb1bee38bce0ffd073d" integrity sha512-2hKQQDkrufMong9upKoG/kSHJhuwd+FA3iAe/qzS/BmWpbIpe7XKmq5wlz4J5CJaOPu4x+iDJbgAxZqcoQf0kg== @@ -5833,10 +5833,10 @@ image-size@^2.0.2: resolved "https://registry.yarnpkg.com/image-size/-/image-size-2.0.2.tgz#84a7b43704db5736f364bf0d1b029821299b4bdc" integrity sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w== -immutable@^5.0.2: - version "5.1.4" - resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.1.4.tgz#e3f8c1fe7b567d56cf26698f31918c241dae8c1f" - integrity sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA== +immutable@^5.1.5: + version "5.1.9" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.1.9.tgz#ac23c3a01992ab665e14ac9ffff298f28cd74a0c" + integrity sha512-m8nVez3rwrgmWxtLMt1ZYXB2Lv7OKYn/disyxAlSDYAlKSlFoPPfIAmAM/M5xqL4m4C/wAPw7S2/CNaUii1Hxg== import-fresh@^3.2.1, import-fresh@^3.3.0: version "3.3.1" @@ -8591,10 +8591,10 @@ readable-stream@^3.0.6: string_decoder "^1.1.1" util-deprecate "^1.0.1" -readdirp@^4.0.1: - version "4.1.2" - resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-4.1.2.tgz#eb85801435fbf2a7ee58f19e0921b068fc69948d" - integrity sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg== +readdirp@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-5.0.0.tgz#fbf1f71a727891d685bb1786f9ba74084f6e2f91" + integrity sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ== readdirp@~3.6.0: version "3.6.0" @@ -8972,13 +8972,13 @@ sass-loader@^16.0.2: dependencies: neo-async "^2.6.2" -sass@^1.70.0: - version "1.97.3" - resolved "https://registry.yarnpkg.com/sass/-/sass-1.97.3.tgz#9cb59339514fa7e2aec592b9700953ac6e331ab2" - integrity sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg== +sass@^1.98.0: + version "1.101.0" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.101.0.tgz#c2db5bbf2f956be7277f6223b899d0d4be3c899b" + integrity sha512-OL3GoQyoUdDt843DpVmDO6y2k1sc5IhUDSpu8XucEI+35neq5QivZ1iuegnpraEVTJXlQGK1gl27zKcTLEPbQw== dependencies: - chokidar "^4.0.0" - immutable "^5.0.2" + chokidar "^5.0.0" + immutable "^5.1.5" source-map-js ">=0.6.2 <2.0.0" optionalDependencies: "@parcel/watcher" "^2.4.1"