Das Besondere an Codierungsagenten ist, dass sie nur zum Codieren oder Programmieren verwendet werden können. Allerdings handelt es sich bei ihnen um wesentlich allgemeinere Agenten, die grundsätzlich alle Büroaufgaben erledigen können, wenn auch mit unterschiedlichem Erfolg.
Ein Bereich, der jedoch große Aufmerksamkeit erhalten hat, ist das Surfen mit Webbrowsern mit Codierungsagenten wie Claude Code und Codex von OpenAI.
Die Agenten sind unglaublich geübt darin, im Web zu navigieren, was für viele verschiedene Aufgaben sehr nützlich ist.
Das Surfen im Web kann natürlich in vielen verschiedenen Situationen nützlich sein, beispielsweise beim Abrufen von Informationen im Web oder beim Ausfüllen von Formularen. Es ist jedoch zu beachten, dass einige Anwendungsfälle gegen die Nutzungsbedingungen verstoßen können. Sie sollten sich dessen additionally unbedingt bewusst sein. Der Hauptnutzungsbereich, den ich heute behandeln werde, ist definitiv völlig authorized und umfasst das Navigieren in Anwendungen, die Sie selbst entwickeln, mit den Codierungsagenten, um Implementierungen zu testen und zu überprüfen.
Zuvor habe ich viel darüber gesprochen, überprüfbare Aufgaben zu erstellen, wenn Sie Programmieragenten bitten, Aktionen für Sie auszuführen. Ein entscheidender Teil dieser Überprüfbarkeit ist es, Programmieragenten Zugriff auf Ihren Browser zu gewähren, um Implementierungen zu testen.
Warum Programmieragenten Ihren Browser verwenden sollten
Zunächst möchte ich erläutern, warum Sie sich für die Ausführung von Browsern mit Ihren Codierungsagenten interessieren sollten. Browser sind eine wichtige Schnittstelle, über die Menschen mit der Welt interagieren. Über Ihren Browser können Sie viele verschiedene Aktionen ausführen, z. B. Informationen nachlesen, Anträge ausfüllen usw.
Da es sich dabei um eine so wichtige Schnittstelle für Menschen zur Interaktion mit der Welt handelt, wurde der effektiven Navigation in Browsern viel Aufmerksamkeit und Forschung gewidmet. Es gibt zahlreiche Unternehmen, die sich auf Browser-Navigation spezialisiert haben, und auch alle Frontier Labs bieten eine solche Integration in ihre Produkte an, beispielsweise Codex von OpenAI und Claude Code von Anthropic.
Stellen Sie sich vor, Sie weisen einen Codierungsagenten an, ein Design anhand einer HTML-Designdatei zu implementieren. Der Coding-Agent ist natürlich intestine im Entrance-Finish-Code und kann sofort mit der Implementierung beginnen; Wenn der Codierungsagent jedoch nicht im Browser navigieren kann, ist es für den Codierungsagenten unmöglich, seine eigene Arbeit zu überprüfen.
Dies erhöht die Wahrscheinlichkeit, dass ein Codierungsagent Fehler macht und nicht genau das Design implementiert, das Sie implementieren wollten, erheblich.
Glücklicherweise gibt es eine sehr einfache Lösung für dieses Downside. Gewähren Sie Ihrem Programmieragenten Zugriff auf den Browser. Lassen Sie es Screenshots des Designs machen, das es selbst implementiert hat, und vergleichen Sie diese mit den Screenshots des Designs, das Sie implementieren wollten. Der Codierungsagent kann dann mit der Iteration fortfahren, bis der implementierte Code genau wie die Designdatei aussieht.
Dies spart Ihnen als Programmierer viel Zeit, da Sie den Codierungsagenten nicht wiederholt überprüfen und über Fehler informieren müssen, die ihm bei der Designimplementierung unterlaufen sind. Dies wiederum ermöglicht es Ihnen, viele andere Aufgaben auszuführen und als Ingenieur produktiver zu sein.
Wie es funktioniert
Bevor ich mit der Navigation in Browsern mit Claude Code fortfahre, möchte ich auch einen einfachen Abschnitt über die Funktionsweise haben.
Theoretisch ist die Navigation im Browser recht einfach. Der Coding-Agent navigiert natürlich, indem er den Browser öffnet und dort Zugriff auf einige Aktionen hat:
- Machen Sie einen Screenshot
- Klicken (koordinatenbasiert)
- Geben Sie Textual content ein
Dies sind die drei Hauptaktionen, die der Codierungsagent ausführt. Dabei handelt es sich im Grunde um alle Aktionen, die Sie für die Interaktion mit einem Browser benötigen:
- Der Coding-Agent muss Screenshots machen, weil er so herausfindet, was sich auf jeder Seite befindet und wo er klicken muss.
- Der Codierungsagent muss auch in der Lage sein, auf verschiedene Stellen auf der Web site zu klicken, beispielsweise auf Schaltflächen oder Eingabefelder.
Dies ist koordinatenbasiert.
Wenn der Coding-Agent additionally an einer bestimmten Stelle klicken möchte, gibt er folgenden Textual content aus:
click on(x=0.754, y=0.328)Es nutzt grundsätzlich die Klickfunktion und gibt die Koordinaten an, wo geklickt werden soll. Die Koordinaten werden normalerweise so normalisiert, dass sie in einem festgelegten Bereich liegen, beispielsweise zwischen 0 und 1.
Sobald der Agent dann auf eine bestimmte Stelle geklickt hat, kann er Textual content eingeben, um alles zu tun, was er im Browser tun möchte. Der Codierungsagent kann natürlich auch verschiedene Arten von Klicks ausführen, z. B. einen Rechtsklick, um weitere Optionen auf der Seite anzuzeigen.
Diese Schleife wird dann wiederholt. Der Coding-Agent macht einen Screenshot, wählt die auszuführende Aktion aus, prüft, ob das Ziel erreicht wurde oder nicht, und wiederholt den Vorgang. Es macht erneut einen Screenshot, wählt eine Aktion aus, prüft, ob ein Ziel erreicht wurde, und fährt fort. Der Agent macht einfach so weiter, bis er sein Ziel im Browser erreicht hat.
So navigieren Sie mit Claude Code durch Browser
Als nächstes möchte ich genau erläutern, wie man mit Claude Code in Browsern navigiert, und die Prinzipien, die ich hier behandele, gelten grundsätzlich für jeden Codierungsagenten. Ich werde nicht auf Techniken eingehen, die nicht einfach auf andere Programmieragenten übertragen werden können.
Erstens: Wenn Sie Claude Code verwenden, verfügt es über eine integrierte Chrome-Integration, die Sie einfach aktivieren können, indem Sie den folgenden Befehl eingeben, während Sie sich im Claude Code-Fenster befinden.
/chromeCodex verfügt auch über einen entsprechenden Befehl.
Dies gibt Claude ganz einfach Zugriff, um Chrome auf Ihrem Laptop zu öffnen und es zum Überprüfen von Aufgaben zu verwenden.
Ich denke, die Chrome-Implementierung in Claude funktioniert intestine, aber sie ist nicht optimum.
Ich habe eine bessere Erfahrung mit dem Playwright MCP, das Sie einfach in Claude Code installieren können, indem Sie Claude Code anweisen, es zu installieren:
Set up the Playwright MCP to work together with the browserNachdem Claude es installiert hat, müssen Sie Claude Code neu starten und Sie haben Zugriff auf das Playwright MCP. Meiner Erfahrung nach kann Claude Aufgaben effektiver erledigen, wenn es das Playwright MCP verwendet, anstatt mit der /chrome-Implementierung zu interagieren, die bereits im Foundation-Claude-Code vorhanden ist.
Wenn Sie über einen anderen Codierungsagenten verfügen, können Sie natürlich genau das Gleiche tun: ihm mitteilen, dass er das Playwright MCP installieren soll. Der Agent installiert das MCP, Sie starten den Agenten neu und er erhält Zugriff auf Playwright.
Wie kann ich meinen Agenten dazu bringen, meine Implementierung zu testen?
Nachdem Sie das Playwright MCP implementiert und Ihrem Agenten Zugriff zur Interaktion mit dem Browser gewährt haben, können Sie es zum Testen Ihrer Implementierungen verwenden.
Wenn Ihr Agent etwas implementiert hat (z. B. ein neues Design aus einer Designdatei implementiert hat), weisen Sie den Agenten einfach an, seine Arbeit durchgängig zu überprüfen, indem er sie in Chrome mit dem Playwright MCP durchgeht und seine eigene Arbeit überprüft.
Es ist auch sinnvoll, dem Agenten mitzuteilen, dass er nicht innehalten und zu Ihnen zurückkommen soll, bevor er seine Arbeit vollständig überprüft hat. Die Finish-to-Finish-Verifizierung der Arbeit bedeutet in diesem Fall buchstäblich, mit dem Browser zu interagieren und zu sehen, ob etwas funktioniert.
Normalerweise verwende ich auch die Funktion „/objective“, die sowohl in Codex als auch in Claude Code verfügbar ist. Dabei handelt es sich im Grunde um eine Möglichkeit, mit der der Agent so lange auf eine Aufgabe hinarbeitet, bis sie erreicht ist. Normalerweise schreibe ich dann so etwas wie:
/objective proceed engaged on the duty, implementing <characteristic> till you've got
totally carried out it and examined and verified it finish to finish by interacting
with the browser utilizing the playwright MCP, taking screenshots, and
verifying your work, solely come again to me as soon as you've got each carried out
and totally examined the implementation efficiently. Dadurch arbeitet der Agent weiter auf das Ziel hin und überprüft es und meldet sich erst wieder bei Ihnen, wenn er seine Arbeit überprüft hat. Das hat mir unglaublich viel Zeit gespart und ist besonders nützlich, wenn der Agent nur Entwürfe umsetzen soll.
Abschluss
In diesem Artikel habe ich beschrieben, wie Sie Claude Code anwenden, um die Arbeit in Ihrem Browser zu überprüfen. Ich habe zunächst erläutert, warum Codierungsagenten mit Ihrem Browser interagieren können und sollten. Dann habe ich Ihnen gezeigt, wie die Browsernavigation mit Codierungsagenten tatsächlich funktioniert, was eigentlich ein ziemlich einfaches Konzept ist. Abschließend ging ich speziell darauf ein, wie Sie mit Claude Code oder anderen Codierungsagenten in Browsern navigieren können.
Ich glaube, dass die Browsernavigation weiterhin wichtig bleiben wird, da Menschen mit der Welt häufig über einen Browser interagieren. Es ist jedoch anzumerken, dass Codierungsagenten APIs und MCPs immer noch weitaus effektiver nutzen. Wenn Sie additionally stattdessen über diese Mittel mit einem Dienst interagieren können, sollten Sie dies grundsätzlich immer tun.
👉 Mein kostenloses E-E book und Webinar:
🚀 Verzehnfachen Sie Ihr Engineering mit LLMs (kostenloser 3-tägiger E-Mail-Kurs)
📚 Holen Sie sich mein kostenloses E-E book „Imaginative and prescient Language Fashions“.
💻 Mein Webinar zu Imaginative and prescient Language Fashions
👉 Finden Sie mich in den sozialen Netzwerken: