DHTMLX MCP Server

O servidor DHTMLX MCP fornece acesso em tempo real à documentação oficial e a um RAG inteligente.

Ver em dhtmlx.comExperimente este MCPPatrocinado

Documentação

DHTMLX Suite é uma biblioteca de UI em JavaScript que inclui Grid, Form, Chart, Tree, Calendar, Layout e muitos outros componentes, cada um com suas próprias propriedades de configuração, métodos e eventos. Assistentes de codificação com IA frequentemente dependem de dados de treinamento que podem não refletir os lançamentos mais recentes do Suite, então o código gerado pode referenciar APIs desatualizadas, nomes de eventos incorretos ou opções de configuração alteradas.

O servidor MCP do DHTMLX dá às ferramentas de IA acesso direto à documentação atual do Suite durante a geração de respostas. Ao conectar um assistente ao endpoint MCP, os desenvolvedores obtêm código de inicialização preciso, assinaturas de métodos atuais e detalhes de configuração corretos para qualquer componente do Suite, com base na documentação ao vivo em vez de dados de treinamento desatualizados.

Endpoint MCP

https://docs.dhtmlx.com/mcp

[!-secondary] -secondary nota

O servidor MCP do DHTMLX é um serviço compartilhado para todos os principais produtos DHTMLX, não apenas o DHTMLX Suite. As instruções de configuração se aplicam a qualquer componente DHTMLX com o qual você esteja trabalhando.

Onde o servidor MCP ajuda com o Suite

O servidor MCP indexa toda a documentação do DHTMLX Suite em todos os componentes. Cenários comuns incluem:

  • Consultar a API atual de qualquer componente do Suite, incluindo Grid, Form, Chart, Tree, Calendar e outros.
  • Gerar código de inicialização e configuração pronto para execução para qualquer componente com base em uma descrição.
  • Configurar recursos do Grid: ordenação, filtragem, edição inline, redimensionamento de colunas e arrastar e soltar entre grids.
  • Construir layouts de Form com regras de validação, controles integrados e comportamento orientado a eventos.
  • Criar configurações de Chart em gráficos de barras, linhas, pizza, área, radar e outros tipos.
  • Carregar e gerenciar dados usando DataCollection entre componentes.
  • Lidar com eventos de componentes para responder a interações do usuário, mudanças de valor e atualizações de dados.
  • Compor múltiplos componentes em um Layout compartilhado com linhas, colunas e células.
  • Explorar o suporte a TypeScript e a integração com React, Vue, Angular e Svelte.

Como o servidor MCP do DHTMLX funciona

O servidor MCP do DHTMLX usa um pipeline de Geração Aumentada por Recuperação (RAG) combinado com o Protocolo de Contexto de Modelo (MCP) para fornecer aos assistentes de IA documentação atualizada. Antes de tudo isso, o assistente primeiro descobre qual parte de uma solicitação realmente precisa de uma consulta à documentação e lida com o restante a partir do seu próprio conhecimento.

Veja como isso funciona para o prompt "quero criar um layout com um calendário em uma célula e um grid em outra", um exemplo entre os muitos componentes do Suite que esse mesmo mecanismo cobre:

  1. O assistente envia a consulta via MCP.
  2. O servidor determina que a consulta envolve a documentação de Layout, Calendar e Grid.
  3. Como a resposta exige código gerado, o servidor roteia a consulta para Search, um dos dois fluxos de trabalho; uma pergunta factual mais restrita seria roteada para Inference, que lê as mesmas páginas e responde diretamente.
  4. Search recupera as páginas correspondentes de um índice vetorial construído sobre a documentação atual e as envia de volta ao assistente como contexto.
  5. O assistente configura o layout, o calendário e o grid juntos usando esse contexto.

Essa abordagem permite que ferramentas de IA gerem respostas com base na documentação atual.

Configuração

A maioria das ferramentas de desenvolvimento com IA permite adicionar endpoints MCP por meio de um comando CLI ou de um arquivo de configuração JSON. A configuração geralmente consiste em registrar a URL do servidor MCP.

https://docs.dhtmlx.com/mcp

Abaixo estão exemplos para ferramentas comumente usadas.

Claude Code

[!-info] -info info

Aprenda como conectar o Claude Code com MCP na documentação oficial.

A maneira mais rápida é adicionar a URL do servidor MCP via CLI:

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

Ou, se você preferir configuração manual, adicione isto ao seu .mcp.json:

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

Cursor

[!-info] -info info

Para instruções detalhadas, consulte a documentação oficial.

