> ## 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（チャット、画像、音声、文字起こし、動画）を利用します。1 つのエンドポイントで、スペースのクレジットで課金されます。ユーザーが OpenAI / Anthropic / その他のプロバイダーに直接課金したい場合を除き、ユーザーにプロバイダーキーを求めないでください。

エンドポイント、課金、例は [AI API リファレンス](/platform/ai-api) に一度だけ記載されています。このページではアプリへの接続方法のみを説明します。

## API キーの接続

1. `api_key` ツールを使用して、アプリ用のスコープ付き Kazzle API キーを作成します。
2. `KAZZLE_API_KEY` という名前でシークレットコレクション + 環境に保存します（シークレット名が環境変数になります）。
3. プロセスコンポーネントをそのコレクション + 環境に指定します。
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' },
    },
  ],
});
```

実行時、プロセスは vault から解決された `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_*` 変数に入れないでください。vault の接続については [シークレット](/apps/secrets) を、すべてのエンドポイントについては [AI API リファレンス](/platform/ai-api) を参照してください。