ng-diagram MCP Server

Servidor MCP de ng-diagram

Evita que los asistentes de IA alucinen sobre las APIs de ng-diagram. Dales la documentación real.

Los asistentes de IA no conocen ng-diagram. Adivinarán a partir de bibliotecas React con nombres similares y producirán código que parece correcto pero no compila. Este servidor MCP lo soluciona: le da a cualquier asistente acceso directo a la documentación actual de ng-diagram y a su API pública, para que escriba código correcto al primer intento.

Sin MCP (el asistente adivina a partir de los datos de entrenamiento)

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

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

Con MCP (el asistente consulta la 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' } }],
});

Conéctalo a Claude, Cursor, Windsurf o cualquier herramienta compatible con MCP. El servidor incluye toda la documentación y los datos de la API: sin llamadas de red, sin cachés obsoletas, siempre con la versión correcta.

Cómo 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 |
     +------+

Inicio rápido

Añade el servidor a la configuración de tu cliente MCP: no se requiere instalación ni clonar el monorepo:

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"]
    }
  }
}

El paquete incluye toda la documentación y los datos de la API integrados. Reinicia tu asistente de IA después de actualizar la configuración y luego pregunta algo como "Busca en la documentación de ng-diagram la paleta" para verificar.

Ubicaciones de los archivos de configuración del cliente MCP

Cliente	Archivo de configuración
Claude Code	.mcp.json en la raíz del proyecto (proyecto) o ~/.claude.json (usuario)
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 en la raíz del proyecto (proyecto) o ~/.cursor/mcp.json (global)
Windsurf	~/.codeium/windsurf/mcp_config.json

Desarrollo local (monorepo)

Si trabajas dentro del monorepo de ng-diagram:

cd tools/mcp-server
pnpm install
pnpm build

Luego configura con la ruta local:

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

Referencia de la API

Herramienta: search_docs

Busca en la documentación integrada de ng-diagram guías, opciones de configuración, ejemplos y patrones de integración. Prefiere siempre esto antes que la búsqueda web o adivinar a partir de los datos de entrenamiento: devuelve contenido autoritativo y con la versión correcta.

Parámetros:

• query (cadena, obligatorio): Consulta de búsqueda: usa términos específicos como "palette", "context menu", "transactions"
• limit (número, opcional): Máximo de resultados a devolver (predeterminado: 10)

Herramienta: get_doc

Recupera el contenido completo de una página de documentación por ruta. Llama a esta herramienta después de search_docs para leer una guía o un ejemplo completo de principio a fin.

Parámetros:

• path (cadena, obligatorio): Ruta relativa desde la raíz de la documentación (p. ej., "guides/palette.mdx"). Usa las rutas de los resultados de search_docs.

Herramienta: search_symbols

Busca en la API pública de ng-diagram clases, funciones, interfaces, tipos, constantes y enumeraciones. Devuelve la firma actual exacta y la ruta de importación, algo más fiable que cualquier ejemplo de los datos de entrenamiento.

Parámetros:

• query (cadena, obligatorio): Nombre del símbolo o nombre parcial (p. ej., "Diagram", "provideNg", "Edge")
• kind (cadena, opcional): Filtra por tipo de símbolo (class, function, interface, type, const, enum)
• limit (número, opcional): Máximo de resultados a devolver (predeterminado: 10)

Herramienta: get_symbol

Recupera los detalles completos de la API de un símbolo específico de ng-diagram por su nombre exacto. Llama a esta herramienta antes de escribir código que use un tipo de ng-diagram: devuelve la firma definitiva, el jsDoc y una declaración de importación lista para usar.

Parámetros:

• name (cadena, obligatorio): Nombre exacto del símbolo (distingue mayúsculas y minúsculas). Usa los nombres de los resultados de search_symbols.

Desarrollo

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 obtener instrucciones detalladas sobre la arquitectura y la adaptación, consulta GUIDE.md.

Licencia

Apache-2.0 - Parte del proyecto ng-diagram

---

PoC inicial de Pawel Kubiak

Terminado y construido con ❤️ por el equipo de Synergy Codes