Créer un agent IA qui navigue dans un navigateur : le guide complet pas à pas

PRÉPARER L'ENVIRONNEMENT DE Développement

Pour commencer, il faut mettre en place un espace de travail propre. Ouvre ton terminal et crée un dossier dédié à ce projet. Ensuite, lance un serveur local pour héberger une application web simple. Cette application servira d'interface pour notre agent.

cd toy_app
python -m http.server 8000 --bind 127.0.0.1

Ce serveur rendra accessible l'application à l'adresse http://127.0.0.1:8000. C'est cette URL que l'agent utilisera plus tard pour interagir avec l'interface.

INSTALLER LES OUTILS NÉCESSAIRES

Notre agent aura besoin de deux outils principaux : le OpenAI Agents SDK pour exécuter l'intelligence artificielle, et Playwright MCP pour contrôler le navigateur. Mais avant ça, il faut installer Node.js, car Playwright MCP s'exécute via ce runtime.

Sur Windows, exécute ces commandes dans ton terminal :

winget install OpenJS.NodeJS.LTS

Pour les autres systèmes d'exploitation, utilise l'installateur de Node.js depuis le site officiel ou passe par un gestionnaire de versions comme nvm. Voici comment installer Node.js avec nvm sur Linux ou macOS :

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.5/install.sh | bash
\. "$HOME/.nvm/nvm.sh"
nvm install --lts

Une fois installé, vérifie que tout fonctionne correctement :

node --version
npx --version

Ces commandes doivent afficher les numéros de version de Node.js et de npx, l'outil qui permet d'exécuter des paquets Node.js sans installation globale.

CONFIGURER L'AGENT IA AVEC OPEN AI AGENTS SDK

L'étape suivante consiste à créer l'agent lui-même. Pour cela, il faut installer le SDK d'OpenAI et configurer la connexion à l'API. Commence par installer le package Python :

# pip install openai-agents

Ensuite, importe les modules nécessaires et configure le client Azure OpenAI, qui servira d'intermédiaire avec le modèle de langage :

import os
from openai import AsyncAzureOpenAI
from agents import (
    setdefaultopenai_api,
    setdefaultopenai_client,
)

azure_client = AsyncAzureOpenAI(
    apikey=os.environ["OPENAIAPI_KEY"],
    apiversion=os.environ["OPENAIAPI_VERSION"],
    azureendpoint=os.environ["OPENAIAPI_BASE"],
)

setdefaultopenaiclient(azureclient)
setdefaultopenai_api("responses")

Cette configuration permet à l'agent de communiquer avec le modèle gpt-5.4 via l'API Azure OpenAI. Le SDK utilise l'API Responses d'OpenAI, optimisée pour les agents conversationnels.

DÉFINIR LE RÔLE ET LES INSTRUCTIONS DE L'AGENT

Un agent a besoin d'instructions claires pour savoir ce qu'il doit faire. Voici comment définir le rôle de notre agent :

AGENT_INSTRUCTIONS = """
You are an agent that can interact with a web browser.
""".strip()

Ces instructions sont volontairement minimalistes. L'agent recevra ses tâches précises via un prompt spécifique lors de l'exécution. Son rôle se limite ici à interagir avec un navigateur web.

CRÉER LE CONNECTEUR ENTRE L'AGENT ET LE NAVIGATEUR AVEC PLAYWRIGHT MCP

Pour que l'agent puisse contrôler un navigateur, il faut un pont entre lui et Chrome. C'est le rôle de Playwright MCP. MCP signifie Model Context Protocol : c'est un standard qui permet d'exposer des outils à un modèle de langage, afin qu'il puisse les utiliser directement.

Playwright est une bibliothèque d'automatisation de navigateur. Elle permet de cliquer, taper, naviguer et lire le contenu des pages web. Playwright MCP combine les capacités de Playwright avec le protocole MCP, offrant ainsi à l'agent un accès structuré aux éléments d'une page web.

Voici comment configurer Playwright MCP dans ton code Python :

from agents.mcp import MCPServerStdio

playwright_server = MCPServerStdio(
    name="Playwright MCP",
    params={
        "command": "npx",
        "args": [
            "-y",
            "@playwright/mcp@latest",
            "--browser",
            "chrome",
        ],
    },
)

Cette configuration lance Playwright MCP via npx, qui télécharge et exécute automatiquement le dernier package disponible. L'option -y accepte les prompts de confirmation, et --browser chrome précise que le navigateur à utiliser est Chrome. Si Chrome est déjà installé, aucune installation supplémentaire n'est nécessaire.

DÉFINIR LA TÂCHE À RÉALISER PAR L'AGENT

