こんにちは、ずっきーです！
普段、Cursorを使って開発業務を行っているのですが、10月末に「Cursor 2.0」がリリースされ、最大8つのエージェントを並列実行できる「マルチエージェント機能」や Cursor独自のコーディングモデル「Composer 1」が使用可能になったりなど嬉しい機能が追加されました。
それらの新しい機能の中で今回はAgentがウェブブラウザを操作できる「ブラウザ機能」(以前からベータとしてはありましがCursor 2.0でGA）を使って要素を直接選択してUIの修正を試してみたいと思います👌
ブラウザモードとは？
一言で言うとCursorエディタ内に ブラウザを表示 できる機能です
普段よく行っているソースコードを編集してブラウザで確認する作業がエディタで完結できるので便利ですね ⭐
また、それだけではなくエディタ内のブラウザに表示された、要素を直接選択しそのままプロンプトとして使用できます。
今までAIに視覚的情報を与える際は、画像データを渡す方法しかなかったですが、要素を直接選択できることでスクショを撮る手間が省けるのとAIがより認識しやすい情報を渡せるようになるのでフロントエンド開発をするにあたってとても役立ちそうだなと思います
ブラウザモードを触ってみよう
ブラウザの起動方法
カーソルエディタ上でMacの場合は⌘ Command + ⇧ Shift + Bでブラウザタブが現れます（Windowの場合はCtrl + Shift + B？）
URLを入力するとアクセスできます
UIの変更をしてみる
-
URL入力欄の右隣にあるSelect elementを押す
-
プロンプトに使用したい箇所をホバーしてクリックすると、右側のChatの入力フィールドにプロンプトとして選択されます
-
UIの変更指示内容を記載し、送信
-
しっかり指示通り変更された 💮
最後に
触った感じ動作もスムーズで快適に使えそうでした！
ブラウザとの往復もしなくて良いのと、何より直感的に特定の要素をプロンプトに含められるのはとてもラクでした
developer toolも使えるのも嬉しいポイントですね！
Discussion