Merge pull request #69 from DHTMLX/add-mcp-server-guide-5173

[add] MCP server guide for DHTMLX Spreadsheet

Author: mafanya23

docs/guides.md

@@ -38,6 +38,10 @@ Shows how to load data into Spreadsheet, handle events, and use the main functio
 - [Integration with Svelte](svelte_integration.md) - GitHub demo of using Spreadsheet in a Svelte app
 - [Integration with Vue.js](vuejs_integration.md) - GitHub demo of using Spreadsheet in a Vue app
 
+### AI-assisted development
+
+- [DHTMLX MCP server](mcp-server.md) - connect AI coding assistants to live Spreadsheet documentation
+
 ## User guides
 
 The user guides make working with Spreadsheet easy for your users.

docs/how_to_start.md

@@ -145,3 +145,4 @@ That's all. In four steps you get a handy tool for working with tabular data. No
 - [Spreadsheet overview](/)
 - [](guides.md)
 - [](api/api_overview.md)
+- [](mcp-server.md)

docs/index.md

@@ -66,3 +66,4 @@ To learn more about DHTMLX Spreadsheet, see these guides:
 
 - [API overview](api/api_overview.md)
 - [Guides](guides.md)
+- [MCP server](mcp-server.md) for AI coding assistants

docs/mcp-server.md