Notre agent va devoir résoudre un cas de support client via une console web. Voici comment formuler cette tâche :

APP_URL = "http://127.0.0.1:8000"

TASK = f"""
Open {APP_URL} and resolve the support case for order ORD-1042.

The customer says they received the wrong item. Use the information available in the
application to determine and apply the appropriate resolution. Add a concise internal
note and make sure the resolution was successfully recorded.

Report what you did when the task is complete.
""".strip()

La tâche est claire : ouvrir l'application à l'URL spécifiée, trouver le cas de support lié à la commande ORD-1042, et le résoudre en suivant les politiques de résolution disponibles dans l'application. L'agent doit également ajouter une note interne et vérifier que la résolution a bien été enregistrée.

LANCER L'AGENT ET OBSERVER SON FONCTIONNEMENT

Tout est prêt. Il ne reste plus qu'à lancer l'agent et à lui confier la tâche. Voici comment procéder :

from agents import Agent, ModelSettings
from openai.types.shared import Reasoning

agent = Agent(
    name="Support Console Browser Agent",
    model="gpt-5.4",
    model_settings=ModelSettings(
        reasoning=Reasoning(effort="medium"),
    ),
    instructions=AGENT_INSTRUCTIONS,
    mcpservers=[playwrightserver],
)

Cette configuration crée un agent nommé Support Console Browser Agent, utilisant le modèle gpt-5.4. Le paramètre reasoning=Reasoning(effort="medium") indique que l'agent doit réfléchir de manière approfondie avant d'agir.

Lance maintenant l'agent avec la tâche définie précédemment :

from agents import Runner

async with playwright_server:
    result = await Runner.run(
        agent,
        TASK,
        max_turns=20,
    )

print(result.final_output)

La commande async with playwright_server démarre le processus Playwright MCP et le maintient actif pendant que l'agent travaille. Le paramètre max_turns=20 limite le nombre d'interactions entre l'agent et le navigateur à 20 tours, pour éviter des boucles infinies.

ANALYSER LES ACTIONS DE L'AGENT

Pour comprendre ce que l'agent a fait, tu peux examiner les appels d'outils et leurs résultats :

for item in result.new_items:
    print(type(item).__name__, item)

Dans cet exemple, l'agent a trouvé le cas associé à la commande ORD-1042, inspecté la commande, la demande du client, le statut des stocks et les politiques de résolution pertinentes. Il a conclu qu'un remplacement était la solution appropriée, a ajouté une note interne et soumis la résolution. Enfin, il a vérifié le cas mis à jour et le journal d'audit pour confirmer que l'action avait bien été enregistrée.

COMPRENDRE LE FONCTIONNEMENT EN BOUCLE DE L'AGENT

Un agent qui utilise un navigateur fonctionne selon un cycle précis : observer, décider, agir, répéter. Voici comment cela se déroule :

1. L'agent reçoit une tâche et l'état actuel du navigateur. 2. Il interprète cet état en analysant ce qu'il voit sur la page. 3. Il décide de l'action à entreprendre (cliquer sur un bouton, remplir un formulaire, etc.). 4. Il envoie cette action au navigateur. 5. Le navigateur exécute l'action et affiche un nouvel état. 6. L'agent reçoit ce nouvel état et répète le cycle jusqu'à ce qu'il considère la tâche comme terminée.

Ce cycle est au cœur de tout agent capable d'interagir avec une interface utilisateur, qu'il s'agisse d'un navigateur ou d'une application de bureau.

ADAPTER CE MODÈLE À D'AUTRES CAS D'USAGE

Le modèle que nous avons utilisé ici est spécifique à l'interaction avec un navigateur web. Mais ce cycle observer-décider-agir peut être adapté à d'autres types d'interfaces :

• Un agent qui utilise un ordinateur comme un humain, en prenant des captures d'écran et en contrôlant la souris et le clavier. • Un agent qui interagit avec des applications de bureau, en utilisant des outils similaires à Playwright MCP mais adaptés à d'autres environnements. • Un agent qui automatise des tâches répétitives dans des logiciels métiers, en suivant des instructions précises.

Dans chaque cas, ce qui change, ce sont les canaux d'observation et d'action. Pour un navigateur, Playwright MCP fournit des informations structurées sur la page et permet de cibler directement les éléments web. Pour un usage plus général, on pourrait utiliser des captures d'écran et contrôler la souris par coordonnées.

EXPLORER LES POSSIBILITÉS DE PLAYWRIGHT MCP

Playwright MCP ne se limite pas à afficher une page web de manière structurée. Il offre plusieurs avantages clés :

