Créez une Interface ChatGPT pour vos Agents N8N IA en QUELQUES MINUTES

Introduction

J’ai une offre à vous faire : si vous m’accordez seulement 15 à 20 minutes de votre temps, je vous aiderai à faire passer vos agents N8N au niveau supérieur, et ce, très facilement. Que veux-je dire par là ? Généralement, lorsque vous travaillez avec un agent IA dans un workflow N8N, cela ressemble à ceci : vous avez un déclencheur de chat au début de votre workflow qui vous donne ce bouton de chat en bas au milieu. C’est très pratique pour communiquer avec votre agent directement dans le créateur de workflow, mais c’est aussi très limité.

L’interface ne présente pas bien, et vous ne pouvez pas consulter les conversations passées si vous souhaitez en poursuivre une. Et lorsque vous rendez votre chat publiquement disponible via le déclencheur de chat, c’est encore pire : la page déployée est très basique, avec peu d’options de personnalisation, et vous ne pouvez toujours pas consulter les conversations passées comme vous le feriez avec ChatGPT.

Ne vous méprenez pas, j’adore absolument N8N. Pour moi, c’est le meilleur outil no-code pour créer des automatisations et des agents IA. Mais clairement, leur interface utilisateur pourrait être bien meilleure.

Ne serait-il pas agréable d’avoir, au lieu d’une interface basique, une UI pour nos agents qui ressemble à celle de ChatGPT ? Une interface complète de type ChatGPT pour communiquer avec nos agents N8N. Si cela vous semble intéressant, alors je suis votre génie, car dans cette vidéo, je vais vous montrer comment configurer tout cela avec des ressources téléchargeables pour que vous puissiez le faire en quelques minutes seulement.

Open Web UI : L’Interface ChatGPT pour vos Agents N8N

C’est le type d’interface que nous attendons toujours des fournisseurs de LLM comme OpenAI, Anthropic, ou DeepSeek. Maintenant, nous pouvons avoir exactement la même configuration pour nos propres agents, sans avoir à coder quoi que ce soit ni à créer une application personnalisée. Tout cela grâce à la puissance d’une plateforme open source incroyable appelée Open Web UI.

Open Web UI nous offre cette belle interface, avec de nombreuses fonctionnalités puissantes intégrées. Par exemple, nous pouvons utiliser la voix pour parler directement à notre agent N8N, et bien d’autres fonctionnalités que je n’ai pas le temps d’aborder dans cette vidéo.

Regardez ceci : je vais envoyer une invite standard comme « Construis-moi un jeu de serpent avec Python ». Cela peut sembler que nous utilisons simplement un LLM normal – l’interface ressemble à ChatGPT – mais en coulisses, elle se connecte à un agent IA que j’héberge directement dans N8N.

Nous pouvons même aller dans le workflow que j’ai ici, consulter les exécutions et voir cela se produire en temps réel. Voici celle qui vient de s’exécuter. Je clique sur l’agent et effectivement, la sortie que nous avons obtenue est le jeu de serpent. En revenant à notre interface, nous avons cette réponse de notre agent, et regardez comme c’est agréable : formatage Markdown complet pour Bash et Python, texte en surbrillance… Tout simplement magnifique !

Et nous avons l’historique des conversations. Je peux continuer la conversation ici, revenir aux anciennes conversations, comme celle où j’avais précédemment demandé de coder le jeu de serpent différemment, et poursuivre ces conversations. Il y a tellement de fonctionnalités que nous n’avons pas avec l’interface standard de N8N.

Plan d’Action pour l’Implémentation

Voici notre plan d’action :

1. Je vais vous montrer comment configurer Open Web UI pour vous-même (c’est un projet open source que vous pouvez télécharger gratuitement depuis GitHub)
2. Je vous montrerai comment importer le code personnalisé que j’ai créé pour vous, que vous pouvez intégrer à votre instance Open Web UI pour configurer l’intégration N8N (en utilisant une fonctionnalité d’Open Web UI appelée « functions »)
3. Enfin, je vais vous expliquer comment créer des agents IA dans N8N qui s’intègrent parfaitement avec tout ce que nous configurons ici

