Browser
ChatGPT にウェブサイトの調査や操作を任せる
Browser を使うと、ユーザーが制御を保ちながら、ChatGPT にウェブサイトを開かせ、最新情報を収集させ、操作を実行させることができます。選択肢の比較、ウェブサイト上での複数ステップのタスクの完了、作成中のページのレビューなどに使用できます。
Browser は、ウェブ版 ChatGPT と ChatGPT デスクトップアプリで利用できます。
ページのコンテンツは信頼できないコンテキストとして扱ってください。機密情報を共有したり、ChatGPT に操作を許可したりする前に、サイトと提案された操作を確認してください。
ChatGPT デスクトップアプリの組み込みブラウザでは、チャット内でユーザーと ChatGPT がウェブサイトやローカルウェブアプリを一緒に表示できます。ページのプレビュー、視覚的なフィードバックの追加、またはユーザーに代わる ChatGPT のサイト操作に使用できます。
組み込みブラウザは、通常使用しているブラウザとは別のブラウザプロファイルを使用します。既存のタブやブラウザセッションが自動的に共有されることはありません。タスクでアカウントが必要な場合は、組み込みブラウザから直接サインインできます。ブラウザデータや、デバイスで利用可能なプロファイルのインポート機能を管理するには、Settings > Browser を開きます。
Browser でダウンロードしたファイルは、デフォルトでシステムの Downloads フォルダに保存されます。Settings > Browser では、別のダウンロード先を選択したり、システムのデフォルトに戻したり、Ask where to save downloads を有効にしたりできます。
ChatGPT が既存の Chrome タブで作業する必要がある場合や、通常使用している Chrome プロファイルを使用する必要がある場合は、代わりに Chrome 拡張機能を使用してください。
組み込みブラウザは、ツールバー、URL のクリック、手動での移動、または Cmd+Shift+B（Windows では Ctrl+Shift+B）で開けます。
アドレスバーから検索する
組み込みブラウザのアドレスバーに入力を始めると、その閲覧履歴からページを検索できます。一致するページを選択して再度開くか、履歴に一致する結果がない場合は検索語句を入力して Google を検索します。
組み込みブラウザには、独自のプロファイルと閲覧履歴があります。通常使用している Chrome プロファイルや他のブラウザのページが、結果に自動的に含まれることはありません。
閲覧履歴を管理する
組織で許可されている場合は、Settings > Browser を開くと、組み込みブラウザの履歴を検索したり、閲覧済みのページを再度開いたり、履歴項目を削除したりできます。削除する期間と閲覧データの種類を選択するには、Clear browsing data を使用します。
利用可能な場合、ChatGPT は現在のタスクに関連するページを見つけるため、閲覧履歴の検索許可を求めることがあります。アクセスを許可する前にリクエストを確認してください。閲覧履歴には、内部 URL、検索語句、その他の機密情報が含まれる可能性があるため、タスクでそのコンテキストが必要な場合にのみ許可してください。
ブラウザでの Computer Use
デスクトップアプリでは、Computer Use により、ChatGPT Work または Codex が組み込みブラウザを直接操作できます。選択したエクスペリエンスでは、ページを開く、クリックする、入力する、レンダリングされた状態を調べる、スクリーンショットを撮る、ページ上で作業結果を検証するといった操作が可能です。
ChatGPT を選択してスイッチャーで Work をオンにするか、Codex を選択します。Plugins Directory を開いて Browser をインストールします。その後、タスクでブラウザを使用するよう ChatGPT または Codex に依頼するか、@Browser を使って直接参照します。
例：
Use the browser to open http://localhost:3000/settings, reproduce the layout
bug, and fix only the overflowing controls.すでにサイトを許可している場合を除き、ChatGPT はウェブサイトを使用する前に確認を求めます。許可およびブロックするサイトは Settings > Browser で管理できます。また、情報の送信、購入、権限の変更、データの削除など、機密性の高い操作を行う前にも ChatGPT が確認を求めます。ChatGPT は、組み込みブラウザでファイルのアップロードを自動化できません。
ページをプレビューする
- 統合ターミナルまたはローカル環境アクションを使用して、アプリの開発サーバーを起動します。
- URL をクリックするかブラウザ内を手動で移動して、ローカルルート、ファイルベースのページ、または公開ページを開きます。
- コードの差分と並べて、レンダリングされた状態を確認します。
- 変更が必要な要素や領域にブラウザコメントを残します。
- コメントに対応するよう ChatGPT に依頼し、対象範囲を限定します。
例：
I left comments on the pricing page in the built-in browser. Address the mobile
layout issues and keep the card structure unchanged.ページにコメントする
レンダリングされたページでのみ確認できるバグについては、ブラウザコメントを使用して ChatGPT に正確なフィードバックを伝えます。
- Annotation mode をオンにします。
- 要素をクリックするか、ドラッグして領域を選択します。
- コメントを入力して保存します。
- コメントに対応するよう ChatGPT に依頼するメッセージをチャットで送信します。
問題と希望する結果を明記すると、コメントがより効果的になります。
This button overflows on mobile. Keep the label on one line if it fits,
otherwise wrap it without changing the card height.This tooltip covers the data point under the cursor. Reposition the tooltip so
it stays inside the chart bounds.スタイルに関するフィードバック
ページ上のセクションに注釈を追加する際は、テキスト入力欄の横にある Adjust を選択すると、より詳細なスタイルのフィードバックを ChatGPT に伝えられます。フォント、テキスト、間隔、色などの値を変更し、ページ上で結果をプレビューしてから、より明確な目標とともに注釈を送信できます。
ブラウザタスクの範囲を限定する
各ブラウザタスクは、1 回でレビューできる程度の小さな範囲にします。
- ページ、ルート、または URL を明記します。
- 読み込み中、空、エラー、成功など、確認したい状態を明記します。
- 変更が必要な要素や領域を正確に指定してコメントを残します。
- ChatGPT の作業完了後に、もう一度ページを確認します。
- ローカルページを開く前に、開発サーバーを起動または確認するよう ChatGPT に依頼します。
リポジトリの変更については、レビューペインを使用して変更を確認し、コメントを残します。
Developer mode
Developer mode は、Chrome および組み込みブラウザの Computer Use と連携します。これにより、ChatGPT は Chrome DevTools Protocol (CDP) に制御された形でアクセスできます。JavaScript のプロファイリング、コンソール出力やネットワークトラフィックの調査、DOM や適用されたスタイルの確認、ライブブラウザでの問題の診断に使用できます。
有効にするには、Settings > Browser を開き、Developer mode で Enable full CDP access をオンにします。組織でこの設定が無効になっている場合、ローカルで有効にすることはできません。管理者は、requirements.toml の [features] で browser_use_full_cdp_access = false を設定することで、完全な CDP アクセスを無効にし、ユーザーが ChatGPT デスクトップアプリで対応する設定を有効にできないようにできます。
完全な CDP アクセスにより、機密性の高いブラウザ内部情報が公開される可能性があります。ChatGPT は、完全な CDP を使用してウェブサイトを調査する前に、明示的な承認を求めます。承認する前に、サイト、タスク、要求されたアクセスを確認してください。
組み込みブラウザには @Browser を使用します。Chrome で Developer mode を使用するには、Chrome 拡張機能をセットアップして、@Chrome を呼び出します。
例：
This app is slow. Use @Browser to capture a performance trace and inspect
network traffic, then identify the bottleneck.