n8n MCP Server

/** * Script pour l'interface d'intégration NextJS */ document.addEventListener('DOMContentLoaded', function() { // Éléments du DOM const workflowIdInput = document.getElementById('workflow-id'); const workflowNameInput = document.getElementById('workflow-name'); const apiBasePathInput = document.getElementById('api-base-path'); const generateOpenAPICheckbox = document.getElementById('generate-openapi'); const generateTypesCheckbox = document.getElementById('generate-types'); const includeWebhooksCheckbox = document.getElementById('include-webhooks'); const generateButton = document.getElementById('generate-button'); const integrationsList = document.getElementById('integrations-list'); const alertContainer = document.getElementById('alert-container'); // Charger la liste des intégrations au chargement de la page loadIntegrations(); // Événement de clic sur le bouton de génération generateButton.addEventListener('click', function() { // Récupérer les valeurs des champs const workflowId = workflowIdInput.value.trim(); const workflowName = workflowNameInput.value.trim(); const apiBasePath = apiBasePathInput.value.trim(); const generateOpenAPI = generateOpenAPICheckbox.checked; const generateTypes = generateTypesCheckbox.checked; const includeWebhooks = includeWebhooksCheckbox.checked; // Valider les champs requis if (!workflowId) { showAlert('danger', 'L\'ID du workflow est requis'); return; } if (!workflowName) { showAlert('danger', 'Le nom du workflow est requis'); return; } // Désactiver le bouton pendant la génération generateButton.disabled = true; generateButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Génération en cours...'; // Appeler l'API pour générer l'intégration fetch('/api/nextjs-integration/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ workflowId, workflowName, apiBasePath, generateOpenAPI, generateTypes, includeWebhooks }) }) .then(response => response.json()) .then(data => { // Réactiver le bouton generateButton.disabled = false; generateButton.innerHTML = 'Générer l\'intégration'; if (data.success) { // Afficher un message de succès showAlert('success', `Intégration générée avec succès: ${data.message}`); // Recharger la liste des intégrations loadIntegrations(); } else { // Afficher un message d'erreur showAlert('danger', `Erreur: ${data.message}`); } }) .catch(error => { // Réactiver le bouton generateButton.disabled = false; generateButton.innerHTML = 'Générer l\'intégration'; // Afficher un message d'erreur showAlert('danger', `Erreur: ${error.message}`); }); }); /** * Charge la liste des intégrations depuis l'API */ function loadIntegrations() { // Vider la liste integrationsList.innerHTML = '<div class="d-flex justify-content-center"><div class="spinner-border" role="status"><span class="visually-hidden">Chargement...</span></div></div>'; // Appeler l'API pour récupérer la liste des intégrations fetch('/api/nextjs-integration/list') .then(response => response.json()) .then(data => { // Vider la liste integrationsList.innerHTML = ''; if (!data.success) { integrationsList.innerHTML = `<div class="alert alert-danger">Erreur: ${data.message}</div>`; return; } if (data.integrations.length === 0) { integrationsList.innerHTML = '<div class="alert alert-info">Aucune intégration générée</div>'; return; } // Afficher les intégrations data.integrations.forEach(integration => { const card = document.createElement('div'); card.className = 'card mb-3'; const cardHeader = document.createElement('div'); cardHeader.className = 'card-header d-flex justify-content-between align-items-center'; cardHeader.innerHTML = `<h5 class="mb-0">${integration.name}</h5>`; const cardBody = document.createElement('div'); cardBody.className = 'card-body'; // Ajouter les badges pour les fonctionnalités const features = document.createElement('div'); features.className = 'mb-3'; if (integration.features.openapi) { features.innerHTML += '<span class="badge bg-primary me-2">OpenAPI</span>'; } if (integration.features.types) { features.innerHTML += '<span class="badge bg-success me-2">TypeScript</span>'; } if (integration.features.apiClient) { features.innerHTML += '<span class="badge bg-info me-2">API Client</span>'; } if (integration.features.apiRoutes) { features.innerHTML += '<span class="badge bg-warning me-2">API Routes</span>'; } cardBody.appendChild(features); // Ajouter la date de création const createdAt = document.createElement('p'); createdAt.className = 'card-text text-muted'; createdAt.textContent = `Créée le ${new Date(integration.createdAt).toLocaleString()}`; cardBody.appendChild(createdAt); // Ajouter les boutons d'action const actions = document.createElement('div'); actions.className = 'btn-group'; // Bouton de téléchargement const downloadButton = document.createElement('a'); downloadButton.className = 'btn btn-primary'; downloadButton.href = `/api/nextjs-integration/download/${integration.name}`; downloadButton.innerHTML = '<i class="bi bi-download"></i> Télécharger'; actions.appendChild(downloadButton); // Bouton de documentation Swagger if (integration.features.openapi) { const swaggerButton = document.createElement('a'); swaggerButton.className = 'btn btn-info'; swaggerButton.href = `/api/nextjs-integration/${integration.name}/swagger`; swaggerButton.target = '_blank'; swaggerButton.innerHTML = '<i class="bi bi-file-earmark-text"></i> Swagger'; actions.appendChild(swaggerButton); } // Bouton de suppression const deleteButton = document.createElement('button'); deleteButton.className = 'btn btn-danger'; deleteButton.innerHTML = '<i class="bi bi-trash"></i> Supprimer'; deleteButton.addEventListener('click', function() { if (confirm(`Êtes-vous sûr de vouloir supprimer l'intégration "${integration.name}" ?`)) { deleteIntegration(integration.name); } }); actions.appendChild(deleteButton); cardBody.appendChild(actions); card.appendChild(cardHeader); card.appendChild(cardBody); integrationsList.appendChild(card); }); }) .catch(error => { integrationsList.innerHTML = `<div class="alert alert-danger">Erreur: ${error.message}</div>`; }); } /** * Supprime une intégration * @param {string} name Nom de l'intégration à supprimer */ function deleteIntegration(name) { fetch(`/api/nextjs-integration/${name}`, { method: 'DELETE' }) .then(response => response.json()) .then(data => { if (data.success) { showAlert('success', data.message); loadIntegrations(); } else { showAlert('danger', `Erreur: ${data.message}`); } }) .catch(error => { showAlert('danger', `Erreur: ${error.message}`); }); } /** * Affiche une alerte * @param {string} type Type d'alerte (success, danger, warning, info) * @param {string} message Message à afficher */ function showAlert(type, message) { // Créer l'alerte const alert = document.createElement('div'); alert.className = `alert alert-${type} alert-dismissible fade show`; alert.innerHTML = ` ${message} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Fermer"></button> `; // Ajouter l'alerte au conteneur alertContainer.appendChild(alert); // Supprimer l'alerte après 5 secondes setTimeout(() => { alert.classList.remove('show'); setTimeout(() => { alert.remove(); }, 150); }, 5000); } });