> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qoder.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ブラウザエージェント

ブラウザエージェントは、エージェントモードでブラウザを使用してタスクを完了する機能拡張です。制御された環境でWebページを開き、コンテンツを閲覧し、ボタンをクリックし、フォームに入力し、ページをスクロールし、必要に応じてスクリーンショットを撮ってページの状態をフィードバックすることで、「実際のWebアクセスが必要な」自動化タスクの完了を支援します。

エージェントセッションで自然言語で要求を説明するだけで(例:「公式サイトで最新の価格を確認して違いをまとめて」)、エージェントは必要に応じて自動的にブラウザエージェントを呼び出します。手動でモードを切り替えたりスクリプトを書いたりする必要はありません。

<div id="core-capabilities">
  ## **主な機能**
</div>

ブラウザエージェントには、以下の主な機能があります:

* **Webページの開閉とナビゲーション**
  * 指定されたURLに基づいて特定のWebページを開きます。
  * 同じサイト内で新しいページやタブにジャンプします。例えば、ナビゲーションリンクやページネーションリンクをクリックします。
  * マルチステップナビゲーションタスクをサポートします。例えば「ページAを開く→メニューBをクリック→詳細ページCに入る」。

* **情報の読み取りと抽出**
  * 現在のページに表示されているテキストコンテンツ(タイトル、段落、リスト、テーブルなど)を読み取ります。
  * ページから重要な情報を抽出し、自然言語で要約または比較します。
  * 指示に基づいてページ内の関連情報を「検索」します。例えば「このページで価格関連のコンテンツを見つけて」。

* **ページの操作と対話**
  * ボタン、リンクをクリックし、タブを切り替え、折りたたまれたコンテンツを展開/折りたたみます。
  * 入力ボックス、検索ボックス、その他のフォーム要素にテキストを入力し、フォームを送信します。
  * ページをスクロールしてより多くのコンテンツを閲覧し、重要な情報を見逃さないようにします。

* **視覚的フィードバックとステータス認識**
  * 複雑な手順を実行する際に、必要に応じて現在のページステータスのスクリーンショットを撮り、後続の判断と説明に使用します。
  * ページの読み込みが完了したか、フォームが正常に送信されたか、新しいページにジャンプしたかなどを感知し、次の操作を決定します。

<div id="usage-scenarios">
  ## **使用シナリオの例**
</div>

以下のシナリオでブラウザエージェントの使用を検討できます:

* **情報検索と比較**
  * 製品ウェブサイト、ドキュメントサイト、ブログにアクセスして重要な情報を抽出し、要約を生成します。
  * 複数のページまたは複数のソリューションを比較します。例えば、価格、機能、または構成の違い。

* **オンライン操作とプロセスのウォークスルー**
  * アカウント登録やチケット提出など、「Webベース」の操作プロセスをウォークスルーします(権限が許可され、リスクが管理可能な場合)。
  * Webバックエンドシステムの典型的な使用手順を整理し、操作説明のドラフトを出力するのを支援します。

* **開発とテストの支援**
  * オンラインドキュメントやAPIリファレンスを開き、現在のコードに関連する部分を抽出します。
  * Webアプリケーションのインターフェイスを閲覧して、ページ構造、コピー、またはインタラクションロジックをチェックし、最適化の提案を提供します。

> タスクの説明で目標と制約を明示すること(例:「読み取りのみで、フォームを送信しない」「公開ドキュメントページのみにアクセス」)をお勧めします。これにより、エージェントがより安全かつ安定的にタスクを完了できます。

<div id="browser-type">
  ## **ブラウザタイプ**
</div>

Browser Agentは、ニーズに応じて切り替え可能な2種類のブラウザタイプをサポートしています：

* **内蔵ブラウザ**：IDEに組み込まれた軽量ブラウザパネルで、追加の設定は不要です。クイックプレビューやシンプルなページ操作に適しています。
* **Chrome**：ローカルのChromeブラウザを使用して実行し、より複雑なWebアプリケーションや特定のブラウザ機能・拡張機能が必要なページに対応します。

Browser Agentの設定でブラウザタイプを切り替えることができます。

<div id="how-to-use">
  ## **エージェントモードでの使用方法**
</div>

ブラウザエージェントはエージェントモードに組み込まれており、個別の設定は不要です。2つの方法で呼び出すことができます:

1. 自動呼び出し:エージェントモードは、リクエストに基づいてブラウザエージェントが必要なタイミングをインテリジェントに判断します。
2. 明示的呼び出し:`/browser`コマンドを使用してブラウザエージェントを明示的に要求します。

詳細な使用手順:

