Test Page-Agent : L’agent GUI open-source pur frontend d’Alibaba – Une ligne de code transforme les sites en apps IA natives
À quel point est-il difficile d’ajouter un « Copilot IA » à un produit SaaS ? Les approches traditionnelles offrent essentiellement deux voies : soit réécrire le backend pour construire un système d’orchestration d’agents, soit installer une extension de navigateur ou un navigateur sans tête pour contrôler la page de l’extérieur. Aucune voie n’est légère.
Page-Agent d’Alibaba (18,7K étoiles GitHub, licence MIT) offre une troisième voie : un agent GUI en JavaScript pur dans la page, qui vit dans votre page web et opère l’interface en langage naturel.
Pas d’extension de navigateur, pas de Python, pas de navigateur sans tête – juste une seule balise <script>, et votre page peut comprendre des commandes en langage naturel.
Qu’est-ce que Page-Agent
Page-Agent est l’agent GUI pur frontend d’Alibaba, écrit en TypeScript, fonctionnant dans l’environnement d’exécution JavaScript du navigateur. Il lit le DOM de la page sous forme de texte pour comprendre la structure de l’interface, puis utilise un LLM pour décider quelle action effectuer (clic, remplissage, défilement, etc.), traduisant finalement les décisions en opérations DOM réelles.
Le positionnement central est clair : Amélioration Web côté client, pas d’automatisation côté serveur. Ses utilisateurs cibles sont les développeurs de produits – vous permettant d’ajouter des capacités opérationnelles IA à vos produits SaaS, systèmes ERP/CRM et tableaux de bord d’administration avec seulement quelques lignes de code.
La différence essentielle avec l’automatisation de navigateur traditionnelle
La plupart des solutions d’automatisation web sur le marché suivent la route du « contrôle externe » – lançant un processus de navigateur et opérant la page via le protocole CDP. Page-Agent va dans la direction opposée : il s’exécute dans l’environnement d’exécution JS de la page elle-même, dans le même processus que votre code métier.
| Dimension | Page-Agent | Playwright / Browser Use | Selenium |
|---|---|---|---|
| Emplacement d’exécution | JS dans la page, même processus | Processus externe contrôlant le navigateur | Processus externe + WebDriver |
| Dépendances | Une balise <script> | Python + binaire de navigateur | Java/Python + pilotes |
| Installation utilisateur | Zéro installation, intégré dans la page web | Nécessite une extension ou un client Agent | Nécessite la configuration du pilote |
| Méthode de perception | DOM texte (pas de captures) | Captures + LLM multimodal / DOM | DOM via WebDriver |
| Exigences de modèle | Modèle texte uniquement | Multimodal ou texte | Pas de LLM nécessaire |
| Idéal pour | Copilot IA dans le produit | Automatisation multi-sites / RPA | Tests E2E |
| Positionnement | Amélioration web côté client | Automatisation côté serveur | Framework de test |
Architecture technique centrale : Déshydratation du DOM
La décision de conception la plus intelligente de Page-Agent est de ne pas prendre de captures d’écran. La plupart des agents GUI reposent sur « captures d’écran + LLM multimodal regardant des images pour opérer », mais cette approche ne fonctionne tout simplement pas dans un environnement JS pur dans la page.
Page-Agent utilise une technique appelée Déshydratation du DOM :
- Scanner le DOM : Parcourir le Document Object Model de la page, identifiant tous les éléments interactifs
- Indexation des éléments : Attribuer un numéro d’index à chaque élément interactif, avec son rôle et son étiquette
- Générer FlatDomTree : Convertir le DOM vivant en une structure arborescente textuelle compacte
- Prise de décision LLM : Le LLM texte lit cette représentation compacte et sort des instructions d’action
- Exécuter les opérations : L’Agent traduit les instructions en opérations DOM réelles
Intégration en une ligne de code
Expérience la plus rapide (LLM de test gratuit)
<script
src="https://cdn.jsdelivr.net/npm/page-agent@1.12.2/dist/iife/page-agent.demo.js"
crossorigin="anonymous"
></script>Installation NPM (Production recommandée)
npm install page-agentimport { PageAgent } from 'page-agent'
const agent = new PageAgent({
model: 'qwen3.5-plus',
baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
apiKey: 'VOTRE_CLE_API',
language: 'fr-FR',
})
await agent.execute('Cliquez sur le bouton de connexion')Comparaison complète avec les solutions d’agent GUI mainstream
| Dimension | Page-Agent | Browser Use | UI-TARS | Playwright MCP |
|---|---|---|---|---|
| Développeur | Alibaba | Community open-source | ByteDance | Microsoft |
| Emplacement d’exécution | JS dans la page | Processus Python externe | Processus externe | Processus Node externe |
| Méthode de perception | DOM texte | DOM + captures optionnelles | Captures + multimodal | DOM via CDP |
| Exigences de modèle | Modèle texte | Texte ou multimodal | Modèle vision spécialisé | Modèle texte |
| Multi-pages | Extension Chrome requise | Support natif | Support natif | Support natif |
| Difficulté d’intégration | ⭐ Très faible | ⭐⭐⭐ Moyenne | ⭐⭐⭐⭐ Élevée | ⭐⭐⭐ Moyenne |
| Scénario central | Copilot dans le produit | Automatisation générale | Tâches visuellement complexes | Contrôle de navigateur par agent |
Conclusion
Avantages
✅ Intégration zéro-installation : Une balise <script>, les utilisateurs ne remarquent rien
✅ Léger et efficace : DOM texte pur, pas de modèles multimodaux nécessaires, coûts réduits
✅ Agnostique en modèle : Supporte toute API compatible OpenAI, y compris les modèles locaux
✅ Contrôles de sécurité : Liste d’autorisation d’opérations, masquage de données, injection de connaissances
✅ Open-source et gratuit : Licence MIT, utilisable commercialement
Inconvénients
❌ Limitation à une seule page : Multi-pages nécessite l’extension Chrome ❌ Perte d’informations visuelles : Non adapté aux pages visuellement intensives Canvas/WebGL ❌ Dépendance au LLM : Chaque opération a une latence réseau et des coûts API ❌ Sécurité de la clé API : Risque d’exposition frontend, nécessite un proxy backend
Qui devrait l’utiliser, qui ne devrait pas
Devrait utiliser :
- Développeurs SaaS : Ajouter un Copilot IA aux produits
- IT d’entreprise : Optimiser les systèmes internes (ERP/CRM/OA)
- Développeurs d’accessibilité : Rendre les pages web plus conviviales pour les utilisateurs handicapés
Ne devrait pas utiliser :
- Ingénieurs de test : Playwright est plus approprié
- Développeurs de crawlers : Puppeteer/Cheerio est plus approprié
- Automatisation multi-sites : Browser Use est plus approprié
Espérons que cet article de blog vous a été utile !
