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
+
## Setup
45
45
46
-
Let's get you connected. Pick your tool below.
46
+
Most AI development tools allow adding MCP endpoints through either a CLI command or a JSON configuration file.
47
+
The configuration generally consists of registering the MCP server URL.
48
+
49
+
~~~jsx
50
+
https://docs.dhtmlx.com/mcp
51
+
~~~
52
+
53
+
Below are examples for commonly used tools.
47
54
48
55
### Claude Code
49
56
50
-
The quickest way is through the CLI:
57
+
The quickest way is to add the MCP server URL through the CLI:
51
58
52
-
```bash
59
+
~~~jsx
53
60
claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp
54
-
```
61
+
~~~
55
62
56
63
Or if you prefer manual configuration, add this to your `mcp.json`:
57
64
58
-
```json
65
+
~~~jsx
59
66
{
60
67
"mcpServers": {
61
68
"dhtmlx-mcp": {
@@ -64,82 +71,127 @@ Or if you prefer manual configuration, add this to your `mcp.json`:
64
71
}
65
72
}
66
73
}
67
-
```
74
+
~~~
68
75
69
76
### Cursor
70
77
71
-
Cursor makes this pretty straightforward:
78
+
Follow the steps below:
72
79
73
-
1. Open Settings (Cmd+Shift+J on Mac, Ctrl+Shift+J on Windows/Linux)
80
+
1. Open Settings (`Cmd+Shift+J` on Mac, `Ctrl+Shift+J` on Windows/Linux)
74
81
2. Go to **Tools & MCP**
75
82
3. Click **Add Custom MCP**
76
83
4. Paste this config:
77
84
78
-
```json
85
+
~~~jsx
79
86
{
80
87
"mcpServers": {
81
88
"dhtmlx-mcp": {
82
89
"url":"https://docs.dhtmlx.com/mcp"
83
90
}
84
91
}
85
92
}
86
-
```
93
+
~~~
87
94
88
-
Now you can ask things like "Check DHTMLX docs for how to add a custom column to Gantt" right in your chat.
95
+
Now you can ask things like "Implement row grouping with expandable sections in DHTMLX Grid" right in your chat.
89
96
90
97
### Gemini CLI
91
98
92
99
Find your config file at `~/.gemini/settings.json` and add:
93
100
94
-
```json
101
+
~~~jsx
95
102
{
96
103
"mcpServers": {
97
104
"dhtmlx-mcp": {
98
105
"url":"https://docs.dhtmlx.com/mcp"
99
106
}
100
107
}
101
108
}
102
-
```
109
+
~~~
103
110
104
-
Restart Gemini CLI and you're good to go.
111
+
Restart Gemini CLI after saving the file.
105
112
106
113
### Antigravity (Google)
107
114
115
+
These are the steps to complete:
116
+
108
117
1. Open the command palette
109
118
2. Type "mcp add"
110
119
3. Select "HTTP"
111
-
4.Enter URL: `https://docs.dhtmlx.com/mcp`
112
-
5. Enter Name: `dhtmlx-mcp`
120
+
4.Provide the following values:
121
+
- name:
113
122
114
-
Done.
123
+
~~~jsx
124
+
dhtmlx-mcp
125
+
~~~
115
126
116
-
### Other Tools
127
+
- URL:
117
128
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.
129
+
~~~jsx
130
+
https://docs.dhtmlx.com/mcp
131
+
~~~
119
132
120
133
### ChatGPT
121
134
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:
135
+
To configure, follow the provided instructions:
125
136
126
137
1. Go to **Settings** → **Apps & Connectors**
127
138
2. Click **Advanced settings**
128
139
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:
140
+
4.Return to the **Apps & Connectors** screen and click "Create".
141
+
5.Configure the connector:
131
142
- Name: `dhtmlx-mcp`
132
143
- URL: `https://docs.dhtmlx.com/mcp`
133
144
- Authentication: `No authentication`
134
-
6. Hit **Create**
145
+
6. Click **Create**
146
+
147
+
Once added, ChatGPT can retrieve documentation from the MCP server during conversations.
148
+
149
+
:::info
150
+
Note that for intensive coding workflows, other MCP-aware tools may be more efficient.
151
+
:::
152
+
153
+
### Other tools
154
+
155
+
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.
156
+
157
+
## Privacy and data handling
158
+
159
+
The MCP server is a hosted service.
160
+
161
+
Key points:
162
+
163
+
- It does not run locally.
164
+
- It does not access files in your environment.
165
+
- It does not store personal user information.
166
+
167
+
Queries may be logged for debugging and service improvements.
168
+
169
+
Organizations that require stricter privacy guarantees can request commercial deployment options with no query logging.
170
+
For inquiries: `info@dhtmlx.com`.
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:
135
177
136
-
You can now ask ChatGPT to "consult the DHTMLX MCP server" when you need help with any of our components.
178
+
~~~
179
+
How do I add custom validation to DHTMLX Form? Use the docs.
180
+
~~~
181
+
~~~
182
+
I want to create a layout with a calendar in one cell, and a grid in another.
183
+
~~~
184
+
~~~
185
+
I want to create a grid with the possibility to sort, resize and edit column cells.
186
+
~~~
187
+
~~~
188
+
I have a chart with the bar type, how can I also add a line chart above it?
189
+
~~~
190
+
~~~
191
+
I want to create two grids with the possibility to drag item rows from one grid to another, but not vice versa."
192
+
~~~
137
193
138
-
## Tips for Best Results
194
+
More specific prompts result in more relevant snippets and fewer follow-up questions.
139
195
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."
196
+
**Related sample**: [Kanban and Chatbot. Example built with MCP](https://snippet.dhtmlx.com/rp3dzkei)
144
197
145
-
The more specific you are, the better results you'll get. Happy coding!
0 commit comments