Icône de la catégorie Ressources
Icône de la catégorie Ressources

Resources

23 nov. 2025

Créer un agent IA adapté à votre métier

illustration du site Générer en un prompt grâce à l’IA Opus 4.5
illustration du site Générer en un prompt grâce à l’IA Opus 4.5
illustration du site Générer en un prompt grâce à l’IA Opus 4.5

Un agent IA peut vraiment changer votre quotidien. Il répond pour vous, trie les informations, organise vos idées et vous fait gagner du temps dès les premières minutes.

Quel que soit votre domaine, il peut vous aider. E-commerce, immobilier, BTP, services, coaching… dès qu’il y a des tâches répétitives ou des messages à gérer, il devient un vrai soutien.

Le but n’est pas de créer un outil complexe. On veut juste un assistant clair, qui comprend votre activité et réagit comme quelqu’un qui connaît votre travail.

Avec la bonne structure, c’est beaucoup plus simple que ça en a l’air. Un webhook, un agent IA, une mémoire bien configurée, et vous pouvez déjà automatiser une partie de votre charge mentale.

Dans cet article, vous allez voir comment construire votre agent IA à vous. Celui qui parle comme vous, comprend votre métier et vous aide vraiment au quotidien.

L’objectif est que ce soit simple à suivre. À la fin, vous saurez créer votre propre agent IA adapté à votre entreprise, rapidement, peu importe votre secteur.

L’organisation pour créer votre agent IA

Avant de commencer, on pose un cadre simple.
Juste pour que tout soit clair et que vous sachiez exactement où vous allez.

Voici comment on va avancer ensemble :

Étape

Description

1. Importer le workflow n8n (10min)

On charge le workflow, et je vous montre à quoi sert chaque node et comment tout se connecte.

2. Créer votre interface avec Gemini 3.0 (20 min)

On construit votre mini-site ou votre chat, avec quelques règles simples pour que tout fonctionne parfaitement.

3. Publier votre agent IA en ligne (5min)

Vous obtenez votre propre URL pour utiliser votre agent, le partager ou l’intégrer à vos outils.

Etape 1 importer le workflow n8n

Vous pouvez importer le workflow directement depuis ce fichier :
👉 Télécharger le workflow AGENT IA

L’objectif de cette étape :
comprendre comment tout est structuré, et comment l’adapter à votre activité sans toucher à toute la logique.

Une fois importé, vous verrez plusieurs nodes. On va les passer un par un.

Node 1 : Le Webhook — L’entrée de votre agent IA

Illustration du node 1 Le Webhook — L’entrée de l'agent IA

C’est la porte d’entrée du système.
À chaque fois qu’un utilisateur envoie un message depuis votre outil, c’est ce Webhook qui le reçoit.

Ce qu’il faut retenir

Dans ce node, vous voyez deux liens :

  • Test URL : uniquement pour tester dans n8n

  • Production URL : c’est ce lien qui sera utilisé sur votre site

Pour créer votre agent IA, on ne garde que la Production URL. C’est elle qui permettra à votre mini-site, généré ensuite avec Gemini 3.0, d’envoyer les messages directement dans votre workflow.

Le champ “Path”

Le champ “Path” correspond simplement au nom du Webhook.
Vous pouvez le laisser tel quel ou le renommer pour quelque chose de plus clair.

Exemple :
AGENTIAhttps://votren8n.com/webhook/AGENTIA

Changer le nom n’a aucune incidence technique, c’est juste pour être organisé.

Ce que vous allez en faire

Dans l’étape suivante, votre interface Gemini 3.0 aura besoin de cette URL pour se connecter à votre agent IA.
Vous la collerez dans votre code à l’endroit prévu, et votre site sera directement relié à votre workflow.

Node 2 — Code : formatage du message utilisateur

Image pour montrer le Node 2 — Code : formatage du message utilisateur

Ce node sert uniquement à mettre les données reçues depuis votre site dans un format propre, que le reste du workflow pourra comprendre.
Le Webhook envoie les informations “brutes”, et ce node les transforme en quelque chose d’organisé.

Pourquoi il est important

Votre agent IA travaille toujours avec une structure précise :

  • un message

  • un identifiant utilisateur (pour la mémoire)

  • un contexte de chat

Ce node prépare ces éléments pour qu’ils soient toujours cohérents, peu importe d’où vient le message.

Ce qu’il fait exactement

Il récupère deux choses envoyées par votre site :

  • message_utilisateur

  • user_id

Puis il renvoie un objet clair comme ceci :

  • message.text → le texte envoyé

  • message.from.id → l’ID de l’utilisateur

  • chat.id → le même ID (pour suivre la conversation)

L’objectif : permettre à l’IA de savoir qui parle, ce qu’il dit, et dans quelle conversation on se trouve.

À quoi ça sert pour votre agent IA

Grâce à ce node :

  • la mémoire se construit correctement

  • chaque utilisateur a sa propre conversation

  • l’agent IA répond toujours avec le bon contexte

Node 3 — Agent IA : le cerveau du workflow

Node agent IA

C’est ici que tout se joue.
Le Webhook a récupéré le message, le node Code l’a normalisé, et maintenant l’agent IA prend le relais.
C’est la seule partie du workflow où vous allez “donner une personnalité” à votre agent, définir son rôle et décider de ce qu’il doit faire.

Cet agent IA peut servir pour absolument tout :

  • répondre aux mails,

  • suivre des dossiers,

  • assister un artisan,

  • aider un coach,

  • qualifier des leads,

  • faire du tri,

  • analyser un texte,

  • accompagner un étudiant,

  • centraliser des informations…

Peu importe le métier : tout se joue dans la manière dont vous écrivez le prompt.

Les deux seules variables utilisées

Illustration du passage des variables message utilisateur et user ID du webhook vers l’agent IA.

Le workflow envoie uniquement deux informations au modèle IA :

Texte : {{ $json.message.text }}
User ID : {{ $json.message.chat.id }}

Elles sont créées dans le node Code juste avant.
Ce sont les deux briques essentielles, et on ne les modifie pas.

Texte
→ contient le message envoyé par l’utilisateur.

User ID
→ identifie la personne dans la mémoire de l’agent.

Pourquoi ne rien changer ?
Parce que ces deux variables permettent :

  • de retrouver la bonne conversation,

  • de charger la bonne mémoire,

  • d’éviter les mélanges entre utilisateurs,

  • de garder un fil cohérent.

L’agent fonctionne entièrement grâce à cette structure.

Comment fonctionne réellement ce node

Dès qu’il reçoit ces deux données, il :

  1. lit le message,

  2. récupère la mémoire associée à cet utilisateur,

  3. comprend l’intention,

  4. répond de manière simple et adaptée,

  5. continue la discussion de façon naturelle.

La logique métier, le style, le ton et le rôle de l’agent viennent du prompt.

Le prompt : l’endroit où tout se personnalise

Schéma simple montrant comment le prompt contrôle le comportement de l’agent IA.

Vous pouvez transformer cet agent pour n’importe quel besoin en ajustant quelques lignes.

Exemple : adapter l’agent pour différents métiers

1. Agent pour un artisan

Prompt :
« Tu analyses les demandes de travaux, tu repères les informations importantes, tu poses les bonnes questions et tu aides à organiser les échanges avec le client. »

Résultat :
L’agent comprend naturellement devis, surfaces, délais, matériaux, chantiers…

2. Agent pour un e-commerce

Prompt :
« Tu lis les messages clients, tu identifies le problème, tu poses les questions utiles et tu aides à gérer le SAV de façon claire et professionnelle. »

Résultat :
L’agent devient un assistant client capable de traiter commandes, retours, livraisons, suivis…

3. Agent IA personnel

Prompt :
« Tu m’aides à organiser mes idées, clarifier mes priorités et structurer ce que je veux faire, étape par étape. »

Résultat :
L’agent devient un assistant simple pour organiser sa journée, ses projets et ses tâches.

4. Agent pour un service commercial

Prompt :
« Tu qualifies les prospects, tu poses des questions simples et pertinentes, et tu identifies leur besoin réel sans jamais forcer la discussion. »

Résultat :
L’agent comprend le contexte, le budget, l’urgence, et suit les prospects naturellement.

5. Agent pour un service administratif

Prompt :
« Tu aides à comprendre les demandes, organiser les informations, suivre les documents et poser les questions nécessaires pour avancer. »

Résultat :
L’agent devient un support administratif précis et clair.

La mémoire : comment elle fonctionne

Illustration de la mémoire conversationnelle qui permet à l’agent IA de suivre l’utilisateur et garder le contexte

La mémoire se base entièrement sur le User ID.

À chaque message, l’agent peut retrouver :

  • ce que l’utilisateur a dit avant,

  • ce qu’il fait,

  • ses outils,

  • ses besoins,

  • ses priorités,

  • son contexte.

Le node Agent IA récupère automatiquement la bonne mémoire
grâce à la variable :

{{ $json.message.chat.id }}

Pas de configuration complexe :
→ si un utilisateur revient, il retrouve sa discussion exactement là où elle était.

Pourquoi j’utilise Grok 4.1

Image pour montrer le choix du LLM que j'ai choisis pour créer un agent IA

Grok 4.1 est utilisé dans ce workflow pour trois raisons :

  • il est rapide,

  • il comprend bien les contextes métier,

  • il coûte beaucoup moins cher que les modèles haut de gamme.

Pour un agent qui échange souvent, c’est un très bon compromis.
Vous pouvez le remplacer par GPT, Claude ou Gemini selon votre préference.

Node 4 – Le Code : on a terminé le plus technique

Capture d’écran du Node 4 dans n8n montrant le code qui nettoie la réponse de l’agent IA et met à jour la mémoire utilisateur via user_id.

Si vous êtes arrivé là, vous avez passé la partie la plus “technique” du workflow.
Ce node sert juste à nettoyer la réponse de l’agent IA et à mettre à jour la mémoire de l’utilisateur.

À quoi il sert ?

Trois choses, et pas plus :

  1. récupérer proprement le message envoyé par l’utilisateur

  2. éviter que le workflow casse si l’IA envoie du JSON ou du Markdown

  3. garder une mémoire par utilisateur grâce à son user_id

Vous n’avez rien à modifier ici.

Ce qu’il faut retenir

Votre agent IA tourne uniquement avec deux variables :

  • message_utilisateur

  • user_id

Le code organise ça proprement, et met en mémoire le secteur, le rôle, ou tout ce que l’utilisateur a déjà partagé.

