ビルダーでアプリを開発する
ビルダーは PlantPulse Studio の作業台です。左側のチャットウィンドウに日本語で指示すると、AIエージェントが実際のアプリを 修正し、中央のプレビューがすぐに変わり、完了したら [デプロイ] を一度押すだけで現場に送り出します。
ビルダーを開く方法は2つあります。
- ホームで一文でアプリを作成すると、ビルダーがすぐに開きます → ホームでアプリを作成
- 既存のアプリは、サイドバーの アプリケーション(fa-grid-2) からカードの [開く] → アプリカタログと共有
画面構成 — 番号は読む順番
| 番号 | 場所 | 機能 |
|---|---|---|
| ① | 一番左上 | アプリ名とステータス — 준비됨 の場合はセッションコンテナが起動していることを意味します |
| ② | エージェントコンソールのヘッダー | ビルド · クエリ トグル — アプリを修正するのか、データだけを問い合わせるのか |
| ③ | 左下 | メッセージ入力欄 — 日本語で指示します (Enterで送信 · Shift+Enterで改行) |
| ④ | 入力欄のすぐ上 | プラン · 自動 · 承認 — エージェントがどの程度自由に動くかを設定します |
| ⑤ | プレビューのヘッダー | ライブプレビュー URL — 今見ているものが «開発サーバー» であることを示します |
| ⑥ | プレビューの右側 | ビューポート切り替え — デスクトップ · タブレット · モバイルに切り替えて確認します |
| ⑦ | その隣 | 要素選択 — 画面上で修正したい箇所をクリックして指定します |
| ⑧ | 一番右上 | デプロイ — これを押さないと同僚が見るものは変わりません |
プレビューは 開発サーバーをそのまま 表示しているため、エージェントが修正すると即座に変わります。 同僚が見るデプロイ版は ⑧ を押したときだけ 変わります → 用語集
一番下のステータスバーには、現在使用中の モデル とセッションコンテナの CPU · メモリ が表示されます。
画面構成
ビルダーは縦に3つの列です。
| 位置 | 名前 | 機能 |
|---|---|---|
| 左 | Agent Console | エージェントと対話するチャットウィンドウ。何を作るか・修正するかを指示します |
| 中央 | Live Preview | 現在作成中のアプリ画面。指示が終わると自動で更新されます |
| 右 | Context | このアプリが使用するデータ・スキル・状態を表示する細いレール。デフォルトでは閉じています |
左と中央の間の縦線をマウスでドラッグすると、チャットウィンドウの幅を広げたり狭めたりできます。
上部ツールバー
左から 戻る(fa-arrow-left, 애플리케이션 목록으로)、アプリ名、ステータスインジケーター(세션 준비 중… →
준비됨 → 指示を処理している間 생성 중…) があり、右側には次のボタンがあります。
| ボタン | アイコン | 説明 |
|---|---|---|
| デプロイ | fa-rocket-launch | 現在の状態を現場で使用できるように送り出します |
| スキル抽出 | fa-lightbulb | この会話で得たノウハウをスキルとして保存 → 現場スキル |
| テンプレートとして保存 | fa-bookmark | このアプリ構成を次のアプリの出発点として保存します |
| データ | fa-database | データエクスプローラーを開く |
| コード | fa-code | コードビューを開く |
| 履歴 | fa-clock-rotate-left | 変更履歴を開く |
| エクスポート | fa-download | アプリファイル全体を圧縮ファイルとしてダウンロード |
| リモートプッシュ | fa-cloud-arrow-up | 会社のGitリポジトリに送信(管理者設定が必要) |
| コンテキストレール | fa-sidebar-flip | 一番右のボタン。右側のレールを開閉します |
一度でもデプロイしたことがある場合、[デプロイ] の隣に v1 앱 열기 ↗ チップが表示され、その隣のアイコンからリンク共有と
デプロイバージョン一覧をすぐに開けます。
一番下のステータスバーの アプリ 項目をクリックすると、アプリが現在 실행 중 なのか 정지됨 なのか、ログがどのようになっているかを
確認し、[再起動] することができます。
最初の指示を送る
チャットウィンドウのヘッダーにある [ビルド] / [クエリ] トグルで ビルド が選択されていることを確認し、やりたいことを入力します。 (クエリはアプリを修正せずにデータだけを問い合わせるモードです → チャットでデータを問い合わせる)
- Enter で送信、Shift+Enter で改行
- クリップ(fa-paperclip)で写真・スケッチ・CSV を添付すると、その画面をそのまま移して作成します
- 処理中は送信ボタンが赤い 停止 ボタンに変わります
会話が空の場合、사이트 목록을 카드로 보여줘 のような例文が表示されるので、クリックして開始しても構いません。
一度に一つずつ、具体的に。3番ラインの温度・圧力を大きな数字カードで表示し、90度を超えたら 赤く表示して のように 対象 · 表現方法 · 条件 を記述すると、結果がはるかに正確になります。
エージェントが作業している間、チャットには 도구 호출: …、파일 변경: …、커밋 … のような作業記録が蓄積されます。
파일 변경: 行をクリックすると、コードビューがそのファイルを開いて表示します。
3つのモード
チャット入力欄のすぐ上に プラン · 自動 · 承認 セグメントがあります。選択したモードは次回起動時にも 保持されます。
| モード | アイコン | 動作 | こんなときに使います |
|---|---|---|---|
| プラン | fa-list-check | すぐに作成せず、画面構成案 を最初に表示します。빌드 플랜 カードで画面・ウィジェット・必要なデータを確認し、[承認してビルド] を押して初めて実際の作業が始まります | 初めて作成する画面、要件が大きい作業。間違った方向に進むのを事前に防ぎます |
| 自動 | fa-bolt | 指示するとすぐに修正し、保存まで自動で行います(デフォルト) | 小さな修正、素早い反復 |
| 承認 | fa-check-double | 修正しますが、保存は保留 します。プレビューで確認した後、自分で承認して初めて確定します | 稼働中のアプリを触るとき、結果を必ず目で確認してから進めたいとき |
承認モード で変更が発生すると、入力欄の上に黄色いレビューバーが表示されます。
変更レビュー待ち — プレビューで確認してから承認するか元に戻してください [元に戻す] [承認(コミット)]
- [承認(コミット)] — 変更を確定し、変更履歴に記録します
- [元に戻す] — 今回の変更をすべて破棄して直前の状態に戻します
빌드 플랜 カードの [閉じる] を押すと、元のリクエスト文が入力欄に戻ります。文を修正して
再度送信すると、新しい構成案が届きます。作成に時間がかかる場合は [キャンセル] で停止できます。
スラッシュコマンド
入力欄に / と入力すると、コマンド一覧が表示されます。ビルドモードでのみ動作します。
| コマンド | 引数 | 機能 |
|---|---|---|
/plan | 必須 | 画面構成案を先に受け取り、承認後にビルド |
/build | 必須 | この内容ですぐにビルド |
/review | — | 最近の変更をレビュー(ファイル修正なし) — 問題点と改善案のみを通知します |
/fix | — | エラーを探して修正指示 |
/test | — | 型チェック(tsc)を実行 — アプリに構文・型エラーがないか点検 |
/loop | 任意 | 検査に合格するまで修正を繰り返す(最大3回) |
/deploy | — | デプロイダイアログを開く |
/plan·/build は後ろに内容を続ける必要があります(例: /plan 보일러 압력 대시보드)。省略すると
이 명령에는 내용이 필요합니다 の案内が表示され、入力はそのまま残ります。
/test でまずエラーがあるか確認し、あれば /loop を実行してください。進行中でも停止ボタンで
止められ、完了すると ✅ /loop 완료 または ⚠️ /loop 3회 반복 후에도 오류가 남았습니다 で
結果が通知されます。
プレビューの活用
プレビューのヘッダーで画面サイズを切り替えられます — デスクトップ(fa-display) タブレット(fa-tablet-screen-button) · モバイル(fa-mobile-screen-button)。現場でスマホから見るアプリなら モバイルにして作成してください。隣の 更新(fa-rotate-right)·新しいタブ(fa-arrow-up-right-from-square)も 頻繁に使用します。
修正箇所を直接クリックして指示する
言葉で位置を説明しにくいときに使用します。
- プレビューのヘッダーの [要素選択](fa-arrow-pointer) をクリックします →
요소를 클릭하세요…に変わります - プレビューで修正したい箇所をクリックします
- チャット入力欄の上に、選択した要素名とともにクイック指示ボタンが表示されます — 文言修正 · 色変更 大きく · 削除、そして 直接入力
ボタンを押すと 선택한 요소 [○○] — 색 변경 のような文がすぐに送信され、直接入力 を選ぶと
その文が入力欄に挿入され、後ろに希望する内容を続けて入力できます。
4つのドロワー
ツールバーのアイコンをクリックすると、右側からドロワーが開きます。Esc で閉じます。
| ドロワー | 開く場所 | 内容 |
|---|---|---|
| 変更履歴 | fa-clock-rotate-left | これまでの変更一覧。行をクリックすると何が変わったか展開して表示します |
| コード | fa-code | アプリを構成するファイル一覧と内容(読み取り専用) |
| デプロイバージョン | v1 チップの fa-chevron-down | デプロイされたバージョン一覧・ロールバック・公開/非公開切り替え |
| データエクスプローラー | fa-database | サイト → アセット → タグ とたどって確認し、[挿入] でその対象をチャット入力に貼り付けます |
データエクスプローラーの [挿入] は特に便利です。設備名とIDが正確に入力されるため、エージェントが間違った 設備を掴むことが減ります。
変更履歴と元に戻す
指示が一回終わるたびに、その時点のアプリ状態が 自動的に保存 されます。別途保存ボタンを押す必要は なく、気に入らなければいつでも過去に戻れます。
- ツールバーの 履歴(fa-clock-rotate-left) を開きます
- 一番上の項目に
현재バッジが付いています。各行をクリックすると変更内容が展開されます - 戻りたい時点で [この時点へ] → 確認ダイアログで承認
이후 변경은 사라집니다. 戻した時点より後に行った作業は失われます。元に戻す前にプレビューと
変更内容を確認してください。
変更履歴はアプリごとに自動的に残る記録であり、あなたがチャットに入力した文がその記録にそのまま残る可能性が
あります。APIキー・パスワード・トークンはチャットウィンドウに貼り付けず、管理者に依頼して
環境設定 で登録してください。
スタジオは sk-…、glpat-…、Bearer … のように 広く知られている形式のキーは自動的に *** で
マスクしますが、世の中のすべてのキー形式を認識できるわけではありません。
右側のコンテキストレール
ツールバーの一番右 fa-sidebar-flip で開きます。このアプリが何を材料として使用しているかを一目で 確認できます。
- データ接続 — このアプリが扱うサイト・設備・タグを事前に定義します。[データ接続] をクリックして 選択すると、エージェントがIDを推測せずに正確な対象で作成します。アプリを作成する前に一度指定しておくと 結果の品質が大幅に向上します
- データバインディング — 現在の画面が実際に使用している設備ID・参照パス
- 適用スキル — 今回の作業で参照した 現場スキル
- ステータス — 最後の保存ポイントとデプロイバージョン
デプロイ
ツールバーの [デプロイ] をクリックすると進行ウィンドウが表示され、ビルド準備 → プロダクションビルド → サービングバージョン切り替え の3段階が進みます。通常20〜60秒かかり、進行中はウィンドウを閉じられません。
完了すると v1 배포됨 とともに QRコード が表示されます。現場のスマホでスキャンするとすぐに開けます。
- デプロイするたびに バージョンが1つずつ積み上がります(v1、v2、v3 …)
- 問題が発生した場合は デプロイバージョン ドロワーから以前のバージョンの [このバージョンへ] をクリックして戻します。
現在サービス中のバージョンには
서빙 중バッジが付きます - 同じドロワーの上部で 公開 / 非公開 を切り替えます。誰が見られるか、リンク・QRでどう共有するかは アプリカタログと共有 で説明します
デプロイはその時点のコピーを送り出すことです。デプロイ後もビルダーで修正を続けられ、現場で 使用するアプリは 再度デプロイするまで変わりません。
詰まったとき
| 症状 | こうしてみてください |
|---|---|
| プレビューがずっと準備中 | 少し待ってから [再試行]。それでもダメならステータスバーの アプリ → [再起動] |
| 画面が真っ白になる | /test でエラー確認 → /loop で自動修正 |
| 指示が意図と違う形で反映される | 変更履歴 で直前の時点に戻してから、より具体的に再度指示 |
| 応答が遅すぎる | 停止ボタンで止めて、リクエストを小さく分割して再度 |
| 接続が切れたという案内が出る | 結果が反映されている可能性があります。プレビューと変更履歴を先に確認してください |
より詳しい対処は トラブルシューティング を参照してください。