GenAi テックブログPublicationへの投稿
🌕

CursorのV1.7とBrowser Automationについて調査したんじゃ

オメガマスター
に公開
AI
Cursor
AI駆動開発
tech

初めに

cursorのV1.7がリリースされました！
個人的にBrowser Automationの方に興味がありますが、アップデート情報もしっかりと見ていきましょう〜

1.7で発表された情報

Agentオートコンプリート

チャット入力欄でTabを押すと提案が表示され、最近開いたファイルやメソッド、変数などを容易にコンテキストへ添付できるようになる。
まぁコードを書くときのtab機能と同じものが、チャットでも利用できるようになったと思って良いです。

Hooksによるエージェントループの制御（ベータ版）

Hooksを使うと、カスタムスクリプトでエージェントループを監視・制御・拡張できます。Hooksは起動されたプロセスで、双方向に JSON を用いて stdio 経由で通信します。エージェントループの定義済みステージの前後で実行され、挙動の観察、ブロック、変更が可能です。
公式が意見を募集しているので、是非是非みなさんの意見を届けましょう。

Hooksを使用すると下記のことが可能になります。

  • 編集後にフォーマッターを実行
  • イベントにアナリティクスを追加
  • PII やシークレットをスキャン
  • リスクの高い操作をゲート（例: SQL 書き込み）

クイックスタート

~/.cursor/hooks.jsonにhooks.jsonファイルを作成する。

{
  "version": 1,
  "hooks": {
    "afterFileEdit": [
      { "command": "./hooks/format.sh" }
    ]
  }
}

~/.cursor/hooks/format.shにフック用スクリプトを作成します。

#!/bin/bash
# 入力を読み取り、何かを実行し、0で終了
cat > /dev/null
exit 0

下記を実行することで可能にする。
chmod +x ~/.cursor/hooks/format.sh
再起動後、ファイルを編集するたびにフックが実行されます。

設定

hooks.jsonファイルでフックを定義します。設定は複数レベルで指定でき、優先度の高いソースが低いソースを上書きします。

~/.cursor/
├── hooks.json
└── hooks/
    ├── audit.sh
    ├── block-git.sh
    └── redact-secrets.sh

ホームディレクトリ（ユーザー管理）:~/.cursor/hooks.json
hooksオブジェクトは、フック名をフック定義の配列に対応付けます。各定義は現在 commandプロパティをサポートしており、シェル文字列、絶対パス、またはhooks.jsonファイルからの相対パスを指定できます。

{
  "version": 1,
  "hooks": {
    "beforeShellExecution": [
      { "command": "./script.sh" }
    ],
    "afterFileEdit": [
      { "command": "./format.sh" }
    ]
  }
}

公式に複数のhookイベントが記載されていますので、是非見に行ってみてください
https://cursor.com/ja/docs/agent/hooks#
これが個人的に役に立ちそうな気がしています。
beforeShellExecution / beforeMCPExecution
任意のシェルコマンドまたはMCPツールの実行前に呼び出されます。許可の可否を返します。

// beforeShellExecution 入力
{
  "command": "<完全なターミナルコマンド>",
  "cwd": "<現在の作業ディレクトリ>"
}

// beforeMCPExecution 入力
{
  "tool_name": "<ツール名>",
  "tool_input": "<JSONパラメータ>"
}
// 加えて以下のいずれか:
{ "url": "<サーバーURL>" }
// または:
{ "command": "<コマンド文字列>" }

// 出力
{
  "permission": "allow" | "deny" | "ask",
  "userMessage": "<クライアントに表示されるメッセージ>",
  "agentMessage": "<エージェントに送信されるメッセージ>"
}

チームルールとルール管理

チームはダッシュボードから、すべてのプロジェクトに適用されるグローバルルールを定義・共有できるようになりました。さらに、Bugbot向けのチームルールも提供し、リポジトリ間で一貫した挙動を実現します。
管理者権限で設定できるらしいので、公式から画像を引っ張ってきます。ruleの共有がなくなるのは嬉しいですね〜

個人的にはTeamプランのユーザーのトークン使用量をアップしてほしいですね〜proプランと同じ20$相当の使用量なので、ユーザー的にはTeamプランの旨みがない…
会社的にメリットはあると思いますが、ユーザーへのメリットがあっても良いと思いますけどね〜

Deeplinksについて