A lire aussi : Comment l'IA transforme la gestion du support client des PME en 2025

Pourquoi c’est important ?

Parce que grâce à ce node, votre agent IA peut suivre chaque utilisateur comme si c’était une vraie conversation continue.
Pas besoin de base de données ou d’outil externe : tout est stocké ici automatiquement.

Node 5 — Respond to Webhook

Interface du node Respond to Webhook dans n8n montrant la configuration qui renvoie la réponse finale de l’agent IA vers le site, en utilisant le même webhook que le node d’entrée.

Ce dernier node réutilise exactement le même webhook que celui du premier node.
La différence est simple :

  • Le premier webhook sert à recevoir le message de l’utilisateur.

  • Celui-ci sert à renvoyer la réponse finale de l’agent IA vers votre interface.

Les deux travaillent ensemble, chacun dans son rôle.

Dans ce node, on renvoie uniquement le texte propre déjà préparé par le node “Code” :

{{ $json.message_utilisateur }}

C’est volontaire :
on renvoie seulement le message final, sans mémoire, sans structure interne, sans informations techniques.
Juste la réponse que l’utilisateur doit voir.

Ce node clôture toute la boucle :
votre site envoie un message → n8n traite → l’agent IA répond → ce node renvoie la réponse directement à votre interface.
C’est lui qui permet à votre agent IA d’apparaître “en temps réel” sur votre page Gemini 3.0.

Il n’y a rien à configurer ici.
La seule règle : utiliser exactement le même webhook que dans le premier node.

Et dernière étape avant de continuer : activez votre workflow.
En haut de l’écran, cliquez sur le bouton “Inactive” pour qu’il passe en “Active”.
Sans ça, votre agent IA ne recevra rien.

Image pour montrer comment activer sur workflow sur n8n

Votre workflow est maintenant prêt.

Etape 2 : Créer votre interface avec Gemini 3.0

Maintenant que le workflow n8n est prêt, on peut passer à l’interface.
Le but est d’avoir une petite page web qui envoie les messages à votre webhook et affiche la réponse de l’agent IA.

Passer Gemini en mode Canvas

Interface construite dans Gemini Canvas pour créer un mini-site connecté à un webhook n8n

On démarre directement dans Canvas.
C’est le mode où Gemini comprend qu’il doit créer :

  • un vrai fichier HTML

  • avec du JavaScript intégré

  • une structure propre

  • aucune partie backend inventée

  • et surtout : il ne doit jamais toucher au fetch() qui envoie les messages à votre webhook

Canvas évite 90 % des erreurs : pas de JSON mélangé dans l’interface, pas de code supprimé, pas de confusion.
Vous lui demandez un mini-site connecté à n8n, il construit exactement ça.

Le premier prompt à envoyer à Gemini Canvas (les paramètres obligatoires)

Prompt Gemini Canvas définissant les règles techniques pour créer une interface connectée à n8n

C’est le prompt de base.
Vous devez l’envoyer avant toute création de design.

Il sert à une chose :
dire à Gemini ce qu’il doit respecter absolument pour que votre agent IA fonctionne.

Copiez-collez ce prompt dans Canvas tel quel, et remplacez juste l’URL de votre webhook production.

Prompt n°1 — Les règles obligatoires (à copier/coller)

Tu vas créer un fichier HTML complet qui contient un chat simple.
Quand l’utilisateur écrit un message, tu dois l’envoyer à mon webhook n8n.
Voici les règles que tu dois absolument respecter :

1. Tu génères un fichier HTML + CSS + JavaScript en un seul bloc.
2. Tu n’inclus jamais de JSON visible dans la page.
3. Tu utilises exactement ces deux champs dans le JSON envoyé au webhook :

message_utilisateur

user_id
4. Tu génères un user_id unique à chaque chargement de page.
5. Tu utilises mon webhook production sans le modifier :
METTRE LE LIEN DE VOTRE WHEBHOOK PRODUCTION
6. Tu utilises fetch() en POST avec Content-Type: application/json.
7. Tu récupères la réponse avec response.text() (pas response.json()).
8. Tu rends le markdown lisible (titres, listes, tableaux).
9. Tu n’inventes jamais de backend.
10. Tu ne modifies jamais les noms message_utilisateur et user_id.

Le design n’a pas d’importance pour l’instant : je veux d’abord un chat fonctionnel

Le deuxième prompt : modifier le design

Interface chat HTML personnalisée avec Gemini Canvas sans modifier les paramètres techniques

Une fois que le premier fichier fonctionne et que votre webhook reçoit les messages, vous pouvez demander à Gemini de changer le design.

Très important :
Vous devez prévenir Gemini de ne toucher à aucun paramètre technique.

Prompt n°2 — Modifier le design sans casser la connexion

Maintenant, améliore le design du fichier HTML que tu viens de créer.
Tu peux modifier : la mise en page, les couleurs, les animations, la disposition du chat, la typographie.

Mais tu dois absolument respecter ces règles :

ne modifie jamais l’URL du webhook

ne modifie jamais les noms message_utilisateur et user_id

ne supprime jamais le fetch()

ne supprime pas l’import de la librairie markdown

ne change rien dans la logique d’envoi ou de réception

Tu changes uniquement le style visuel, pas la structure technique

Jouer avec Gemini 3.0 (demander des modifications avancées)

Une fois que votre interface fonctionne, vous pouvez demander des améliorations bien plus techniques.
La seule règle à répéter systématiquement est :

« Tu ne modifies jamais les paramètres techniques : webhook, fetch(), user_id, JSON, mémoire, structure du chat.
Tu modifies seulement l’interface et les éléments visuels. »

Si cette phrase apparaît dans votre demande, tout restera parfaitement connecté à n8n.

Exemples d’améliorations techniques que vous pouvez demander à Gemini

1. Ajouter un système d’état avancé pour chaque message

(messages “en attente”, “envoyé”, “reçu”, “traitement IA”…)

Demande à Gemini :
« Ajoute un statut sous chaque message :
– “Envoi…” pendant la saisie,
– “Envoyé” dès que le fetch() part,
– “Traitement de l’agent…” pendant l’attente,
– “Reçu” quand la réponse s’affiche.
Ne touche jamais au webhook, au fetch(), ni au user_id. »

Ce que ça donne :
Une interface professionnelle proche des messageries modernes.

2. Ajouter une vraie timeline technique dans une colonne latérale

(journal des actions + résumé des échanges)

Demande :
« Ajoute une colonne latérale qui affiche :
– l’heure de chaque message,
– un résumé automatique de la conversation,
– les mots-clés détectés.
Tu changes uniquement l’interface, pas le code technique. »

Ce que ça donne :
Une vision chronologique, utile pour projets, SAV, BTP, immobilier.

3. Ajouter un espace “Documents générés” connecté au chat

(utile si votre workflow génère des PDF ou rapports)

Demande :
« Ajoute une zone à droite où les documents générés seront listés automatiquement : PDF, images, liens.
Tu modifies seulement l’interface, jamais la logique fetch(), webhook ou JSON. »

Ce que ça donne :
Un agent IA capable d’afficher des livrables créés par n8n.

4. Ajouter un mode plein écran avec animation fluide

Demande :
« Ajoute un bouton pour passer le chat en plein écran, avec une transition fluide.
Ne modifie aucun paramètre technique. »

Ce que ça donne :
Un affichage immersif parfait pour de longues conversations.

5. Ajouter des raccourcis dynamiques basés sur la conversation

Demande :
« Ajoute une barre de raccourcis en bas qui s’adapte selon le dernier message :
exemple : Résumer / Analyser / Clarifier / Reformuler.
Tu modifies uniquement l’UI, jamais le fonctionnement technique. »

Ce que ça donne :
Un agent IA plus intelligent, plus rapide à utiliser.

6. Ajouter une page d’accueil complète + un bouton “Démarrer l’agent IA”

Demande :
« Crée une page d’accueil avec un titre, un texte, une image,
et un bouton “Démarrer l’agent IA”.
Quand on clique, on affiche le chat existant.
Tu modifies uniquement la structure visuelle, jamais la logique technique. »

Ce que ça donne :
Un vrai site web avec une “porte d’entrée” avant le chatbot.

Règle à répéter dans chaque demande à Gemini

« Tu modifies uniquement le design.
Tu ne touches jamais aux paramètres techniques : webhook, fetch(), user_id, JSON, mémoire, structure du chat. »

Avec cette phrase, Gemini peut aller très loin sans jamais casser la connexion avec votre workflow n8n.

👉 Si vous souhaitez créer des agents IA connectés à vos outils (CRM, emails, documents, Airtable, Notion, n8n…) et aller plus loin que ce guide, notre agence Vision IA développe des agents IA sur-mesure adaptés à chaque métier.

Étape 3 Publier votre agent IA gratuitement

Maintenant que tout fonctionne :

  • votre workflow n8n est en place

  • votre interface HTML fonctionne

  • votre agent IA répond correctement

  • markdown OK

  • user_id OK

  • webhook OK

Il reste une dernière étape : publier votre agent IA pour avoir une vraie URL.

On va utiliser Netlify (gratuit, rapide, aucun code).

Préparer votre fichier index.html

Dans Gemini, cliquez en haut à droite sur “Copier le code”.

Ouvrez le bloc-note :

  • Sur Windows → Notepad

  • Sur Mac → TextEdit (en mode texte brut)

  • Collez le code.

  • Cliquez sur “Enregistrer sous…”

  • Nommez le fichier :
    index.html

Créer votre dossier

  • Créez un dossier sur votre ordinateur.

  • Nommez-le :
    index.html

  • Déposez votre fichier index.html à l’intérieur du dossier.

Envoyer sur Netlify

  • Faites glisser votre dossier index.html

  • Netlify génère automatiquement une URL.

  • Cliquez sur l’URL : votre agent IA est en ligne.

Le petit mot de la fin

Créer votre agent IA n’a rien de compliqué une fois que tout est bien structuré.
Vous avez maintenant les bonnes bases pour construire un assistant qui comprend votre activité, vous fait gagner du temps et vous aide chaque jour.

Et si un jour vous voulez aller plus loin connecter vos outils, automatiser vos process ou créer un agent plus avancé vous savez où nous trouver. Vision IA est là pour vous accompagner quand vous en aurez besoin.

https://www.linkedin.com/in/baptiste-fort-46873524b/
Dev Lowcode
Avatar - Subscription X Framer Template | Brix Templates

Passionné d'automatisation et d'IA, j'ai fondé Vision IA pour aider les entreprises à gagner du temps dans leurs processus