<Steps>
  <Step title="エージェントモードに入る">
    Qoderのチャットパネルを開き、エージェントモードに切り替えます
  </Step>

  <Step title="タスクを説明">
    `/browser`を使用して明示的に呼び出すか、自然言語で直接要求を説明します。例:

    <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px'}}>
      <span>`/browser https://example.comを開いて主な機能を要約して`</span>
      <a href="qoder://aicoding.aicoding-deeplink/chat?text=%2F%E2%80%8Bbrowser%E2%80%8B%20https%3A%2F%2Fexample.com%E3%82%92%E9%96%8B%E3%81%84%E3%81%A6%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD%E3%82%92%E8%A6%81%E7%B4%84%E3%81%97%E3%81%A6&mode=agent" style={{fontSize: '12px', textDecoration: 'none'}}>→ Qoderで試す</a>
    </div>

    <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px'}}>
      <span>`/browser 2025年の価格プランを確認して表にまとめて`</span>
      <a href="qoder://aicoding.aicoding-deeplink/chat?text=%2F%E2%80%8Bbrowser%E2%80%8B%202025%E5%B9%B4%E3%81%AE%E4%BE%A1%E6%A0%BC%E3%83%97%E3%83%A9%E3%83%B3%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%A6%E8%A1%A8%E3%81%AB%E3%81%BE%E3%81%A8%E3%82%81%E3%81%A6&mode=agent" style={{fontSize: '12px', textDecoration: 'none'}}>→ Qoderで試す</a>
    </div>

    <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px'}}>
      <span>`/browser このコンポーネントライブラリのテーマカスタマイズオプションを分析して`</span>
      <a href="qoder://aicoding.aicoding-deeplink/chat?text=%2F%E2%80%8Bbrowser%E2%80%8B%20%E3%81%93%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E3%83%86%E3%83%BC%E3%83%9E%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E5%88%86%E6%9E%90%E3%81%97%E3%81%A6&mode=agent" style={{fontSize: '12px', textDecoration: 'none'}}>→ Qoderで試す</a>
    </div>
  </Step>

  <Step title="結果を確認">
    ブラウザエージェントは次のことを行います:

    * 必要なWeb操作を実行
    * 実行したアクションの詳細な説明を提供
    * 視覚的検証のためにスクリーンショットを共有
    * 抽出したデータを構造化形式で提示
  </Step>
</Steps>

<div id="best-practices">
  ## **使用上の提案とベストプラクティス**
</div>

* **目標と境界を明確にする**
  * 単一の操作を説明するだけでなく、「達成すべき結果」を一文で説明するようにしてください。
  * セキュリティまたは権限に敏感な操作については、「送信/支払い/削除操作を実行しない」ことを明確に述べてください。

* **安定したエントリーリンクを提供**
  * 曖昧な検索用語ではなく、特定のページURLを優先的に提供してください。これにより、ナビゲーションの干渉を減らすことができます。
  * 複数のページにまたがって操作する必要がある場合は、プロンプトに主要なページまたはパスをリストできます。

* **タスクを適度に分割**
  * 非常に長いプロセス(複雑な構成ウィザードなど)の場合、複数の小さな目標に分割し、段階的に実行して中間結果を確認できます。
  * 各段階が終了した後、ブラウザエージェントが返す結果に基づいて、次の指示を適切に調整してください。

<div id="safety-limitations">
  ## **安全性と制限**
</div>

ブラウザエージェントを使用する際は、以下の点に注意してください:

* **権限とプライバシー**
  * ブラウザエージェントにWebページで機密情報(パスワード、アクセストークン、個人プライバシーデータなど)を入力または公開させないでください。
  * アカウントログイン、支払い、データ書き込みを伴う操作については、まず手動で完了し、その後エージェントに読み取り専用の検証または説明を行わせることを優先してください。

* **ページの互換性と安定性**
  * フロントエンドフレームワークや複雑なインタラクションに大きく依存する一部のサイトでは、読み込みが遅かったり、要素の識別が困難だったりする場合があります。
  * ページ構造やコピーが頻繁に変更される場合、一部の手順が実行に失敗する可能性があります。その場合、より明示的な説明を提供するか、より安定したエントリーページに切り替えることができます。

* **結果の信頼性**
  * ブラウザエージェントの回答は、リアルタイムでアクセスされたWebページコンテンツに基づいていますが、Webページ自体が権威ある情報であるとは限りません。重要な意思決定を行う前に、自分で確認することをお勧めします。
  * 法的、コンプライアンス、または高リスクビジネス判断が必要なシナリオでは、ブラウザエージェントの自動化された結果のみに依存すべきではありません。

***

ブラウザエージェントを通じて、Qoderは「コードを理解する」だけでなく「訪問しているWebページを理解する」こともでき、同じ会話内でコード編集とWebページ操作のコラボレーションを完了し、ブラウザとIDE間の切り替えコストを大幅に削減できます。
