Cursorのビジュアルエディタが組み立てるプロンプトを調査してみた

2025年12月にCursorにリリースされたビジュアルエディタ機能について、その内部の仕組みを探る記事です。Webページ上の要素を直接指定してコードを修正できるこの機能が、どのように実装コードと連携しているのか、プロンプトの中身を分析してみました。

Cursor AI

塚本太朗

2025.12.24

 はじめに2025年12月10日に Cursor2.2 にて「ビジュアルエディタ機能」 がリリースされています。
リリース記事: Cursor Visual Editor
Cursor内のブラウザでWebページを開き、その中で特定要素を指定してチャットに含めたりすることができます。

例えば、実装中のページ内の特定の文言を選択して「ここをこう変えて」と指示すると、開発コードの中からその部分を探し出してコード修正してくれます。
しかし、どうやって実装コードとビジュアルエディタがつながっているのか気になりました。
ユーザーはビジュアル上から画面を見ることができますが、エージェント側がどのようにして実装コードを探しているのか分かりませんでした。
今回は Cursor が実際にビジュアルエディタ経由でモデルに送っているプロンプトの中身を見ていきたいと思います。
 事前準備Cursorからモデルに対して送信しているプロンプトを見るために、Amazon Bedrock と繋いでログ機能をONにしておきます。
AWS側で Bedrock 利用のためのIAMユーザーを準備する
Cursor にAWS認証情報を設定する
Bedrock のログ機能をONにする
フロントエンド画面と実装を用意
 AWS側で Bedrock 利用のためのIAMユーザーを準備するCursorでBedrockを利用するにはアクセスキーが必要なため、IAMユーザーを用意します。

今回はテストのための一時的なユーザーなので、AmazonBedrockFullAccess のポリシーを付与します。

※継続的に利用する場合は、権限を必要最小限に絞って付与してください。
 Cursor にAWS認証情報を設定するCursorの設定を開き、先ほど作成したユーザーのアクセスキーとシークレットキーを設定します。
 Bedrock のログ機能をONにするプロンプトの中身を確認することが目的なので、Bedrockのログ機能をオンにします。なお、S3とCloudWatch Logsを選べますが、今回は表示が簡単なCloudWatch Logsを選びました。
 フロントエンド画面と実装を用意今回はこちらをビジュアルエディタから触るページを用意します。

create-vite を利用し、簡単なWebページを作りました。
pnpm create vite
ビジュアルエディタから開くと、このような画面が表示されます。
 調査 タイトルを変えてみるCursorのブラウザで画面を開いている状態で、中央の「Vite + React」の箇所を選択し、このタイトルを変えるように指示を出してみます。
すると、実装が修正され、その内容が画面に反映されました。

 プロンプトの中身を調査ようやく本題ですが、ここでBedrock側に送られたプロンプトを調査してみましょう。

どのように Cursor がブラウザの画面の要素をモデル側に理解させ、どのように実装箇所を特定しているのか分かると思います。
CloudWatch Logs（抜粋）
{
    "inputBodyJson": {
        "messages": [
            {
                "role": "user",
                "content": [
                    {
                        "text": "<user_query>\nDOM Path: div#root > h1\nPosition: top=348px, left=254px, width=339px, height=56px\nReact Component: App\nHTML Element: <h1 data-cursor-element-id=\"cursor-el-1\" style=\"\">Vite + React</h1> \nこの箇所のタイトルを Vite + React + Cursor に変更してください。\n</user_query>\n"
                    }
                ]
            }
        ]
    }
分解してみましょう。
DOM Path: div#root > h1\nPosition: top=348px, left=254px, width=339px, height=56px
React Component: App
HTML Element: <h1 data-cursor-element-id=\"cursor-el-1\" style=\"\">Vite + React</h1>
CSSセレクタ、Reactのコンポーネント名、該当箇所のHTML Elementを送っています。
さらに、ここからどのようにしてReactのコードを突き止めているのかも調査してみましょう。
{
    "role": "assistant",
    "content": [
        {
            "text": "はい、承知いたしました。指定された箇所の「Vite + React」のタイトルを「Vite + React + Cursor」に変更いたします。\n\nまず、プロジェクトの構造を確認してAppコンポーネントのファイルを探します。"
        },
        {
            "toolUse": {
                "name": "list_dir",
                "input": {
                    "target_directory": "/Users/name/project/cursor-visual-editor-test"
                }
            }
        }
    ]
}
次の段階では実装コードのあるapp.tsxのファイルを探し始めました。

先ほど React Component:App という情報を送っていたので、 App.tsx をすぐに探し出せたようです。
 プロンプトの中身を調査（応用）ほんの少しだけ実践に近づけてみます。

今度はsample.tsxという別ページを作成してみます。この画面の要素を選択したときには、どのようなプロンプトが送られて、どのように実装箇所を突き止めているのか調査してみます。
修正後

CloudWatch Logs（抜粋）
{
    "role": "user",
    "content": [
        {
            "text": "<user_query>\nDOM Path: div#root > div > div > div > ul > li[2]\nPosition: top=530px, left=239px, width=314px, height=24px\nReact Component: Sample\nHTML Element: <li data-cursor-element-id=\"cursor-el-1\">アイテム 3</li> サンプルアイテムを5つに増やしてください\n</user_query>\n"
        }
    ]
}
DOM Path: div#root > div > div > div > ul > li[2]\nPosition: top=530px, left=239px, width=314px, height=24px
React Component: Sample
Element: <li data-cursor-element-id=\"cursor-el-1\">アイテム 3</li>
今度は、 React Component が Sample になってます。

Reactを使っている場合は、どのファイルに該当箇所が実装されているのかを素早く特定できるようになっているようです。
 まとめCursorがビジュアルエディタで選択された情報をどのように送るか、そして実装箇所をどのように特定するのか見ていきました。流れをまとめます。
ビジュアルエディタで選択した要素を、そのままモデルにプロンプトとして渡している。
その中でも、React ComponentをCursor内部で特定している。
React Component（例: App, Sample）を起点に、該当コンポーネントの実装ファイルを探索して修正箇所を特定している
 感想ビジュアルエディタは、今後フロントエンドの実装を進める上で、欠かせない存在になりそうです。
どのように実現しているのかを見ることで、使い方を洗練していけると思い、今回の調査をしてみました。

今回は簡単なテキスト修正のみでしたが、コンポーネントの位置の入れ替えであったり、CSSの修正にも使うことができます。

そのような操作の中でも、実装とビジュアルエディタで指定した箇所の突合（照合）は、今回分かった仕組みをベースに行っているはずです。
ビジュアルエディタ機能はまだ登場したばかりですが、今後さらに便利に使いやすくなっていくことが予想されます。
今のうちから使いこなして、開発スピードを向上させていきましょう！