> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kazzle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# プレビュー

> アプリドラフトの開発サーバープレビュー。

# プレビュー

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

## 仕組み

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

## 開発コマンドの設定

UI コンポーネントで `lifecycle.dev` を設定します：

```typescript theme={"theme":"material-theme-darker"}
import { defineConfig } from '@kazzle/app';

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 がアプリを構築するときは、ドラフトを開始または変更した後、アプリ開発タブを開く必要があります。コマンド出力だけからアプリが実行されていると主張してはいけません。