Il y a quelques considérations, des éléments que nous devons ajouter à nos workflows pour que cela fonctionne de manière optimale, notamment l’utilisation d’un LLM à deux endroits différents, même s’il s’agit d’un seul agent IA. Je vais tout couvrir – ce n’est vraiment pas si compliqué. C’est un workflow assez petit, et il y a un lien vers celui-ci dans la description de cette vidéo si vous souhaitez le télécharger comme point de départ pour créer vos propres agents qui peuvent se connecter facilement à Open Web UI.

Installation d’Open Web UI

Tout d’abord, nous devons installer Open Web UI. J’ai déjà expliqué ce que c’est : notre propre interface auto-hébergeable pour discuter avec nos propres LLM et agents IA. La beauté d’Open Web UI est que vous pouvez l’exécuter entièrement hors ligne sur votre ordinateur.

C’est un peu en dehors du cadre de cette vidéo, mais vous pouvez l’utiliser pour discuter avec vos LLM Ollama, vous pouvez utiliser N8N entièrement auto-hébergé et le connecter à Open Web UI, vous pouvez tout exécuter sur votre propre ordinateur.

Je mettrai un lien dans la description vers ce dépôt pour Open Web UI. Vous pouvez faire défiler vers le bas dans le README pour consulter les instructions d’installation. Il existe deux options différentes :

1. Installation avec Python : Si vous avez Python sur votre machine (c’est le seul prérequis), vous pouvez installer Open Web UI avec pip, puis exécuter la commande open-webui serve pour lancer l’application sur votre ordinateur. Vous pourrez ensuite y accéder dans votre navigateur avec cette URL : localhost:8080.

2. Installation avec Docker : C’est très facile à installer avec une seule commande. Il y a plusieurs options de commande en fonction de votre machine et de votre configuration. Je choisirais simplement la première si vous n’êtes pas sûr, sinon vous pouvez lire les différentes options et choisir celle qui vous convient.

C’est simple pour nous car ces différentes options dépendent de si vous utilisez Ollama ou Open Web UI. Nous avons un cas unique où nous allons nous connecter directement à un agent N8N, nous n’utilisons aucun de ces fournisseurs, donc la première commande est un bon choix par défaut.

Il y a une autre option que je veux mentionner rapidement : le package Local AI que j’ai beaucoup couvert sur ma chaîne. C’est ma collection de services IA locaux comme votre base de données, N8N auto-hébergé, Ollama et Open Web UI. Tous ces services sont regroupés pour que vous puissiez les installer facilement. J’inclurai un lien vers une vidéo où je donne des instructions pour les mettre en place, mais tout ce que je couvre dans cette vidéo peut être fait avec les services inclus dans le package Local AI. Honnêtement, c’est probablement le moyen le plus pratique de tout mettre en place depuis le début. Je mettrai également un lien vers ce package dans la description si vous voulez obtenir N8N et Open Web UI, ou simplement Open Web UI, via mon package Local AI, complètement gratuit et open source.

Configuration d’Open Web UI

Après avoir installé Open Web UI avec Python, Docker ou le package Local AI, vous pouvez accéder à l’interface dans votre navigateur. L’URL sera généralement localhost:3000 ou localhost:8080, selon la méthode d’installation.

Vous aurez cette interface après avoir créé votre compte administrateur local lors de la première configuration d’Open Web UI. Vous pourrez alors commencer à discuter avec vos LLM Ollama ou OpenAI, mais ce qui nous intéresse dans cette vidéo, c’est la connexion à nos agents N8N.

Il y a deux façons de le faire dans Open Web UI, toutes deux en configurant cette fonction personnalisée que j’ai créée pour l’intégration N8N. Je mettrai un lien vers cette fonction dans la description de cette vidéo – c’est notre ticket pour tout.

Je ne vais pas entrer dans les détails de tout ce code Python, mais sachez que je vous ai certainement épargné un gros mal de tête en créant tout cela, afin que l’intégration soit quelque chose que vous pouvez simplement connecter à votre Open Web UI en quelques minutes.

La première façon de le faire est d’aller à cette URL et de cliquer sur le bouton « Get » ici. Ensuite, vous tapez simplement votre URL actuelle pour Open Web UI, comme localhost:3000, puis vous cliquez sur « Import to Web UI ».

