Table of Contents
- Introduction
- Le Problème avec les Agents d'IA Aujourd'hui
- Qu'est-ce que Web Agent
- Architecture : Sous le Capot
- Fonctionnalités Principales
- Commencer en 60 Secondes
- Autodidacte : L'Agent qui Devient plus Intelligent à Chaque Conversation
- Comparaison : Web Agent vs Autres Alternatives
- Cas d'Usage Réel : Comment nous l'utilisons
- Open Source et Communauté
- Feuille de Route : Et Maintenant
- Conclusion
Introduction
!Web Agent in-browser architecture: self-learning loop with DOM interaction and tool execution
Si vous avez déjà essayé d'utiliser un agent d'IA, vous connaissez le parcours du combattant : installez cette stack Python, configurez votre clé API, créez un environnement virtuel, déboguez ce conteneur Docker, pensez à redémarrer le serveur, et priez pour que vos variables d'environnement ne se perdent pas entre les redémarrages.
Et si vous pouviez utiliser un agent d'IA pleinement fonctionnel — compétences, mémoire, outils, automatisation — sans rien installer du tout ?
Aujourd'hui, nous open-sourçons Web Agent (nom de code) / Web Agent — un agent d'IA prêt pour la production qui s'exécute entièrement dans votre navigateur via WebContainers, sans installation locale requise. Pas de Python, pas d'installation Node.js, pas de serveur, pas de terminal. Ouvrez simplement le navigateur, créez un profil, définissez votre clé API, et commencez à travailler.
Construit sur la même architecture que Hermes Agent (notre assistant d'IA de bureau), Web Agent apporte toute la puissance des workflows autonomes d'IA dans n'importe quel navigateur moderne : profils isolés, mémoire persistante, coffre de connaissances, commandes slash, automatisation cron et passerelle multi-plateforme — tout en gardant toutes vos données chiffrées localement et jamais envoyées à nos serveurs.
C'est l'agent que nous utilisons en interne chez aratech pour automatiser nos workflows de blog Directus, les tâches de recherche et la gestion des connaissances. Maintenant c'est à vous, sous licence MIT, sur github.com/nikola66/web-agent et en direct sur webagent.aratech.ae.
Le Problème avec les Agents d'IA Aujourd'hui
Soyons honnêtes : les agents d'IA aujourd'hui sont puissants, mais ils sont aussi incroyablement pénibles à utiliser.
Le setup typique d'un agent ressemble à ça :
- Installez un environnement d'exécution local — venv Python, modules Node, images Docker, pulls Ollama
- Configurez votre environnement — clés API, paramètres proxy, certificats SSL, variables système
- Construisez votre pipeline — scripts de collage, configuration de frameworks, bases de données vectorielles
- Priez pour que ça fonctionne encore demain — la mise à jour du système casse le binaire Python, une dépendance change, votre LLM local plante
Cette friction est la raison pour laquelle les agents n'ont pas atteint l'adoption grand public. La technologie est prête, mais le mécanisme de distribution reste coincé dans le même piège de complexité dans lequel était le développement web avant que les plateformes cloud ne viennent l'abstraire.
Puis il y a le problème d'état. La plupart des agents confondent vos données, vos conversations, vos tâches et vos identifiants dans un seul blob — ou pire, vous demandent de faire confiance à un tiers avec tout ça. Si leur serveur tombe, votre agent tombe. S'ils changent leur API, votre workflow casse. S'ils décident d'arrêter l'offre gratuite, vous êtes bloqué.
Enfin, il y a le fossé de spécialisation. L'IA moyenne est entraînée sur l'ensemble d'Internet — c'est comme avoir mille employés, dont aucun ne sait rien de votre entreprise. Vous passez une demi-heure à réexpliquer votre contexte, vos règles et vos objectifs chaque fois que vous commencez une nouvelle conversation. Ce n'est pas un travailleur du savoir, c'est un processus d'intégration répété.
Nous avons construit Web Agent pour résoudre ces trois problèmes d'un coup.
Qu'est-ce que Web Agent ?
Web Agent (nom de code interne ; le projet s'appelle formellement Web Agent) est un agent d'IA pleinement fonctionnel qui s'exécute nativement dans votre navigateur en utilisant WebContainers — la même technologie qui alimente CodeSandbox et StackBlitz.
Considérez-le comme Hermes Agent, mais porté sur le navigateur. Même système de compétences, même mémoire multicouche, mêmes ~40 outils intégrés, même cycle d'apprentissage autonome. La différence : aucune installation, aucun serveur, aucune variable d'environnement, aucun Docker.
| Configuration typique d'un Agent d'IA | Web Agent |
|---------------------------------------------|------------------------------|
| Installez Python/Node/Docker | Ouvrez votre navigateur |
| Configurez votre fichier .env | Définissez votre clé API (chiffrement local) |
| Choisissez votre base de données vectorielle | Aucune configuration requise |
| Maintenez le serveur en fonctionnement | Fonctionne immédiatement |
| Vos données quittent votre machine | Tout reste dans le navigateur |
| Un agent par installation | Jusqu'à 4 profils à la fois |Chaque profil dans Web Agent obtient :
- Espace de travail isolé — fichiers, shell et état de projet sandboxés des autres profils
- Mémoire séparée — magasin de faits, mémoire de session, réflexions et apprentissages par profil
- Identifiants chiffrés — clés API stockées localement dans le navigateur, jamais envoyées aux serveurs
- Remplacements de compétences — définitions de compétences par profil qui héritent d'une base partagée
Si vous créez un profil pour un usage personnel, un autre pour le travail clients, un autre pour les contributions open source et un dernier pour les expériences — chacun vit dans son propre monde, complètement isolé.
Architecture : Sous le Capot
L'architecture d'Web Agent est délibérément en couches pour garder l'exécution, la persistance et l'infrastructure comme préoccupations séparées :
┌─────────────────────────────────────────────────────┐
│ Navigateur : React 19 + Vite + TypeScript + xterm.js │
├─────────────────────────────────────────────────────┤
│ Sidebar │ Terminal (xterm) │ Chat Input │
│ Profils │ Transcript │ Langage naturel │
├─────────────────────────────────────────────────────┤
│ Orchestrateur Central │
│ • Gestion du cycle de vie des profils │
│ • Démarrage/arrêt du WebContainer │
│ • Coffre d'identifiants (chiffré) │
├─────────────────────────────────────────────────────┤
│ Environnement d'exécution intégré (Node.js dans WebContainers) │
│ ┌──────────────────────────────────────────────┐ │
│ │ Boucle LLM (OpenRouter / Ollama / Custom) │ │
│ │ Registre d'Outils (~40 intégrés) │ │
│ │ Gestionnaire de Compétences (chargeur SKILL.md) │ │
│ │ Couches de Mémoire (faits, session, réflexion) │ │
│ │ Ordonnanceur Cron (battement + travaux) │ │
│ │ Passerelle de Canaux (Telegram, Email) │ │
│ └──────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│ Persistance : IndexedDB + OPFS (local au navigateur) │
│ Aucun état utilisateur côté serveur │
└─────────────────────────────────────────────────────┘Cette dernière ligne est importante : vos données ne quittent jamais votre navigateur à moins que vous ne configuriez explicitement un fournisseur LLM externe. La démo hébergée sur webagent.aratech.ae ne sert que l'application statique ; tous vos fichiers, mémoire et identifiants restent dans votre IndexedDB ou OPFS local du navigateur. Même si la démo est hors ligne, vos données locales restent accessibles via export/import.
Ce n'est pas un produit cloud avec une version gratuite — c'est un outil qui s'exécute sur votre ordinateur, livré via le navigateur.
Stack Technique
Fonctionnalités Principales
Voyons ce qui rend cet agent utile au quotidien.
Profils Isolés — Plusieurs Agents, Un Seul Navigateur
Pensez à un profil comme un espace de travail dédié pour votre agent. Chaque profil obtient :
- Son propre système de fichiers WebContainer (sandbox Node.js virtualisé)
- Ses propres couches de mémoire (faits, sessions, réflexions, apprentissages)
- Son propre coffre d'identifiants
- Ses propres remplacements de compétences
- Son instantané export/import
Vous pouvez exécuter jusqu'à 4 agents simultanés dans différents profils en même temps. Un pour le travail, un pour le personnel, un pour un projet client, un pour les expériences — ils ne se mélangent jamais.
Coffre de Connaissances (PARA + Wiki)
Inspiré par le concept viral de "Deuxième Cerveau IA" de Karpathy, Web Agent dispose d'un coffre de connaissances de première classe intégré.
Vous pouvez :
/wiki-setuppour initialiser une base de connaissances markdown structurée en PARA/wiki-syncpour ingérer toute votre mémoire, faits accumulés et apprentissages de compétences dans le coffre/wiki-searchpour interroger votre coffre quand l'agent a besoin de récupérer du contexte
Le coffre grandit avec le temps au fur et à mesure que vous utilisez l'agent. Vos sessions, faits et apprentissages sont synthétisés en connaissances structurées — pas seulement un journal de conversation plat. C'est le cycle de connaissance composée en action.
Mémoire Multicouche
Web Agent stocke quatre types distincts de mémoire, chacun avec un but différent :
En utilisant la compétence /memory-layers, vous pouvez choisir consciemment quoi stocker et où, et éviter la duplication de contexte. C'est la même architecture de mémoire qui permet à Hermes Agent de "se souvenir de tout ce qui compte et oublier tout ce qui ne compte pas".
Cycle d'Apprentissage Autonome
C'est la pièce qui transforme un chatbot en un agent qui s'améliore réellement au fil du temps.
Chaque interaction produit trois choses que le système peut stocker :
- Faits — "L'utilisateur préfère TypeScript à JavaScript", "Notre blog Directus utilise anglais, arabe, espagnol, allemand et français"
- Réflexions — "La tâche de script vidéo a bien fonctionné cette fois parce que l'articulation a été approuvée avant la rédaction", "Je dois vérifier les fautes de frappe quand j'écris des exemples de code"
- Apprentissages — "Lorsque vous travaillez avec l'API Directus, obtenez toujours l'ID de l'entrée avant de vouloir assigner des tags"
Ce ne sont pas des journaux de chat. Ce sont des unités de connaissance structurées, récupérables, intentionnées que l'agent peut rappeler, appliquer et réfléchir. Avec le temps, l'agent ne "rappelle" pas seulement votre conversation récente — il comprend la trajectoire de votre projet et peut combler les lacunes de contexte sans directives explicites.
Utilisez skill_save pour promouvoir un workflow particulièrement bon (comme "cross-post mon article dans 5 langues avec un formatage cohérent") en une compétence réutilisable. La prochaine fois que vous direz "publie mon article", l'agent extrait cette compétence, vérifie vos traductions Directus, formate tout cohéremment et livre le travail fait — sans réapprendre le processus depuis zéro.
~40 Outils Intégrés
Web Agent est livré avec une boîte à outils complète dès la sortie de la boîte :
Système de fichiers : read_file, write_file, edit_file, multi_edit, delete_file, move_file, make_dir, tree, find_files, grep, file_diff, file_stat
Mémoire : memory_save, memory_recall, memory_search, session_memory_append, session_memory_list, session_search
Compétences : skill_list, skill_view, skill_save, skill_manage, skill_bulk_save, skill_delete, skill_recall
Automatisation : cron_list, cron_register, todo_write
Web et Vision : web_search, web_fetch, vision_analyze, youtube_transcribe, email
Système : run_shell, system_info, artifact_present, apply_patch
Tous ces outils sont disponibles dans le sandbox WebContainer. Ils opèrent dans l'espace de travail isolé de votre profil, donc vous pouvez expérimenter, casser des choses et vous en remettre sans craindre perdre le reste de votre système.
Commandes Slash et Mode Planification
Web Agent utilise un système de commandes slash inspiré des meilleurs modèles UX de terminal (Hermes Agent, Claude Code, OpenCode) :
/help — afficher tous les outils et commandes disponibles
/clear — redémarrer avec une nouvelle conversation (conserve les données du profil)
/compact — compresser le contexte ancien, continuer dans la conversation actuelle
/checkpoint — sauvegarder un instantané nommé de la session actuelle
/rollback — charger un point de contrôle
/skills — lister/rechercher les compétences installées
/plan [objectif] — passer en mode planification par spécification
/stop — interrompre l'exécution d'outil en cours
/exit — terminer la session terminalMode planification (/plan) est particulièrement puissant. Lorsque vous voulez aborder une tâche complexe :
- Écrire
/plan créer une landing page pour notre nouveau produit - Web Agent lit votre espace de travail (lecture seule, pas encore de modifications)
- Écrit un fichier de spécification markdown complet dans
.webagent/plans/et le présente pour votre approbation - Vous révisez, modifiez ou acceptez — puis dites "exécute le plan" dans votre prochain message
- Il exécute le plan étape par étape, avec une transparence totale
Vous obtenez ainsi une exécution rigoureuse et une supervision humaine — le plan est révisé avant que tout code ne soit écrit.
Passerelle Multi-Plateforme
Web Agent ne se confine pas à la fenêtre du navigateur. Il comporte une architecture de passerelle de canaux qui peut connecter l'agent à :
- Telegram — canal de sondage, sessions longues en chat
- Email — via le fournisseur Resend, envoyer et recevoir du mail depuis l'agent
- Extensible — ajoutez de nouveaux canaux en déposant un module de capacité sous
src/capabilities/channels/et en reconstruisant
Dans notre workflow de gestion de blog Directus, nous avons connecté Web Agent pour gérer les publications programmées, extraire les analyses et répondre aux requêtes éditoriales — le tout via une interface de chat Telegram. L'agent s'exécute dans le navigateur (démo hébergée), mais les conversations se déroulent dans Telegram. C'est le genre de polyvalence que vous obtenez avec une couche d'abstraction de canaux bien implémentée.
Sécurité et Confidentialité
Il y a une différence entre "nous affirmons ne pas utiliser vos données" et "vos données ne peuvent physiquement pas quitter votre navigateur."
Web Agent fait ce dernier. L'architecture locale garantit :
- Clés API chiffrées par profil — stockées dans le navigateur, jamais transmises en clair
- Isolation des espaces de travail — les fichiers et la mémoire d'un profil ne peuvent pas accéder à ceux d'un autre
- Aucun état utilisateur côté serveur — la démo hébergée est transit seulement ; fermer votre navigateur supprime votre session du serveur
- Proxy CORS sans état — le sidecar de fetch ne journalise ni ne stocke le trafic
- Masquage des secrets — les clés API et identifiants sont supprimés avant toute sortie de journal
- Sécurités des outils — invites de confirmation pour les opérations destructrices, protection de timeout de boucle
Vous pouvez exécuter Web Agent entièrement hors ligne pour le travail local; seuls les appels LLM et les opérations de fetch web nécessitent un accès réseau — et vous contrôlez les deux identifiants.
Commencer en 60 Secondes
Voici toute la configuration :
# 1. Ouvrez la démo
## → https://webagent.aratech.ae
## 2. Créez un nouveau profil (clic "Nouveau Profil")
## 3. Définissez votre fournisseur LLM et votre clé API (chiffrement local)
## 4. Commencez à chatter — aucune configuration supplémentaire nécessaireC'est tout. Pas de variables d'environnement, pas de terminal, pas d'étape de build. L'agent boote son runtime WebContainer en ~5 secondes et vous êtes prêt.
Si vous souhaitez personnaliser ou contribuer :
git clone https://github.com/nikola66/web-agent.git
cd web-agent && npm install
npm run dev # développement local avec rechargement à chaud
npm run build # build de production statiqueDéployez n'importe où des fichiers statiques sont servis — Vercel, Netlify, Cloudflare Pages, un serveur Caddy, ou un simple npx serve dist. Aucune base de données, aucune API côté serveur requise.
Autodidacte : L'Agent qui Devient plus Intelligent à Chaque Conversation
Mettons en évidence une fois de plus le cycle d'apprentissage autonome car c'est la fonctionnalité qui changera votre façon de penser les agents d'IA.
Chaque interaction produit trois choses que le système peut stocker :
- Faits — "L'utilisateur préfère TypeScript à JavaScript", "Notre blog Directus utilise anglais, arabe, espagnol, allemand et français"
- Réflexions — "La tâche de script vidéo a bien fonctionné cette fois parce que l'articulation a été approuvée avant la rédaction", "Je dois vérifier les fautes de frappe quand j'écris des exemples de code"
- Apprentissages — "Lorsque vous travaillez avec l'API Directus, obtenez toujours l'ID de l'entrée avant de vouloir assigner des tags"
Ce ne sont pas des journaux de chat. Ce sont des unités de connaissance structurées, récupérables, intentionnées que l'agent peut rappeler, appliquer et réfléchir. Avec le temps, l'agent ne "rappelle" pas seulement votre conversation récente — il comprend la trajectoire de votre projet et peut combler les lacunes de contexte sans directives explicites.
Utilisez skill_save pour promouvoir un workflow particulièrement bon (comme "cross-post mon article dans 5 langues avec un formatage cohérent") en une compétence réutilisable. La prochaine fois que vous direz "publie mon article", l'agent extrait cette compétence, vérifie vos traductions Directus, formate tout cohéremment et livre le travail fait — sans réapprendre le processus depuis zéro.
Comparaison : Web Agent vs Autres Alternatives
Comment se compare-t-il à ce qui existe aujourd'hui ?
La différence honnête : Web Agent est atypique. La plupart des outils d'agents d'IA sont soit des extensions IDE (Claude Code), soit des services cloud personnalisés (V0, Cursor). Web Agent repense où l'agent vit : dans le navigateur, sous votre contrôle, sans prérequis computationnels. Cela compte.
Cas d'Usage Réel : Comment nous l'utilisons
Voici un échantillon représentatif de notre utilisation interne d'Web Agent :
Gestion Quotidienne du Blog Nous acheminons notre flux éditorial via un canal Telegram connecté à Web Agent. L'agent lit notre blog Directus, identifie les brouillons prêts pour révision, les formate pour publication, planifie les publications dans 5 langues et signale tout ce qui nécessite une attention humaine.
Recherche et Compilation de Connaissances
Nous déposons des matériaux bruts (vidéos, PDFs, notes concurrentielles) dans l'espace de travail de l'agent, puis exécutons /wiki-sync pour que l'agent les synthétise en une base de connaissances structurée — le même modèle de Second Cerveau de Karpathy que nous évoquons publiquement. La différence : ça se passe automatiquement dans le navigateur, pas par ingénierie de prompts manuelle dans Claude Code.
Automatisation Planifiée Les tâches cron font exécuter l'agent en arrière-plan contre son environnement Node.js intégré. Une fait chaque nuit : "scanne ce dossier pour nouveaux designs, génère du texte alt avec vision et ajoute-le à un journal des modifications." Le tout dans l'onglet du navigateur, aucun serveur externe nécessaire.
Terrain de Jeu Expérimental Chaque profil est un espace de travail jetable. Essayer un nouveau dépôt git, lancer une expérience avec une nouvelle API, construire un prototype rapidement — créez un profil tout neuf, faites le travail, exportez ou jetez. Rien ne persiste à moins que vous ne le veuillez.
Open Source et Communauté
Web Agent est sous licence MIT. Nous l'avons construit pour être aussi piratable que possible :
- Extensions de capacités intégrées : Déposez un dossier sous
src/capabilities/{tools,providers,channels,skills}/et reconstruisez ; le système le découvrira et le chargera automatiquement - Accès complet aux composants internes de l'agent : le runtime intégré est du TypeScript simple compilé en ESM ; parcourez-le, modifiez-le, reconstruisez-le
- Aucune fonctionnalité fermée : tout dans le dépôt est disponible dans la démo publique, sans carte de crédit, sans invitation
Nous accueillons vos contributions. Si vous avez construit une compétence intéressante, un nouveau fournisseur d'outils ou un workflow créatif, ouvrez une pull request ou un issue pour nous le dire.
Dépôt : https://github.com/nikola66/web-agent Démo en direct : https://webagent.aratech.ae Soutien (si vous voulez offrir un café) : http://ko-fi.com/nikola66
Feuille de Route : Et Maintenant ?
Nous développons activement sur la branche principale. La version v0.0.6 (16 mai 2026) a ajouté les intégrés du coffre de connaissances PARA (/wiki-setup, /wiki-sync, /wiki-search), une projection de mémoire plus sûre et un ensemble de capacités de recherche web ouvert pour les tâches de découverte approfondie.
Feuille de route à court terme (prochaines semaines) :
- Davantage de modèles de compétences intégrés (gestion Directus, cross-publication de blogs, production de podcasts)
- Liste de fournisseurs élargie (OpenAI, DeepSeek et autres compatibles OpenAI)
- Meilleur support des profils simultanés
- Suite de tests pour les tests de fumée d'outils (en cours)
- Registre public de compétences — partager et découvrir des compétences communautaires
Moyen terme :
- Système de plugins pour les extensions de niveau espace de travail
- Workflows riches en médias (transcription audio, analyse vidéo, pipelines de génération d'images)
- Tableau de bord d'insight approfondi : "qu'est-ce que cet agent a appris sur mon projet ?"
- Modes de profils partagés pour petites équipes
Conclusion
La promesse des agents d'IA a toujours été : des workflows autonomes qui connaissent votre contexte, apprennent de vos retours et deviennent plus intelligents avec le temps. Le problème a toujours été la friction — installation, maintenance, isolation, confiance.
Web Agent élimine la friction. Il s'exécute dans le navigateur, n'envoie jamais vos données à nos serveurs, maintient vos profils isolés, construit une base de connaissances croissante sur votre travail et vous donne toute la puissance de l'IA autonome — sans Docker, sans Python, sans serveur.
Ce n'est pas un jouet. C'est le même système que nous avons construit pour nous-mêmes, maintenant open sourcé pour quiconque veut l'utiliser, l'étudier, le personnaliser ou l'appliquer à quelque chose à quoi nous n'avons pas encore pensé.
Nous adorerions entendre comment vous l'utilisez.
Essayer maintenant : https://webagent.aratech.ae Voir le code : https://github.com/nikola66/web-agent Mettre une étoile au dépôt : ⭐ https://github.com/nikola66/web-agent
Quelle est la suite pour vous ? Rejoignez notre communauté, construisez une compétence, partagez votre configuration. Nous construisons quelque chose de différent — avec vous, pas seulement pour vous.