La plupart des agents de navigateur fonctionnent comme un touriste avec un appareil photo. Ils prennent une capture d'écran, la transmettent à un modèle de vision, devinent les coordonnées en pixels d'un bouton, puis cliquent. C'est lent, coûteux et fragile : une simple retouche CSS et la supposition s'effondre. Le tout nouveau Page Agent d'Alibaba, publié en open source, jette cette méthode aux oubliettes. Au lieu de regarder la page, il la lit, en opérant directement sur le DOM sous forme de texte, comme le ferait un développeur inspectant le panneau des éléments.
Le résultat est une bibliothèque TypeScript légère, sous licence MIT, qui transforme n'importe quelle interface web en quelque chose qu'un modèle de langage peut piloter avec de simples phrases. Pas de backend Python, pas de cluster Chrome headless, pas de modèle multimodal. Juste une balise script.
Ce qu'est réellement Page Agent
Page Agent est un agent GUI intégré à la page. Il vit à l'intérieur de la page web sous forme de JavaScript ordinaire et agit comme l'utilisateur réel : il clique, saisit, fait défiler et navigue à travers le DOM en direct. Comme il s'exécute côté client dans le même contexte que votre application, il ne nécessite aucune permission spéciale du navigateur ni infrastructure d'automatisation externe.
L'idée centrale est une technique que le projet nomme déshydratation du DOM. Le DOM complet d'une application web moderne est énorme et bruyant : des milliers de nœuds imbriqués, dont la plupart sont sans rapport avec une tâche donnée. Page Agent compresse cela en une structure textuelle compacte appelée FlatDomTree : une carte aplatie et dédupliquée qui ne conserve que les éléments interactifs et significatifs. Cette compression est ce qui permet à l'approche de fonctionner avec des modèles de texte plus petits et moins chers. Vous ne demandez pas à un modèle de vision de pointe de raisonner sur une capture 4K ; vous remettez à un modèle de texte une liste claire de ce qui se trouve sur la page et de ce que l'on peut en faire.
Pourquoi lire vaut mieux que regarder
La distinction semble académique jusqu'à ce qu'on compte les coûts. Un agent basé sur les captures d'écran paie pour :
- Des tokens image à chaque étape (une capture pleine page coûte cher)
- Un modèle multimodal, plus cher et plus lent qu'un modèle texte seul
- La devinette de coordonnées, qui casse sur les mises en page adaptatives et les niveaux de zoom
Page Agent contourne ces trois écueils. Lire le DOM lui donne des références d'éléments exactes plutôt que des suppositions de pixels : un clic vise donc le nœud réel plutôt qu'une coordonnée (x, y) qui se déplace lors du reflux de la mise en page. C'est plus rapide car l'inférence texte est plus rapide, moins cher car il n'y a pas de tokens image, et plus précis car il n'y a aucune supposition.
Il y a aussi un argument pratique de déploiement. Auparavant, ajouter un contrôle en langage naturel à une application web signifiait monter un service backend, gérer un processus d'automatisation de navigateur séparé et tout câbler ensemble. Page Agent réduit tout cela à quelques lignes qui s'exécutent là où votre application tourne déjà.
Premiers pas
L'installation tient en un seul paquet :
npm install page-agentOu intégrez-le à n'importe quelle page avec une balise script CDN pour des tests rapides :
<script src="https://cdn.jsdelivr.net/npm/page-agent@1.10.0/dist/iife/page-agent.demo.js" crossorigin="true"></script>L'API programmatique est volontairement réduite. Vous construisez un agent avec la configuration de votre modèle et lui donnez une tâche en langage naturel :
import { PageAgent } from 'page-agent'
const agent = new PageAgent({
model: 'qwen3.5-plus',
baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
apiKey: 'YOUR_API_KEY',
language: 'fr-FR',
})
await agent.execute('Clique sur le bouton de connexion')Comme le modèle est joint via un point de terminaison compatible OpenAI, Page Agent est agnostique quant au modèle. Pointez baseURL vers DashScope d'Alibaba, votre propre passerelle, un serveur local ou tout fournisseur qui parle le format de chat OpenAI. Le champ model n'est qu'une chaîne que le point de terminaison comprend : remplacez Qwen par un autre modèle sans toucher au reste de votre code.
Enchaîner de vrais flux de travail
L'exemple du clic unique le sous-estime. L'intérêt est de compresser des flux en plusieurs étapes en une seule instruction. Imaginez un agent de support remplissant un outil de ticketing interne :
await agent.execute(
'Ouvre un nouveau ticket haute priorité, définis le client sur Acme Corp, ' +
'assigne-le à l\'équipe facturation et ajoute une note indiquant que la ' +
'facture a été envoyée deux fois.'
)Cela représente potentiellement une douzaine de clics et d'édition de champs à travers un panneau d'administration chargé, exprimés en une seule phrase. C'est là que la bibliothèque vise directement les ERP, CRM et tableaux de bord internes : les interfaces denses et à forte friction où un raccourci en langage naturel fait gagner le plus de temps.
Le contrôle humain par défaut
Confier à un agent les clés d'un tableau de bord de production en direct est angoissant, et le projet prend cela au sérieux. Page Agent inclut une étape d'approbation humaine intégrée : un agent peut proposer une action et attendre qu'une personne confirme avant de toucher quoi que ce soit de conséquent. Cela garde l'automatisation utile pour de vrais outils internes sans la transformer en un bot non supervisé qui pourrait soumettre le mauvais formulaire. Pour tout ce qui modifie des données, gardez les approbations actives.
Au-delà d'un seul onglet
Deux extensions poussent Page Agent au-delà du cas de la page unique :
- Extension Chrome — active le contrôle multi-onglets, afin qu'un agent puisse coordonner un flux couvrant plusieurs pages ou applications au lieu d'être enfermé dans un seul document.
- Serveur MCP (bêta) — expose l'agent intégré via le Model Context Protocol, permettant à des agents externes de piloter le navigateur. C'est l'élément intéressant pour l'écosystème d'agents au sens large : un assistant de bureau ou une couche d'orchestration parlant MCP peut désormais atteindre une application web en direct et l'opérer, en utilisant Page Agent comme ses mains. Si vous suivez la montée du MCP comme standard de connexion, cela s'y intègre parfaitement.
Où il convient — et où il ne convient pas
Page Agent est un excellent choix lorsque vous contrôlez l'application web et souhaitez y ajouter une couche de langage naturel : panneaux d'administration internes, produits SaaS proposant un assistant IA, outils d'accessibilité ou remplissage intelligent de formulaires. Comme il lit le DOM, il se dégrade aussi élégamment : il travaille avec la structure sémantique de la page plutôt qu'avec des positions de pixels fragiles.
Il convient moins à l'automatisation adverse sur des sites que vous ne contrôlez pas, où injecter un script n'est pas envisageable et où les agents basés sur les captures avec contrôle total du navigateur gardent un rôle. Et comme tout outil lisant le DOM, il dépend d'une page raisonnablement structurée ; une application rendue sur canvas sans DOM accessible lui laisse peu à lire.
Le signal plus large
Ce qui est le plus intéressant à propos de Page Agent n'est pas une fonctionnalité en particulier, mais le pari sous-jacent. À mesure que les flux agentiques consomment plus de tokens par tâche, l'investissement le plus judicieux à long terme n'est pas le modèle mais la couche d'outillage de contexte qui l'entoure. Page Agent est exactement cette couche pour le navigateur : une manière réutilisable et agnostique de remettre à n'importe quel LLM une vue propre et exploitable d'une page web. Le modèle est interchangeable. Le pipeline de déshydratation du DOM qui fait agir les modèles bon marché avec précision est la partie durable.
Pour les équipes qui construisent des outils internes ou des produits assistés par IA dans la région MENA et au-delà, c'est un moyen à faible engagement d'ajouter un véritable contrôle en langage naturel à une interface existante : une balise script, votre propre modèle et une carte textuelle de la page au lieu d'une supposition sur une capture. Si vous souhaitez un accompagnement pour concevoir des expériences pilotées par agents dans vos produits, notre équipe travaille précisément sur ce sujet.