Comment donner un navigateur à un agent LLM

du travail utile se produit toujours dans les interfaces Web.

Pour résoudre un ticket, l’équipe d’assistance doit utiliser une console d’administration. Une équipe opérationnelle s’appuie sur des tableaux de bord pour suivre les alarmes. Avant de parler avec un client, un commercial vérifiera probablement d’abord le CRM.

Pour que les agents LLM deviennent utiles dans ces flux de travail, ils doivent travailler directement via le navigateur.

Dans cet article, nous allons créer un agent utilisant un navigateur avec le SDK OpenAI Agents et Playwright MCP. Nous examinerons d’abord la boucle derrière l’utilisation du navigateur, puis la mettrons en pratique à travers une étude de cas concrète.

---

1. Le modèle mental

À un niveau élevé, un agent utilisant un navigateur est mieux compris comme un LLM placé dans une boucle d’interaction avec un navigateur.

La boucle se déroule ainsi : l’agent démarre avec une tâche et l’état actuel du navigateur. L’agent interprète ensuite cet état, décide quoi faire ensuite et renvoie une action au navigateur. Cette action produirait un nouvel état du navigateur, qui deviendra l’entrée de la prochaine décision.

Cette boucle se poursuit jusqu’à ce que l’agent estime que la tâche est terminée.

Pour faire fonctionner la boucle, nous avons besoin de deux connexions entre l’agent et le navigateur :

1. Un canal d’observationafin que l’agent puisse recevoir l’état actuel du navigateur.
2. Un canal d’actionafin que l’agent puisse interagir avec le navigateur.

Pour le canal d’observation, les choix courants incluent des captures d’écran, des informations de page structurées (par exemple, un modèle d’objet de document ou une arborescence d’accessibilité), ou une combinaison des deux.

Pour le canal d’action, l’agent peut utiliser les commandes de la souris et du clavier, cibler des éléments de page spécifiques ou émettre des commandes de navigateur de niveau supérieur.

Les choix d’observation et d’action sont généralement indépendants, mais en pratique, deux couples sont couramment observés :

1. capture d’écran + actions de la souris et du clavier basées sur les coordonnées
2. état de la page structurée + actions du navigateur ciblées sur les éléments

Le premier appariement penche vers le général utilisation de l’ordinateurqui s’étend au-delà du navigateur à d’autres applications de bureau. La seconde est plus spécifique à l’utilisation du navigateur, car elle profite de la structure déjà disponible à l’intérieur d’une page Web.

Dans cet article, nous nous concentrerons sur les observations de pages structurées ainsi que sur les actions du navigateur ciblées sur les éléments.

---

2. Étude de cas : Résoudre une demande d’assistance client

Pour notre étude de cas, nous allons créer un agent utilisant un navigateur qui résout une demande client via une console de support Web.

2.1 Préparation de la console d’assistance

Pour créer l’environnement du navigateur, j’ai codé une petite console de support client. Il s’agit d’une application Web statique construite avec du HTML, CSS et JavaScript simples. Il n’y a pas de backend d’application ni de base de données : toutes les données résident dans le navigateur.

Nous pouvons servir la console localement avec le serveur HTTP intégré de Python :

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

Cela rend la console disponible à l’adresse http://127.0.0.1:8000, que nous transmettons ensuite à l’agent en tant que APP_URL:

Le côté gauche de la console fonctionne comme une boîte de réception d’assistance. Une fois qu’un ticket est sélectionné, le reste de la console affiche la commande associée, le contexte client et les politiques de résolution. À partir de là, le cas peut être résolu par une note interne. La console dispose également d’un journal d’audit qui assure le suivi de la mise à jour.

La tâche de l’agent est simple : enquêter sur un cas d’assistance entrant et le résoudre jusqu’à sa résolution, entièrement via cette interface de console.

2.2 Définition de l’agent utilisant le navigateur

Ensuite, nous configurons l’agent utilisant le navigateur.

Pour la pile technologique, nous utiliserons ici le SDK des agents OpenAI pour alimenter le runtime de l’agent et Dramaturge MCP pour connecter l’agent au navigateur.

Notre agent final configuré ressemble à ceci :

# pip install openai-agents
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,
    mcp_servers=[playwright_server],
)

Il y a trois éléments que nous devons déballer ici, à savoir le client LLM, les instructions de l’agent et les outils du navigateur.

Tout d’abord, nous connectons le SDK Agents à Azure OpenAI :

import os
from openai import AsyncAzureOpenAI
from agents import (
    set_default_openai_api,
    set_default_openai_client,
)

azure_client = AsyncAzureOpenAI(
    api_key=os.environ["OPENAI_API_KEY"],
    api_version=os.environ["OPENAI_API_VERSION"],
    azure_endpoint=os.environ["OPENAI_API_BASE"],
)

