メインコンテンツへスキップ

​
プレビュー

アプリドラフトを開くと、Kazzleは開発サーバーを起動してライブプレビューを表示できます。

​
仕組み

  1. サイドバーからドラフトタブを開く
  2. プレビューが自動開始します（または「プレビュー開始」を手動でクリック）
  3. Kazzleがkazzle.config.tsからlifecycle.devを読み込む
  4. 開発コマンドが割り当てられたポートで実行される
  5. プレビューURLがドラフトタブに表示される

​
開発コマンドの設定

UIコンポーネントでlifecycle.devを設定します： 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
lifecycle.devが設定されていない場合、プレビューシステムは一般的な開発サーバー検出（Vite、Next.jsなど）にフォールバックします。

​
プレビューURL

各アプリはサンドボックス上の専用ポートを取得します。プレビューURLは以下のパターンに従います： 
http://localhost:{PORT}
PORT環境変数はプレビューシステムによって自動的に設定されます。

​
ホットリロード

コードの変更は開発サーバーのホットリロード（HMR）によって検出されます。プレビューはあなたまたはAIがファイルを編集するときにリアルタイムで更新されます。

​
手動操作

  • プレビュー開始 — 開発サーバーが実行されていない場合は起動します
  • プレビュー停止 — 開発サーバープロセスを終了します
  • 再起動 — 停止 + 開始（設定変更後に便利です）

​
検証

プレビューは、アプリ開発タブが開いて期待されるUIが表示されたときのみ検証されます。タイムアウト、タブ開放失敗、プロセス停止、またはプレビューURL欠落は、プレビューがまだ検証されていないことを意味します。 AIがアプリを構築するときは、ドラフトを開始または変更した後にアプリ開発タブを開く必要があります。コマンド出力だけからアプリが実行されていると主張してはいけません。