L’autre façon de l’installer, si vous voulez le faire manuellement ou même modifier une partie du code vous-même si vous êtes plus technique, est de cliquer sur le bouton « Copy » ici pour copier tout le code de la fonction. Puis, de retour dans Open Web UI, vous allez dans le panneau d’administration en bas à gauche, cliquez sur l’onglet « Functions », cliquez sur l’icône plus en haut à droite pour ajouter une nouvelle fonction, et vous pouvez simplement coller tout le code que vous avez copié depuis cette page de fonction. La seule autre chose que vous devez faire est d’ajouter un ID de fonction et une description – vous pouvez les inventer vous-même – puis cliquer sur « Save ».

De toute façon, vous aurez maintenant cette fonction pour le connecteur d’agent N8N (c’est du moins ainsi que je l’ai appelée) à votre disposition. Lorsque vous accédez à votre espace de travail et que vous commencez une nouvelle conversation, vous pouvez la sélectionner comme l’un des LLM. J’ai tous ces autres LLM que j’ai simplement via Ollama, mais maintenant j’ai celui-ci juste à côté de tous ceux-là, qui est ma fonction personnalisée pour se connecter à N8N.

Nous ne sommes pas tout à fait prêts à démarrer car nous devons encore configurer notre fonction. Je vais revenir là-dessus ici, et dans l’icône des paramètres pour les valves, c’est là que vous définissez les informations spécifiques qui vous sont propres et dont la fonction a besoin. Je vais expliquer comment nous définissons chacune d’entre elles lorsque je parlerai de la façon dont nous construisons notre agent pour l’intégration Open Web UI, mais nous aurons besoin de notre URL pour l’agent, d’un jeton Bearer pour sécuriser notre agent et n’y accéder que via Open Web UI, puis nous avons les champs d’entrée et de sortie pour déterminer la valeur spécifique que nous attendons dans notre workflow N8N et ce que nous produisons. Pour l’intervalle d’émission, vous pouvez généralement le laisser par défaut. Vous pouvez voir que c’est l’intervalle en secondes entre les émissions de statut, donc obtenir une mise à jour sur la façon dont la fonction fonctionne lorsque nous discutons avec elle dans l’interface.

Message du Sponsor : ZAMS

Créer vos propres automatisations et agents IA dans des plateformes comme N8N est un excellent moyen de créer des solutions sur mesure aux problèmes que vous essayez de résoudre. Mais aussi agréable qu’il soit de tout construire vous-même, il y a tellement de choses qui se passent en coulisses pour créer des automatisations et des agents vraiment évolutifs, configurables, robustes et sécurisés. Souvent, si vous êtes un propriétaire d’entreprise avec beaucoup d’exigences autour de ces choses, vous n’avez pas le temps ou le désir d’investir là-dedans – vous voulez une solution d’entreprise prête à l’emploi.

C’est là qu’intervient le sponsor de la vidéo d’aujourd’hui : ZAMS. ZAMS est une plateforme d’entreprise pour créer des agents IA qui automatisent le travail administratif, et elle rend la création de ces agents IA très simple, sécurisée et puissante.

Les agents IA aujourd’hui sont un peu comme ce qu’était Internet à une époque : assez puissants mais aussi très inaccessibles. Il a fallu le navigateur Web pour rendre Internet vraiment accessible à la personne moyenne comme vous et moi, et ZAMS fait exactement la même chose, mais avec l’IA. Ils donnent aux agents une couche d’interface utilisateur pour les faire réellement fonctionner pour les entreprises, au lieu de forcer les entreprises à assembler toutes leurs automatisations, outils et bases de connaissances pour l’IA.

ZAMS s’occupe de tout : vous avez Knowledge AI pour comprendre vos données, Process AI pour accomplir des tâches, et Predictive AI pour vous aider, en tant que propriétaire d’entreprise, à prendre des décisions plus intelligentes. Et tout est conçu pour une utilisation en entreprise, avec contrôle, gouvernance et sécurité intégrés dans toute la plateforme.

Ils disposent de toute une suite de technologies impressionnantes sous le capot pour traiter instantanément des milliards de points de données, créer facilement des modèles prédictifs et transformer le langage naturel en automatisations complètes.

Je mettrai un lien dans la description si vous souhaitez réserver une démo ZAMS et voir comment cela peut transformer votre entreprise avec des agents IA de niveau entreprise.

Création d’un Agent N8N pour Open Web UI

