You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If you're using AI coding assistants like Claude, Cursor, or ChatGPT, you've probably noticed they sometimes struggle with library-specific code. They might suggest outdated APIs or miss the latest features. That's exactly the problem our MCP server solves.
10
+
AI coding assistants often rely on training data that may not include the latest updates. As a result, generated code may reference outdated APIs or missing features.
11
11
12
-
## What's MCP and Why Should You Care?
12
+
The DHTMLX MCP server allows AI tools to retrieve up-to-date documentation for DHTMLX components while generating responses. By connecting an assistant to the MCP endpoint, developers can generate code examples, query APIs, and access configuration details based on the current documentation.
13
13
14
-
Model Context Protocol (MCP) is basically a way to feed your AI assistant fresh, accurate information about specific tools and libraries. Think of it as giving your AI a direct line to our documentation.
14
+
#### MCP endpoint
15
15
16
-
Here's the deal: LLMs are trained on data up to a certain date. They don't automatically know about that new feature we released last month or the API change we made in the latest version. The DHTMLX MCP server bridges this gap by providing real-time access to our docs and a smart RAG (Retrieval-Augmented Generation) system that finds exactly what you need.
16
+
~~~jsx
17
+
https://docs.dhtmlx.com/mcp
18
+
~~~
17
19
18
-
**Server URL:**`https://docs.dhtmlx.com/mcp`
20
+
:::note
21
+
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.
22
+
:::
19
23
20
-
## What You Get
24
+
Typical use cases include:
21
25
22
-
When you connect your AI tool to our MCP server, it can:
26
+
- Retrieving documentation for a specific component.
27
+
- Generating code examples based on current APIs.
28
+
- Understanding configuration options, methods, and events.
23
29
24
-
- Pull the latest documentation for any DHTMLX product
25
-
- Generate accurate code snippets based on current APIs
26
-
- Answer questions about configuration, events, methods — you name it
30
+
## How DHTMLX MCP server works
27
31
28
-
The best part? It covers **all major DHTMLX products**:
29
-
- Gantt
30
-
- Scheduler
31
-
- Suite (Grid, Form, TreeGrid, and more)
32
-
- Kanban
33
-
- Pivot
34
-
- Spreadsheet
35
-
- Diagram
36
-
- RichText
32
+
The DHTMLX MCP server uses a Retrieval-Augmented Generation (RAG) pipeline combined with the Model Context Protocol (MCP) to provide AI assistants with up-to-date documentation.
37
33
38
-
One server, all products. Simple.
34
+
At a high level:
39
35
40
-
## A Note on Privacy
36
+
1. The AI assistant sends a query through MCP.
37
+
2. The server determines which product documentation is relevant.
38
+
3. Documentation content is retrieved from a vector index.
39
+
4. The retrieved context is sent back to the assistant.
40
+
5. The assistant generates a response using that context.
41
41
42
-
The MCP server is a hosted service — it doesn't run locally and doesn't access your files. We don't store personal information about users. Queries might be logged for debugging and improving the service, but if that's a concern for you, drop us a line at `info@dhtmlx.com`. We offer commercial options with strict no-logging policies.
42
+
This approach allows AI tools to generate answers based on current documentation rather than training data alone.
43
43
44
-
## Setting It Up
44
+
## Privacy and data handling
45
45
46
-
Let's get you connected. Pick your tool below.
46
+
The MCP server is a hosted service.
47
+
48
+
Key points:
49
+
50
+
- It does not run locally.
51
+
- It does not access files in your environment.
52
+
- It does not store personal user information.
53
+
54
+
Queries may be logged for debugging and service improvements.
55
+
56
+
Organizations that require stricter privacy guarantees can request commercial deployment options with no query logging.
57
+
For inquiries: `info@dhtmlx.com`.
58
+
59
+
## Setup
60
+
61
+
Most AI development tools allow adding MCP endpoints through either a CLI command or a JSON configuration file.
62
+
The configuration generally consists of registering the MCP server URL.
63
+
64
+
~~~jsx
65
+
https://docs.dhtmlx.com/mcp
66
+
~~~
67
+
68
+
Below are examples for commonly used tools.
47
69
48
70
### Claude Code
49
71
50
-
The quickest way is through the CLI:
72
+
The quickest way is to add the MCP server URL through the CLI:
51
73
52
-
```bash
74
+
~~~jsx
53
75
claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp
54
-
```
76
+
~~~
55
77
56
78
Or if you prefer manual configuration, add this to your `mcp.json`:
57
79
58
-
```json
80
+
~~~jsx
59
81
{
60
82
"mcpServers": {
61
83
"dhtmlx-mcp": {
@@ -64,82 +86,142 @@ Or if you prefer manual configuration, add this to your `mcp.json`:
64
86
}
65
87
}
66
88
}
67
-
```
89
+
~~~
68
90
69
91
### Cursor
70
92
71
-
Cursor makes this pretty straightforward:
93
+
Follow the steps below:
72
94
73
-
1. Open Settings (Cmd+Shift+J on Mac, Ctrl+Shift+J on Windows/Linux)
95
+
1. Open Settings (`Cmd+Shift+J` on Mac, `Ctrl+Shift+J` on Windows/Linux)
74
96
2. Go to **Tools & MCP**
75
97
3. Click **Add Custom MCP**
76
98
4. Paste this config:
77
99
78
-
```json
100
+
~~~jsx
79
101
{
80
102
"mcpServers": {
81
103
"dhtmlx-mcp": {
82
104
"url":"https://docs.dhtmlx.com/mcp"
83
105
}
84
106
}
85
107
}
86
-
```
108
+
~~~
87
109
88
-
Now you can ask things like "Check DHTMLX docs for how to add a custom column to Gantt" right in your chat.
110
+
Now you can ask things like "Implement row grouping with expandable sections in DHTMLX Grid" right in your chat.
89
111
90
112
### Gemini CLI
91
113
92
114
Find your config file at `~/.gemini/settings.json` and add:
93
115
94
-
```json
116
+
~~~jsx
95
117
{
96
118
"mcpServers": {
97
119
"dhtmlx-mcp": {
98
120
"url":"https://docs.dhtmlx.com/mcp"
99
121
}
100
122
}
101
123
}
102
-
```
124
+
~~~
103
125
104
-
Restart Gemini CLI and you're good to go.
126
+
Restart Gemini CLI after saving the file.
105
127
106
128
### Antigravity (Google)
107
129
130
+
These are the steps to complete:
131
+
108
132
1. Open the command palette
109
133
2. Type "mcp add"
110
134
3. Select "HTTP"
111
-
4.Enter URL: `https://docs.dhtmlx.com/mcp`
112
-
5. Enter Name: `dhtmlx-mcp`
135
+
4.Provide the following values:
136
+
- name:
113
137
114
-
Done.
138
+
~~~jsx
139
+
dhtmlx-mcp
140
+
~~~
115
141
116
-
### Other Tools
142
+
- URL:
117
143
118
-
Most modern AI coding tools have MCP support somewhere in their settings. Look for "Model Context Protocol", "Context Sources", or similar. Add `https://docs.dhtmlx.com/mcp` as a custom source.
144
+
~~~jsx
145
+
https://docs.dhtmlx.com/mcp
146
+
~~~
119
147
120
148
### ChatGPT
121
149
122
-
Fair warning: MCP with ChatGPT works, but it's not the smoothest experience. Responses can take around 20 seconds. If you're doing serious coding, one of the other tools above will serve you better.
123
-
124
-
But if ChatGPT is your thing:
150
+
To configure, follow the provided instructions:
125
151
126
152
1. Go to **Settings** → **Apps & Connectors**
127
153
2. Click **Advanced settings**
128
154
3. Enable **Developer mode**
129
-
4.Go back — you'll now see a "Create" button on the Connectors screen
130
-
5.Click it and fill in:
155
+
4.Return to the **Apps & Connectors** screen and click "Create".
156
+
5.Configure the connector:
131
157
- Name: `dhtmlx-mcp`
132
158
- URL: `https://docs.dhtmlx.com/mcp`
133
159
- Authentication: `No authentication`
134
-
6. Hit **Create**
135
-
136
-
You can now ask ChatGPT to "consult the DHTMLX MCP server" when you need help with any of our components.
137
-
138
-
## Tips for Best Results
139
-
140
-
Once connected, try prompts like:
141
-
- "Using DHTMLX docs, show me how to implement drag and drop in Scheduler"
142
-
- "Check DHTMLX MCP for Gantt task editing configuration"
143
-
- "How do I add custom validation to DHTMLX Form? Use the docs."
160
+
6. Click **Create**
161
+
162
+
Once added, ChatGPT can retrieve documentation from the MCP server during conversations.
163
+
164
+
:::info
165
+
Note that for intensive coding workflows, other MCP-aware tools may be more efficient.
166
+
:::
167
+
168
+
### Other tools
169
+
170
+
Most modern AI coding tools expose MCP under "Model Context Protocol", "Context Sources", or similar wording in settings. Add `https://docs.dhtmlx.com/mcp` as a custom source.
171
+
172
+
## Usage tips
173
+
174
+
Once the MCP server is configured, use concrete, task-oriented prompts so the assistant can call the docs effectively.
175
+
176
+
You can copy and test the example prompts given below:
177
+
178
+
~~~
179
+
Using DHTMLX docs, show me how to implement drag and drop in Scheduler.
180
+
~~~
181
+
~~~
182
+
Check DHTMLX MCP for Gantt task editing configuration.
183
+
~~~
184
+
~~~
185
+
How do I add custom validation to DHTMLX Form? Use the docs.
186
+
~~~
187
+
~~~
188
+
In calendar, how can I mark all work days and disable weekends?
189
+
~~~
190
+
~~~
191
+
I want to create a layout with calendar in one cell, and the grid in another.
192
+
~~~
193
+
~~~
194
+
I want to create a grid, with possibility to sort, resize and edit column cells.
195
+
~~~
196
+
~~~
197
+
I want to create two grids with a possibility to drag item rows from one grid to another, but not vice versa.
198
+
~~~
199
+
~~~
200
+
I want to dynamically hide or show grid columns, and want to check if some column is currently shown or hidden.
201
+
~~~
202
+
~~~
203
+
I want to have editable columns with combo editor, text editor and date editor, and editors should open on a single click on any column cell.
204
+
~~~
205
+
~~~
206
+
I have a chart with bar type, how can I also add a line chart above it?
207
+
~~~
208
+
~~~
209
+
I want to create a layout with two lists inside it's cells, list items should be draggable in both directions.
210
+
~~~
211
+
~~~
212
+
Is it possible to attach layout to modal window, and then form and grid or custom html to layout cells?
213
+
~~~
214
+
~~~
215
+
I want to create a grid with possibility to sort, resize and edit column cells.
216
+
~~~
217
+
~~~
218
+
I want to create grid and colorize rows on hover, also some cells and rows of the grid should have custom styles.
219
+
~~~
220
+
~~~
221
+
I modified grid cell and want to revert back these changes.
222
+
~~~
223
+
224
+
More specific prompts result in more relevant snippets and fewer follow-up questions.
225
+
226
+
**Related sample**: [Kanban and Chatbot. Example built with MCP](https://snippet.dhtmlx.com/rp3dzkei)
144
227
145
-
The more specific you are, the better results you'll get. Happy coding!
0 commit comments