> ## 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 in apps

> Wire the Kazzle AI API into an app component.

# AI in apps

Apps get AI (chat, images, speech, transcription, video) through the **Kazzle AI API** — one endpoint, billed in credits against the space. Don't ask users for OpenAI/Anthropic/other provider keys unless they specifically want to bill those providers directly.

The endpoints, billing, and examples are documented once in the [AI API reference](/platform/ai-api). This page only covers wiring it into an app.

## Wiring the API key

1. Create a scoped Kazzle API key for the app with the `api_key` tool.
2. Store it in a secret collection + environment under the name `KAZZLE_API_KEY` (the secret name becomes the env var).
3. Point the process component at that collection + environment.
4. Call `https://api.kazzle.app/ai/*` from server-side code only.

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

At runtime the process sees `process.env.KAZZLE_API_KEY`, resolved from the vault. There is no `env.vars` field — secrets reach components only through the collection + environment they point at.

```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,
});
```

Never put the key in frontend code or a `VITE_*` variable. See [Secrets](/apps/secrets) for the vault wiring and [AI API reference](/platform/ai-api) for every endpoint.