Ne vous inquiétez pas si tout cela n’a pas encore de sens pour vous. Je vais vous montrer comment définir chacune de ces valeurs en parcourant le modèle d’agent N8N, qui sera une ressource téléchargeable pour vous (lien dans la description). J’ai essayé de le rendre aussi simple que possible, juste pour démontrer les éléments essentiels que vous devez avoir pour cette intégration Open Web UI.

C’est un agent très basique avec un seul outil pour rechercher sur le web avec l’API Brave, juste pour avoir au moins un outil ici. Mais ce que je veux surtout couvrir, ce sont les éléments au début de ce workflow, en commençant par notre déclencheur webhook.

Au lieu d’avoir un déclencheur de chat comme nous l’avions au début de l’autre workflow au début de cette vidéo, j’utilise un déclencheur webhook car cela nous donnera une URL publique que nous pourrons utiliser pour communiquer avec ce workflow, et donc communiquer avec notre agent IA.

Vous voulez aller à l’URL de production et la copier. Vous pouvez définir vous-même le chemin d’accès comme vous le souhaitez. Copiez l’URL de production, assurez-vous que votre workflow est activé, puis collez-la ici pour la valeur N8N URL.

L’autre considération est que lorsque nous avons une URL publique pour communiquer avec notre workflow, cela signifie que n’importe qui pourrait théoriquement appeler cela et dépenser nos crédits LLM. Nous voulons donc protéger ce point de terminaison avec une authentification par en-tête.

Une mise en garde à ce sujet : si vous exécutez le package Local AI ou simplement N8N complètement localement, vous n’en avez pas vraiment besoin car les gens ne peuvent pas accéder à votre ordinateur. Mais si vous avez N8N fonctionnant dans le cloud ou auto-hébergé via quelque chose comme Digital Ocean, vous voulez protéger tous vos points de terminaison webhook.

Vous pouvez le faire en sélectionnant l’authentification par en-tête et en créant des identifiants personnalisés. Je vais vous montrer comment faire cela dans une seconde, mais je veux juste dire rapidement que vous en avez absolument besoin si vous n’exécutez pas N8N sur votre propre machine, sinon les gens pourront appeler ce workflow un nombre infini de fois et vous pourriez voir une énorme augmentation de votre facture OpenAI ou de n’importe quel fournisseur que vous utilisez.

Pour configurer vos identifiants ici, le nom sera « authorization » et la valeur sera « Bearer » suivi d’un espace, puis du jeton personnalisé que vous souhaitez définir. Je vais taper cela dans cette case car elle masque la valeur : « Bearer » espace puis « testoff » ou n’importe quel jeton que vous choisissez.

Ensuite, vous retournez dans Open Web UI et vous ajoutez ce jeton. La fonction suppose que vous préfixez avec « Bearer » espace, donc vous n’incluez pas cela ici – vous ne dites pas « Bearer espace testoff », vous avez simplement le jeton que vous avez défini dans N8N.

J’espère que cela a du sens. Je vais fermer cela car je l’ai déjà configuré. C’est ainsi que vous ajoutez l’authentification. Maintenant, votre agent est protégé et ne peut être appelé que depuis Open Web UI ou partout où vous l’invoquez avec le bon jeton Bearer.

C’est notre déclencheur webhook pour lancer tout avec notre agent. Si vous exécutez sur localhost ou si vous n’avez pas besoin d’une authentification par en-tête pour une raison quelconque, vous pouvez simplement définir ceci sur « none » et laisser la valeur vide dans Open Web UI ou la définir sur n’importe quelle valeur si vous n’avez pas besoin de sécurité autour de votre agent.

Évidemment, dans mon cas, j’en ai besoin, donc je vais m’assurer que c’est configuré car j’exécute N8N hébergé sur Digital Ocean dans le cloud. J’ai besoin de m’assurer que mes points de terminaison sont protégés. Je n’exécute pas sur localhost – j’ai Open Web UI via le package Local AI qui s’exécute sur localhost, mais pour ce que j’utilise dans cette vidéo, j’ai N8N qui s’exécute dans le cloud, donc j’ai configuré ma sécurité.

Configuration des Champs d’Entrée et de Sortie