Un agent IA peut vraiment changer votre quotidien. Il répond pour vous, trie les informations, organise vos idées et vous fait gagner du temps dès les premières minutes.

Quel que soit votre domaine, il peut vous aider. E-commerce, immobilier, BTP, services, coaching… dès qu’il y a des tâches répétitives ou des messages à gérer, il devient un vrai soutien.

Le but n’est pas de créer un outil complexe. On veut juste un assistant clair, qui comprend votre activité et réagit comme quelqu’un qui connaît votre travail.

Avec la bonne structure, c’est beaucoup plus simple que ça en a l’air. Un webhook, un agent IA, une mémoire bien configurée, et vous pouvez déjà automatiser une partie de votre charge mentale.

Dans cet article, vous allez voir comment construire votre agent IA à vous. Celui qui parle comme vous, comprend votre métier et vous aide vraiment au quotidien.

L’objectif est que ce soit simple à suivre. À la fin, vous saurez créer votre propre agent IA adapté à votre entreprise, rapidement, peu importe votre secteur.

L’organisation pour créer votre agent IA

Avant de commencer, on pose un cadre simple.
Juste pour que tout soit clair et que vous sachiez exactement où vous allez.

Voici comment on va avancer ensemble :

Étape

Description

1. Importer le workflow n8n (10min)

On charge le workflow, et je vous montre à quoi sert chaque node et comment tout se connecte.

2. Créer votre interface avec Gemini 3.0 (20 min)

On construit votre mini-site ou votre chat, avec quelques règles simples pour que tout fonctionne parfaitement.

3. Publier votre agent IA en ligne (5min)

Vous obtenez votre propre URL pour utiliser votre agent, le partager ou l’intégrer à vos outils.

Etape 1 importer le workflow n8n

Vous pouvez importer le workflow directement depuis ce fichier :
👉 Télécharger le workflow AGENT IA

L’objectif de cette étape :
comprendre comment tout est structuré, et comment l’adapter à votre activité sans toucher à toute la logique.

Une fois importé, vous verrez plusieurs nodes. On va les passer un par un.

Node 1 : Le Webhook — L’entrée de votre agent IA

Illustration du node 1 Le Webhook — L’entrée de l'agent IA

C’est la porte d’entrée du système.
À chaque fois qu’un utilisateur envoie un message depuis votre outil, c’est ce Webhook qui le reçoit.

Ce qu’il faut retenir

Dans ce node, vous voyez deux liens :

  • Test URL : uniquement pour tester dans n8n

  • Production URL : c’est ce lien qui sera utilisé sur votre site

Pour créer votre agent IA, on ne garde que la Production URL. C’est elle qui permettra à votre mini-site, généré ensuite avec Gemini 3.0, d’envoyer les messages directement dans votre workflow.

Le champ “Path”

Le champ “Path” correspond simplement au nom du Webhook.
Vous pouvez le laisser tel quel ou le renommer pour quelque chose de plus clair.

Exemple :
AGENTIAhttps://votren8n.com/webhook/AGENTIA

Changer le nom n’a aucune incidence technique, c’est juste pour être organisé.

Ce que vous allez en faire

Dans l’étape suivante, votre interface Gemini 3.0 aura besoin de cette URL pour se connecter à votre agent IA.
Vous la collerez dans votre code à l’endroit prévu, et votre site sera directement relié à votre workflow.

Node 2 — Code : formatage du message utilisateur

Image pour montrer le Node 2 — Code : formatage du message utilisateur

Ce node sert uniquement à mettre les données reçues depuis votre site dans un format propre, que le reste du workflow pourra comprendre.
Le Webhook envoie les informations “brutes”, et ce node les transforme en quelque chose d’organisé.

Pourquoi il est important

Votre agent IA travaille toujours avec une structure précise :

  • un message

  • un identifiant utilisateur (pour la mémoire)

  • un contexte de chat

Ce node prépare ces éléments pour qu’ils soient toujours cohérents, peu importe d’où vient le message.

Ce qu’il fait exactement

Il récupère deux choses envoyées par votre site :

  • message_utilisateur

  • user_id

Puis il renvoie un objet clair comme ceci :

  • message.text → le texte envoyé

  • message.from.id → l’ID de l’utilisateur

  • chat.id → le même ID (pour suivre la conversation)

L’objectif : permettre à l’IA de savoir qui parle, ce qu’il dit, et dans quelle conversation on se trouve.

À quoi ça sert pour votre agent IA

Grâce à ce node :

  • la mémoire se construit correctement

  • chaque utilisateur a sa propre conversation

  • l’agent IA répond toujours avec le bon contexte

Node 3 — Agent IA : le cerveau du workflow

Node agent IA

C’est ici que tout se joue.
Le Webhook a récupéré le message, le node Code l’a normalisé, et maintenant l’agent IA prend le relais.
C’est la seule partie du workflow où vous allez “donner une personnalité” à votre agent, définir son rôle et décider de ce qu’il doit faire.

Cet agent IA peut servir pour absolument tout :

  • répondre aux mails,

  • suivre des dossiers,

  • assister un artisan,

  • aider un coach,

  • qualifier des leads,

  • faire du tri,

  • analyser un texte,

  • accompagner un étudiant,

  • centraliser des informations…

Peu importe le métier : tout se joue dans la manière dont vous écrivez le prompt.

Les deux seules variables utilisées

Illustration du passage des variables message utilisateur et user ID du webhook vers l’agent IA.

Le workflow envoie uniquement deux informations au modèle IA :

Texte : {{ $json.message.text }}
User ID : {{ $json.message.chat.id }}

Elles sont créées dans le node Code juste avant.
Ce sont les deux briques essentielles, et on ne les modifie pas.

Texte
→ contient le message envoyé par l’utilisateur.

User ID
→ identifie la personne dans la mémoire de l’agent.

Pourquoi ne rien changer ?
Parce que ces deux variables permettent :

  • de retrouver la bonne conversation,

  • de charger la bonne mémoire,

  • d’éviter les mélanges entre utilisateurs,

  • de garder un fil cohérent.

L’agent fonctionne entièrement grâce à cette structure.

Comment fonctionne réellement ce node

Dès qu’il reçoit ces deux données, il :

  1. lit le message,

  2. récupère la mémoire associée à cet utilisateur,

  3. comprend l’intention,

  4. répond de manière simple et adaptée,

  5. continue la discussion de façon naturelle.

La logique métier, le style, le ton et le rôle de l’agent viennent du prompt.

Le prompt : l’endroit où tout se personnalise

Schéma simple montrant comment le prompt contrôle le comportement de l’agent IA.

Vous pouvez transformer cet agent pour n’importe quel besoin en ajustant quelques lignes.

Exemple : adapter l’agent pour différents métiers

1. Agent pour un artisan

Prompt :
« Tu analyses les demandes de travaux, tu repères les informations importantes, tu poses les bonnes questions et tu aides à organiser les échanges avec le client. »

Résultat :
L’agent comprend naturellement devis, surfaces, délais, matériaux, chantiers…

2. Agent pour un e-commerce

Prompt :
« Tu lis les messages clients, tu identifies le problème, tu poses les questions utiles et tu aides à gérer le SAV de façon claire et professionnelle. »

Résultat :
L’agent devient un assistant client capable de traiter commandes, retours, livraisons, suivis…

3. Agent IA personnel

Prompt :
« Tu m’aides à organiser mes idées, clarifier mes priorités et structurer ce que je veux faire, étape par étape. »

Résultat :
L’agent devient un assistant simple pour organiser sa journée, ses projets et ses tâches.

4. Agent pour un service commercial

Prompt :
« Tu qualifies les prospects, tu poses des questions simples et pertinentes, et tu identifies leur besoin réel sans jamais forcer la discussion. »

Résultat :
L’agent comprend le contexte, le budget, l’urgence, et suit les prospects naturellement.

5. Agent pour un service administratif

Prompt :
« Tu aides à comprendre les demandes, organiser les informations, suivre les documents et poser les questions nécessaires pour avancer. »

Résultat :
L’agent devient un support administratif précis et clair.

La mémoire : comment elle fonctionne

Illustration de la mémoire conversationnelle qui permet à l’agent IA de suivre l’utilisateur et garder le contexte

La mémoire se base entièrement sur le User ID.

À chaque message, l’agent peut retrouver :

  • ce que l’utilisateur a dit avant,

  • ce qu’il fait,

  • ses outils,

  • ses besoins,

  • ses priorités,

  • son contexte.

Le node Agent IA récupère automatiquement la bonne mémoire
grâce à la variable :

{{ $json.message.chat.id }}

Pas de configuration complexe :
→ si un utilisateur revient, il retrouve sa discussion exactement là où elle était.

Pourquoi j’utilise Grok 4.1

Image pour montrer le choix du LLM que j'ai choisis pour créer un agent IA

Grok 4.1 est utilisé dans ce workflow pour trois raisons :

  • il est rapide,

  • il comprend bien les contextes métier,

  • il coûte beaucoup moins cher que les modèles haut de gamme.

Pour un agent qui échange souvent, c’est un très bon compromis.
Vous pouvez le remplacer par GPT, Claude ou Gemini selon votre préference.

Node 4 – Le Code : on a terminé le plus technique

Capture d’écran du Node 4 dans n8n montrant le code qui nettoie la réponse de l’agent IA et met à jour la mémoire utilisateur via user_id.

Si vous êtes arrivé là, vous avez passé la partie la plus “technique” du workflow.
Ce node sert juste à nettoyer la réponse de l’agent IA et à mettre à jour la mémoire de l’utilisateur.

À quoi il sert ?

Trois choses, et pas plus :

  1. récupérer proprement le message envoyé par l’utilisateur

  2. éviter que le workflow casse si l’IA envoie du JSON ou du Markdown

  3. garder une mémoire par utilisateur grâce à son user_id

Vous n’avez rien à modifier ici.

Ce qu’il faut retenir

Votre agent IA tourne uniquement avec deux variables :

  • message_utilisateur

  • user_id

Le code organise ça proprement, et met en mémoire le secteur, le rôle, ou tout ce que l’utilisateur a déjà partagé.

A lire aussi : Comment l'IA transforme la gestion du support client des PME en 2025

Pourquoi c’est important ?

Parce que grâce à ce node, votre agent IA peut suivre chaque utilisateur comme si c’était une vraie conversation continue.
Pas besoin de base de données ou d’outil externe : tout est stocké ici automatiquement.

