stagewise CLIの使い方
はじめに
@denwaya34です。😉
stagewiseがCLIをリリースされ、使いやすくなったので紹介 します。
stagewiseとは?
下記のように、開発モードで起動したアプリケーションにチャットUIを配置して、チャット指示でアプリケーションを開発できるツールです。
React,Next.js,Angular,Svelte,Vue,Nuxt などのフレームワークに対応しています。
stagewise CLI とは?
stagewise CLI リリース前は、JavaScriptのコードにstagewiseのコードを埋め込む必要がありました。
ですが、stagewise CLIを使うことでJavaScriptのコードに一切の変更を加える必要がなくなりました。
本番コードへの影響がなくなり、とても使いやすくなりました。
stagewiseの使い方
Angularのアプリケーションを使う場合の使い方を示します。
1. Angularの開発サーバを立ち上げる
下記の手順でAngularの開発環境をセットアップし、開発サーバを立ち上げます。
デフォルトだと4200ポートで開発サーバが起動します。
ng new my-first-angular-app
cd my-first-angular-app
cursor .
npm start
2. stagewise CLIを起動する。
stagewise agentを使う場合と外部agent(cursor等)を使う場合で起動方法が異なります。
外部エージェントの場合、-bオプションをつけて起動します。
-aオプションで、アプリケーションが起動しているポート番号を指定します。
stagewise agentを使用する場合
## stagewise agentの場合
npx stagewise@latest -a 4200
stagewise agentの場合、初回はメール認証が必要です。
初回クレジットで$2がもらえます。
初回クレジットが切れた後も継続して使用するには月$20のサブスクリプション課金が必要です。
サブスク管理画面のリンクはこれです。
外部 agentを使用する場合
## 外部agentの場合(-bオプションをつける)
# NPMの場合
npx stagewise@latest -b -a 4200
外部エージェントを使う場合、外部エージェントとするエディターにstagewizeの拡張をインストールして起動しておく必要があります.
vscode,cursorの場合、マーケットプレイスからインストールします。
3. ブラウザでアプリケーションを開く
2の手順で自動でブラウザが立ち上がりhttp://localhost:3100が開きます。
もし開かない場合、は以下で開きます。
open http://localhost:3100
Tips
HTTPSで開きたい場合
stagewiseはhttpsには対応していないので、httpsで表示したい場合はlocal-ssl-proxyを使うと良いです。
下記ファイルをプロジェクトルートに作成し、local-ssl-proxy --config config.jsonで起動します。
※certとkeyで指定する証明書はmkcertを使ってmkcert localhostで作成してください。
{
"proxy1": {
"source": 4201,
"target": 3100,
"key": "localhost-key.pem",
"cert": "localhost.pem",
"hostname": "localhost"
}
}
サンプルコード
上記手順を完了したコードを以下に置いています。
Discussion