Saltar al contenido principal

Configuración

Cada app de Kazzle tiene un kazzle.config.ts en la raíz del proyecto. Este archivo define qué contiene tu app — componentes, skills y metadatos.

Inicio rápido

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

export default defineConfig({
  components: [
    { name: 'My App', type: 'ui', path: '.' }
  ]
});
El helper defineConfig proporciona autocompletado y validación de TypeScript. Los tipos provienen de kazzle.types.ts, que se genera automáticamente e incluye en cada plantilla.

Campos de nivel superior

CampoTipoRequeridoDescripción
iconstringnoRuta al archivo de icono de la app relativa a la raíz del repositorio (png, jpg, svg, webp, ico). Se sube a CDN al publicar.
componentsobject[]noComponentes ejecutables — frontends de UI o procesos en segundo plano
skillsobject[]noDefiniciones de skills de IA — archivos markdown que la IA lee para conocimiento del dominio
capabilitiesobjectnoCaracterísticas opcionales de integración de escritorio como atajos de teclado, notificaciones y presencia en la barra de estado

Campos de componente

Cada entrada en components[]:
CampoTipoRequeridoDescripción
namestringNombre único del componente dentro de la app
type"ui" | "process"Tipo de componente — ui (máx 1) o process
pathstringRuta de entrada dentro del directorio de la app
runtimeobjectnoComandos: { dev?, build?, run? }
runtime.devstringnoComando para iniciar el servidor de desarrollo (p. ej. "bun run dev")
runtime.buildstringnoComando para compilar para producción (p. ej. "vite build")
runtime.runstringnoComando para iniciar en producción (p. ej. "bun run start")
schedulestringnoCronograma cron para componentes de proceso (p. ej. "*/5 * * * *")
trigger"webhook" | "event"noModo de activación para componentes de proceso
envobjectnoColección de secretos + entorno para inyección de variables de entorno
env.collectionstringsí (si env)Slug de colección de secretos
env.environmentstringsí (si env)Slug de entorno
env.includestring[]noSolo inyectar estos nombres de variables de entorno. Si se omite, inyectar todos de la colección+entorno.

Campos de skill

Cada entrada en skills[]:
CampoTipoRequeridoDescripción
namestringNombre del skill
pathstringRuta al archivo SKILL.md relativa a la raíz de la app

Restricciones

  • Máx 1 componente de UI por app
  • Los valores de name del componente deben ser únicos dentro de la app

Ejemplos de plantilla

app de ui

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

export default defineConfig({
  /** Ruta al icono de la app relativa a la raíz del repositorio. Se sube a CDN al publicar. */
  icon: 'components/ui/public/favicon.svg',
  /** Componentes de la app — cada entrada define una unidad desplegable. Máx 1 componente de UI. */
  components: [
    { name: 'My App', type: 'ui', path: './components/ui' },
  ],
});

app de process

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

export default defineConfig({
  /** Ruta al icono de la app relativa a la raíz del repositorio. Se sube a CDN al publicar. */
  icon: 'icon.svg',
  /** Componentes de la app — cada entrada define una unidad desplegable. */
  components: [
    {
      name: 'My App',
      type: 'process',
      path: './components/process/index.ts',
      runtime: { dev: 'bun run dev', run: 'bun run start' },
      // Los procesos persistentes son servidores de larga duración. La plataforma publica
      // activaciones en el servidor en ejecución en la `path` de cada activación con
      // `Authorization: Bearer ${KAZZLE_TRIGGER_SECRET}`. El código del cliente
      // valida el encabezado antes de realizar el trabajo.
      processMode: 'persistent',
      triggers: [
        // Ejemplo de cron — descomenta y ajusta. 5 campos, resolución de minutos.
        // { name: 'hourly-sync', kind: 'schedule', schedule: '0 * * * *', path: '/cron/hourly-sync' },
        // Ejemplo de webhook — POSTs a /webhooks/{spaceId}/{appId}/My App/incoming
        // { name: 'incoming', kind: 'webhook', path: '/webhook/incoming' },
      ],
    },
  ],
});

app vacía

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

export default defineConfig({
  /** Ruta al icono de la app relativa a la raíz del repositorio. Se sube a CDN al publicar. */
  icon: 'icon.svg',
  /** Componentes de la app — cada entrada define una unidad desplegable. */
  components: [],
});