DHTMLX Vault MCP Server: Uploader Configuration and Events

When you're building with DHTMLX Vault, getting uploads right comes down to the uploader configuration object, the upload event names, and the DataCollection API. An assistant with the current documentation in hand gets the uploader configuration right, the upload event names as they currently fire, and the DataCollection methods that actually exist, not what a training set remembers from last year.

The DHTMLX MCP server connects AI tools to the live Vault documentation. Whether you're configuring the uploader object, wiring up upload events, managing the file queue, or loading a file list from a server, the assistant pulls in the current reference material before writing any code.

MCP endpoint

https://docs.dhtmlx.com/mcp

Vault documentation the MCP server indexes

Ask the MCP server about DHTMLX Vault and it draws on a complete index of the documentation, most often for:

• Looking up the current Vault constructor and uploader configuration properties, including target, autosend, singleRequest, headerParams, and fieldName.
• Generating ready-to-run initialization code with the correct dhx.Vault constructor signature, required uploader settings, and optional list or grid mode configuration.
• Handling upload lifecycle events such as UploadBegin, UploadFile, UploadProgress, UploadComplete, and UploadFail with correct callback signatures via the events API.
• Controlling which files enter the queue using the BeforeAdd event to validate file type, size limits, and maximum file count.
• Working with the DataCollection API to filter, sort, find, move, and remove files using data.filter(), data.sort(), data.find(), data.findAll(), and data.move().
• Loading a file list from a server with data.load() or from a local JSON array with data.parse(), and serializing the current queue to JSON with data.serialize().
• Configuring display modes (list or grid), enabling inline file name editing, and defining custom templates for list items, grid previews, and the progress bar.
• Exploring framework integration for React, Vue, Angular, and Svelte.

Search, Inference, and how the MCP server answers

Vault questions sent to the DHTMLX MCP server pass through a Retrieval-Augmented Generation (RAG) pipeline over the Model Context Protocol (MCP), and one of two workflows takes it from there: Search, which surfaces matching reference pages for the assistant, or Inference, which reads those pages and answers the question directly. Not every piece of a Vault question needs a trip to that index though; the assistant works out which part does and leaves the rest to what it already knows.

Walk through the prompt "How do I set up DHTMLX Vault so files upload to my company's cloud storage bucket and get rejected if they're over 5 MB?":

1. Only one piece of this request needs documentation: how to use the BeforeAdd event to reject files over 5 MB.
2. The server traces it to the managing files documentation.
3. Since the answer calls for generated code, Search takes the request (a narrower factual question would go to Inference instead).
4. Search retrieves the matching pages from a vector index built on the current Vault documentation.
5. Those pages return to the assistant as context.
6. The assistant writes the BeforeAdd validation using that context, then configures the uploader's target endpoint for the company's storage bucket from its own knowledge.

That keeps Vault's uploader and event-handling suggestions matched to the API as it exists today.

Connecting your AI tool to the MCP endpoint

DHTMLX Vault involves several interacting layers: the vault instance, the uploader object, and the DataCollection. Having AI tools backed by the live documentation reduces the chance of mismatched API calls when you configure uploads, handle events, or manipulate the file queue. Point your AI tool at this URL:

https://docs.dhtmlx.com/mcp

Each subsection below walks through one tool's setup.

Claude Code

To register the server from the command line, run:

claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp

For manual setup, add the following to your .mcp.json:

{
  "mcpServers": {
    "dhtmlx-mcp": {
      "type": "http",
      "url": "https://docs.dhtmlx.com/mcp"
    }
  }
}

Cursor

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:

{
  "mcpServers": {
    "dhtmlx-mcp": {
      "url": "https://docs.dhtmlx.com/mcp"
    }
  }
}

Google Antigravity

Antigravity 2.0

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:

dhtmlx-mcp

• URL:

https://docs.dhtmlx.com/mcp

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:

{
  "mcpServers": {
    "dhtmlx-mcp": {
      "serverUrl": "https://docs.dhtmlx.com/mcp"
    }
  }
}

Then run agy in the terminal.

ChatGPT

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: dhtmlx-mcp
   • URL: 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.

Other tools

Other AI coding tools generally expose this under a settings label such as "Model Context Protocol" or "Context Sources"; add https://docs.dhtmlx.com/mcp there as a custom source.

What happens to your data

The MCP server operates as a remote, hosted service, working entirely outside your local environment and carrying no personal information about you.

The MCP server logs only what debugging and service improvement require.

Teams with stricter requirements can arrange a commercial deployment that disables logging entirely. Reach info@dhtmlx.com to set it up.

Vault prompts worth copying

The best Vault prompts point at one specific object: the uploader, a file in the queue, or a particular event. Copy the examples below and swap in your own object of choice; they're grouped by task.

Initializing and configuring

• How do I set up DHTMLX Vault in grid mode and hide the toolbar? Use the docs.
• How do I make DHTMLX Vault upload all queued files in a single request instead of one at a time?
• How do I set custom request headers for DHTMLX Vault uploads?

Handling upload events

• How do I read the server response in UploadFile in DHTMLX Vault?
• How do I track upload progress for files in the DHTMLX Vault queue?
• How do I cancel an in-progress file upload in DHTMLX Vault?

Managing files in the queue

• How do I use BeforeAdd in DHTMLX Vault to allow only images under 2 MB?
• How do I filter the DHTMLX Vault queue by file upload status?
• How do I sort the file queue by size in DHTMLX Vault?

Customization and integration

• How do I create a custom list and progress bar template in DHTMLX Vault?
• How do I integrate DHTMLX Vault into a React application? Use the docs.
• How do I enable inline editing in DHTMLX Vault and detect when a file is renamed?

How to get the most useful answers for Vault

• Name the configuration layer. DHTMLX Vault has two configuration objects: the top-level dhx.Vault config and the nested uploader object. Specify which layer you are configuring (for example, "in the uploader config" vs. "in the top-level Vault config") so the assistant retrieves the correct property reference.
• Include the file status. File objects in Vault carry a status field with four possible values: queue, inprogress, uploaded, or failed. Mentioning the status in your prompt (for example, "files with status 'failed'") helps the assistant choose the right DataCollection filter or event handler.
• Distinguish vault.data from vault.uploader. File queue operations (filter, sort, find, move, remove) belong to the vault.data collection, while upload control operations belong to vault.uploader. Stating which object you want to call a method on produces more accurate generated code.
• Add "Use the docs" when working with upload event callbacks or server response configuration. Upload lifecycle events and server response handling are among the areas most likely to be stale in AI training data.

Back to top