ng-diagram MCP Server

ng-diagram MCP Server

Impeça assistentes de IA de alucinar APIs do ng-diagram. Dê a eles a documentação real.

Assistentes de IA não conhecem o ng-diagram. Eles vão adivinhar com base em bibliotecas React de nomes semelhantes e produzir código que parece certo, mas não compila. Este servidor MCP resolve isso — ele dá a qualquer assistente acesso direto à documentação atual do ng-diagram e à API pública, para que ele escreva código correto na primeira tentativa.

Sem MCP (assistente adivinha a partir dos dados de treinamento)

// Hallucinated API — none of this exists
import { useNodes, useEdges } from 'ng-diagram';

const nodes = useNodes([{ id: '1', data: { label: 'Hello' } }]);

Com MCP (assistente consulta a API real)

// Correct — verified against the actual public API
import { initializeModel, NgDiagramComponent, provideNgDiagram } from 'ng-diagram';

model = initializeModel({
  nodes: [{ id: '1', position: { x: 0, y: 0 }, data: { label: 'Hello' } }],
});

Conecte-o ao Claude, Cursor, Windsurf ou qualquer ferramenta compatível com MCP. O servidor inclui toda a documentação e dados da API — sem chamadas de rede, sem caches obsoletos, sempre com versão correspondente.

Como Funciona

                    1. search_docs / search_symbols
  +--------------+ ---------------------------------> +-----------+
  | AI Assistant | <--------------------------------- | MCP Server|
  |              |        2. Returns matches          |           |
  |              | ---------------------------------> |           |
  |              |     3. get_doc / get_symbol        |           |
  |              | <--------------------------------- |           |
  +--------------+     4. Returns full content        +-----------+
        |
        | 5. Answers with context
        v
     +------+
     | User |
     +------+

Início Rápido

Adicione o servidor à configuração do seu cliente MCP - sem instalação ou checkout do monorepo necessário:

macOS / Linux:

{
  "mcpServers": {
    "ng-diagram-docs": {
      "command": "npx",
      "args": ["-y", "@ng-diagram/mcp"]
    }
  }
}

Windows:

{
  "mcpServers": {
    "ng-diagram-docs": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@ng-diagram/mcp"]
    }
  }
}

O pacote inclui toda a documentação e dados da API embutidos. Reinicie seu assistente de IA após atualizar a configuração e pergunte algo como "Pesquise a documentação do ng-diagram por palette" para verificar.

Locais dos arquivos de configuração do cliente MCP

Cliente	Arquivo de configuração
Claude Code	.mcp.json na raiz do projeto (projeto) ou ~/.claude.json (usuário)
Claude Desktop	~/Library/Application Support/Claude/claude_desktop_config.json (macOS), %APPDATA%\Roaming\Claude\claude_desktop_config.json (Windows), ~/.config/claude-desktop/claude_desktop_config.json (Linux)
Cursor	.cursor/mcp.json na raiz do projeto (projeto) ou ~/.cursor/mcp.json (global)
Windsurf	~/.codeium/windsurf/mcp_config.json

Desenvolvimento local (monorepo)

Se você está trabalhando dentro do monorepo do ng-diagram:

cd tools/mcp-server
pnpm install
pnpm build

Em seguida, configure com o caminho local:

{
  "mcpServers": {
    "ng-diagram-docs": {
      "command": "node",
      "args": ["/absolute/path/to/ng-diagram/tools/mcp-server/dist/index.js"]
    }
  }
}

Referência da API

Ferramenta: search_docs

Pesquise a documentação embutida do ng-diagram por guias, opções de configuração, exemplos e padrões de integração. Sempre prefira isso a pesquisas na web ou suposições baseadas em dados de treinamento — retorna conteúdo autoritativo e com versão correspondente.

Parâmetros:

• query (string, obrigatório): Consulta de pesquisa — use termos específicos como "palette", "context menu", "transactions"
• limit (number, opcional): Máximo de resultados a retornar (padrão: 10)

Ferramenta: get_doc

Recupere o conteúdo completo de uma página de documentação por caminho. Chame isso após search_docs para ler um guia completo ou exemplo de ponta a ponta.

Parâmetros:

• path (string, obrigatório): Caminho relativo a partir da raiz da documentação (ex.: "guides/palette.mdx"). Use caminhos dos resultados de search_docs.

Ferramenta: search_symbols

Pesquise a API pública do ng-diagram por classes, funções, interfaces, tipos, constantes e enums. Retorna a assinatura exata atual e o caminho de importação — mais confiável do que qualquer exemplo de dados de treinamento.

Parâmetros:

• query (string, obrigatório): Nome do símbolo ou nome parcial (ex.: "Diagram", "provideNg", "Edge")
• kind (string, opcional): Filtrar por tipo de símbolo (class, function, interface, type, const, enum)
• limit (number, opcional): Máximo de resultados a retornar (padrão: 10)

Ferramenta: get_symbol

Recupere detalhes completos da API para um símbolo específico do ng-diagram pelo nome exato. Chame isso antes de escrever código que use um tipo do ng-diagram — retorna a assinatura definitiva, jsDoc e uma declaração de importação pronta para uso.

Parâmetros:

• name (string, obrigatório): Nome exato do símbolo (sensível a maiúsculas/minúsculas). Use nomes dos resultados de search_symbols.

Desenvolvimento

Comandos

# Development
pnpm dev              # Run with auto-reload (uses monorepo paths)

# Testing
pnpm test             # Run all tests
pnpm test:watch       # Run in watch mode

# Building
pnpm build            # Compile TypeScript + bundle docs & API report into dist/data/

Para instruções detalhadas de arquitetura e adaptação, consulte GUIDE.md.

Licença

Apache-2.0 - Parte do projeto ng-diagram

---

PoC inicial por Pawel Kubiak

Finalizado e construído com ❤️ pela equipe Synergy Codes