n8n MCP Server
by lowprofix
- n8n-mcp-server
- src
- public
index.html•8.79 kB
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP n8n Server - Accueil</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">MCP n8n Server</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="/">Accueil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/validator.html">Validateur</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/nextjs-integration.html">Intégration NextJS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/templates.html">Templates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/docs.html">Documentation</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-4">
<div class="jumbotron bg-light p-5 rounded">
<h1 class="display-4">Bienvenue sur MCP n8n Server</h1>
<p class="lead">Un serveur de développement pour n8n qui fournit des outils, des validateurs et des templates pour améliorer votre expérience d'automatisation.</p>
<hr class="my-4">
<p>Choisissez un outil ci-dessous pour commencer.</p>
</div>
<div class="row mt-4">
<div class="col-md-6 col-lg-3 mb-4">
<div class="card h-100">
<div class="card-body text-center">
<i class="bi bi-check-circle text-success" style="font-size: 3rem;"></i>
<h5 class="card-title mt-3">Validateur de Workflows</h5>
<p class="card-text">Validez vos workflows n8n selon différents critères : nommage, gestion des erreurs, sécurité, performance et documentation.</p>
<a href="/validator.html" class="btn btn-primary">Accéder</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="card h-100">
<div class="card-body text-center">
<i class="bi bi-code-slash text-primary" style="font-size: 3rem;"></i>
<h5 class="card-title mt-3">Intégration NextJS</h5>
<p class="card-text">Générez des intégrations NextJS pour vos workflows n8n avec des endpoints REST, des types TypeScript et une documentation OpenAPI.</p>
<a href="/nextjs-integration.html" class="btn btn-primary">Accéder</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="card h-100">
<div class="card-body text-center">
<i class="bi bi-file-earmark-text text-warning" style="font-size: 3rem;"></i>
<h5 class="card-title mt-3">Templates</h5>
<p class="card-text">Explorez et utilisez des templates de workflows prêts à l'emploi pour différents cas d'usage, notamment Google Calendar.</p>
<a href="/templates.html" class="btn btn-primary">Accéder</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4">
<div class="card h-100">
<div class="card-body text-center">
<i class="bi bi-book text-info" style="font-size: 3rem;"></i>
<h5 class="card-title mt-3">Documentation</h5>
<p class="card-text">Consultez la documentation sur les bonnes pratiques, les validateurs et les templates disponibles.</p>
<a href="/docs.html" class="btn btn-primary">Accéder</a>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="mb-0">Configuration</h5>
</div>
<div class="card-body">
<p>Pour configurer le serveur MCP, vous pouvez définir les variables d'environnement suivantes :</p>
<ul>
<li><code>PORT</code> : Port du serveur (par défaut : 3000)</li>
<li><code>N8N_API_URL</code> : URL de l'API n8n (par défaut : http://localhost:5678/api/v1)</li>
<li><code>N8N_API_KEY</code> : Clé API pour l'authentification à n8n</li>
<li><code>VALIDATOR_OUTPUT_DIR</code> : Répertoire de sortie pour les validations</li>
<li><code>NEXTJS_OUTPUT_DIR</code> : Répertoire de sortie pour les intégrations NextJS</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="mb-0">Statut du serveur</h5>
</div>
<div class="card-body">
<div class="d-flex justify-content-between mb-3">
<span>Connexion à n8n :</span>
<span id="n8n-status">Vérification...</span>
</div>
<div class="d-flex justify-content-between mb-3">
<span>Version du serveur :</span>
<span>1.0.0</span>
</div>
<div class="d-flex justify-content-between mb-3">
<span>Temps de fonctionnement :</span>
<span id="uptime">Calcul en cours...</span>
</div>
<button id="check-connection" class="btn btn-sm btn-primary">Vérifier la connexion</button>
</div>
</div>
</div>
</div>
</div>
<footer class="bg-light py-3 mt-5">
<div class="container text-center">
<p class="mb-0">MCP n8n Server © 2025</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const n8nStatusElement = document.getElementById('n8n-status');
const uptimeElement = document.getElementById('uptime');
const checkConnectionButton = document.getElementById('check-connection');
// Vérifier la connexion à n8n
function checkN8nConnection() {
n8nStatusElement.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Vérification...';
fetch('/api/status')
.then(response => response.json())
.then(data => {
if (data.n8nConnected) {
n8nStatusElement.innerHTML = '<span class="badge bg-success">Connecté</span>';
} else {
n8nStatusElement.innerHTML = '<span class="badge bg-danger">Déconnecté</span>';
}
})
.catch(error => {
n8nStatusElement.innerHTML = '<span class="badge bg-danger">Erreur</span>';
console.error('Erreur lors de la vérification de la connexion:', error);
});
}
// Mettre à jour le temps de fonctionnement
function updateUptime() {
fetch('/api/status')
.then(response => response.json())
.then(data => {
if (data.uptime) {
const uptime = data.uptime;
const days = Math.floor(uptime / 86400);
const hours = Math.floor((uptime % 86400) / 3600);
const minutes = Math.floor((uptime % 3600) / 60);
const seconds = Math.floor(uptime % 60);
uptimeElement.textContent = `${days}j ${hours}h ${minutes}m ${seconds}s`;
} else {
uptimeElement.textContent = 'Indisponible';
}
})
.catch(error => {
uptimeElement.textContent = 'Erreur';
console.error('Erreur lors de la récupération du temps de fonctionnement:', error);
});
}
// Vérifier la connexion au chargement de la page
checkN8nConnection();
// Mettre à jour le temps de fonctionnement toutes les 5 secondes
updateUptime();
setInterval(updateUptime, 5000);
// Événement de clic sur le bouton de vérification de la connexion
checkConnectionButton.addEventListener('click', checkN8nConnection);
});
</script>
</body>
</html>
Latest Blog Posts
- Model Context Protocol Proxies: Enabling Enterprise Control with Virtual MCPsBy Om-Shree-0709 on .AI SecurityVirtual MCPKubernetes Operator
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/lowprofix/n8n-mcp-server'
If you have feedback or need assistance with the MCP directory API, please join our Discord server