Cursor エディターの Composerが進化！ Control Panelで開発がもっと楽しく
はじめに
cursor では Pro プランから実験的な機能をいくつか使うことができ、その中に Composer という機能があります。
X でこのポストを見て、この Composer に新たに Control Panel というビューが追加されたとのことで、少し触ってみました。
なお、このポストでは Composer 機能については詳細に触れないので、別途他の関連記事を参考にするようお願いします。
ちなみに、このポストのタイトルは Sonnet 3.5 に「キャッチーなタイトルを生成して」と依頼して生成してもらいました。
Control Panel を表示させる
Composer の Control Panel を試すにあたり、Curosr の更新が必要な場合、コマンドパレットから Cursor: Attempt Update を実行しておきます。
Composer が有効になっていると Cmd + i ショートカットを実行するとエディターの下部に Composer のパネルが表示されます。
Composer パネル上の右上のアイコンをクリックすると Control Panel が表示されます。
あるいは Shift + cmd + i ショートカットでも Control Panel を表示することが出来ます。
Control Panel は、通常の Composer のパネルがエディタいっぱいに引き伸ばされたような見た目で、生成結果が広いビューで確認することが出来そうです。
Esc キーをクリックすることで Control Panel を非表示にすることが出来ます。
Control Panel 上でのプロンプトの実行
Type your instructions... にプロンプトを入力します。
今回は適当に generate simple todo app in TypeScript と入力してみます。
生成の様子
まっさらなプロジェクトで特にコンテキストは与えていないだが、どうしてだか React アプリのコードが生成された。（Rules for AI の入力内容が影響している？）
New composer から新しい composer を開いて別のプロンプトを実行してみます。
今度は simple book management app in Python と入力してみます。
出力されたコードを main.py ファイルに保存しておきます。
Control Panel 上での生成結果の確認と適用
今度は add feature to manage an author of book と入力してみます。
Composer では処理の対象となるファイルを指定することが可能で、先ほど保存した main.py を指定してみます。
プロンプトを実行すると、画面中央に新たなビューが表示されます。
このビューには、実行したプロンプトにより生成されたコードが表示されています。
中央のビューの上部を見ると、左側にはファイル名が、右側には Suggested Code と Diff View という表示があります。
デフォルトでは `Suggested Code が選択状態になっています。
Diff View では、生成結果による変更の差分が表示されます。
画面下部を見ると Cached v1 of v1 という表示と、Reapply Reject Accept という３つのボタンがあります。
この時点ではまだ元のファイルには何の変更も行われていません。
Accept ボタンをクリックすると Save という表示に変わり、対象のファイルに生成結果が適用されました。
次に export class definitions into other files というプロンプトを実行してみます。
プロンプトを実行すると、画面左部のビューに author.py book.py book_manager.py というファイル名が現れました。
これらの３つのファイルはこの段階でファイルが作成されていましたが、ファイルの中身は空の状態でした。
author.py を選択し Accept をクリックすると、左部のビューでファイル名の横に表示されていた丸いアイコンがチェックのアイコンに変わりました。
book.py ファイルを選択し Reject をクリックすると、丸いアイコンがバツ印のアイコンに変わりました。
Reject をクリックした後には Save と Reapply というボタンが表示されます。
Reapply をクリックすると Reject 時のステータスが解除され、再度 Accept が実行出来るようになりました。
（Save はクリックしてもこの時点では何が起こっているのか分かりませんでした。）
おわりに
Control Panel のおかげで Composer がグンと使いやすくなった印象です。
Cursor のコンテキスト機能や強力な LLM モデルを併用することで、さらに効率的な開発体験が得られそうな予感を感じました。
この記事を書くにあたり、簡単な検証のための操作しか行えていないので、これから色々試してみたいです。
参考
How To Use Cursor's Composer + Control Panel
【Cursorエディタ】新機能「Composer」はCursor版Claude Artifacts！
Discussion