ブラウザ

エージェントは Web ブラウザを操作して、アプリケーションのテスト、アクセシビリティの監査、デザインからコードへの変換などを行えます。コンソールログとネットワークトラフィックにフルアクセスできるため、問題のデバッグや包括的なテストワークフローの自動化が可能です。

ネイティブ連携

エージェントは、スクリーンショットやアクションなどのブラウザアクションをチャットに表示し、ブラウザウィンドウ自体も別ウィンドウまたはインラインペインで表示します。

ブラウザツールの効率を高め、トークン使用量を削減するため、次の最適化を行いました。

• 効率的なログ処理: ブラウザログはファイルに書き込まれ、エージェントはgrepで検索して必要な箇所だけを読み取れます。各アクション後に冗長な出力を要約するのではなく、エージェントは必要な関連行のみを読み取ります。これにより、完全なコンテキストを保持しながらトークン使用量を最小限に抑えます。
• 画像による視覚的フィードバック: スクリーンショットはファイル読み取りツールに直接統合されているため、エージェントはテキストの説明に頼ることなく、ブラウザの状態を実際に画像として確認できます。これにより、視覚的なレイアウトやUI要素をより適切に理解できます。
• スマートなプロンプト: エージェントは、総行数やプレビューの抜粋を含むブラウザログの追加コンテキストを受け取るため、確認すべき内容を的確に判断できます。
• 開発サーバーの認識: エージェントは、実行中の開発サーバーを検出し、重複してサーバーを起動したりポート番号を推測したりせず、正しいポートを使用するよう促されます。

外部ツールをインストールまたは設定しなくても、ブラウザを使用できます。

ブラウザ機能

エージェントは以下のブラウザツールを使用できます。

セッションの永続化

ブラウザの状態は、ワークスペースごとにエージェントセッション間で保持されます。具体的には、次のとおりです。

• Cookie: 認証Cookieとセッションデータは、ブラウザセッションをまたいで利用できます
• ローカルストレージ: localStorage と sessionStorage に保存されたデータは保持されます
• IndexedDB: データベースの内容はセッション間で保持されます

ブラウザコンテキストはワークスペースごとに分離されるため、異なるプロジェクトではストレージとCookieの状態が個別に維持されます。

ユースケース

Web開発ワークフロー

ブラウザ は、Figma や Linear などのツールとともにWeb開発ワークフローに統合できます。デザインシステム、プロジェクト管理ツール、コンポーネントライブラリで ブラウザ を活用するための完全ガイドは、Web Development cookbook を参照してください。

アクセシビリティの改善

エージェントはWebアクセシビリティを監査・改善し、WCAG準拠基準を満たすことができます。

自動テスト

エージェントは包括的なテストスイートを実行し、視覚的リグレッションテスト用のスクリーンショットをキャプチャできます。

デザインをコードに変換

エージェントは、デザインをレスポンシブなレイアウトを持つ動作するコードに変換できます。

スクリーンショットをもとにしたUIデザインの調整

エージェントは、視覚的な違いを特定し、コンポーネントのスタイルを更新することで、既存のインターフェースを改善できます。

セキュリティ

ブラウザ はセキュアなウェブビューとして動作し、拡張機能として動作する MCP サーバーによって制御されます。多層的な保護により、不正アクセスや悪意のある操作を防ぎます。 Cherri Code の ブラウザ 連携は、複数の外部セキュリティ監査機関による審査も受けています。

認証と分離

ブラウザには、複数のセキュリティ対策が実装されています。

• トークン認証: エージェントレイアウトは、ブラウザセッションの開始前に毎回ランダムな認証トークンを生成します
• タブの分離: タブ間の干渉を防ぐため、各ブラウザタブには一意のランダムIDが割り当てられます
• セッションベースのセキュリティ: ブラウザセッションが新たに開始されるたびにトークンが再生成されます

ツールの承認

ブラウザツールの実行には、デフォルトで承認が必要です。エージェントが実行する前に、各アクションを確認してください。これにより、意図しないナビゲーション、データ送信、スクリプト実行を防げます。

承認設定は Agent Settings で設定できます。使用可能なモード：

許可リストとブロックリスト

ブラウザツールは Cherri Code のセキュリティガードレールと連携します。自動実行するブラウザアクションを設定できます。

• 許可リスト: 承認プロンプトを省略する信頼済みアクションを指定
• ブロックリスト: 常にブロックするアクションを定義
• 設定場所: Cherri Code の設定 > エージェント > Auto-Run

許可リストとブロックリストは、ベストエフォートで保護を提供します。プロンプトインジェクションなどの問題により、AI の挙動は予測不能になる場合があります。自動承認されたアクションは定期的に確認してください。

ブラウザコンテキスト

ブラウザはCherri Code内のペインとして開き、エージェントはMCPツールを通じて完全に操作できます。

推奨モデル

最高のパフォーマンスを得るには、Sonnet 4.5、GPT-5、Auto の使用をおすすめします。

Enterprise での利用

Enterprise プランのお客様は、MCP コントロールで利用可否を切り替えることでブラウザ機能を管理できます。管理者は、各 MCP サーバーとブラウザへのアクセスをきめ細かく制御できます。

エンタープライズ チームでブラウザを有効にする

エンタープライズ チームでブラウザ機能を有効にするには:

1. 設定ダッシュボードに移動する
2. MCP Configuration に移動する
3. 「browser features」を有効にする

設定後、組織内のユーザーは、MCP の許可リストまたは拒否リストの設定に応じてブラウザツールを使用できるようになります。

オリジン許可リスト

エンタープライズ管理者は、エージェントが自動的に移動できるサイトや、MCP ツールを実行できる場所を制限するオリジン許可リストを設定できます。これにより、セキュリティとコンプライアンスのため、ブラウザへのアクセスをきめ細かく制御できます。

設定

オリジン許可リストを設定するには、次の手順に従います。

1. 管理者ダッシュボードに移動します
2. MCP Configuration を開きます
3. Enable ブラウザ Automation Features (v2.0+) が有効になっていることを確認します
4. ブラウザ Origin Allowlist (v2.1+) で Add Origin をクリックします
5. 許可するオリジンを入力します (例：*、http://localhost:3000、https://internal.example.com)

挙動

オリジン許可リストが設定されている場合：

• 自動ナビゲーション: エージェントは、許可リスト内のオリジンに一致する URL へのアクセスにのみ browser_navigate ツールを使用できます
• MCP ツールの実行: MCP ツールは、許可リストに含まれるオリジンでのみ実行できます
• 手動ナビゲーション: ユーザーは、許可リスト外のオリジンを含む任意の URL に、引き続きブラウザで手動で移動できます (ドキュメントの閲覧や外部サイトの確認に役立ちます)
• ツールの制限: ブラウザが許可リスト外のオリジンにある場合、ユーザーが手動で移動した場合でも、ブラウザツール (クリック、入力、ナビゲーション) はブロックされます

エッジケース

オリジン許可リストはベストエフォートの保護を提供します。以下の挙動に注意してください。

• リンク先へのナビゲーション: エージェントが許可されたドメイン上のリンクをクリックし、許可されていないオリジンにナビゲーションした場合でも、ナビゲーションは成功します
• リダイレクト: エージェントが許可されたオリジンにナビゲーションした後、許可されていないオリジンにリダイレクトされた場合、リダイレクトは許可されます
• JavaScript によるナビゲーション: 許可されたオリジンから許可されていないオリジンへのクライアント側のナビゲーション (window.location などを使用) は成功します

関連

• ブラウザツールのヘルプ