Dans ce projet, N8N a été utilisé pour mettre en place un chatbot intégré à une application web.
L’objectif était de connecter un front-end à un workflow N8N capable de communiquer avec un agent d’intelligence artificielle, de traiter les données et de renvoyer une réponse à l’utilisateur via le protocole HTTP.
Ce document présente la logique globale de l’architecture, les technologies utilisées ainsi que les mécanismes de communication entre le code et N8N.
Technologies utilisées
-
N8N
-
Webhook (point d’entrée du workflow)
-
Angular
-
HttpClient (envoi de requêtes HTTP)
Principe général de fonctionnement
Dans cette architecture, N8N joue le rôle de serveur applicatif.
Le webhook constitue la porte d’entrée du système : il reçoit les requêtes envoyées par le front-end et déclenche le workflow associé.
Une fois la requête reçue :
-
N8N traite les données entrantes
-
Les informations sont transmises à un agent IA ou à d’autres services (base de données, API, etc.)
-
Une réponse est générée
-
N8N renvoie cette réponse au client (application web)
Cette approche permet de centraliser la logique métier et l’orchestration dans N8N, tout en conservant un front-end léger et focalisé sur l’interface utilisateur.
Connexion entre le code et N8N
Lors de la création d’un webhook dans N8N, une URL unique est générée automatiquement.
Cette URL est utilisée côté front-end pour envoyer les requêtes HTTP.
Dans ce projet, la méthode POST du service HttpClient d’Angular est utilisée pour transmettre les messages utilisateur à N8N.
Exemple :
this.http.post(
'http://localhost:****/webhook/***************************120d',
body
);
Chaque requête envoyée depuis le front-end est ainsi interceptée par N8N, ce qui déclenche automatiquement le workflow associé.
Point de vigilance :
Il est essentiel de vérifier que le port utilisé est correct et que le service N8N est bien en cours d’exécution. Dans le cas contraire, le webhook ne pourra pas recevoir les requêtes.
Construction du workflow N8N
Le fonctionnement d’un workflow N8N repose sur une structure simple :
-
Entrée : Webhook
-
Traitement : agent IA, logique métier, base de données
-
Sortie : réponse HTTP vers le client
Le webhook agit comme déclencheur. Dès réception d’une requête, il transmet les données aux différents nœuds configurés (agent IA, transformations, conditions, etc.).
La phase de traitement peut inclure plusieurs opérations :
-
reformater la requête
-
enrichir le contexte
-
gérer l’historique de conversation
-
adapter et structurer la réponse
Cette partie dépend directement des besoins fonctionnels et du niveau de complexité attendu pour le chatbot.
Gestion des réponses côté front-end
Côté front-end, le rôle principal consiste à :
-
envoyer les requêtes HTTP
-
recevoir les réponses de N8N
-
afficher ou exploiter ces réponses dans l’interface utilisateur
La logique d’affichage et de gestion des messages reste généralement implémentée côté client.
Exemple :
this.messages.push({ role: 'bot', content: res });
Dans cet exemple, la réponse renvoyée par N8N est ajoutée à l’historique des messages afin d’être affichée dans l’interface du chatbot.
Conclusion
Cette architecture permet de séparer clairement les responsabilités :
-
N8N gère la logique métier, l’orchestration et les interactions avec les services d’intelligence artificielle
-
Le front-end se concentre sur l’interface utilisateur et l’expérience
Ce découpage offre une solution flexible, maintenable et facilement extensible. Il devient ainsi possible de faire évoluer le chatbot en ajoutant de nouveaux agents, de nouvelles sources de données ou des règles métier supplémentaires, sans impacter significativement le front-end.