n8n MCP Server
by lowprofix
- n8n-mcp-server
- src
- public
nextjs-integration.html•6.48 kB
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intégration NextJS - MCP n8n Server</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" 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 active" 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">
<h1 class="mb-4">Intégration NextJS</h1>
<div id="alert-container"></div>
<div class="row">
<div class="col-md-6">
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0">Générer une intégration</h5>
</div>
<div class="card-body">
<form id="integration-form">
<div class="mb-3">
<label for="workflow-id" class="form-label">ID du workflow</label>
<input type="text" class="form-control" id="workflow-id" placeholder="Exemple: 123e4567-e89b-12d3-a456-426614174000" required>
<div class="form-text">L'identifiant unique du workflow n8n</div>
</div>
<div class="mb-3">
<label for="workflow-name" class="form-label">Nom du workflow</label>
<input type="text" class="form-control" id="workflow-name" placeholder="Exemple: Création d'événements Google Calendar" required>
<div class="form-text">Le nom descriptif du workflow</div>
</div>
<div class="mb-3">
<label for="api-base-path" class="form-label">Chemin de base de l'API</label>
<input type="text" class="form-control" id="api-base-path" value="/api" placeholder="/api">
<div class="form-text">Le chemin de base pour les routes API NextJS</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="generate-openapi" checked>
<label class="form-check-label" for="generate-openapi">
Générer la documentation OpenAPI/Swagger
</label>
</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="generate-types" checked>
<label class="form-check-label" for="generate-types">
Générer les types TypeScript
</label>
</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="include-webhooks" checked>
<label class="form-check-label" for="include-webhooks">
Inclure les nœuds de déclenchement (Trigger)
</label>
</div>
</div>
<button type="button" id="generate-button" class="btn btn-primary">Générer l'intégration</button>
</form>
</div>
</div>
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0">Aide</h5>
</div>
<div class="card-body">
<h6>Comment utiliser l'intégration NextJS ?</h6>
<ol>
<li>Générez l'intégration en remplissant le formulaire ci-dessus</li>
<li>Téléchargez l'archive ZIP contenant les fichiers générés</li>
<li>Extrayez les fichiers dans votre projet NextJS</li>
<li>Utilisez le client API généré pour interagir avec votre workflow n8n</li>
</ol>
<h6>Structure des fichiers générés</h6>
<ul>
<li><code>api-client.ts</code> : Client API TypeScript pour interagir avec le workflow</li>
<li><code>types.ts</code> : Types TypeScript pour les entrées et sorties du workflow</li>
<li><code>openapi.json</code> : Spécification OpenAPI du workflow</li>
<li><code>api/</code> : Routes API NextJS pour exposer le workflow</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="mb-0">Intégrations générées</h5>
</div>
<div class="card-body">
<div id="integrations-list">
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
</div>
</div>
</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 src="/js/nextjs-integration.js"></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