コーディング エージェントの特徴は、コーディングまたはプログラミングを行うためにのみ使用できるということです。ただし、彼らはより一般化されたエージェントであり、成功の程度はさまざまですが、基本的にすべての事務機能を実行できます。
ただし、多くの注目を集めている領域の 1 つは、Cloud Codes や OpenAI のコーデックなどのコーディング エージェントを備えた Web ブラウザを使用したブラウジングです。
エージェントは Web の操作に非常に熟達しており、これはさまざまなタスクに非常に役立ちます。
もちろん、Web ブラウジングは、インターネット上の情報を見つけたり、フォームに記入したりするなど、さまざまな状況で役立ちます。ただし、ユースケースによっては利用規約に違反する可能性があるため、その点は必ず認識しておく必要があります。今日説明する主な使用領域は、もちろん完全に合法であり、コーディング エージェントを使用して自分で開発しているアプリケーションをナビゲートして、実装をテストおよび検証することが含まれます。
これまで、コーディング エージェントに作業を依頼する場合は必ず検証可能な作業を作成することについて、何度もお話してきました。実装をテストするためにコーディング エージェントがブラウザにアクセスできるようにすることは、この検証の重要な部分です。
コーディングエージェントがブラウザを使用する必要があるのはなぜですか?
まず、コーディング エージェントでブラウザを実行することに注意を払う必要がある理由を説明したいと思います。ブラウザは、人間が世界と対話するために使用する重要なインターフェイスです。ブラウザを通じて、情報の読み取り、アプリケーションへの記入など、さまざまなタスクを実行できます。
人間が世界と対話するための非常に重要なインターフェイスであることを考えると、ブラウザを効果的に操作する方法に多くの注目と研究が向けられてきました。ブラウザ ナビゲーションを専門とする企業は数多くあり、Frontier Labs のすべてが、OpenAI の Codex や Anthropic の Cloud Codex などの自社製品への統合も提供しています。
コーディング エージェントに、HTML デザイン ファイルに従ってデザインを実装するよう依頼していると想像してください。もちろん、コーディング エージェントはフロントエンド コードが得意なので、すぐに実装を開始できます。ただし、コーディング エージェントがブラウザを操作できない場合、コーディング エージェントが自身の動作を検証することは不可能です。
これにより、コーディング エージェントが間違いを犯し、実装したいと思っていた設計を正確に実装できない可能性が大幅に高まります。
幸いなことに、この問題には非常に簡単な解決策があります。コーディング エージェントにブラウザ アクセスを提供します。それ自体が実装したデザインのスクリーンショットを取得し、それを実装したいデザインのスクリーンショットと比較できるようにします。コーディング エージェントは、実装されたコードが設計ファイルとまったく同じになるまで反復を続けることができます。
これにより、設計の実装中に発生した間違いを繰り返し検証してコーディング エージェントに指示する必要がなくなるため、プログラマとしての時間を大幅に節約できます。これにより、他のさまざまなタスクを実行できるようになり、エンジニアとしての生産性が向上します。
どのように機能するか
Cloud Code を使用してブラウザを操作する方法に進む前に、その仕組みについても説明したいと思います。
理論的には、ブラウザの操作は非常に簡単です。もちろん、コーディング エージェントはブラウザを開いて移動し、そこでいくつかのアクションにアクセスします。
- スクリーンショットを撮る
- クリック (座標ベース)
- テキストを入力してください
これらはコーディング エージェントが実行する 3 つの主なアクションであり、基本的にブラウザと対話するために必要なすべてのアクションです。
- コーディング エージェントはスクリーンショットを撮る必要があります。これは、各ページに何が含まれているかを把握し、どこをクリックするかを判断するためです。
- コーディング エージェントは、ボタンをクリックしたり、入力フィールドをクリックしたりするなど、Web サイト上のさまざまな場所をクリックできる必要もあります。
コーディネートベースです。
したがって、コーディング エージェントが特定の場所をクリックしたい場合は、次のテキストを出力します。
click(x=0.754, y=0.328)基本的に click 関数を使用し、クリックしたい場所の座標を返します。座標は通常、0 から 1 の間などの設定範囲に正規化されます。
その後、エージェントが特定の場所をクリックすると、ブラウザにテキストを入力して、やりたいことを何でも実行できます。もちろん、コーディング エージェントは、右クリックしてページ上のオプションを追加するなど、さまざまなタイプのクリックを実行することもできます。
このループが繰り返されます。コーディング エージェントはスクリーンショットを撮り、実行するアクションを選択し、目標を達成したかどうかを確認し、これを繰り返します。再びスクリーンショットを取得し、アクションを選択し、目標を達成したかどうかを確認して、続行します。エージェントは、ブラウザーでの目標を達成するまでこの作業を続けます。
クラウドコードを使用してブラウザを操作する方法
次に、クラウド コードを使用してブラウザを操作する方法について説明します。ここで説明する原則は、基本的にすべてのコーディング エージェントに当てはまります。基本的に他のコーディング エージェントに簡単に一般化できないテクニックについては取り上げません。
まず、Cloud Code を使用している場合は、Cloud Code ウィンドウ内で以下のコマンドを入力することで有効にできる Chrome 統合が組み込まれています。
/chromeコーデックにも対応するコマンドがあります。
これにより、クラウドを使用してコンピュータ上で Chrome を開いてアクションを確認することが非常に簡単になります。
クラウドでの Chrome の実装はうまく機能すると思いますが、最適ではありません。
私は Playwright MCP を使用した方が良い経験があります。Playwright MCP は、Cloud Code をインストールするように要求することで Cloud Code に簡単にインストールできます。
Install the Playwright MCP to interact with the browserクラウドにインストールされたら、クラウド コードを再起動する必要があります。そうすれば、Playwright MCP にアクセスできるようになります。私の経験では、クラウドは、ベースラインのクラウド コードにすでに存在する Chrome 実装と対話するよりも、Playwright MCP を使用する方がタスクを効率的に実行できます。
もちろん、別のコーディング エージェントがいる場合も、まったく同じことができます。Playwright MCP をインストールするように依頼してください。エージェントは MCP をインストールします。エージェントを再起動すると、Playwright にアクセスできるようになります。
エージェントに実装をテストしてもらうにはどうすればよいですか?
Playwright MCP を実装し、エージェントがブラウザと対話できるようにしたので、それを使用して実装をテストできます。
エージェントが何かを実装した場合（たとえば、デザイン ファイルから新しいデザインを適用した場合）、Playwright MCP を使用して Chrome にアクセスし、自分の作業を検証することで、最初から最後まで作業を検証するようエージェントに依頼するだけです。
また、エージェントに、作業内容が完全に確認されるまで待たずに連絡するよう伝えると効果的です。この場合、作業を最初から最後まで検証するということは、文字通りブラウザを操作して、何かが機能するかどうかを確認することを意味します。
また、私は Codex と Cloud Code の両方で利用できる /target 機能もよく使用します。これは基本的に、エージェントがタスクが完了するまで作業を続けるための方法です。次に、通常は次のように書きます。
/goal continue working on the task, implementing 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. これにより、エージェントは目標に向かって作業を継続し、それを検証することができ、作業を検証した後でのみ連絡します。これにより時間を大幅に節約でき、エージェントに設計の実装のみを依頼する場合に特に便利です。
結論
この記事では、ブラウザーでの動作を検証するためにクラウド コードを実装する方法を説明しました。最初に、コーディング エージェントがブラウザと対話できる理由、また対話する必要がある理由について説明しました。次に、ブラウザ ナビゲーションがコーディング エージェントと実際にどのように連携するかを説明しました。これは実際には非常に単純な概念です。最後に、クラウド コードまたは他のコーディング エージェントを使用してブラウザーを操作する方法を具体的に説明しました。
人間が世界と対話する方法の多くがブラウザを介しているのと同様に、ブラウザのナビゲーションは今後も重要であると私は信じています。ただし、コーディング エージェントは依然として API と MCP をより効果的に使用できるため、これらの手段を通じてサービスと対話できる場合は、基本的に常にそうする必要があることに注意してください。
👋 お問い合わせ
👉 私の無料の電子書籍とウェビナー:
🚀 LLM でエンジニアリングを 10 倍にする (無料の 3 日間の電子メール コース)
📚 無料の Vision Language Model 電子ブックを入手してください
💻視覚言語モデルに関する私のウェビナー
👉 ソーシャルメディアで私を見つけてください:
💌 サブスタック
🔗リンクトイン
🐦
Leave a Reply