stagewiseとCursorでフロントエンド開発が最高すぎる件

はじめに

個人開発に夢中している RUI です。
最近主に Cursor を使っており、Cursor のパワーを最大限に活用していますが、
フロントエンド UI 部分の修正をする際に、なかなか指定したい場所を探すのが面倒だったり、Prompt の説明を書くのに時間がかかったりしませんか？

そんな悩みを解決するために、stagewise という拡張機能を使ってみました。

stagewise とは

動画から見た方がイメージしやすいです

一言で言うと画面上で修正したい箇所を選択して、Prompt を書くだけで Cursor の Agent に修正を依頼できるようになる拡張機能です。
これだけで十分魅力が感じられると思います。

使い方

stagewise は現時点で Cursor と Windsurf だけサポートしています。
使えるフレームワークは下記のようです。

• React.js
• Next.js
• Nuxt.js
• Vue.js
• SvelteKit

本記事では、TanStack Router を使ったフロントエンド開発を例に stagewise の使い方を紹介します。

1. stagewise 拡張機能のインストール

まずは Cursor または Windsurf の拡張機能から stagewise を検索してインストールします。

2. @stagewise/toolbar-react のインストール

下記のように必要なパッケージをインストールします。

pnpm install @stagewise/toolbar-react

3. stagewise の設定を追加する

TanStack Router に stagewise の設定を追加します。

import { RouterProvider, createRouter } from "@tanstack/react-router";
import ReactDOM from "react-dom/client";
import Loader from "./components/loader";
import { routeTree } from "./routeTree.gen";

import { QueryClientProvider } from "@tanstack/react-query";
import { orpc, queryClient } from "./utils/orpc";

// Added imports for Stagewise Toolbar
+ import { StrictMode } from "react";
+ import { StagewiseToolbar } from "@stagewise/toolbar-react";

const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  defaultPendingComponent: () => <Loader />,
  context: { orpc, queryClient },
  Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
    return (
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    );
  },
});

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

const rootElement = document.getElementById("app");

if (!rootElement) {
  throw new Error("Root element not found");
}

+ if (!rootElement.innerHTML) {
+   const root = ReactDOM.createRoot(rootElement);
+   root.render(<RouterProvider router={router} />);
+ }

// Stagewise Toolbar initialization
+ if (import.meta.env.DEV) {
+   const toolbarConfig = {
+     plugins: [], // Add your custom plugins here
+   };

+   document.addEventListener("DOMContentLoaded", () => {
+     const toolbarRootElement = document.createElement("div");
+     toolbarRootElement.id = "stagewise-toolbar-root"; // Ensure a unique ID
+     document.body.appendChild(toolbarRootElement);

+     const toolbarRoot = ReactDOM.createRoot(toolbarRootElement);
+     toolbarRoot.render(
+       <StrictMode>
+         <StagewiseToolbar config={toolbarConfig} />
+       </StrictMode>
+     );
+   });
+ }

4. UI の修正を依頼してみる

セットアップが完了したので、ローカルでサーバーを起動すれば stagewise の UI が表示されるようになります。

早速 demo 用のページにて、カテゴリのアイコンを変換するように修正依頼してみます。

まずは入力フォームをクリックし、prompt の記入 ＆ 修正したい個所をクリックして送信で終わりです。
今回はかなりシンプルな prompt だけで、関連する context は stagewise に任せます。

これで Agent の方で関連ファイルと具体的なコードまで送信されて Agent が動き始めます。

指定通りに修正できました！

手動ですと、関連ファイルを探したり Prompt の説明を書かないといけないので少し手間ですが、
stagewise を使えばこれらを省略できるので、なかなか便利ではないかと思います。

まとめ

以上で stagewise の基本的な使い方を紹介しました。
かなり便利な拡張機能なので、ぜひ使ってみてください。