Preview: seu site rodando ao lado do chat

Pra que serve

O preview é a prévia ao vivo do seu projeto: o seu site ou app de verdade, funcionando na tela, do lado do chat. Cada vez que a IA muda alguma coisa, o preview atualiza sozinho, para você ver o resultado na hora.

Quando usar

• Sempre que quiser ver como o seu projeto está ficando.
• Para conferir se a mudança que você pediu saiu do jeito que você queria.

Passo a passo

1. Com o projeto aberto, olhe para a aba “Preview”, em cima do painel da direita. Aba é como a divisória de uma pasta de arquivos: cada uma mostra uma coisa diferente. Ela costuma vir selecionada de primeira.
2. Assim que o projeto tiver algo pronto para mostrar, o preview aparece sozinho ali, funcionando de verdade.
3. Peça uma mudança para a IA no chat. Quando ela termina, o preview atualiza na hora, sem você precisar fazer nada.
4. Se quiser ver o projeto numa janela maior, clique no ícone de link perto da barra de endereço (a faixinha que mostra o link da página, em cima do preview). Isso abre o projeto no seu navegador normal, o programa que abre sites no seu computador, tipo o Chrome.

Abrir várias páginas ao mesmo tempo

O preview pode ter mais de uma página aberta ao mesmo tempo, cada uma numa aba, igual a um navegador de internet comum.

1. Clique no ícone de mais (+), do lado da barra de endereço do preview.
2. Uma aba nova abre. Como agora são duas ou mais, uma fileira de abas aparece em cima do preview.
3. Clique numa aba pra trocar pra ela.
4. Pra fechar uma aba, clique no X que aparece nela. A aba some da fileira.

Recolher o preview

Às vezes o projeto não tem nada pra mostrar no preview, como quando ele é só uma pasta de arquivos. Nesse caso, dá pra escondê-lo e deixar mais espaço pro chat.

1. Olhe pra linha fina que separa o chat do preview, no meio da tela.
2. Nela tem uma bolinha com uma seta, um pouco abaixo do meio. Clique nela.
3. O preview desaparece e o chat ocupa o espaço que sobrou.
4. Pra trazer o preview de volta, clique na bolinha que ficou na borda da tela.

Se o preview aparecer vazio

Às vezes o preview mostra uma tela vazia, com uma mensagem avisando que o “servidor” ainda não está aberto. Servidor é o programinha que faz o projeto rodar. Nesse caso:

1. Clique em “Reiniciar”, no topo da tela, para tentar abrir de novo.
2. Se continuar vazio, clique no botão “Não subiu? Copiar prompt pro Claude”. Ele copia um texto pronto.
3. Cole esse texto no chat e aperte Enter. A IA investiga o motivo e tenta resolver.

Dica

Tem um botão de recarregar do lado da barra de endereço do preview, parecido com o de um navegador comum. Use-o se a tela parecer travada ou desatualizada.