Node 5 — Respond to Webhook

Interface du node Respond to Webhook dans n8n montrant la configuration qui renvoie la réponse finale de l’agent IA vers le site, en utilisant le même webhook que le node d’entrée.

Ce dernier node réutilise exactement le même webhook que celui du premier node.
La différence est simple :

  • Le premier webhook sert à recevoir le message de l’utilisateur.

  • Celui-ci sert à renvoyer la réponse finale de l’agent IA vers votre interface.

Les deux travaillent ensemble, chacun dans son rôle.

Dans ce node, on renvoie uniquement le texte propre déjà préparé par le node “Code” :

{{ $json.message_utilisateur }}

C’est volontaire :
on renvoie seulement le message final, sans mémoire, sans structure interne, sans informations techniques.
Juste la réponse que l’utilisateur doit voir.

Ce node clôture toute la boucle :
votre site envoie un message → n8n traite → l’agent IA répond → ce node renvoie la réponse directement à votre interface.
C’est lui qui permet à votre agent IA d’apparaître “en temps réel” sur votre page Gemini 3.0.

Il n’y a rien à configurer ici.
La seule règle : utiliser exactement le même webhook que dans le premier node.

Et dernière étape avant de continuer : activez votre workflow.
En haut de l’écran, cliquez sur le bouton “Inactive” pour qu’il passe en “Active”.
Sans ça, votre agent IA ne recevra rien.

Image pour montrer comment activer sur workflow sur n8n

Votre workflow est maintenant prêt.

Etape 2 : Créer votre interface avec Gemini 3.0

Maintenant que le workflow n8n est prêt, on peut passer à l’interface.
Le but est d’avoir une petite page web qui envoie les messages à votre webhook et affiche la réponse de l’agent IA.

Passer Gemini en mode Canvas

Interface construite dans Gemini Canvas pour créer un mini-site connecté à un webhook n8n

On démarre directement dans Canvas.
C’est le mode où Gemini comprend qu’il doit créer :

  • un vrai fichier HTML

  • avec du JavaScript intégré

  • une structure propre

  • aucune partie backend inventée

  • et surtout : il ne doit jamais toucher au fetch() qui envoie les messages à votre webhook

Canvas évite 90 % des erreurs : pas de JSON mélangé dans l’interface, pas de code supprimé, pas de confusion.
Vous lui demandez un mini-site connecté à n8n, il construit exactement ça.

Le premier prompt à envoyer à Gemini Canvas (les paramètres obligatoires)

Prompt Gemini Canvas définissant les règles techniques pour créer une interface connectée à n8n

C’est le prompt de base.
Vous devez l’envoyer avant toute création de design.

Il sert à une chose :
dire à Gemini ce qu’il doit respecter absolument pour que votre agent IA fonctionne.

Copiez-collez ce prompt dans Canvas tel quel, et remplacez juste l’URL de votre webhook production.

Prompt n°1 — Les règles obligatoires (à copier/coller)

Tu vas créer un fichier HTML complet qui contient un chat simple.
Quand l’utilisateur écrit un message, tu dois l’envoyer à mon webhook n8n.
Voici les règles que tu dois absolument respecter :

1. Tu génères un fichier HTML + CSS + JavaScript en un seul bloc.
2. Tu n’inclus jamais de JSON visible dans la page.
3. Tu utilises exactement ces deux champs dans le JSON envoyé au webhook :

message_utilisateur

user_id
4. Tu génères un user_id unique à chaque chargement de page.
5. Tu utilises mon webhook production sans le modifier :
METTRE LE LIEN DE VOTRE WHEBHOOK PRODUCTION
6. Tu utilises fetch() en POST avec Content-Type: application/json.
7. Tu récupères la réponse avec response.text() (pas response.json()).
8. Tu rends le markdown lisible (titres, listes, tableaux).
9. Tu n’inventes jamais de backend.
10. Tu ne modifies jamais les noms message_utilisateur et user_id.

Le design n’a pas d’importance pour l’instant : je veux d’abord un chat fonctionnel

Le deuxième prompt : modifier le design

Interface chat HTML personnalisée avec Gemini Canvas sans modifier les paramètres techniques

Une fois que le premier fichier fonctionne et que votre webhook reçoit les messages, vous pouvez demander à Gemini de changer le design.

Très important :
Vous devez prévenir Gemini de ne toucher à aucun paramètre technique.

Prompt n°2 — Modifier le design sans casser la connexion

Maintenant, améliore le design du fichier HTML que tu viens de créer.
Tu peux modifier : la mise en page, les couleurs, les animations, la disposition du chat, la typographie.

Mais tu dois absolument respecter ces règles :

ne modifie jamais l’URL du webhook

ne modifie jamais les noms message_utilisateur et user_id

ne supprime jamais le fetch()

ne supprime pas l’import de la librairie markdown

ne change rien dans la logique d’envoi ou de réception

Tu changes uniquement le style visuel, pas la structure technique

Jouer avec Gemini 3.0 (demander des modifications avancées)

Une fois que votre interface fonctionne, vous pouvez demander des améliorations bien plus techniques.
La seule règle à répéter systématiquement est :

« Tu ne modifies jamais les paramètres techniques : webhook, fetch(), user_id, JSON, mémoire, structure du chat.
Tu modifies seulement l’interface et les éléments visuels. »

Si cette phrase apparaît dans votre demande, tout restera parfaitement connecté à n8n.

Exemples d’améliorations techniques que vous pouvez demander à Gemini

1. Ajouter un système d’état avancé pour chaque message

(messages “en attente”, “envoyé”, “reçu”, “traitement IA”…)

Demande à Gemini :
« Ajoute un statut sous chaque message :
– “Envoi…” pendant la saisie,
– “Envoyé” dès que le fetch() part,
– “Traitement de l’agent…” pendant l’attente,
– “Reçu” quand la réponse s’affiche.
Ne touche jamais au webhook, au fetch(), ni au user_id. »

Ce que ça donne :
Une interface professionnelle proche des messageries modernes.

2. Ajouter une vraie timeline technique dans une colonne latérale

(journal des actions + résumé des échanges)

Demande :
« Ajoute une colonne latérale qui affiche :
– l’heure de chaque message,
– un résumé automatique de la conversation,
– les mots-clés détectés.
Tu changes uniquement l’interface, pas le code technique. »

Ce que ça donne :
Une vision chronologique, utile pour projets, SAV, BTP, immobilier.

3. Ajouter un espace “Documents générés” connecté au chat

(utile si votre workflow génère des PDF ou rapports)

Demande :
« Ajoute une zone à droite où les documents générés seront listés automatiquement : PDF, images, liens.
Tu modifies seulement l’interface, jamais la logique fetch(), webhook ou JSON. »

Ce que ça donne :
Un agent IA capable d’afficher des livrables créés par n8n.

4. Ajouter un mode plein écran avec animation fluide

Demande :
« Ajoute un bouton pour passer le chat en plein écran, avec une transition fluide.
Ne modifie aucun paramètre technique. »

Ce que ça donne :
Un affichage immersif parfait pour de longues conversations.

5. Ajouter des raccourcis dynamiques basés sur la conversation

Demande :
« Ajoute une barre de raccourcis en bas qui s’adapte selon le dernier message :
exemple : Résumer / Analyser / Clarifier / Reformuler.
Tu modifies uniquement l’UI, jamais le fonctionnement technique. »

Ce que ça donne :
Un agent IA plus intelligent, plus rapide à utiliser.

6. Ajouter une page d’accueil complète + un bouton “Démarrer l’agent IA”

Demande :
« Crée une page d’accueil avec un titre, un texte, une image,
et un bouton “Démarrer l’agent IA”.
Quand on clique, on affiche le chat existant.
Tu modifies uniquement la structure visuelle, jamais la logique technique. »

Ce que ça donne :
Un vrai site web avec une “porte d’entrée” avant le chatbot.

Règle à répéter dans chaque demande à Gemini

« Tu modifies uniquement le design.
Tu ne touches jamais aux paramètres techniques : webhook, fetch(), user_id, JSON, mémoire, structure du chat. »

Avec cette phrase, Gemini peut aller très loin sans jamais casser la connexion avec votre workflow n8n.

👉 Si vous souhaitez créer des agents IA connectés à vos outils (CRM, emails, documents, Airtable, Notion, n8n…) et aller plus loin que ce guide, notre agence Vision IA développe des agents IA sur-mesure adaptés à chaque métier.

Étape 3 Publier votre agent IA gratuitement

Maintenant que tout fonctionne :

  • votre workflow n8n est en place

  • votre interface HTML fonctionne

  • votre agent IA répond correctement

  • markdown OK

  • user_id OK

  • webhook OK

Il reste une dernière étape : publier votre agent IA pour avoir une vraie URL.

On va utiliser Netlify (gratuit, rapide, aucun code).

Préparer votre fichier index.html

Dans Gemini, cliquez en haut à droite sur “Copier le code”.

Ouvrez le bloc-note :

  • Sur Windows → Notepad

  • Sur Mac → TextEdit (en mode texte brut)

  • Collez le code.

  • Cliquez sur “Enregistrer sous…”

  • Nommez le fichier :
    index.html

Créer votre dossier

  • Créez un dossier sur votre ordinateur.

  • Nommez-le :
    index.html

  • Déposez votre fichier index.html à l’intérieur du dossier.

Envoyer sur Netlify

  • Faites glisser votre dossier index.html

  • Netlify génère automatiquement une URL.

  • Cliquez sur l’URL : votre agent IA est en ligne.

Le petit mot de la fin

Créer votre agent IA n’a rien de compliqué une fois que tout est bien structuré.
Vous avez maintenant les bonnes bases pour construire un assistant qui comprend votre activité, vous fait gagner du temps et vous aide chaque jour.

Et si un jour vous voulez aller plus loin connecter vos outils, automatiser vos process ou créer un agent plus avancé vous savez où nous trouver. Vision IA est là pour vous accompagner quand vous en aurez besoin.

https://www.linkedin.com/in/baptiste-fort-46873524b/
Dev Lowcode
Avatar - Subscription X Framer Template | Brix Templates

Passionné d'automatisation et d'IA, j'ai fondé Vision IA pour aider les entreprises à gagner du temps dans leurs processus

Abonnez-vous à

notre

newsletter

Chaque semaine : 2 articles, 1 outil IA, et des conseils faciles à appliquer.

Icone pour illuster la newsletter de l'agence Vision IA

Abonnez-vous à

notre

newsletter

