> ## 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/기타 제공자 키를 직접 청구하려고 하지 않는 한 요청하지 마세요.

엔드포인트, 청구, 예제는 [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)를 참고하세요.