> ## 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.

# 應用中的 AI

> 將 Kazzle AI API 整合到應用元件中。

# 應用中的 AI

應用透過 **Kazzle AI API** 取得 AI 功能（聊天、圖像、語音、轉錄、影片）— 單一端點，按點數計費，扣除自該 Space。除非使用者特別要求直接向 OpenAI/Anthropic/其他供應商計費，否則不要要求他們提供 API 金鑰。

端點、計費和範例已在 [AI API 參考](/platform/ai-api) 中完整說明。本頁僅涵蓋如何將其整合到應用中。

## 連接 API 金鑰

1. 使用 `api_key` 工具為應用建立一個限定範圍的 Kazzle API 金鑰。
2. 將其儲存在密鑰集合 + 環境中，名稱為 `KAZZLE_API_KEY`（密鑰名稱會成為環境變數）。
3. 將 process 元件指向該集合 + 環境。
4. 僅從伺服器端程式碼呼叫 `https://api.kazzle.app/ai/*`。

```ts theme={"theme":"material-theme-darker"}
export default defineConfig({
  components: [
    {
      name: 'server',
      type: 'process',
      path: './server',
      env: { collection: 'my-app', environment: 'default' },
    },
  ],
});
```

執行時，process 會看到 `process.env.KAZZLE_API_KEY`，從保管庫解析。沒有 `env.vars` 欄位 — 密鑰只能透過元件指向的集合 + 環境到達元件。

```ts theme={"theme":"material-theme-darker"}
const apiKey = process.env.KAZZLE_API_KEY;
if (!apiKey) throw new Error('KAZZLE_API_KEY is required');

const res = await fetch('https://api.kazzle.app/ai/audio/transcriptions', {
  method: 'POST',
  headers: { Authorization: `Bearer ${apiKey}` },
  body: formData,
});
```

絕不要將金鑰放在前端程式碼或 `VITE_*` 變數中。請參閱 [密鑰](/apps/secrets) 了解保管庫連接，以及 [AI API 參考](/platform/ai-api) 了解每個端點。