Chaque semaine : 2 articles, 1 outil IA, et des conseils faciles à appliquer.

Icone pour illuster la newsletter de l'agence Vision IA

Un agent IA peut vraiment changer votre quotidien. Il répond pour vous, trie les informations, organise vos idées et vous fait gagner du temps dès les premières minutes.

Quel que soit votre domaine, il peut vous aider. E-commerce, immobilier, BTP, services, coaching… dès qu’il y a des tâches répétitives ou des messages à gérer, il devient un vrai soutien.

Le but n’est pas de créer un outil complexe. On veut juste un assistant clair, qui comprend votre activité et réagit comme quelqu’un qui connaît votre travail.

Avec la bonne structure, c’est beaucoup plus simple que ça en a l’air. Un webhook, un agent IA, une mémoire bien configurée, et vous pouvez déjà automatiser une partie de votre charge mentale.

Dans cet article, vous allez voir comment construire votre agent IA à vous. Celui qui parle comme vous, comprend votre métier et vous aide vraiment au quotidien.

L’objectif est que ce soit simple à suivre. À la fin, vous saurez créer votre propre agent IA adapté à votre entreprise, rapidement, peu importe votre secteur.

L’organisation pour créer votre agent IA

Avant de commencer, on pose un cadre simple.
Juste pour que tout soit clair et que vous sachiez exactement où vous allez.

Voici comment on va avancer ensemble :

Étape

Description

1. Importer le workflow n8n (10min)

On charge le workflow, et je vous montre à quoi sert chaque node et comment tout se connecte.

2. Créer votre interface avec Gemini 3.0 (20 min)

On construit votre mini-site ou votre chat, avec quelques règles simples pour que tout fonctionne parfaitement.

3. Publier votre agent IA en ligne (5min)

Vous obtenez votre propre URL pour utiliser votre agent, le partager ou l’intégrer à vos outils.

Etape 1 importer le workflow n8n

Vous pouvez importer le workflow directement depuis ce fichier :
👉 Télécharger le workflow AGENT IA

L’objectif de cette étape :
comprendre comment tout est structuré, et comment l’adapter à votre activité sans toucher à toute la logique.

Une fois importé, vous verrez plusieurs nodes. On va les passer un par un.

Node 1 : Le Webhook — L’entrée de votre agent IA

Illustration du node 1 Le Webhook — L’entrée de l'agent IA

C’est la porte d’entrée du système.
À chaque fois qu’un utilisateur envoie un message depuis votre outil, c’est ce Webhook qui le reçoit.

Ce qu’il faut retenir

Dans ce node, vous voyez deux liens :

  • Test URL : uniquement pour tester dans n8n

  • Production URL : c’est ce lien qui sera utilisé sur votre site

Pour créer votre agent IA, on ne garde que la Production URL. C’est elle qui permettra à votre mini-site, généré ensuite avec Gemini 3.0, d’envoyer les messages directement dans votre workflow.

Le champ “Path”

Le champ “Path” correspond simplement au nom du Webhook.
Vous pouvez le laisser tel quel ou le renommer pour quelque chose de plus clair.

Exemple :
AGENTIAhttps://votren8n.com/webhook/AGENTIA

Changer le nom n’a aucune incidence technique, c’est juste pour être organisé.

Ce que vous allez en faire

Dans l’étape suivante, votre interface Gemini 3.0 aura besoin de cette URL pour se connecter à votre agent IA.
Vous la collerez dans votre code à l’endroit prévu, et votre site sera directement relié à votre workflow.

Node 2 — Code : formatage du message utilisateur

Image pour montrer le Node 2 — Code : formatage du message utilisateur

Ce node sert uniquement à mettre les données reçues depuis votre site dans un format propre, que le reste du workflow pourra comprendre.
Le Webhook envoie les informations “brutes”, et ce node les transforme en quelque chose d’organisé.

Pourquoi il est important

Votre agent IA travaille toujours avec une structure précise :

  • un message

  • un identifiant utilisateur (pour la mémoire)

  • un contexte de chat

Ce node prépare ces éléments pour qu’ils soient toujours cohérents, peu importe d’où vient le message.

Ce qu’il fait exactement

Il récupère deux choses envoyées par votre site :

  • message_utilisateur

  • user_id

Puis il renvoie un objet clair comme ceci :

  • message.text → le texte envoyé

  • message.from.id → l’ID de l’utilisateur

  • chat.id → le même ID (pour suivre la conversation)

L’objectif : permettre à l’IA de savoir qui parle, ce qu’il dit, et dans quelle conversation on se trouve.

À quoi ça sert pour votre agent IA

Grâce à ce node :

  • la mémoire se construit correctement

  • chaque utilisateur a sa propre conversation

  • l’agent IA répond toujours avec le bon contexte

Node 3 — Agent IA : le cerveau du workflow

Node agent IA

C’est ici que tout se joue.
Le Webhook a récupéré le message, le node Code l’a normalisé, et maintenant l’agent IA prend le relais.
C’est la seule partie du workflow où vous allez “donner une personnalité” à votre agent, définir son rôle et décider de ce qu’il doit faire.

Cet agent IA peut servir pour absolument tout :

  • répondre aux mails,

  • suivre des dossiers,

  • assister un artisan,

  • aider un coach,

  • qualifier des leads,

  • faire du tri,

  • analyser un texte,

  • accompagner un étudiant,

  • centraliser des informations…

Peu importe le métier : tout se joue dans la manière dont vous écrivez le prompt.

Les deux seules variables utilisées

Illustration du passage des variables message utilisateur et user ID du webhook vers l’agent IA.

Le workflow envoie uniquement deux informations au modèle IA :

Texte : {{ $json.message.text }}
User ID : {{ $json.message.chat.id }}

Elles sont créées dans le node Code juste avant.
Ce sont les deux briques essentielles, et on ne les modifie pas.

Texte
→ contient le message envoyé par l’utilisateur.

User ID
→ identifie la personne dans la mémoire de l’agent.

Pourquoi ne rien changer ?
Parce que ces deux variables permettent :

  • de retrouver la bonne conversation,

  • de charger la bonne mémoire,

  • d’éviter les mélanges entre utilisateurs,

  • de garder un fil cohérent.

L’agent fonctionne entièrement grâce à cette structure.

Comment fonctionne réellement ce node

Dès qu’il reçoit ces deux données, il :

  1. lit le message,

  2. récupère la mémoire associée à cet utilisateur,

  3. comprend l’intention,

  4. répond de manière simple et adaptée,

  5. continue la discussion de façon naturelle.

La logique métier, le style, le ton et le rôle de l’agent viennent du prompt.

Le prompt : l’endroit où tout se personnalise

Schéma simple montrant comment le prompt contrôle le comportement de l’agent IA.

Vous pouvez transformer cet agent pour n’importe quel besoin en ajustant quelques lignes.

Exemple : adapter l’agent pour différents métiers

1. Agent pour un artisan

Prompt :
« Tu analyses les demandes de travaux, tu repères les informations importantes, tu poses les bonnes questions et tu aides à organiser les échanges avec le client. »

Résultat :
L’agent comprend naturellement devis, surfaces, délais, matériaux, chantiers…

2. Agent pour un e-commerce

Prompt :
« Tu lis les messages clients, tu identifies le problème, tu poses les questions utiles et tu aides à gérer le SAV de façon claire et professionnelle. »

Résultat :
L’agent devient un assistant client capable de traiter commandes, retours, livraisons, suivis…

3. Agent IA personnel

Prompt :
« Tu m’aides à organiser mes idées, clarifier mes priorités et structurer ce que je veux faire, étape par étape. »

Résultat :
L’agent devient un assistant simple pour organiser sa journée, ses projets et ses tâches.

4. Agent pour un service commercial

Prompt :
« Tu qualifies les prospects, tu poses des questions simples et pertinentes, et tu identifies leur besoin réel sans jamais forcer la discussion. »

Résultat :
L’agent comprend le contexte, le budget, l’urgence, et suit les prospects naturellement.

5. Agent pour un service administratif

Prompt :
« Tu aides à comprendre les demandes, organiser les informations, suivre les documents et poser les questions nécessaires pour avancer. »

Résultat :
L’agent devient un support administratif précis et clair.

La mémoire : comment elle fonctionne

Illustration de la mémoire conversationnelle qui permet à l’agent IA de suivre l’utilisateur et garder le contexte

La mémoire se base entièrement sur le User ID.

À chaque message, l’agent peut retrouver :

  • ce que l’utilisateur a dit avant,

  • ce qu’il fait,

  • ses outils,

  • ses besoins,

  • ses priorités,

  • son contexte.

Le node Agent IA récupère automatiquement la bonne mémoire
grâce à la variable :

{{ $json.message.chat.id }}

Pas de configuration complexe :
→ si un utilisateur revient, il retrouve sa discussion exactement là où elle était.

Pourquoi j’utilise Grok 4.1

Image pour montrer le choix du LLM que j'ai choisis pour créer un agent IA

Grok 4.1 est utilisé dans ce workflow pour trois raisons :

  • il est rapide,

  • il comprend bien les contextes métier,

  • il coûte beaucoup moins cher que les modèles haut de gamme.

Pour un agent qui échange souvent, c’est un très bon compromis.
Vous pouvez le remplacer par GPT, Claude ou Gemini selon votre préference.

Node 4 – Le Code : on a terminé le plus technique

Capture d’écran du Node 4 dans n8n montrant le code qui nettoie la réponse de l’agent IA et met à jour la mémoire utilisateur via user_id.

Si vous êtes arrivé là, vous avez passé la partie la plus “technique” du workflow.
Ce node sert juste à nettoyer la réponse de l’agent IA et à mettre à jour la mémoire de l’utilisateur.

À quoi il sert ?

Trois choses, et pas plus :

  1. récupérer proprement le message envoyé par l’utilisateur

  2. éviter que le workflow casse si l’IA envoie du JSON ou du Markdown

  3. garder une mémoire par utilisateur grâce à son user_id

Vous n’avez rien à modifier ici.

Ce qu’il faut retenir

Votre agent IA tourne uniquement avec deux variables :

  • message_utilisateur

  • user_id

Le code organise ça proprement, et met en mémoire le secteur, le rôle, ou tout ce que l’utilisateur a déjà partagé.

A lire aussi : Comment l'IA transforme la gestion du support client des PME en 2025

Pourquoi c’est important ?

Parce que grâce à ce node, votre agent IA peut suivre chaque utilisateur comme si c’était une vraie conversation continue.
Pas besoin de base de données ou d’outil externe : tout est stocké ici automatiquement.