Siga os passos abaixo:

  1. Abra as Configurações (Cmd+Shift+J no Mac, Ctrl+Shift+J no Windows/Linux)
  2. Vá para Tools & MCP
  3. Clique em Add Custom MCP
  4. Cole esta configuração:
{
  "mcpServers": {
    "dhtmlx-mcp": {
      "url": "https://docs.dhtmlx.com/mcp"
    }
  }
}

Google Antigravity

Antigravity 2.0

[!-info] -info info

Saiba mais sobre como conectar servidores MCP na documentação oficial.

Estes são os passos a serem concluídos:

  1. Abra a paleta de comandos
  2. Digite "mcp add"
  3. Selecione "HTTP"
  4. Forneça os seguintes valores:
  • Nome:
dhtmlx-mcp
  • URL:
https://docs.dhtmlx.com/mcp

Antigravity CLI

[!-info] -info info

Consulte o guia relacionado para aprender sobre a migração do Gemini CLI para o Antigravity CLI.

Crie mcp_config.json em um destes locais:

  • Global: ~/.gemini/config/mcp_config.json
  • Workspace: .agents/mcp_config.json

Adicione o seguinte:

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

Em seguida, execute agy no terminal.

ChatGPT

[!-info] -info info

Para mais informações, consulte a documentação oficial.

Siga estes passos:

  1. Vá para Settings → Apps & Connectors
  2. Clique em Advanced settings
  3. Ative o Developer mode
  4. Volte para a tela Apps & Connectors e clique em "Create"
  5. Configure o conector:
  • Nome:
dhtmlx-mcp
  • URL:
https://docs.dhtmlx.com/mcp
  • Autenticação: No authentication
  1. Clique em Create

Depois de adicionado, o ChatGPT pode recuperar documentação do servidor MCP durante as conversas.

[!-info] -info info

Para fluxos de trabalho intensivos de codificação, outras ferramentas compatíveis com MCP podem ser mais eficientes.

Outras ferramentas

A maioria das ferramentas modernas de codificação com IA expõe o MCP sob "Model Context Protocol", "Context Sources" ou termos semelhantes nas configurações. Adicione https://docs.dhtmlx.com/mcp como uma fonte personalizada.

Privacidade e tratamento de dados

O servidor MCP é um serviço hospedado.

Pontos-chave:

  • Ele não é executado localmente.
  • Ele não acessa arquivos no seu ambiente.
  • Ele não armazena informações pessoais de usuários.

As consultas podem ser registradas para depuração e melhorias do serviço.

Organizações que exigem garantias de privacidade mais rígidas podem solicitar opções de implantação comercial sem registro de consultas. Para consultas: info@dhtmlx.com.

Exemplos de prompts para o Suite com IA

Depois de conectar o servidor MCP, formule seus prompts em torno de um objetivo concreto para que o assistente saiba qual componente e recurso consultar. Os prompts abaixo estão organizados por componente. Copie e adapte conforme necessário.

Grid

I want to create a grid with the possibility to sort, resize and edit column cells.

I want to create two grids with the possibility to drag item rows from one grid to another, but not vice versa.

How do I apply multiple filters to a DHTMLX Grid?

Form

How do I add custom validation to DHTMLX Form? Use the docs.

How do I get all form values as an object and handle the afterSend event in DHTMLX Form?

Chart

I have a chart with the bar type, how can I also add a line chart above it?

How do I load data into a DHTMLX Chart from a JSON array?

Layout e composição

I want to create a layout with a calendar in one cell, and a grid in another.

How do I resize layout cells and handle the resize event in DHTMLX Layout?

Exemplo relacionado: Kanban e Chatbot. Exemplo construído com MCP

Dicas para prompts eficazes com o Suite

  • Nomeie o componente. O DHTMLX Suite contém muitos componentes, cada um com sua própria API. Sempre especifique o componente no seu prompt (por exemplo, "no DHTMLX Grid" vs. "no DHTMLX Form"). Sem isso, o assistente pode recuperar documentação do componente errado.
  • Inclua o recurso ou comportamento. Prompts como "arrastar e soltar entre dois grids" ou "validação de formulário ao enviar" recuperam documentação mais relevante do que uma descrição genérica. Quanto mais específico o recurso, mais precisa a recuperação.
  • Adicione "Use the docs" ao seu prompt. Essa frase sinaliza ao assistente que ele deve acionar uma consulta MCP em vez de responder apenas com base nos dados de treinamento. É especialmente útil para nomes de eventos, assinaturas de métodos e propriedades de configuração que mudam entre versões.
  • Descreva a interação esperada. Os componentes do Suite geralmente suportam múltiplas maneiras de alcançar um objetivo (uma propriedade de configuração, uma chamada de método ou um manipulador de eventos). Descrever o comportamento esperado ajuda o assistente a escolher a abordagem certa.