@@ -0,0 +1,255 @@
+---
+sidebar_label: DHTMLX MCP server
+title: DHTMLX Spreadsheet MCP server for formulas and formatting
+description: Live DHTMLX Spreadsheet documentation reaches AI assistants through the MCP server, spanning formulas, cell formatting, data loading, and sheet management.
+---
+
+# DHTMLX Spreadsheet MCP server: formulas, formatting, and sheet APIs
+
+[DHTMLX Spreadsheet](/) applications depend on getting [formulas](/functions/), [cell formatting](/data_formatting/), [data loading](/loading_data/), and [sheet management](/working_with_sheets/) exactly right. None of that comes from memorized training data: it takes current formula syntax, the API methods Spreadsheet ships today, and configuration options that haven't changed since.
+
+The DHTMLX MCP server addresses this by giving the assistant direct access to the live Spreadsheet reference wherever it's working. Point it at [number formats](/number_formatting/), the [Sheet Manager API](/api/overview/sheetmanager_overview/), or [data loading](/loading_data/), and it checks the current documentation before generating a single line of code.
+
+### MCP endpoint
+
+~~~jsx
+https://docs.dhtmlx.com/mcp
+~~~
+
+:::note
+The DHTMLX MCP server covers all major DHTMLX products, not only DHTMLX Spreadsheet. The same endpoint and configuration instructions work regardless of which DHTMLX component you are building with.
+:::
+
+## MCP server coverage for Spreadsheet
+
+Every page of the DHTMLX Spreadsheet documentation is searchable through the MCP server. Typical use cases:
+
+- Looking up the current API for spreadsheet [methods](/api/overview/methods_overview/), [events](/api/overview/events_overview/), and [properties](/api/overview/properties_overview/), including signatures and return types.
+- Generating ready-to-run Spreadsheet [initialization](/initialization/) and [configuration](/configuration/) code based on a description of what you need.
+- Exploring [number formats](/number_formatting/) (common, number, percent, currency, date, time, and others) and understanding how to define custom format masks.
+- Working with [formulas and functions](/functions/): finding supported functions, understanding formula syntax, and using the calculation API.
+- Configuring [columns and rows](/work_with_rows_cols/), including setting widths, hiding, and freezing.
+- Applying cell and range [formatting](/data_formatting/) and styles, including text color, alignment, borders, and background colors.
+- Handling [Spreadsheet events](/handling_events/) to respond to value changes, cell selection, editor actions, and sheet-level interactions.
+- Exploring [multi-sheet support](/working_with_sheets/), [data loading and export](/loading_data/) (JSON and Excel), and integration with frameworks such as [React](/react/), [Vue](/vuejs_integration/), [Angular](/angular_integration/), and [Svelte](/svelte_integration/).
+
+## How the assistant queries the MCP server
+
+Every query to the DHTMLX MCP server passes through a Retrieval-Augmented Generation (RAG) pipeline built on the Model Context Protocol (MCP). Depending on what's being asked, the server hands it to one of two workflows: *Search*, which surfaces matching reference pages for the assistant to build from, or *Inference*, which reads those pages and answers on its own. Ahead of that, the assistant sorts out which piece of the request needs a documentation lookup and covers the rest on its own.
+
+Take the prompt *"How do I set up DHTMLX Spreadsheet so it pulls live stock prices from my company's market data feed and formats them as currency?"* as an example:
+
+1. The part that needs documentation: how to apply a currency number format mask to a range of cells.
+2. The server locates the number formatting documentation that matches it.
+3. Since the request calls for generated code, *Search* handles it (a narrower factual question would go to *Inference* instead).
+4. *Search* retrieves the matching pages from a vector index of the current Spreadsheet documentation.
+5. Those pages come back to the assistant as context.
+6. The assistant applies the format mask using that context, then writes the market-data fetch logic from its own knowledge instead of guessing at the Spreadsheet API.
+
+The result: Spreadsheet code generation stays anchored to today's formula and formatting API.
+
+## Wiring the MCP server into your AI tool
+
+Registering the MCP server is a one-time step per tool, using either a CLI command or a JSON configuration snippet depending on the tool. Either way, point your tool at this URL:
+
+~~~jsx
+https://docs.dhtmlx.com/mcp
+~~~
+
+After that, every Spreadsheet project opened in that tool can reach the live documentation.
+
+Popular tools each get their own setup steps below.
+
+### Claude Code
+
+:::info
+Claude Code documents every MCP connection option in its [official documentation](https://code.claude.com/docs/en/mcp).
+:::
+
+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 configuration to your `.mcp.json`:
+
+~~~jsx
+{
+  "mcpServers": {
+    "dhtmlx-mcp": {
+      "type": "http",
+      "url": "https://docs.dhtmlx.com/mcp"
+    }
+  }
+}
+~~~
+
+### Cursor
+
+:::info
+Cursor documents its MCP setup in full in the [official documentation](https://cursor.com/en-US/docs/mcp).
+:::
+
+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
+See the [official documentation](https://antigravity.google/docs/mcp) for everything on MCP server integration in Antigravity.
+:::
+
+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
+See the [related guide](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) if you're 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
+For the complete MCP connector setup in ChatGPT, see the [official documentation](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-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:
+~~~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
+
+Look for "Model Context Protocol" or "Context Sources" in the settings of any other AI coding tool, and add `https://docs.dhtmlx.com/mcp` there as a custom source.
+
+## Data privacy notes
+
+The MCP server runs as a hosted service. It does not run locally, does not read files from your environment, and does not store personal user information.
+
+Queries may be logged for debugging and service improvement purposes.
+
+Organizations that require stricter privacy controls can request a commercial deployment option with query logging disabled. For inquiries, contact `info@dhtmlx.com`.
+
+## Sample prompts for building spreadsheets
+
+The more specific the goal in your prompt, the more precisely the assistant can target the right part of the Spreadsheet API. Prompts below are grouped by task category, ready to copy and adjust to your data.
+
+**Loading and exporting data**
+
+~~~
+I want to load data into DHTMLX Spreadsheet from a JSON file. How do I do that?
+~~~
+~~~
+How do I export a DHTMLX Spreadsheet to an Excel file? What method should I call?
+~~~
+~~~
+What's the difference between DHTMLX Spreadsheet's load() and parse() methods for JSON data?
+~~~
+
+**Working with cells and ranges**
+
+~~~
+How do I add data validation with a drop-down list to cells in DHTMLX Spreadsheet? Use the docs.
+~~~
+~~~
+How do I use setStyle() to apply background color and text formatting to a range of cells in DHTMLX Spreadsheet?
+~~~
+~~~
+How do I merge cells and set alignment in a specific range in DHTMLX Spreadsheet?
+~~~
+
+**Formulas and data validation**
+
+~~~
+What formula functions are available in DHTMLX Spreadsheet, and how do I use custom formulas?
+~~~
+~~~
+How do I set a dropdown list cell type for a column in DHTMLX Spreadsheet?
+~~~
+
+**Columns, rows, and sheets**
+
+~~~
+How do I freeze specific rows and columns in DHTMLX Spreadsheet?
+~~~
+~~~
+How do I add and switch between sheets in DHTMLX Spreadsheet programmatically?
+~~~
+~~~
+How do I handle the afterEditEnd event and get the updated cell value?
+~~~
+
+## Prompting tips for Spreadsheet work
+
+- **Name the target object.** Distinguish between the spreadsheet instance, a specific sheet, a cell, and a range. For example: "on the spreadsheet instance" vs. "for a specific cell range" vs. "on sheet 2". A narrower target helps the server retrieve the right reference pages.
+- **Include the cell type or data format.** Prompts like "a date number format" or "a number format with two decimal places" retrieve more precise documentation than a generic "a cell". Mention the type whenever you configure columns or apply formats.
+- **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 is especially useful when working with formulas or validation, where training data is most likely to be stale.
+- **Be specific about the scope of the operation.** Spreadsheet operations can target a single cell, a range, a full column or row, or an entire sheet. State the scope explicitly (for example, "for the entire column B" or "across all sheets") so the assistant selects the correct method overload or API path.

sidebars.js

@@ -276,7 +276,8 @@ module.exports = {
                             ]
                         },
                         "using_typescript",
-                        "awaitredraw"
+                        "awaitredraw",
+                        "mcp-server"
                     ]
                 },
                 {