Node 5 — Respond to Webhook

Interface du node Respond to Webhook dans n8n montrant la configuration qui renvoie la réponse finale de l’agent IA vers le site, en utilisant le même webhook que le node d’entrée.

Ce dernier node réutilise exactement le même webhook que celui du premier node.
La différence est simple :

  • Le premier webhook sert à recevoir le message de l’utilisateur.

  • Celui-ci sert à renvoyer la réponse finale de l’agent IA vers votre interface.

Les deux travaillent ensemble, chacun dans son rôle.

Dans ce node, on renvoie uniquement le texte propre déjà préparé par le node “Code” :

{{ $json.message_utilisateur }}

C’est volontaire :
on renvoie seulement le message final, sans mémoire, sans structure interne, sans informations techniques.
Juste la réponse que l’utilisateur doit voir.

Ce node clôture toute la boucle :
votre site envoie un message → n8n traite → l’agent IA répond → ce node renvoie la réponse directement à votre interface.
C’est lui qui permet à votre agent IA d’apparaître “en temps réel” sur votre page Gemini 3.0.

Il n’y a rien à configurer ici.
La seule règle : utiliser exactement le même webhook que dans le premier node.

Et dernière étape avant de continuer : activez votre workflow.
En haut de l’écran, cliquez sur le bouton “Inactive” pour qu’il passe en “Active”.
Sans ça, votre agent IA ne recevra rien.

Image pour montrer comment activer sur workflow sur n8n

Votre workflow est maintenant prêt.

Etape 2 : Créer votre interface avec Gemini 3.0

Maintenant que le workflow n8n est prêt, on peut passer à l’interface.
Le but est d’avoir une petite page web qui envoie les messages à votre webhook et affiche la réponse de l’agent IA.

Passer Gemini en mode Canvas

Interface construite dans Gemini Canvas pour créer un mini-site connecté à un webhook n8n

On démarre directement dans Canvas.
C’est le mode où Gemini comprend qu’il doit créer :

  • un vrai fichier HTML

  • avec du JavaScript intégré

  • une structure propre

  • aucune partie backend inventée

  • et surtout : il ne doit jamais toucher au fetch() qui envoie les messages à votre webhook

Canvas évite 90 % des erreurs : pas de JSON mélangé dans l’interface, pas de code supprimé, pas de confusion.
Vous lui demandez un mini-site connecté à n8n, il construit exactement ça.

Le premier prompt à envoyer à Gemini Canvas (les paramètres obligatoires)

Prompt Gemini Canvas définissant les règles techniques pour créer une interface connectée à n8n

C’est le prompt de base.
Vous devez l’envoyer avant toute création de design.

Il sert à une chose :
dire à Gemini ce qu’il doit respecter absolument pour que votre agent IA fonctionne.

Copiez-collez ce prompt dans Canvas tel quel, et remplacez juste l’URL de votre webhook production.

Prompt n°1 — Les règles obligatoires (à copier/coller)

Tu vas créer un fichier HTML complet qui contient un chat simple.
Quand l’utilisateur écrit un message, tu dois l’envoyer à mon webhook n8n.
Voici les règles que tu dois absolument respecter :

1. Tu génères un fichier HTML + CSS + JavaScript en un seul bloc.
2. Tu n’inclus jamais de JSON visible dans la page.
3. Tu utilises exactement ces deux champs dans le JSON envoyé au webhook :

message_utilisateur

user_id
4. Tu génères un user_id unique à chaque chargement de page.
5. Tu utilises mon webhook production sans le modifier :
METTRE LE LIEN DE VOTRE WHEBHOOK PRODUCTION
6. Tu utilises fetch() en POST avec Content-Type: application/json.
7. Tu récupères la réponse avec response.text() (pas response.json()).
8. Tu rends le markdown lisible (titres, listes, tableaux).
9. Tu n’inventes jamais de backend.
10. Tu ne modifies jamais les noms message_utilisateur et user_id.

Le design n’a pas d’importance pour l’instant : je veux d’abord un chat fonctionnel

Le deuxième prompt : modifier le design

Interface chat HTML personnalisée avec Gemini Canvas sans modifier les paramètres techniques

Une fois que le premier fichier fonctionne et que votre webhook reçoit les messages, vous pouvez demander à Gemini de changer le design.

Très important :
Vous devez prévenir Gemini de ne toucher à aucun paramètre technique.

Prompt n°2 — Modifier le design sans casser la connexion

Maintenant, améliore le design du fichier HTML que tu viens de créer.
Tu peux modifier : la mise en page, les couleurs, les animations, la disposition du chat, la typographie.

Mais tu dois absolument respecter ces règles :

ne modifie jamais l’URL du webhook

ne modifie jamais les noms message_utilisateur et user_id

ne supprime jamais le fetch()

ne supprime pas l’import de la librairie markdown

ne change rien dans la logique d’envoi ou de réception

Tu changes uniquement le style visuel, pas la structure technique

Jouer avec Gemini 3.0 (demander des modifications avancées)

Une fois que votre interface fonctionne, vous pouvez demander des améliorations bien plus techniques.
La seule règle à répéter systématiquement est :

« Tu ne modifies jamais les paramètres techniques : webhook, fetch(), user_id, JSON, mémoire, structure du chat.
Tu modifies seulement l’interface et les éléments visuels. »

Si cette phrase apparaît dans votre demande, tout restera parfaitement connecté à n8n.

Exemples d’améliorations techniques que vous pouvez demander à Gemini

1. Ajouter un système d’état avancé pour chaque message

(messages “en attente”, “envoyé”, “reçu”, “traitement IA”…)

Demande à Gemini :
« Ajoute un statut sous chaque message :
– “Envoi…” pendant la saisie,
– “Envoyé” dès que le fetch() part,
– “Traitement de l’agent…” pendant l’attente,
– “Reçu” quand la réponse s’affiche.
Ne touche jamais au webhook, au fetch(), ni au user_id. »

Ce que ça donne :
Une interface professionnelle proche des messageries modernes.

2. Ajouter une vraie timeline technique dans une colonne latérale

(journal des actions + résumé des échanges)

Demande :
« Ajoute une colonne latérale qui affiche :
– l’heure de chaque message,
– un résumé automatique de la conversation,
– les mots-clés détectés.
Tu changes uniquement l’interface, pas le code technique. »

Ce que ça donne :
Une vision chronologique, utile pour projets, SAV, BTP, immobilier.

3. Ajouter un espace “Documents générés” connecté au chat

(utile si votre workflow génère des PDF ou rapports)

Demande :
« Ajoute une zone à droite où les documents générés seront listés automatiquement : PDF, images, liens.
Tu modifies seulement l’interface, jamais la logique fetch(), webhook ou JSON. »

Ce que ça donne :
Un agent IA capable d’afficher des livrables créés par n8n.

4. Ajouter un mode plein écran avec animation fluide

Demande :
« Ajoute un bouton pour passer le chat en plein écran, avec une transition fluide.
Ne modifie aucun paramètre technique. »

Ce que ça donne :
Un affichage immersif parfait pour de longues conversations.

5. Ajouter des raccourcis dynamiques basés sur la conversation

Demande :
« Ajoute une barre de raccourcis en bas qui s’adapte selon le dernier message :
exemple : Résumer / Analyser / Clarifier / Reformuler.
Tu modifies uniquement l’UI, jamais le fonctionnement technique. »

Ce que ça donne :
Un agent IA plus intelligent, plus rapide à utiliser.

6. Ajouter une page d’accueil complète + un bouton “Démarrer l’agent IA”

Demande :
« Crée une page d’accueil avec un titre, un texte, une image,
et un bouton “Démarrer l’agent IA”.
Quand on clique, on affiche le chat existant.
Tu modifies uniquement la structure visuelle, jamais la logique technique. »

Ce que ça donne :
Un vrai site web avec une “porte d’entrée” avant le chatbot.

Règle à répéter dans chaque demande à Gemini

« Tu modifies uniquement le design.
Tu ne touches jamais aux paramètres techniques : webhook, fetch(), user_id, JSON, mémoire, structure du chat. »

Avec cette phrase, Gemini peut aller très loin sans jamais casser la connexion avec votre workflow n8n.

👉 Si vous souhaitez créer des agents IA connectés à vos outils (CRM, emails, documents, Airtable, Notion, n8n…) et aller plus loin que ce guide, notre agence Vision IA développe des agents IA sur-mesure adaptés à chaque métier.

Étape 3 Publier votre agent IA gratuitement

Maintenant que tout fonctionne :

  • votre workflow n8n est en place

  • votre interface HTML fonctionne

  • votre agent IA répond correctement

  • markdown OK

  • user_id OK

  • webhook OK

Il reste une dernière étape : publier votre agent IA pour avoir une vraie URL.

On va utiliser Netlify (gratuit, rapide, aucun code).

Préparer votre fichier index.html

Dans Gemini, cliquez en haut à droite sur “Copier le code”.

Ouvrez le bloc-note :

  • Sur Windows → Notepad

  • Sur Mac → TextEdit (en mode texte brut)

  • Collez le code.

  • Cliquez sur “Enregistrer sous…”

  • Nommez le fichier :
    index.html

Créer votre dossier

  • Créez un dossier sur votre ordinateur.

  • Nommez-le :
    index.html

  • Déposez votre fichier index.html à l’intérieur du dossier.

Envoyer sur Netlify

  • Faites glisser votre dossier index.html

  • Netlify génère automatiquement une URL.

  • Cliquez sur l’URL : votre agent IA est en ligne.

Le petit mot de la fin

Créer votre agent IA n’a rien de compliqué une fois que tout est bien structuré.
Vous avez maintenant les bonnes bases pour construire un assistant qui comprend votre activité, vous fait gagner du temps et vous aide chaque jour.

Et si un jour vous voulez aller plus loin connecter vos outils, automatiser vos process ou créer un agent plus avancé vous savez où nous trouver. Vision IA est là pour vous accompagner quand vous en aurez besoin.

https://www.linkedin.com/in/baptiste-fort-46873524b/
Dev Lowcode
Avatar - Subscription X Framer Template | Brix Templates

Passionné d'automatisation et d'IA, j'ai fondé Vision IA pour aider les entreprises à gagner du temps dans leurs processus

Un agent IA peut vraiment changer votre quotidien. Il répond pour vous, trie les informations, organise vos idées et vous fait gagner du temps dès les premières minutes.

