Ana içeriğe atla

​
Yapılandırma

Her Kazzle uygulamasının proje kökünde bir kazzle.config.ts dosyası vardır. Bu dosya uygulamanızın içeriğini tanımlar — bileşenler, beceriler ve meta veriler.

​
Hızlı başlangıç

import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    { name: 'My App', type: 'ui', path: '.' }
  ]
});
defineConfig yardımcısı TypeScript otomatik tamamlama ve doğrulama sağlar. Türler kazzle.types.ts dosyasından gelir; bu dosya otomatik olarak oluşturulur ve her şablona dahil edilir.

​
Üst düzey alanlar

AlanTürGerekliAçıklama
iconstringhayırRepo köküne göre uygulama simgesi dosyasının yolu (png, jpg, svg, webp, ico). Yayınlanırken CDN’ye yüklenir.
componentsobject[]hayırYürütülebilir bileşenler — UI ön uçları veya arka plan işlemleri
skillsobject[]hayırAI beceri tanımları — AI’nin alan bilgisi için okuduğu markdown dosyaları
capabilitiesobjecthayırKısayol tuşları, bildirimler ve durum çubuğu varlığı gibi isteğe bağlı masaüstü entegrasyon özellikleri

​
Bileşen alanları

components[] içindeki her giriş:
AlanTürGerekliAçıklama
namestringevetUygulama içinde benzersiz bileşen adı
type"ui" | "process"evetBileşen türü — ui (en fazla 1) veya process
pathstringevetUygulama dizini içinde giriş yolu
runtimeobjecthayırKomutlar: { dev?, build?, run? }
runtime.devstringhayırDev sunucusunu başlatma komutu (örn. "bun run dev")
runtime.buildstringhayırÜretim için derleme komutu (örn. "vite build")
runtime.runstringhayırÜretimde başlatma komutu (örn. "bun run start")
schedulestringhayırProcess bileşenleri için Cron zamanlaması (örn. "*/5 * * * *")
trigger"webhook" | "event"hayırProcess bileşenleri için tetikleme modu
envobjecthayırGizli dizi + ortam değişkeni enjeksiyonu için ortam
env.collectionstringevet (env varsa)Gizli dizi slug’ı
env.environmentstringevet (env varsa)Ortam slug’ı
env.includestring[]hayırYalnızca bu ortam değişkeni adlarını enjekte et. Atlanırsa, koleksiyon+ortamdan tümünü enjekte et.

​
Beceri alanları

skills[] içindeki her giriş:
AlanTürGerekliAçıklama
namestringevetBeceri adı
pathstringevetUygulama köküne göre SKILL.md dosyasının yolu

​
Kısıtlamalar

  • Uygulama başına en fazla 1 UI bileşeni
  • Bileşen name değerleri uygulama içinde benzersiz olmalıdır

​
Şablon örnekleri

​
ui uygulaması

import { defineConfig } from './kazzle.types';

export default defineConfig({
  /** Repo köküne göre uygulama simgesi yolu. Yayınlanırken CDN'ye yüklenir. */
  icon: 'components/ui/public/favicon.svg',
  /** Uygulama bileşenleri — her giriş dağıtılabilir bir birimi tanımlar. En fazla 1 UI bileşeni. */
  components: [
    { name: 'My App', type: 'ui', path: './components/ui' },
  ],
});

​
process uygulaması

import { defineConfig } from './kazzle.types';

export default defineConfig({
  /** Repo köküne göre uygulama simgesi yolu. Yayınlanırken CDN'ye yüklenir. */
  icon: 'icon.svg',
  /** Uygulama bileşenleri — her giriş dağıtılabilir bir birimi tanımlar. */
  components: [
    {
      name: 'My App',
      type: 'process',
      path: './components/process/index.ts',
      runtime: { dev: 'bun run dev', run: 'bun run start' },
      // Kalıcı işlemler uzun süreli sunuculardır. Platform, her tetikleyicinin
      // `path` adresine çalışan sunucuya tetikleyicileri
      // `Authorization: Bearer ${KAZZLE_TRIGGER_SECRET}` ile gönderir. Müşteri kodu
      // çalışma yapmadan önce başlığı doğrular.
      processMode: 'persistent',
      triggers: [
        // Örnek cron — açıklamayı kaldırın ve ayarlayın. 5 alan, dakika çözünürlüğü.
        // { name: 'hourly-sync', kind: 'schedule', schedule: '0 * * * *', path: '/cron/hourly-sync' },
        // Örnek webhook — /webhooks/{spaceId}/{appId}/My App/incoming adresine POST gönderir
        // { name: 'incoming', kind: 'webhook', path: '/webhook/incoming' },
      ],
    },
  ],
});

​
boş uygulama

import { defineConfig } from './kazzle.types';

export default defineConfig({
  /** Repo köküne göre uygulama simgesi yolu. Yayınlanırken CDN'ye yüklenir. */
  icon: 'icon.svg',
  /** Uygulama bileşenleri — her giriş dağıtılabilir bir birimi tanımlar. */
  components: [],
});