Ce tutoriel explique comment intégrer un agent IA (chatbot) à un site web créé sur Lovable, en exploitant n8n. L’objectif est de permettre au chatbot de converser avec les utilisateurs et d’interagir avec des outils externes, comme Google Calendar, pour, par exemple, gérer la prise de rendez-vous.

Télécharger le template n8n : https://drive.google.com/file/d/1IF2IvMsbFzjMyHv3HpS79nvrSOPeIsWY/view?usp=sharing

Phase 1 : Installation de n8n et Préparation de l’Environnement

Avant de débuter, il est essentiel d’installer n8n. Trois méthodes sont possibles :

1. Installation en local : Technique et limitée par la puissance de votre machine.
2. Abonnement Cloud n8n : Solution simple mais coûteuse.
3. Hébergement VPS (Recommandé) : Prendre un serveur (par exemple chez Hostinger, plan KVM2) permet d’installer n8n en un clic, simplifiant grandement le processus. Vous pouvez utiliser le coupon « digit » pour une réduction de 10%. Une fois n8n installé, vous pourrez importer un template pour démarrer rapidement.

Phase 2 : Connexion entre Lovable et le Webhook n8n

La première étape consiste à établir le lien de communication entre le chatbot de Lovable et le flux de travail (workflow) dans n8n. C’est souvent l’étape qui génère le plus d’erreurs.

1. Configuration du Webhook dans n8n : Dans le module Webhook de n8n, copiez l’URL du Webhook. La méthode à utiliser est POST.
2. Configuration de la Réponse : Dans les options du Webhook, il est crucial de sélectionner using respond to webbook node pour la réponse.
3. Instruction à Lovable : Demandez à Lovable d’ajouter un chatbot lié à l’URL de votre Webhook.
4. Déclenchement du Workflow (Important) : Précisez à Lovable que le Webhook doit être enclenché à chaque nouveau message envoyé par l’utilisateur, et non à chaque nouvelle conversation. Si vous le déclenchez à l’ouverture de la boîte de conversation, le message lui-même ne sera pas transmis via le Webhook.
5. Test de la Connexion : Dans n8n, cliquez sur listen to test event. Retournez sur Lovable et tapez un message (ex. : « Hello »). Vous devriez voir le message reçu dans n8n, confirmant que le Webhook fonctionne.

Phase 3 : Création et configuration de l’Agent IA

Une fois le Webhook fonctionnel, vous pouvez connecter l’agent IA.

1. Ajout du Module AI Agent : Ajoutez le module AI Agent et connectez-le à votre Webhook. Vous devez sélectionner tool agent et définir la source sur define below.
2. Transfert du Message : Faites glisser le message reçu par le Webhook dans le champ prompt user message du module AI Agent.
3. Définition du Prompt : Le prompt est l’instruction donnée à l’agent. Il doit contenir le plus de contexte possible concernant votre activité.
   • Contexte métier : Décrivez l’agence (ex. : Clever Mind, spécialisée en IA, aide les TPE, PME, start-up, etc.).
   • Identité : Donnez un nom au chatbot (ex. : Julie).
   • Format de Date : Précisez la date actuelle et le format utilisé (important pour la prise de rendez-vous, par exemple le format européen).
   • Objectifs : Indiquez le but principal, comme prendre rendez-vous directement via le chat.
   • Informations Requises : Précisez les données que l’agent doit demander pour un rendez-vous (nom, adresse mail, date et heure préférée).
   • Règles : Vous pouvez ajouter des règles de comportement (être aimable, utiliser un langage informel, préférer des réponses courtes, indiquer le fuseau horaire de Paris).

Phase 4 : Connexion à OpenAI et gestion de la mémoire

1. Connexion OpenAI : Vous devez connecter votre compte OpenAI (pas ChatGPT) via une clé API générée dans l’espace API Key.
2. Modèle : Le modèle GPT5 est un choix, mais un modèle inférieur pourrait suffire si les requêtes ne sont pas excessivement complexes.
3. Configuration de la Mémoire : La mémoire est vitale pour que l’agent conserve le contexte de la conversation (par exemple, se souvenir du prénom de l’utilisateur après plusieurs messages).
   • Définissez une fenêtre de contexte (10 messages est suggéré).
   • La clé qui identifie l’utilisateur peut être son adresse IP.

Phase 5 : Intégration d’outils externes

n8n offre des centaines d’outils disponibles (gestion de projet, emailing, Dropbox, Gmail, etc.). Pour la prise de rendez-vous, Google Calendar est utilisé.

1. Préparation Google Cloud : Connectez Google Calendar via l’API Google Calendar sur Google Cloud. Il faut créer des identifiants et des écrans de consentement d’authentification.
2. Modules Calendar dans n8n : Ajoutez deux modules principaux liés à Google Calendar :
   • Create Event : Pour l’ajout de nouveaux rendez-vous.
   • Get All Events : Pour lire les disponibilités de l’agenda.
3. Paramètres : Configurez votre adresse Google Calendar et fournissez les dates de début et de fin requises pour les modules.

Phase 6 : Finalisation et déploiement

1. Module de Fin : Ajoutez le module Respond to Webhook pour terminer le workflow et renvoyer la réponse à Lovable.
2. Réponses du Chat : Précisez à Lovable que les réponses du chat doivent utiliser les informations renvoyées par le Webhook.
3. Passage en Production : Pour une utilisation en direct, passez de l’URL de test à l’URL de production (Production URL) et mettez à jour le Webhook dans Lovable.
4. Activation : Activez le workflow dans n8n. Il se lancera désormais automatiquement à chaque message utilisateur.

Une fois en production, l’agent peut engager une conversation, demander des détails (prénom, email, objectifs), et ajouter l’événement dans Google Agenda si la demande est de prendre rendez-vous (par exemple, un rendez-vous « Demo Clever Mine »).

Note sur l’intégration alternative : Si vous n’utilisez pas Lovable (ex. : site WordPress), vous pouvez remplacer le Webhook initial par le module Chat Trigger. Cochez make chat publicly available, sélectionnez embed chat, et copiez le code HTML généré pour l’ajouter à votre site web.

L’intégration d’un agent IA via n8n fonctionne comme un traducteur universel : le Webhook reçoit le message de Lovable (ou de n’importe quel site), n8n (le traducteur) comprend l’intention grâce à l’Agent IA, et utilise ses « bras » (les outils comme Google Calendar) pour effectuer des actions avant de renvoyer la réponse finale au chat.