Quel que soit votre domaine, il peut vous aider. E-commerce, immobilier, BTP, services, coaching… dès qu’il y a des tâches répétitives ou des messages à gérer, il devient un vrai soutien.

Le but n’est pas de créer un outil complexe. On veut juste un assistant clair, qui comprend votre activité et réagit comme quelqu’un qui connaît votre travail.

Avec la bonne structure, c’est beaucoup plus simple que ça en a l’air. Un webhook, un agent IA, une mémoire bien configurée, et vous pouvez déjà automatiser une partie de votre charge mentale.

Dans cet article, vous allez voir comment construire votre agent IA à vous. Celui qui parle comme vous, comprend votre métier et vous aide vraiment au quotidien.

L’objectif est que ce soit simple à suivre. À la fin, vous saurez créer votre propre agent IA adapté à votre entreprise, rapidement, peu importe votre secteur.

L’organisation pour créer votre agent IA

Avant de commencer, on pose un cadre simple.
Juste pour que tout soit clair et que vous sachiez exactement où vous allez.

Voici comment on va avancer ensemble :

Étape

Description

1. Importer le workflow n8n (10min)

On charge le workflow, et je vous montre à quoi sert chaque node et comment tout se connecte.

2. Créer votre interface avec Gemini 3.0 (20 min)

On construit votre mini-site ou votre chat, avec quelques règles simples pour que tout fonctionne parfaitement.

3. Publier votre agent IA en ligne (5min)

Vous obtenez votre propre URL pour utiliser votre agent, le partager ou l’intégrer à vos outils.

Etape 1 importer le workflow n8n

Vous pouvez importer le workflow directement depuis ce fichier :
👉 Télécharger le workflow AGENT IA

L’objectif de cette étape :
comprendre comment tout est structuré, et comment l’adapter à votre activité sans toucher à toute la logique.

Une fois importé, vous verrez plusieurs nodes. On va les passer un par un.

Node 1 : Le Webhook — L’entrée de votre agent IA

Illustration du node 1 Le Webhook — L’entrée de l'agent IA

C’est la porte d’entrée du système.
À chaque fois qu’un utilisateur envoie un message depuis votre outil, c’est ce Webhook qui le reçoit.

Ce qu’il faut retenir

Dans ce node, vous voyez deux liens :

  • Test URL : uniquement pour tester dans n8n

  • Production URL : c’est ce lien qui sera utilisé sur votre site

Pour créer votre agent IA, on ne garde que la Production URL. C’est elle qui permettra à votre mini-site, généré ensuite avec Gemini 3.0, d’envoyer les messages directement dans votre workflow.

Le champ “Path”

Le champ “Path” correspond simplement au nom du Webhook.
Vous pouvez le laisser tel quel ou le renommer pour quelque chose de plus clair.

Exemple :
AGENTIAhttps://votren8n.com/webhook/AGENTIA

Changer le nom n’a aucune incidence technique, c’est juste pour être organisé.

Ce que vous allez en faire

Dans l’étape suivante, votre interface Gemini 3.0 aura besoin de cette URL pour se connecter à votre agent IA.
Vous la collerez dans votre code à l’endroit prévu, et votre site sera directement relié à votre workflow.

Node 2 — Code : formatage du message utilisateur

Image pour montrer le Node 2 — Code : formatage du message utilisateur

Ce node sert uniquement à mettre les données reçues depuis votre site dans un format propre, que le reste du workflow pourra comprendre.
Le Webhook envoie les informations “brutes”, et ce node les transforme en quelque chose d’organisé.

Pourquoi il est important

Votre agent IA travaille toujours avec une structure précise :

  • un message

  • un identifiant utilisateur (pour la mémoire)

  • un contexte de chat

Ce node prépare ces éléments pour qu’ils soient toujours cohérents, peu importe d’où vient le message.

Ce qu’il fait exactement

Il récupère deux choses envoyées par votre site :

  • message_utilisateur

  • user_id

Puis il renvoie un objet clair comme ceci :

  • message.text → le texte envoyé

  • message.from.id → l’ID de l’utilisateur

  • chat.id → le même ID (pour suivre la conversation)

L’objectif : permettre à l’IA de savoir qui parle, ce qu’il dit, et dans quelle conversation on se trouve.

À quoi ça sert pour votre agent IA

Grâce à ce node :

  • la mémoire se construit correctement

  • chaque utilisateur a sa propre conversation

  • l’agent IA répond toujours avec le bon contexte

Node 3 — Agent IA : le cerveau du workflow

Node agent IA

C’est ici que tout se joue.
Le Webhook a récupéré le message, le node Code l’a normalisé, et maintenant l’agent IA prend le relais.
C’est la seule partie du workflow où vous allez “donner une personnalité” à votre agent, définir son rôle et décider de ce qu’il doit faire.

Cet agent IA peut servir pour absolument tout :

  • répondre aux mails,

  • suivre des dossiers,

  • assister un artisan,

  • aider un coach,

  • qualifier des leads,

  • faire du tri,

  • analyser un texte,

  • accompagner un étudiant,

  • centraliser des informations…

Peu importe le métier : tout se joue dans la manière dont vous écrivez le prompt.

Les deux seules variables utilisées

Illustration du passage des variables message utilisateur et user ID du webhook vers l’agent IA.

Le workflow envoie uniquement deux informations au modèle IA :

Texte : {{ $json.message.text }}
User ID : {{ $json.message.chat.id }}

Elles sont créées dans le node Code juste avant.
Ce sont les deux briques essentielles, et on ne les modifie pas.

Texte
→ contient le message envoyé par l’utilisateur.

User ID
→ identifie la personne dans la mémoire de l’agent.

Pourquoi ne rien changer ?
Parce que ces deux variables permettent :

  • de retrouver la bonne conversation,

  • de charger la bonne mémoire,

  • d’éviter les mélanges entre utilisateurs,

  • de garder un fil cohérent.

L’agent fonctionne entièrement grâce à cette structure.

Comment fonctionne réellement ce node

Dès qu’il reçoit ces deux données, il :

  1. lit le message,

  2. récupère la mémoire associée à cet utilisateur,

  3. comprend l’intention,

  4. répond de manière simple et adaptée,

  5. continue la discussion de façon naturelle.

La logique métier, le style, le ton et le rôle de l’agent viennent du prompt.

Le prompt : l’endroit où tout se personnalise

Schéma simple montrant comment le prompt contrôle le comportement de l’agent IA.

Vous pouvez transformer cet agent pour n’importe quel besoin en ajustant quelques lignes.

Exemple : adapter l’agent pour différents métiers

1. Agent pour un artisan

Prompt :
« Tu analyses les demandes de travaux, tu repères les informations importantes, tu poses les bonnes questions et tu aides à organiser les échanges avec le client. »

Résultat :
L’agent comprend naturellement devis, surfaces, délais, matériaux, chantiers…

2. Agent pour un e-commerce

Prompt :
« Tu lis les messages clients, tu identifies le problème, tu poses les questions utiles et tu aides à gérer le SAV de façon claire et professionnelle. »

Résultat :
L’agent devient un assistant client capable de traiter commandes, retours, livraisons, suivis…

3. Agent IA personnel

Prompt :
« Tu m’aides à organiser mes idées, clarifier mes priorités et structurer ce que je veux faire, étape par étape. »

Résultat :
L’agent devient un assistant simple pour organiser sa journée, ses projets et ses tâches.

4. Agent pour un service commercial

Prompt :
« Tu qualifies les prospects, tu poses des questions simples et pertinentes, et tu identifies leur besoin réel sans jamais forcer la discussion. »

Résultat :
L’agent comprend le contexte, le budget, l’urgence, et suit les prospects naturellement.

5. Agent pour un service administratif

Prompt :
« Tu aides à comprendre les demandes, organiser les informations, suivre les documents et poser les questions nécessaires pour avancer. »

Résultat :
L’agent devient un support administratif précis et clair.

La mémoire : comment elle fonctionne

Illustration de la mémoire conversationnelle qui permet à l’agent IA de suivre l’utilisateur et garder le contexte

La mémoire se base entièrement sur le User ID.

À chaque message, l’agent peut retrouver :

  • ce que l’utilisateur a dit avant,

  • ce qu’il fait,

  • ses outils,

  • ses besoins,

  • ses priorités,

  • son contexte.

Le node Agent IA récupère automatiquement la bonne mémoire
grâce à la variable :

{{ $json.message.chat.id }}

Pas de configuration complexe :
→ si un utilisateur revient, il retrouve sa discussion exactement là où elle était.

Pourquoi j’utilise Grok 4.1

Image pour montrer le choix du LLM que j'ai choisis pour créer un agent IA

Grok 4.1 est utilisé dans ce workflow pour trois raisons :

  • il est rapide,

  • il comprend bien les contextes métier,

  • il coûte beaucoup moins cher que les modèles haut de gamme.

Pour un agent qui échange souvent, c’est un très bon compromis.
Vous pouvez le remplacer par GPT, Claude ou Gemini selon votre préference.

Node 4 – Le Code : on a terminé le plus technique

Capture d’écran du Node 4 dans n8n montrant le code qui nettoie la réponse de l’agent IA et met à jour la mémoire utilisateur via user_id.

Si vous êtes arrivé là, vous avez passé la partie la plus “technique” du workflow.
Ce node sert juste à nettoyer la réponse de l’agent IA et à mettre à jour la mémoire de l’utilisateur.

À quoi il sert ?

Trois choses, et pas plus :

  1. récupérer proprement le message envoyé par l’utilisateur

  2. éviter que le workflow casse si l’IA envoie du JSON ou du Markdown

  3. garder une mémoire par utilisateur grâce à son user_id

Vous n’avez rien à modifier ici.

Ce qu’il faut retenir

Votre agent IA tourne uniquement avec deux variables :

  • message_utilisateur

  • user_id

Le code organise ça proprement, et met en mémoire le secteur, le rôle, ou tout ce que l’utilisateur a déjà partagé.

A lire aussi : Comment l'IA transforme la gestion du support client des PME en 2025

Pourquoi c’est important ?

Parce que grâce à ce node, votre agent IA peut suivre chaque utilisateur comme si c’était une vraie conversation continue.
Pas besoin de base de données ou d’outil externe : tout est stocké ici automatiquement.

Node 5 — Respond to Webhook

Interface du node Respond to Webhook dans n8n montrant la configuration qui renvoie la réponse finale de l’agent IA vers le site, en utilisant le même webhook que le node d’entrée.