Deeplinks を使うと、プロンプトやコマンドを他者と共有でき、チームやコミュニティ間でのコラボレーションと知識共有を促進できます。
特定のタスクやワークフローをすぐに始められるよう、他のユーザーが使えるプロンプトを共有します。ユーザーがプロンプトのディープリンクをクリックすると、チャットにプロンプトがあらかじめ入力された状態でCursorが開きます。実行前にユーザーはプロンプトを確認して確定する必要があります。ディープリンクが自動的に実行を引き起こすことはありません。
https://cursor.com/ja/docs/integrations/deeplinks#
リンク先のテキストにプロンプトを記載し、リンクをChromeなどの検索に記載、Enterをクリックすると添付画像の確認画面が開きます。

正直プロンプト共有ぐらいならSlackとかで良い気がしますが…
アプリケーション内でプログラムからdeeplinkを生成することも出来るので、興味がある方は公式を見てください。

メニューバーからAgentを監視

Agent の画像ファイル対応

Agentはワークスペース内の画像ファイルを直接読み取り、コンテキストに含められるようになりました。これまでは貼り付け画像のみがサポートされていたので、少し便利になりましたね〜

さてお待ちかねのBrowser Automationについて

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

Agentは、スクリーンショットや操作などのブラウザー内アクションをチャットに表示し、ブラウザーウィンドウ自体も別ウィンドウまたはインラインのペインで表示します。
ブラウザーツールを効率化し、トークン消費を削減するよう最適化しているようです。さら下記の点も改善しています。

  • 効率的なログ処理: ブラウザーログは Agent が grep で抽出し選択的に読めるようファイルに出力されます。各アクション後に冗長な出力を要約する代わりに、Agent は必要な関連行だけを読みます。これにより、完全なコンテキストを保ちつつトークン消費を最小化します。
  • 画像による視覚的フィードバック: スクリーンショットはファイル読み取りツールと直接統合されており、Agent はテキスト説明に頼らず、画像としてブラウザーの状態を確認できます。これにより、レイアウトや UI 要素の理解が向上します。
  • スマートなプロンプト: Agent は総行数やプレビュー抜粋など、ブラウザーログに関する追加コンテキストを受け取り、何を確認すべきかを判断しやすくなります。
  • 開発サーバーの認識: Agent は稼働中の開発サーバーを検出し、重複起動やポート番号の当て推量を避け、正しいポートを使用するよう誘導されます。

Agent は次のブラウザーツールにアクセスできます。

  • Navigate
    URL にアクセスしてウェブページを閲覧します。Agent は URL へのアクセス、リンクの辿行、履歴の前後移動、ページの再読み込みで、ウェブ上のどこへでも移動できます。
  • Click
    ボタン、リンク、フォーム要素とやり取りします。Agent はページ要素を特定して操作でき、表示中の任意の要素に対してクリック、ダブルクリック、右クリック、ホバーを行えます。
  • Type
    入力フィールドやフォームにテキストを入力します。Agent はフォームの入力・送信を行い、フォームフィールド、検索ボックス、テキストエリアとやり取りできます。
  • Scroll
    長いページやコンテンツを移動します。Agent はスクロールして追加コンテンツを表示し、特定の要素を見つけ、長文ドキュメントを探索できます。
  • Screenshot
    ウェブページの画面キャプチャを取得します。スクリーンショットは、Agent がページレイアウトを把握し、視覚要素を検証し、ブラウザー操作の確認情報を提供するのに役立ちます。
  • Console Output
    ブラウザーコンソールのメッセージ、エラー、ログを読み取ります。Agent は JavaScript エラー、デバッグ出力、ネットワーク警告を監視して、問題の切り分けやページ動作の検証を行えます。
  • Network Traffic
    ページが行う HTTP リクエストとレスポンスを監視します。Agent は API 呼び出しを追跡し、リクエストペイロードを分析し、レスポンスステータスコードを確認し、ネットワーク関連の問題を診断できます。これは現在 Agent パネルでのみ利用可能で、レイアウトへの対応は近日予定らしいです。

使用例が下記に記載されているので、是非各々確認してみてください。
これを使うことでよりFigme MCPの精度が上がりそうですね。
https://cursor.com/ja/docs/agent/browser#

実際の挙動

下準備

画像のようにBrowserが有効になっていること

Cursor Browserが有効になっていること

チャットに記載したプロンプト

ダッシュボードページの家電結果で「資料送付」を選択し、会社名をクリックして、アタックログに遷移できるか確認して、さらにアタックログに遷移した際のスクリーンショットを保存して


起動中のURL、ログイン用のメールアドレス、パスワードを教えた後の実行結果。


cursorが撮影したスクショ

ちなみに動作確認では新たにブラウザが自動で開かれ、動作確認の様子が確認できます。

最後に

この記事が誰かの役に立てば幸いです。

GitHubで編集を提案
GenAi テックブログ
GenAi テックブログPublication

Discussion