• Accès direct aux éléments interactifs : liens, boutons, champs de formulaire reçoivent un identifiant unique que l'agent peut cibler directement, comme s'il avait une carte des stations de métro pour naviguer dans une page web. • Navigation automatique : l'agent peut se déplacer entre les pages, remplir des formulaires et cliquer sur des boutons sans avoir à gérer les détails techniques du navigateur. • Interaction avec des pages dynamiques : même si le contenu de la page change en temps réel, Playwright MCP permet à l'agent de suivre ces changements et d'adapter ses actions en conséquence. • Journalisation des actions : chaque interaction est enregistrée, ce qui permet de comprendre précisément ce que l'agent a fait et pourquoi.

LES LIMITES ET DÉFIS À CONNAÎTRE

Bien que ce modèle soit puissant, il présente quelques limites :

• Complexité des interfaces : certaines pages web sont très complexes, avec des éléments imbriqués et des interactions JavaScript avancées. Un agent peut avoir du mal à naviguer dans ces environnements sans une bonne structuration des données. • Latence des actions : chaque action envoyée au navigateur prend un peu de temps. Si l'agent doit effectuer de nombreuses interactions, cela peut ralentir considérablement l'exécution de la tâche. • Gestion des erreurs : si une page ne se charge pas correctement ou si un élément n'est pas trouvé, l'agent doit être capable de gérer ces erreurs et de proposer une solution alternative. • Sécurité et confidentialité : donner à un agent un accès complet à un navigateur expose potentiellement des données sensibles. Il est crucial de limiter les permissions et de surveiller les actions de l'agent.

UN CAS CONCRET : LA CONSOLE DE SUPPORT CLIENT

Dans notre exemple, l'agent a utilisé une console de support client simple, construite avec HTML, CSS et JavaScript. Cette console simule un environnement réel sans avoir besoin d'un backend ou d'une base de données. Toutes les données sont stockées côté client, ce qui la rend facile à déployer localement.

Voici ce que fait cette console :

• Un panneau de gauche affiche une boîte de réception de support, avec une liste de cas en attente. • En sélectionnant un cas, la partie droite de la console affiche les détails : la commande associée, le contexte client et les politiques de résolution. • L'agent peut résoudre un cas en ajoutant une note interne et en enregistrant l'action choisie. • Un journal d'audit enregistre toutes les modifications apportées aux cas, permettant de suivre l'historique des actions.

POURQUOI UTILISER UN AGENT IA DANS UN NAVIGATEUR ?

Les agents IA capables d'interagir avec des interfaces web ouvrent de nouvelles possibilités :

LES OUTILS ALTERNATIFS À PLAYWRIGHT MCP

Playwright MCP n'est pas le seul outil disponible pour connecter un agent à un navigateur. Voici quelques alternatives :

• Selenium : une bibliothèque d'automatisation de navigateur populaire, compatible avec plusieurs langages de programmation. Elle est souvent utilisée pour les tests automatisés. • Puppeteer : un outil développé par Google pour contrôler Chrome ou Chromium via JavaScript. Il est particulièrement utile pour automatiser des tâches dans le navigateur. • BrowserGym : une bibliothèque Python qui facilite l'interaction avec les navigateurs pour les agents IA. Elle offre une interface simple pour envoyer des commandes et recevoir des observations. • AutoGen : un framework de Microsoft qui permet de créer des agents conversationnels, y compris ceux capables d'interagir avec des interfaces utilisateur. • LangChain : une bibliothèque Python qui simplifie la création d'applications utilisant des modèles de langage, avec des outils pour interagir avec des navigateurs et d'autres interfaces.

Chaque outil a ses avantages et ses inconvénients. Le choix dépend des besoins spécifiques du projet, du langage de programmation utilisé et des fonctionnalités requises.

EXEMPLE DE CODE COMPLET POUR UN AGENT SIMPLE

Voici un exemple de code complet pour créer un agent basique qui ouvre une page web et interagit avec elle :

# pip install openai-agents

import os
from openai import AsyncAzureOpenAI
from agents import Agent, ModelSettings, Runner
from agents.mcp import MCPServerStdio
from openai.types.shared import Reasoning

# Configuration du client Azure OpenAI
azure_client = AsyncAzureOpenAI(
    apikey=os.environ["OPENAIAPI_KEY"],
    apiversion=os.environ["OPENAIAPI_VERSION"],
    azureendpoint=os.environ["OPENAIAPI_BASE"],
)

setdefaultopenaiclient(azureclient)
setdefaultopenai_api("responses")