set_default_openai_client(azure_client)
set_default_openai_api("responses")

Nous enregistrons le client avec le SDK Agents et le configurons pour utiliser l’API Responses.

On a alors l’instruction suivante, volontairement minimale :

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

Nous définissons uniquement le rôle de l’agent. La tâche réelle viendra plus tard dans l’invite envoyée à l’agent.

Ensuite, nous devons configurer le Playwright MCP.

Qu’est-ce que le MCP du dramaturge ?
Playwright est une bibliothèque d’automatisation de navigateur. Il pilote un véritable navigateur en votre nom et effectue des clics, des saisies, des navigations et des lectures sur tout ce qui se trouve sur la page.

MCP (Model Context Protocol) est un moyen standard d’exposer des outils à un LLM, afin qu’un agent puisse les appeler directement. Playwright MCP est ce que vous obtenez lorsque vous combinez les deux, c’est-à-dire les capacités du navigateur de Playwright, exposées comme des outils qu’un agent peut récupérer et utiliser.

Ce qui le rend intéressant, c’est la façon dont il montre la page à l’agent. Au lieu d’une capture d’écran, Playwright MCP utilise par défaut un instantané d’accessibilitéqui est essentiellement une lecture structurée du contenu de la page. Les éléments interactifs tels que les liens, les boutons et les champs de saisie reçoivent chacun un identifiant de référence que l’agent peut cibler directement. C’est exactement l’association observation structurée et action ciblée sur les éléments dont nous avons parlé plus tôt.

Playwright MCP fonctionne via Node.js. Pour installer Node.js, sous Windows :

winget install OpenJS.NodeJS.LTS

Sur macOS :

brew install node

Et sous Linux :

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

Vérifiez ensuite l’installation :

node --version
npx --version

Nous pouvons configurer le SDK Agents pour démarrer le serveur MCP via les éléments suivants npx commande:

from agents.mcp import MCPServerStdio

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

Ici, npx récupère et exécute le dernier package Playwright MCP. Le -y le drapeau accepte automatiquement le npx invite de confirmation, tandis que --browser chrome indique à Playwright quel navigateur lancer. Chrome est également le navigateur par défaut de Playwright MCP, et s’il est déjà installé, aucune installation de navigateur distincte n’est requise.

MCPServerStdio configure le SDK Agents pour lancer Playwright MCP en tant que processus local. Lorsque l’agent appelle pour la première fois un outil de navigateur, Playwright MCP ouvre une fenêtre Chrome visible et exécute l’action de navigateur demandée.

2.3 Exécution de l’agent

Nous pouvons maintenant confier à l’agent une tâche concrète :

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()

Dans l’invite de tâche, nous avons décrit comment accéder à l’application et le résultat souhaité.

Nous exécutons ensuite l’agent avec :

from agents import Runner

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

print(result.final_output)

Le async with Le bloc démarre le processus Playwright MCP et le maintient connecté pendant l’exécution de l’agent. Nous utilisons max_turns pour définir une limite supérieure au nombre de tours que l’agent peut effectuer.

Une fois démarré, Chrome s’ouvrira et nous pourrons regarder l’agent travailler via la console d’assistance.

La réponse finale résumait correctement le résultat :

Resolved CASE-4107 for order ORD-1042 with Replacement.

The case now shows Resolved, the recorded action is Replacement,
and the audit log contains the corresponding resolution entry.

Si vous le souhaitez, vous pouvez également inspecter les appels de l’outil du navigateur et leurs sorties de cette manière :

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

Lors de mon parcours, l’agent a trouvé le cas associé à ORD-1042 et il a inspecté la commande, la demande du client, l’état des stocks et la politique de résolution pertinente. Il a ensuite conclu qu’un remplacement était approprié, a ajouté une note interne et a soumis la résolution. Enfin, il a vérifié le dossier mis à jour et le journal d’audit pour confirmer que l’action avait été enregistrée.

C’est exactement le comportement agent que nous souhaitons.

---

3. De l’utilisation du navigateur à l’utilisation de l’ordinateur

Ce que nous avons construit dans cette étude de cas est un agent utilisant un navigateur. Pourtant, le modèle sous-jacent, c’est-à-dire le observer, décider, agir et répéter boucle, s’étend naturellement au général utilisation de l’ordinateur.

Ce qui change, ce sont les canaux d’observation et d’action.

Dans notre cas, Playwright MCP fournit à l’agent des informations de page structurées et lui permet de cibler des éléments Web individuels. Un agent informatique plus général peut travailler à partir de captures d’écran et contrôler la souris et le clavier par coordonnées.

Vous pouvez trouver le dépôt de notre étude de cas ici : https://github.com/ShuaiGuo16/llm-browser-agent/tree/main