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

# Configuratie

> Volledige referentie voor kazzle.config.ts — het app-manifest.

# Configuratie

Elke Kazzle-app heeft een `kazzle.config.ts` in de projectroot. Dit bestand definieert wat je app bevat — componenten, skills en metadata.

## Snel starten

```typescript theme={"theme":"material-theme-darker"}
import { defineConfig } from '@kazzle/app';

export default defineConfig({
  components: [
    { name: 'My App', type: 'ui', path: '.' }
  ]
});
```

De `defineConfig`-helper biedt TypeScript-autocompletion en validatie. De types komen uit het `@kazzle/app`-pakket dat in elke template is opgenomen.

## Velden op het hoogste niveau

| Veld           | Type                         | Verplicht | Beschrijving                                                                                                                                                                                           |
| -------------- | ---------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `name`         | `string`                     | nee       | Marketingnaam die in de app-catalogus wordt weergegeven. Valt terug op de slug als dit wordt weggelaten.                                                                                               |
| `subtitle`     | `string`                     | nee       | Korte eenregelige tagline onder de app-naam in de catalogus (bijv. "Control Mac apps from Kazzle"). Verplicht om te publiceren — weglaten en publiceren mislukt.                                       |
| `version`      | `string`                     | nee       | Door auteur ingesteld versielabel (bijv. "1.2.0"). Alleen voor weergave; vastgelegd bij publicatie en weergegeven op klonen als de versie waarvan is afgesplitst.                                      |
| `icon`         | `string`                     | nee       | Pad naar het app-pictogrambestand relatief aan de repo-root (png, jpg, svg, webp, ico). Geüpload naar CDN bij publicatie.                                                                              |
| `accentColor`  | `string`                     | nee       | Optionele merkaccentkleur als hexadecimale tekenreeks (bijv. "#3b82f6"). Kleurt het app-pictogrampictogram en detailhero. Indien weggelaten, wordt het accent automatisch uit het pictogram gesampled. |
| `kazzleAuth`   | `"optional"` \| `"required"` | nee       | Identiteitsbeperking voor het app-startoppervlak — "optional" (identiteit verstrekt als een Kazzle-gebruiker aanwezig is) of "required" (moet een ingelogde Kazzle-gebruiker zijn om te bekijken).     |
| `launchUrl`    | `string`                     | nee       | Letterlijke absolute URL geopend in Kazzle wanneer op de app wordt geklikt, gebruikt zoals opgegeven. Indien weggelaten, is het startoppervlak de geïmplementeerde preview-URL van de UI-component.    |
| `webhookUrl`   | `string`                     | nee       | Publisher-eindpunt waar Kazzle POSTs op app.installed / app.uninstalled (levert de installatiekey).                                                                                                    |
| `components`   | object\[]                    | nee       | Uitvoerbare componenten — UI-frontends of achtergrondprocessen                                                                                                                                         |
| `skills`       | object\[]                    | nee       | AI-skilldefinities — markdown-bestanden die de AI leest voor domeinkennis                                                                                                                              |
| `capabilities` | `object`                     | nee       | Optionele desktopintegratiefeatures zoals sneltoetsen, meldingen en aanwezigheid in de statusbalk                                                                                                      |

## Componentvelden

Elk item in `components[]`:

| Veld                   | Type                     | Verplicht    | Beschrijving                                                                                          |
| ---------------------- | ------------------------ | ------------ | ----------------------------------------------------------------------------------------------------- |
| `name`                 | `string`                 | ja           | Unieke componentnaam binnen de app                                                                    |
| `type`                 | `"ui"` \| `"process"`    | ja           | Componenttype — ui (max 1) of process                                                                 |
| `path`                 | `string`                 | ja           | Invoerpad in de app-directory                                                                         |
| `runtime`              | object                   | nee          | Commando's en optionele env-overschrijvingen: `{ dev?, prod? }`                                       |
| `runtime.dev.command`  | `string`                 | nee          | Commando om de dev-server te starten (bijv. `"bun run dev"`)                                          |
| `runtime.dev.env`      | object                   | nee          | Dev-only env-overschrijving. Valt terug op component `env`.                                           |
| `runtime.prod.command` | `string`                 | nee          | Commando om in productie te starten (bijv. `"bun run start"`)                                         |
| `runtime.prod.build`   | `string`                 | nee          | Commando om voor productie te bouwen (bijv. `"vite build"`)                                           |
| `runtime.prod.env`     | object                   | nee          | Production-only env-overschrijving. Valt terug op component `env`.                                    |
| `schedule`             | `string`                 | nee          | Cron-schema voor procescomponenten (bijv. `"*/5 * * * *"`)                                            |
| `trigger`              | `"webhook"` \| `"event"` | nee          | Triggermodus voor procescomponenten                                                                   |
| `env`                  | object                   | nee          | Geheime verzameling + omgeving voor env-var-injectie                                                  |
| `env.collection`       | `string`                 | ja (als env) | Geheime verzamelingslug                                                                               |
| `env.environment`      | `string`                 | ja (als env) | Omgevingslug                                                                                          |
| `env.include`          | `string[]`               | nee          | Alleen deze env-var-namen injecteren. Indien weggelaten, alle uit de verzameling+omgeving injecteren. |

## Skillvelden

Elk item in `skills[]`:

| Veld   | Type     | Verplicht | Beschrijving                                           |
| ------ | -------- | --------- | ------------------------------------------------------ |
| `name` | `string` | ja        | Skillnaam                                              |
| `path` | `string` | ja        | Pad naar het SKILL.md-bestand relatief aan de app-root |

## Beperkingen

* **Max 1 UI-component** per app
* Component `name`-waarden moeten uniek zijn binnen de app

## Sjabloonvoorbeelden

### ai app

```typescript theme={"theme":"material-theme-darker"}
import { defineConfig } from '@kazzle/app';

export default defineConfig({
  /** One-line catalog tagline. Required to publish. */
  subtitle: 'My App',
  icon: 'components/ui/public/favicon.svg',
  components: [
    { name: 'ui', type: 'ui', path: './components/ui' },
    { name: 'server', type: 'process', path: './components/server/index.ts', runtime: { dev: { command: 'bun run dev' }, prod: { command: 'bun run start' } } },
  ],
});
```

### ui db app

```typescript theme={"theme":"material-theme-darker"}
import { defineConfig } from '@kazzle/app';

export default defineConfig({
  /** One-line catalog tagline. Required to publish. */
  subtitle: 'My App',
  icon: 'components/ui/public/favicon.svg',
  components: [
    { name: 'ui', type: 'ui', path: './components/ui' },
    { name: 'server', type: 'process', path: './components/server/index.ts', runtime: { dev: { command: 'bun run dev' }, prod: { command: 'bun run start' } } },
  ],
});
```

### ui app

```typescript theme={"theme":"material-theme-darker"}
import { defineConfig } from '@kazzle/app';

export default defineConfig({
  /** One-line catalog tagline. Required to publish. */
  subtitle: 'My App',
  /** Path to the app icon relative to the repo root. Uploaded to CDN on publish. */
  icon: 'components/ui/public/favicon.svg',
  /** App components — each entry defines a deployable unit. Max 1 UI component. */
  components: [
    { name: 'My App', type: 'ui', path: './components/ui' },
  ],
});
```