Ce dernier node réutilise exactement le même webhook que celui du premier node.
La différence est simple :

  • Le premier webhook sert à recevoir le message de l’utilisateur.

  • Celui-ci sert à renvoyer la réponse finale de l’agent IA vers votre interface.

Les deux travaillent ensemble, chacun dans son rôle.

Dans ce node, on renvoie uniquement le texte propre déjà préparé par le node “Code” :

{{ $json.message_utilisateur }}

C’est volontaire :
on renvoie seulement le message final, sans mémoire, sans structure interne, sans informations techniques.
Juste la réponse que l’utilisateur doit voir.

Ce node clôture toute la boucle :
votre site envoie un message → n8n traite → l’agent IA répond → ce node renvoie la réponse directement à votre interface.
C’est lui qui permet à votre agent IA d’apparaître “en temps réel” sur votre page Gemini 3.0.

Il n’y a rien à configurer ici.
La seule règle : utiliser exactement le même webhook que dans le premier node.

Et dernière étape avant de continuer : activez votre workflow.
En haut de l’écran, cliquez sur le bouton “Inactive” pour qu’il passe en “Active”.
Sans ça, votre agent IA ne recevra rien.

Image pour montrer comment activer sur workflow sur n8n

Votre workflow est maintenant prêt.

Etape 2 : Créer votre interface avec Gemini 3.0

Maintenant que le workflow n8n est prêt, on peut passer à l’interface.
Le but est d’avoir une petite page web qui envoie les messages à votre webhook et affiche la réponse de l’agent IA.

Passer Gemini en mode Canvas

Interface construite dans Gemini Canvas pour créer un mini-site connecté à un webhook n8n

On démarre directement dans Canvas.
C’est le mode où Gemini comprend qu’il doit créer :

  • un vrai fichier HTML

  • avec du JavaScript intégré

  • une structure propre

  • aucune partie backend inventée

  • et surtout : il ne doit jamais toucher au fetch() qui envoie les messages à votre webhook

Canvas évite 90 % des erreurs : pas de JSON mélangé dans l’interface, pas de code supprimé, pas de confusion.
Vous lui demandez un mini-site connecté à n8n, il construit exactement ça.

Le premier prompt à envoyer à Gemini Canvas (les paramètres obligatoires)

Prompt Gemini Canvas définissant les règles techniques pour créer une interface connectée à n8n

C’est le prompt de base.
Vous devez l’envoyer avant toute création de design.

Il sert à une chose :
dire à Gemini ce qu’il doit respecter absolument pour que votre agent IA fonctionne.

Copiez-collez ce prompt dans Canvas tel quel, et remplacez juste l’URL de votre webhook production.

Prompt n°1 — Les règles obligatoires (à copier/coller)

Tu vas créer un fichier HTML complet qui contient un chat simple.
Quand l’utilisateur écrit un message, tu dois l’envoyer à mon webhook n8n.
Voici les règles que tu dois absolument respecter :

1. Tu génères un fichier HTML + CSS + JavaScript en un seul bloc.
2. Tu n’inclus jamais de JSON visible dans la page.
3. Tu utilises exactement ces deux champs dans le JSON envoyé au webhook :

message_utilisateur

user_id
4. Tu génères un user_id unique à chaque chargement de page.
5. Tu utilises mon webhook production sans le modifier :
METTRE LE LIEN DE VOTRE WHEBHOOK PRODUCTION
6. Tu utilises fetch() en POST avec Content-Type: application/json.
7. Tu récupères la réponse avec response.text() (pas response.json()).
8. Tu rends le markdown lisible (titres, listes, tableaux).
9. Tu n’inventes jamais de backend.
10. Tu ne modifies jamais les noms message_utilisateur et user_id.

Le design n’a pas d’importance pour l’instant : je veux d’abord un chat fonctionnel

Le deuxième prompt : modifier le design

Interface chat HTML personnalisée avec Gemini Canvas sans modifier les paramètres techniques

Une fois que le premier fichier fonctionne et que votre webhook reçoit les messages, vous pouvez demander à Gemini de changer le design.

Très important :
Vous devez prévenir Gemini de ne toucher à aucun paramètre technique.

Prompt n°2 — Modifier le design sans casser la connexion

Maintenant, améliore le design du fichier HTML que tu viens de créer.
Tu peux modifier : la mise en page, les couleurs, les animations, la disposition du chat, la typographie.

Mais tu dois absolument respecter ces règles :

ne modifie jamais l’URL du webhook

ne modifie jamais les noms message_utilisateur et user_id

ne supprime jamais le fetch()

ne supprime pas l’import de la librairie markdown

ne change rien dans la logique d’envoi ou de réception

Tu changes uniquement le style visuel, pas la structure technique

Jouer avec Gemini 3.0 (demander des modifications avancées)

Une fois que votre interface fonctionne, vous pouvez demander des améliorations bien plus techniques.
La seule règle à répéter systématiquement est :

« Tu ne modifies jamais les paramètres techniques : webhook, fetch(), user_id, JSON, mémoire, structure du chat.
Tu modifies seulement l’interface et les éléments visuels. »

Si cette phrase apparaît dans votre demande, tout restera parfaitement connecté à n8n.

Exemples d’améliorations techniques que vous pouvez demander à Gemini

1. Ajouter un système d’état avancé pour chaque message

(messages “en attente”, “envoyé”, “reçu”, “traitement IA”…)

Demande à Gemini :
« Ajoute un statut sous chaque message :
– “Envoi…” pendant la saisie,
– “Envoyé” dès que le fetch() part,
– “Traitement de l’agent…” pendant l’attente,
– “Reçu” quand la réponse s’affiche.
Ne touche jamais au webhook, au fetch(), ni au user_id. »

Ce que ça donne :
Une interface professionnelle proche des messageries modernes.

2. Ajouter une vraie timeline technique dans une colonne latérale

(journal des actions + résumé des échanges)

Demande :
« Ajoute une colonne latérale qui affiche :
– l’heure de chaque message,
– un résumé automatique de la conversation,
– les mots-clés détectés.
Tu changes uniquement l’interface, pas le code technique. »

Ce que ça donne :
Une vision chronologique, utile pour projets, SAV, BTP, immobilier.

3. Ajouter un espace “Documents générés” connecté au chat

(utile si votre workflow génère des PDF ou rapports)

Demande :
« Ajoute une zone à droite où les documents générés seront listés automatiquement : PDF, images, liens.
Tu modifies seulement l’interface, jamais la logique fetch(), webhook ou JSON. »

Ce que ça donne :
Un agent IA capable d’afficher des livrables créés par n8n.

4. Ajouter un mode plein écran avec animation fluide

Demande :
« Ajoute un bouton pour passer le chat en plein écran, avec une transition fluide.
Ne modifie aucun paramètre technique. »

Ce que ça donne :
Un affichage immersif parfait pour de longues conversations.

5. Ajouter des raccourcis dynamiques basés sur la conversation

Demande :
« Ajoute une barre de raccourcis en bas qui s’adapte selon le dernier message :
exemple : Résumer / Analyser / Clarifier / Reformuler.
Tu modifies uniquement l’UI, jamais le fonctionnement technique. »

Ce que ça donne :
Un agent IA plus intelligent, plus rapide à utiliser.

6. Ajouter une page d’accueil complète + un bouton “Démarrer l’agent IA”

Demande :
« Crée une page d’accueil avec un titre, un texte, une image,
et un bouton “Démarrer l’agent IA”.
Quand on clique, on affiche le chat existant.
Tu modifies uniquement la structure visuelle, jamais la logique technique. »

Ce que ça donne :
Un vrai site web avec une “porte d’entrée” avant le chatbot.

Règle à répéter dans chaque demande à Gemini

« Tu modifies uniquement le design.
Tu ne touches jamais aux paramètres techniques : webhook, fetch(), user_id, JSON, mémoire, structure du chat. »

Avec cette phrase, Gemini peut aller très loin sans jamais casser la connexion avec votre workflow n8n.

👉 Si vous souhaitez créer des agents IA connectés à vos outils (CRM, emails, documents, Airtable, Notion, n8n…) et aller plus loin que ce guide, notre agence Vision IA développe des agents IA sur-mesure adaptés à chaque métier.

Étape 3 Publier votre agent IA gratuitement

Maintenant que tout fonctionne :

  • votre workflow n8n est en place

  • votre interface HTML fonctionne

  • votre agent IA répond correctement

  • markdown OK

  • user_id OK

  • webhook OK

Il reste une dernière étape : publier votre agent IA pour avoir une vraie URL.

On va utiliser Netlify (gratuit, rapide, aucun code).

Préparer votre fichier index.html

Dans Gemini, cliquez en haut à droite sur “Copier le code”.

Ouvrez le bloc-note :

  • Sur Windows → Notepad

  • Sur Mac → TextEdit (en mode texte brut)

  • Collez le code.

  • Cliquez sur “Enregistrer sous…”

  • Nommez le fichier :
    index.html

Créer votre dossier

  • Créez un dossier sur votre ordinateur.

  • Nommez-le :
    index.html

  • Déposez votre fichier index.html à l’intérieur du dossier.

Envoyer sur Netlify

  • Faites glisser votre dossier index.html

  • Netlify génère automatiquement une URL.

  • Cliquez sur l’URL : votre agent IA est en ligne.

Le petit mot de la fin

Créer votre agent IA n’a rien de compliqué une fois que tout est bien structuré.
Vous avez maintenant les bonnes bases pour construire un assistant qui comprend votre activité, vous fait gagner du temps et vous aide chaque jour.

Et si un jour vous voulez aller plus loin connecter vos outils, automatiser vos process ou créer un agent plus avancé vous savez où nous trouver. Vision IA est là pour vous accompagner quand vous en aurez besoin.

Dev Lowcode
Avatar - Subscription X Framer Template | Brix Templates

Passionné d'automatisation et d'IA, j'ai fondé Vision IA pour aider les entreprises à gagner du temps dans leurs processus

Abonnez-vous à

notre

newsletter

Chaque semaine : 2 articles, 1 outil IA, et des conseils faciles à appliquer.

Icone pour illuster la newsletter de l'agence Vision IA

Abonnez-vous à

notre

newsletter

Chaque semaine : 2 articles, 1 outil IA, et des conseils faciles à appliquer.

Icone pour illuster la newsletter de l'agence Vision IA

Abonnez-vous à

notre

newsletter

Chaque semaine : 2 articles, 1 outil IA, et des conseils faciles à appliquer.

Icone pour illuster la newsletter de l'agence Vision IA