Stagewise × Cursor 簡易セットアップガイド（2025年5月版）


## 1. Stagewise とは

Stagewise は「ブラウザ上の UI とコードエディタ内の AI エージェントをリアルタイムで結び付けるツールバー」です。
ブラウザで要素をクリックすると、その DOM／CSS コンテキストが Cursor（VS Code ベース）のチャットに送られ、AI に修正指示を出すだけでコードをパッチ適用できます。([Stagewise][1])

---

## 2. 必要環境

| 項目                  | 最小バージョン            |
| ------------------- | ------------------ |
| Cursor（または VS Code） | 0.36 以降            |
| Node.js             | 18 以降（手動セットアップ時のみ） |

> **ポイント**: Cursor を使っていれば Node は不要。拡張機能だけで完結します。

---

## 3. **クイックセットアップ（Auto-Setup 推奨）**

1. **Cursor 拡張機能マーケットで「Stagewise」を検索してインストール**

   * インストール時に Stagewise MCP サーバーが自動配置され、Cursor から有効化を促すダイアログが出ます。([Visual Studio Marketplace][2])

2. **`Cmd + Shift + P`** を押して **Command Palette** を開く。

3. **「Auto-setup Stagewise」** （または `setupToolbar`）と入力して実行。

   * ツールバーがプロジェクトに注入され、設定が完了します。([Stagewise][3], [GitHub][4])

4. 開発用サーバー（`npm run dev` など）を起動しブラウザでページを開くと、右下に Stagewise ツールバーが表示されます。要素をクリック→Cursor チャットで修正指示を送る、というループで UI を高速に改善できます。([FunFun AI][5])

---

## 4. 日常ワークフロー

| 操作          | 具体例            | 備考                  |
| ----------- | -------------- | ------------------- |
| **要素選択**    | ボタンをクリック       | DOM/CSS が自動でチャットに貼付 |
| **変更指示**    | 「このボタンを赤に」     | AI が差分 PR／コミットを生成   |
| **プレビュー確認** | ブラウザを自動更新      | Hot-Reload で反映      |
| **追加修正**    | 「余白を 8 px 増やす」 | 連続指示が可能             |

---

## 5. **手動セットアップ（必要時のみ）**

```bash
# 開発依存でインストール
pnpm add -D @stagewise/toolbar
```

```ts
// dev エントリポイント（例: src/main.tsx）
import { initToolbar } from '@stagewise/toolbar';

if (import.meta.env.DEV) initToolbar();
```

手動方式はフレームワーク（React / Next.js / Vue など）別パッケージが用意されています。([GitHub][4])

---

## 6. ハマりどころ & Tips

* **MCP サーバーを誤って拒否した場合**
  * `Cmd + Shift + P → Stagewise: Enable MCP` で再度有効化。
* **プライベートネットワーク** でブラウザがツールバーを読み込めない場合は、`localhost` 以外で dev サーバーを起動しないようにする。
* **ショートカット競合**: 他拡張機能とぶつかる場合は Cursor → Settings → Keyboard Shortcuts から `Stagewise: Select Element` を変更。
* **CI/CD** には影響なし（dev 環境限定でバンドル）。

---

### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。

https://mosaica.co.jp/

---

## 参考リンク

* 公式サイト & ドキュメント: [https://stagewise.io/](https://stagewise.io/)
* VS Code Marketplace: [https://marketplace.visualstudio.com/items?itemName=stagewise.stagewise-vscode-extension](https://marketplace.visualstudio.com/items?itemName=stagewise.stagewise-vscode-extension)
* GitHub リポジトリ & issue tracker: [https://github.com/stagewise-io/stagewise](https://github.com/stagewise-io/stagewise)

これで **`Cmd + Shift + P → Auto-setup Stagewise`** さえ覚えれば、ほぼワンクリックで UI 開発に AI を取り込めます。
あとはブラウザで要素を選んでチャットするだけ。
ぜひ試してみてください。

[1]: https://stagewise.io/?utm_source=chatgpt.com "stagewise | Eyesight for your AI-powered Code Editor"
[2]: https://marketplace.visualstudio.com/items?itemName=stagewise.stagewise-vscode-extension&utm_source=chatgpt.com "stagewise - Visual Studio Marketplace"
[3]: https://stagewise.io/docs/quickstart?utm_source=chatgpt.com "Quickstart - stagewise Docs"
[4]: https://github.com/stagewise-io/stagewise?utm_source=chatgpt.com "stagewise-io/stagewise - GitHub"
[5]: https://www.funfun.ai/ai-news/precise-ui-tweaks-with-stagewise-elevate-your-cursor-workflow-2RlBb4C_XwI?utm_source=chatgpt.com "Precise UI Tweaks with Stagewise: Elevate Your Cursor Workflow"