Comment utiliser le code Claude dans votre navigateur

Le problème des agents de codage est qu’ils ne peuvent être utilisés que pour effectuer du codage ou de la programmation. Cependant, ce sont des agents beaucoup plus généralistes et sont capables d’effectuer essentiellement toutes les tâches de bureau, bien qu’avec plus ou moins de succès.

Un domaine, cependant, qui a reçu beaucoup d’attention est la navigation à l’aide de navigateurs Web dotés d’agents de codage tels que Claude Code et le Codex d’OpenAI.

Les agents sont devenus incroyablement compétents dans la navigation sur le Web, ce qui est très utile pour de nombreuses tâches différentes.

La navigation sur le Web peut bien entendu être utile dans de nombreuses situations différentes, comme par exemple pour rechercher des informations sur Internet ou remplir des formulaires à votre place. Cependant, il convient de noter que certains cas d’utilisation peuvent enfreindre les conditions de service, vous devez donc absolument en être conscient. Le principal domaine d’utilisation que je vais aborder aujourd’hui est tout à fait légal et couvre les applications de navigation que vous développez vous-même avec les agents de codage pour tester et vérifier les implémentations.

Auparavant, j’ai beaucoup parlé de la création de tâches vérifiables chaque fois que vous demandez à des agents de codage d’effectuer des actions à votre place. Donner aux agents de codage l’accès à votre navigateur pour tester les implémentations est un élément crucial de cette vérifiabilité.

Pourquoi les agents de codage devraient utiliser votre navigateur

Tout d’abord, j’aimerais expliquer pourquoi vous devriez vous soucier d’exécuter des navigateurs avec vos agents de codage. Les navigateurs sont une interface importante que les humains utilisent pour interagir avec le monde. Grâce à votre navigateur, vous pouvez effectuer de nombreuses actions différentes, telles que lire des informations, remplir des candidatures, etc.

Étant donné qu’il s’agit d’une interface très importante permettant aux humains d’interagir avec le monde, beaucoup d’attention et de recherches ont été axées sur une navigation efficace dans les navigateurs. Il existe de nombreuses entreprises spécialisées dans la navigation par navigateur, et tous les laboratoires frontières proposent également une telle intégration dans leurs produits, comme le Codex d’OpenAI et le Code Claude d’Anthropic.

Imaginez si vous demandez à un agent de codage d’implémenter une conception suivant un fichier de conception HTML. L’agent de codage est, bien sûr, doué pour le code front-end et peut commencer à l’implémenter immédiatement ; cependant, si l’agent de codage ne peut pas naviguer dans le navigateur, il lui est impossible de vérifier son propre travail.

Cela augmente considérablement le risque qu’un agent de codage commette des erreurs et ne mette pas en œuvre la conception exacte que vous souhaitiez mettre en œuvre.

Heureusement, il existe une solution très simple à ce problème. Donnez à votre agent de codage l’accès au navigateur. Permettez-lui de prendre des captures d’écran de la conception qu’il a lui-même implémentée et de la comparer aux captures d’écran de la conception que vous vouliez qu’il implémente. L’agent de codage peut ensuite continuer l’itération jusqu’à ce que le code implémenté ressemble exactement au fichier de conception.

Cela vous fait gagner beaucoup de temps, en tant que programmeur, puisque vous n’avez pas besoin de vérifier et d’informer à plusieurs reprises l’agent de codage des erreurs qu’il a commises lors de la mise en œuvre de la conception. Cela vous permet encore une fois d’effectuer de nombreuses autres tâches différentes et d’être plus productif en tant qu’ingénieur.

Comment ça marche

Avant de passer à la façon de naviguer dans les navigateurs avec Claude Code, je souhaite également avoir une section simple décrivant son fonctionnement.

En théorie, naviguer dans le navigateur est assez simple. L’agent de codage navigue en ouvrant bien sûr le navigateur, où il a accès à quelques actions :

• Prendre une capture d’écran
• Cliquez (basé sur les coordonnées)
• Saisir du texte

Voici les trois actions principales effectuées par l’agent de codage, qui correspondent essentiellement à toutes les actions dont vous avez besoin pour interagir avec un navigateur :

1. L’agent de codage doit prendre des captures d’écran, car c’est ainsi qu’il découvre le contenu de chaque page et détermine où cliquer.
2. L’agent de codage doit également être capable de cliquer à différents endroits du site Web, par exemple cliquer sur des boutons ou cliquer sur des champs de saisie.

Ceci est basé sur les coordonnées.

Ainsi, si l’agent de codage souhaite cliquer à un emplacement spécifique, il affiche le texte suivant :

click(x=0.754, y=0.328)

Il utilise essentiellement la fonction clic et donne les coordonnées où il veut cliquer. Les coordonnées sont généralement normalisées pour être dans une plage définie, par exemple entre 0 et 1.

Ensuite, une fois que l’agent a cliqué sur un emplacement spécifique, il peut saisir du texte pour faire tout ce qu’il veut sur le navigateur. L’agent de codage peut bien entendu également effectuer différents types de clics, comme par exemple un clic droit pour obtenir plus d’options sur la page.