Les deux choses suivantes que nous voulons définir sont le champ d’entrée et le champ de réponse. Ces deux valeurs sont déterminées par ce que nous attendons dans notre workflow N8N et le nom du champ que nous produisons à la toute fin.

Pour rendre cela très concret, je vais aller à ma dernière exécution. En commençant par l’entrée, je clique sur le webhook et vous pouvez voir que le message utilisateur qui entre dans notre workflow N8N s’appelle « chat input », et c’est déterminé exactement par ce que nous avons tapé ici : « chat input ».

Vous voulez donc vous assurer que ce que vous attendez dans N8N, dans ce cas j’attends que la valeur soit appelée depuis « chat input », je veux m’assurer que c’est ce que j’ai tapé dans Open Web UI.

Je peux même vous montrer cela ici : si je clique dans mon nœud d’agent, vous pouvez voir que j’attends que l’invite utilisateur provienne de la valeur « chat input » du corps du webhook.

Pour la sortie ici, la raison pour laquelle je l’appelle « output » est que si je vais à la toute fin de cette exécution dans N8N, vous pouvez voir que la réponse de l’agent IA est dans le champ « output ». Je dois donc m’assurer que cela correspond à cette valeur ici, car ainsi ma fonction dans Open Web UI sait où chercher pour trouver la réponse IA.

Si cela était défini sur autre chose, cela ne fonctionnerait pas, elle ne trouverait pas la réponse LLM et je n’obtiendrais pas de réponse dans mon interface. Il est donc très important de s’assurer que ces valeurs correspondent à ce que vous attendez dans le workflow et à ce que vous produisez.

Structure de l’Agent N8N

En revenant à l’agent IA, je veux juste vous montrer qu’à part cette partie inférieure que je couvrirai dans un instant, le reste est simplement un agent IA N8N très simple.

Nous avons notre LLM connecté – vous pouvez utiliser n’importe quel fournisseur que vous voulez. J’ai PostgreSQL pour ma mémoire de chat, j’ai cet outil unique que je ne couvrirai pas en détail ici, mais c’est juste pour nous connecter à l’API Brave, donnant à notre agent la capacité de rechercher sur le web avec ce petit workflow en bas comme outil.

Je n’ai même pas d’invite système, donc j’ai gardé cela très simple car c’est juste un modèle pour vous aider à démarrer. Vous pouvez créer n’importe quel agent IA que vous voulez dans N8N et le connecter tant que vous avez cette première partie du workflow et la chose à la fin où vous mappez simplement le champ de sortie à ce que vous attendez dans Open Web UI. C’est aussi facile que ça !

Vous pourriez utiliser des serveurs MCP, créer une douzaine d’outils différents, utiliser plusieurs agents dans ce workflow, faire ce que vous voulez – je vous donne simplement un point de départ très basique.

Pourquoi Deux Appels LLM ?

La dernière chose que nous devons couvrir est pourquoi diable j’ai le deuxième appel LLM dans ce workflow. Pour vous montrer pourquoi nous en avons besoin, allons d’abord discuter avec notre agent une autre fois.

Je vais ouvrir une nouvelle conversation et je vais simplement dire « Que peux-tu faire pour moi ? ». Donc je pose une question très simple, et si nous allons dans les exécutions de notre workflow ici, nous verrons qu’il y en a eu plusieurs qui ont été lancées. Regardez toutes celles qui apparaissent ! Pourquoi est-ce ainsi ?

Nous avons celle-ci au début où nous obtenons la réponse complète de notre agent qui nous dit ce qu’il peut nous aider à faire, mais ensuite nous avons ces trois autres. Pourquoi avons-nous trois autres exécutions ?

La raison en est qu’Open Web UI appelle le LLM plusieurs fois pour le premier message d’une conversation afin de faire quelques choses différentes. Tout d’abord, il utilise l’IA pour donner un titre à la conversation. Il n’utilise pas simplement mon message ou le début de la réponse de l’IA ou quoi que ce soit, il génère réellement, sur la base des deux premiers messages, une description de la conversation.

Il utilise également l’IA pour générer des tags pour cette conversation. Si je clique sur les paramètres ici, vous pouvez voir qu’il a décidé que pour cette conversation spécifique, l’éducation et la technologie sont les deux tags qu’il a décidé d’appliquer ici. Il utilise donc l’IA pour faire cela.

