はじめに

最近よく目に入ってくる Stagewise を実際に触ってみました！
この記事では、Stagewiseの大まかな概要、導入方法、使い方について解説します！

Stagewiseって？

Stagewiseは AI搭載のコードエディタに「視覚」を提供する 拡張機能です。
具体的には、フロントエンドのUIをコードAIエージェントに接続します。

できること

ざっくりできることについて解説します！

Stagewiseを用いてフロントエンドUIをAIコードエディタに接続すると以下のようなことが可能になります。

ブラウザ上で要素を選択し、それに対してコードAIエージェントに指示が出せる
AIエージェントにリアルタイムなコンテキスト（情報) を提供できる
- コンテキストにはDOM要素、スクリーンショット、メタデータなど、豊富な情報が含まれる

上記のことから、Stagewise は開発者がAIを活用したコーディング体験を向上させ、AIによるコーディングワークフローを強化することができます！

StagewiseをCursorに導入する

ここからは実際にStagewiseをCursorに導入していきます！

Cursorに拡張機能をインストール

まずはCursorの拡張機能をインストールします。
検索窓に Stagewiseと検索すると出てきます。こちらからでもインストールできます。

Stagewiseのセットアップ

Macの方は cmd + shift + P、　windowsの方はcontroll + shift + Pでコマンドパレットを開いてください。
そこに stagewiseと打つと、「Auto-setup the stagewise toolbar」というコマンドが出てくるのでそちらをクリックしてください。

クリックすると、Cursor Chatにプロンプトが自動的に入ります。
自動的に入れられたプロンプトをもとにAgentモードでセットアップをしてくれます！

セットアップでは、以下が行われます（Next.jsプロジェクトの場合）

パッケージインストール: @stagewise/toolbar-nextをnpmでインストール
コンポーネント作成: components/stagewise-toolbar.tsxに開発環境専用のラッパーコンポーネントを作成
レイアウト統合: ルートレイアウトにStagewiseToolbarを追加

これでセットアップは完了となります！

実際に触ってみる

開発画面には以下のようにセットアップ時に作成されたStagewiseToolbarが表示されます。
ここにプロンプトを入力し、UIに対して変更を加えることになります！

実際の画面

操作については以下です！

上記の動画のように、画面内から変更したい要素を選択し、選択した要素に対してプロンプトを入力します。
送信ボタンを押すとCursorのChatに自動的に最適化されたプロンプトが入力状態になりCursorのAIエージェントに指示を投げられます！

触ってみた感想

Stagewiseでは画面から直接要素を選択して指示を出すかなり直感的な操作で簡単にも関わらず、具体的な情報（DOM要素など）をコンテキストに含められるので出力もかなり安定する気がします

UIに対しての具体的な指示は言語化がかなりめんどくさいですが、Stagewiseでは「これをこうやって！」と対面で人に指示を出すような感覚で行えるのが良いですね！

まとめ

本記事では、AI搭載コードエディタに「視覚」を提供し、フロントエンドUIをAIエージェントに接続する拡張機能 Stagewise について簡単に解説しました！

Stagewise を利用することで、開発者はブラウザ上で要素を選択し、それに対する指示を直接AIエージェントに出すことが可能になります。
また、DOM要素やスクリーンショットといったリアルタイムなコンテキストをAIに提供することで、より精度の高いコーディング支援が期待できるのでぜひCursorやWindsurfを利用している方は使ってみてはいかがでしょうか！

関連