| sidebar_label | AI tools (MCP) |
|---|---|
| title | AI tools (MCP) |
| description | AI tools (MCP) |
| sidebar_class_name | ai-icon |
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.
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.
https://docs.dhtmlx.com/mcp:::note 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:
- Retrieving documentation for a specific component.
- Generating code examples based on current APIs.
- Understanding configuration options, methods, and events.
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.
At a high level:
- The AI assistant sends a query through MCP.
- The server determines which product documentation is relevant.
- Documentation content is retrieved from a vector index.
- The retrieved context is sent back to the assistant.
- The assistant generates a response using that context.
This approach allows AI tools to generate answers based on current documentation rather than training data alone.
Most AI development tools allow adding MCP endpoints through either a CLI command or a JSON configuration file. The configuration generally consists of registering the MCP server URL.
https://docs.dhtmlx.com/mcpBelow are examples for commonly used tools.
The quickest way is to add the MCP server URL through the CLI:
claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcpOr if you prefer manual configuration, add this to your mcp.json:
{
"mcpServers": {
"dhtmlx-mcp": {
"type": "http",
"url": "https://docs.dhtmlx.com/mcp"
}
}
}Follow the steps below:
- Open Settings (
Cmd+Shift+Jon Mac,Ctrl+Shift+Jon Windows/Linux) - Go to Tools & MCP
- Click Add Custom MCP
- Paste this config:
{
"mcpServers": {
"dhtmlx-mcp": {
"url": "https://docs.dhtmlx.com/mcp"
}
}
}Now you can ask things like "Implement row grouping with expandable sections in DHTMLX Grid" right in your chat.
Find your config file at ~/.gemini/settings.json and add:
{
"mcpServers": {
"dhtmlx-mcp": {
"url": "https://docs.dhtmlx.com/mcp"
}
}
}Restart Gemini CLI after saving the file.
These are the steps to complete:
- Open the command palette
- Type "mcp add"
- Select "HTTP"
- Provide the following values:
- name:
dhtmlx-mcp- URL:
https://docs.dhtmlx.com/mcpTo configure, follow the provided instructions:
- Go to Settings → Apps & Connectors
- Click Advanced settings
- Enable Developer mode
- Return to the Apps & Connectors screen and click "Create".
- Configure the connector:
- Name:
dhtmlx-mcp - URL:
https://docs.dhtmlx.com/mcp - Authentication:
No authentication
- Name:
- Click Create
Once added, ChatGPT can retrieve documentation from the MCP server during conversations.
:::info Note that for intensive coding workflows, other MCP-aware tools may be more efficient. :::
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.
The MCP server is a hosted service.
Key points:
- It does not run locally.
- It does not access files in your environment.
- It does not store personal user information.
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.
Once the MCP server is configured, use concrete, task-oriented prompts so the assistant can call the docs effectively.
You can copy and test the example prompts given below:
How do I add custom validation to DHTMLX Form? Use the docs.
I want to create a layout with a calendar in one cell, and a grid in another.
I want to create a grid with the possibility to sort, resize and edit column cells.
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."
More specific prompts result in more relevant snippets and fewer follow-up questions.
Related sample: Kanban and Chatbot. Example built with MCP