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

# Componentes

> Componentes de UI y proceso.

# Componentes

Los componentes son las partes ejecutables de tu app. Cada componente tiene un `type` que determina cómo se ejecuta.

## Componentes de UI

Un componente de UI es un frontend web — React, Vue, Svelte, HTML plano, o cualquier framework que se sirva en un puerto.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'Dashboard', type: 'ui', path: '.', runtime: { dev: { command: 'bun run dev' } } }
```

* **Máximo 1 por app** — Kazzle asigna una única URL de vista previa por app
* `runtime.dev.command` — comando para el servidor de desarrollo (usado por "Iniciar vista previa")
* `runtime.prod.build` — comando para construir la imagen de producción
* `runtime.prod.command` — comando para iniciar un componente de proceso de producción

Si `runtime.dev.command` no está configurado, el sistema de vista previa ejecuta `bun run dev` desde tu `package.json`.

## Componentes de proceso

Un componente de proceso es un servicio backend, worker, o tarea programada.

```typescript theme={"theme":"material-theme-darker"}
{ name: 'API', type: 'process', path: './server/index.ts' }
```

### Ciclo de vida: `processMode`

Un componente de proceso tiene uno de dos ciclos de vida:

* `processMode: 'persistent'` (predeterminado) — servidor HTTP de larga duración. Los triggers se envían por POST al servidor en ejecución en la `path` declarada.
* `processMode: 'triggered'` — el script de entrada se genera por cada trigger y se cierra. Sin máquinas inactivas en producción.

### Triggers

Los triggers de programación y webhook se declaran en el componente. Un componente puede llevar muchos triggers. Cada trigger tiene un `name` (único dentro del componente) y un `kind`.

```typescript theme={"theme":"material-theme-darker"}
{
  name: 'events',
  type: 'process',
  path: './components/events/index.ts',
  processMode: 'persistent',
  triggers: [
    { name: 'cleanup', kind: 'schedule', schedule: '0 * * * *', path: '/cron/cleanup' },
    { name: 'stripe',  kind: 'webhook',                          path: '/webhook/stripe' },
  ],
}
```

`path` es requerido para `processMode: 'persistent'`. Para `processMode: 'triggered'` se omite — el script lee `TRIGGER_NAME` del entorno en su lugar.

Consulta [Automations](/work/automations) para el modelo completo de triggers, contrato de variables de entorno, y autenticación de encabezado HTTP.

## Comandos de runtime

| Fase                   | Cuándo se ejecuta                   | Ejemplo                                |
| ---------------------- | ----------------------------------- | -------------------------------------- |
| `runtime.dev.command`  | Durante la vista previa en borrador | `bun run dev`, `vite`, `next dev`      |
| `runtime.prod.command` | En producción                       | `bun run start`, `node dist/server.js` |

Los scripts de paquete de vista previa en borrador pueden usar `kazzle run -- <command>` para que Kazzle pueda inyectar puertos locales y URLs de componentes hermanos. Los componentes de proceso de producción deben declarar el comando real en `runtime.prod.command` porque el despliegue ejecuta ese comando en la imagen de producción.