# Instructions de l'agent
AGENT_INSTRUCTIONS = """
You are an agent that can interact with a web browser.
""".strip()

# Configuration de Playwright MCP
playwright_server = MCPServerStdio(
    name="Playwright MCP",
    params={
        "command": "npx",
        "args": [
            "-y",
            "@playwright/mcp@latest",
            "--browser",
            "chrome",
        ],
    },
)

# Création de l'agent
agent = Agent(
    name="Browser Agent",
    model="gpt-5.4",
    model_settings=ModelSettings(
        reasoning=Reasoning(effort="medium"),
    ),
    instructions=AGENT_INSTRUCTIONS,
    mcpservers=[playwrightserver],
)

# Tâche de l'agent
TASK = """
Open the page at http://example.com and find the title of the page.
""".strip()

# Exécution de l'agent
async with playwright_server:
    result = await Runner.run(
        agent,
        TASK,
        max_turns=10,
    )

print(result.final_output)

OPTIMISER LES PERFORMANCES DE L'AGENT

Pour que ton agent fonctionne de manière optimale, voici quelques conseils :

• Limiter le nombre de tours : utilise max_turns pour éviter que l'agent ne tourne en boucle indéfiniment. Un bon point de départ est 20 tours, mais ajuste ce nombre en fonction de la complexité de la tâche. • Structurer les données observées : plus les informations fournies à l'agent sont claires et organisées, plus il pourra prendre des décisions rapides et précises. Évite les captures d'écran brutes si possible. • Ajouter des vérifications : demande à l'agent de confirmer qu'une action a bien été enregistrée avant de passer à l'étape suivante. Cela évite les erreurs de traitement. • Utiliser des prompts précis : plus la tâche est bien définie, plus l'agent aura de chances de réussir. Évite les formulations ambiguës ou trop larges. • Tester et itérer : lance plusieurs tests avec des tâches similaires pour identifier les points de blocage et améliorer progressivement les instructions et la configuration de l'agent.

LES PERSPECTIVES FUTURES DES AGENTS NAVIGATEURS

Les agents capables d'interagir avec des interfaces web sont encore en développement, mais leur potentiel est immense. Voici quelques tendances et évolutions à surveiller :

• Meilleure intégration avec les APIs web : à l'avenir, les agents pourront interagir directement avec les APIs des applications web, sans passer par l'interface graphique. Cela rendra les interactions plus rapides et plus fiables. • Amélioration des modèles de langage : les nouveaux modèles seront capables de comprendre des interfaces plus complexes et d'effectuer des tâches plus sophistiquées. • Collaboration homme-agent : les agents ne remplaceront pas totalement les humains, mais ils pourront travailler en tandem, par exemple en préparant des informations pour un humain qui prendra ensuite la décision finale. • Sécurité et contrôle : des outils plus avancés permettront de surveiller et de limiter les actions des agents, réduisant ainsi les risques liés à leur utilisation. • Déploiement dans des environnements réels : à mesure que les agents deviennent plus fiables, ils seront déployés dans des environnements de production, par exemple pour automatiser des processus métiers complexes.

RESSOURCES ET DOCUMENTATION UTILES

Pour aller plus loin, voici quelques ressources qui pourront t'aider :

• Documentation officielle d'OpenAI Agents SDK : [https://platform.openai.com/docs/agents](https://platform.openai.com/docs/agents) • Documentation de Playwright : [https://playwright.dev/](https://playwright.dev/) • Documentation de Playwright MCP : [https://github.com/modelcontextprotocol/servers/tree/main/src/playwright](https://github.com/modelcontextprotocol/servers/tree/main/src/playwright) • Exemple de code complet : [https://github.com/ShuaiGuo16/llm-browser-agent/tree/main](https://github.com/ShuaiGuo16/llm-browser-agent/tree/main) • Tutoriel sur les agents IA : [https://learn.microsoft.com/en-us/azure/ai-foundry/concepts/agents](https://learn.microsoft.com/en-us/azure/ai-foundry/concepts/agents) • Communauté des développeurs Playwright : [https://github.com/microsoft/playwright/discussions](https://github.com/microsoft/playwright/discussions)

CONCLUSION : CRÉER TON PROPRE AGENT NAVIGATEUR

Le modèle que nous avons utilisé ici est un point de départ. À toi d'adapter, d'améliorer et d'étendre ces concepts pour créer des agents toujours plus performants et adaptés à tes besoins spécifiques. N'hésite pas à explorer les ressources disponibles et à expérimenter avec différents outils et configurations.

Avec un peu de pratique, tu pourras concevoir des agents qui transforment radicalement la manière dont tu interagis avec le web et les applications numériques.