Saltar para o conteúdo principal

​
Visualizações

Quando você abre um rascunho de app, o Kazzle pode iniciar um servidor de desenvolvimento e mostrar uma visualização ao vivo.

​
Como funciona

  1. Abra uma aba de rascunho na barra lateral
  2. A visualização inicia automaticamente (ou clique em “Iniciar visualização” manualmente)
  3. O Kazzle lê lifecycle.dev do seu kazzle.config.ts
  4. O comando dev é executado na porta atribuída
  5. A URL de visualização aparece na aba de rascunho

​
Configurando o comando dev

Defina lifecycle.dev no seu componente de UI: 
import { defineConfig } from './kazzle.types';

export default defineConfig({
  components: [
    {
      name: 'My App',
      type: 'ui',
      path: '.',
      lifecycle: { dev: 'bun run dev' }
    }
  ]
});
Se lifecycle.dev não estiver definido, o sistema de visualização volta para a detecção automática de servidor dev comum (Vite, Next.js, etc.).

​
URLs de visualização

Cada app recebe uma porta dedicada em sua sandbox. A URL de visualização segue o padrão: 
http://localhost:{PORT}
A variável de ambiente PORT é definida automaticamente pelo sistema de visualização.

​
Recarga automática

Alterações no seu código são detectadas pela recarga automática (HMR) do seu servidor dev. A visualização é atualizada em tempo real conforme você ou a IA editam arquivos.

​
Controles manuais

  • Iniciar visualização — inicia o servidor de desenvolvimento se não estiver em execução
  • Parar visualização — encerra o processo do servidor de desenvolvimento
  • Reiniciar — parar + iniciar (útil após alterações de configuração)

​
Verificação

Uma visualização é verificada apenas quando a aba app-dev abre e mostra a UI esperada. Um tempo limite, falha ao abrir a aba, processo interrompido ou URL de visualização ausente significa que a visualização ainda não foi verificada. Quando a IA constrói um app, ela deve abrir a aba app-dev após iniciar ou alterar o rascunho. Ela não deve afirmar que o app está em execução apenas pela saída do comando.