Cette boucle itère ensuite. L’agent de codage prend une capture d’écran, choisit l’action à effectuer, vérifie s’il a atteint son objectif ou non et répète. Il prend à nouveau une capture d’écran, sélectionne une action, vérifie si elle a atteint un objectif et continue. L’agent continue simplement ainsi jusqu’à ce qu’il ait atteint son objectif dans le navigateur.

Comment naviguer dans les navigateurs avec Claude Code

Ensuite, je souhaite expliquer exactement comment naviguer dans les navigateurs à l’aide de Claude Code, et les principes que je vais aborder ici s’appliquent essentiellement à n’importe quel agent de codage. Je ne vais pas aborder les techniques qui ne peuvent pas être facilement généralisées à n’importe quel autre agent de codage.

Premièrement, si vous utilisez Claude Code, il dispose d’une intégration Chrome intégrée que vous pouvez simplement activer en écrivant la commande ci-dessous pendant que vous êtes dans la fenêtre Claude Code.

/chrome

Le Codex a également une commande correspondante.

Cela donne très simplement à Claude l’accès pour ouvrir Chrome sur votre ordinateur et l’utiliser pour vérifier les tâches.

Je pense que l’implémentation de Chrome dans Claude fonctionne bien, mais ce n’est pas optimal.

---

J’ai une meilleure expérience en utilisant le Playwright MCP, que vous pouvez simplement installer dans Claude Code en disant à Claude Code de l’installer :

Install the Playwright MCP to interact with the browser

Une fois que Claude l’a installé, vous devez redémarrer Claude Code et vous aurez accès au Playwright MCP. D’après mon expérience, Claude est plus efficace pour accomplir des tâches s’il utilise le Playwright MCP au lieu d’interagir avec l’implémentation /chrome déjà présente dans le code de base de Claude.

Bien sûr, si vous disposez d’un autre agent de codage, vous pouvez faire exactement la même chose : dites-lui d’installer le Playwright MCP. L’agent installera le MCP, vous redémarrerez l’agent et il aura accès à Playwright.

Comment faire en sorte que mon agent teste ma mise en œuvre

Maintenant que vous avez implémenté Playwright MCP et donné à votre agent l’accès pour interagir avec le navigateur, vous pouvez l’utiliser pour tester vos implémentations.

Chaque fois que votre agent a implémenté quelque chose (par exemple, implémenté une nouvelle conception à partir d’un fichier de conception), dites simplement à l’agent de vérifier son travail de bout en bout en le parcourant dans Chrome avec le MCP Playwright et en vérifiant son propre travail.

Il est également utile de dire à l’agent de ne pas s’arrêter et de revenir vers vous avant d’avoir vérifié son travail de bout en bout. Vérifier le travail de bout en bout, dans ce cas, signifie littéralement interagir avec le navigateur et voir si quelque chose fonctionne.

J’utilise généralement également la fonctionnalité /goal, qui est disponible à la fois dans le Codex et dans Claude Code, qui permet essentiellement à l’agent de continuer à travailler sur une tâche jusqu’à ce qu’elle soit accomplie. J’écrirai alors généralement quelque chose comme :

/goal continue working on the task, implementing <feature> until you've 
fully implemented it and tested and verified it end to end by interacting
with the browser using the playwright MCP, taking screenshots, and
verifying your work, only come back to me once you've both implemented 
and fully tested the implementation successfully. 

Cela permettra à l’agent de continuer à travailler vers l’objectif et de le vérifier, et de ne revenir vers vous qu’une fois qu’il aura vérifié son travail. Cela m’a fait gagner un temps incroyable et est particulièrement utile si vous souhaitez uniquement que l’agent implémente les conceptions.

Conclusion

Dans cet article, j’ai expliqué comment appliquer Claude Code pour vérifier le travail dans votre navigateur. J’ai d’abord expliqué pourquoi les agents de codage peuvent et doivent interagir avec votre navigateur. Ensuite, je vous ai expliqué comment la navigation dans le navigateur fonctionne réellement avec les agents de codage, ce qui est en fait un concept assez simple. Enfin, j’ai expliqué spécifiquement comment naviguer dans les navigateurs à l’aide de Claude Code ou d’autres agents de codage.

Je pense que la navigation par navigateur restera toujours importante, car la plupart des façons dont les humains interagissent avec le monde se font via un navigateur. Cependant, il convient de noter que les agents de codage sont encore beaucoup plus efficaces dans l’utilisation des API et des MCP. Par conséquent, si vous pouvez interagir avec un service par ces moyens, vous devriez toujours le faire.

👋 Entrer en contact

👉 Mon eBook et mon webinaire gratuits :

🚀 10x votre ingénierie avec les LLM (cours gratuit par e-mail de 3 jours)

📚 Obtenez mon ebook gratuit sur les modèles de langage de vision

💻 Mon webinaire sur les modèles de langage de vision

👉 Retrouvez-moi sur les réseaux sociaux :

💌 Sous-pile

🔗 LinkedIn

🐦 X/Twitter