> ## 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 建置應用時，應在啟動或變更草稿後開啟應用開發標籤。不應僅根據命令輸出聲稱應用正在執行。