Si vous regardez cet appel à ce LLM de base que j’ai configuré, vous pouvez voir qu’il a généré le titre, puis si je regarde l’exécution suivante, il a appelé l’IA à nouveau pour générer les tags technologie et éducation.

C’est juste une fonctionnalité intéressante d’Open Web UI où il utilise l’IA pour faire d’autres choses dans la conversation en plus de nous donner la réponse. Il crée ces tags, ces métadonnées supplémentaires comme le titre de la conversation, ce qui est super sympa.

Si vous ne voulez pas qu’il le fasse, vous pouvez toujours supprimer cette partie du workflow. Vous pourriez supprimer ce nœud, celui-ci et celui-là, et vous pouvez simplement faire en sorte que le webhook se connecte directement à l’agent.

Vous pouvez le faire si vous ne voulez pas utiliser des crédits IA supplémentaires, comme plus de crédits OpenAI, pour générer ces choses, mais je pense que c’est une fonctionnalité vraiment agréable et utile.

Vous pouvez toujours utiliser un LLM très rapide et bon marché – je pourrais simplement utiliser GPT-4 Mini pour générer ces choses, puis utiliser Claude 3.7 Sonnet, un LLM plus cher et plus puissant, pour mon agent principal. Vous pouvez donc rendre cela très abordable même s’il utilise quatre appels LLM pour le premier message d’une conversation. Vous pouvez faire en sorte que ce ne soit pas beaucoup plus cher, ou que ce soit entièrement gratuit si vous faites des choses localement avec Ollama de toute façon.

La façon dont nous avons configuré cela, où pour le reste de la conversation, elle suivra ce chemin, et pour les métadonnées comme le titre, elle suivra cet autre chemin, est due au fait que si je vais à l’une de ces exécutions et que je clique sur le webhook, l’ID de session, l’identifiant spécifique pour cette conversation, est nul lorsque nous générons les métadonnées.

Mais autrement, pour tout autre message qui communique réellement avec notre agent principal, l’ID de session est défini. C’est notre identifiant unique pour la conversation qu’Open Web UI nous donne, et c’est ce que nous utilisons également dans le nœud de mémoire de chat PostgreSQL comme identifiant unique pour cette conversation.

Cette instruction if est donc très simple : elle vérifie simplement si l’ID de session est nul ou non. S’il est nul, cela signifie que nous générons des métadonnées, donc il ira à ce LLM très simple, bon marché et rapide. Sinon, il ira à notre agent principal.

J’espère que cela a du sens. Si ce n’est pas 100% clair, ne vous inquiétez pas, c’est pourquoi j’ai ce modèle pour vous à télécharger et à utiliser. Vous pouvez construire ce que vous voulez comme agent principal, assurez-vous simplement de garder ceci pour générer ces métadonnées comme les tags et le titre de la conversation si vous tenez à les avoir.

Il m’a fallu un peu de temps pour réaliser cela. J’ai même couvert le pipeline sur ma chaîne précédemment pour connecter Open Web UI à N8N, mais je n’avais pas cet élément avant, et c’est pourquoi, plus quelques autres choses, je fais cette vidéo à nouveau (ou pas vraiment à nouveau, mais j’ai fait quelque chose de similaire avant, c’est juste beaucoup mieux maintenant) et j’ai cette ressource pour que vous puissiez travailler avec.

Conclusion

J’espère que vous avez trouvé cela vraiment utile. Prenez ceci et allez-y, prenez ce pipeline, prenez cet agent, vous pouvez vous lancer avec ce que je vous ai montré ici dans Open Web UI si facilement.

J’espère que cette vidéo vous a vraiment aidé à faire passer vos agents N8N au niveau supérieur avec cette intégration Open Web UI. N’hésitez pas à me faire part de vos questions dans les commentaires, je suis toujours dans les commentaires à répondre à tout.

J’ai aussi beaucoup plus de contenu à venir bientôt pour le package Local AI, où je fais actuellement fonctionner mon Open Web UI et N8N, alors restez à l’écoute pour cela. Si vous avez apprécié cette vidéo et que vous attendez avec impatience plus de choses sur N8N, les agents IA et l’IA locale, j’apprécierais vraiment un like et un abonnement. Sur ce, je vous retrouve dans la prochaine vidéo !