Como executar o código HTML do ChatGPT ou do Gemini e ver a página ao vivo

O jeito mais rápido de executar o código HTML do ChatGPT ou do Gemini é apertar Mostrar na extensão gratuita AI Code Harvester: a sua página abre ao vivo numa aba nova, com botões para ver no tamanho de computador, tablet e celular, e você nunca precisa salvar um arquivo. Sem a extensão, você copia o código para um arquivo chamado index.html e dá duplo clique nele, como explicado mais abaixo.

Por que o código de um chat ainda não é uma página web

Quando o ChatGPT ou o Gemini “fazem um site”, o que eles entregam na verdade é texto: um bloco de HTML (o esqueleto da página), muitas vezes um bloco de CSS (cores e layout) e um bloco de JavaScript (botões e ações). Pense numa receita. Todas as palavras estão lá, mas ninguém cozinhou o prato ainda. O navegador é o forno que transforma a receita em algo que você pode olhar.

Alguns chats mostram uma pequena prévia própria, mas nem sempre, nem para todo tipo de código, e ela some quando você sai do chat. Se você quer ver a página direito, em tamanhos de tela diferentes, e voltar a ela depois, precisa executá-la você mesmo.

O jeito fácil: aperte Mostrar

O AI Code Harvester é uma extensão gratuita do Chrome (um pequeno complemento que dá uma função nova ao navegador). Ele fica nas páginas do ChatGPT e do Gemini, encontra os blocos de código da resposta e, quando um deles é uma página web, mostra para você. Aqui vai um vídeo curto e depois os passos.

1. Instale a extensão. Adicione pela Chrome Web Store. É grátis e não pede cadastro.
2. Peça uma página para a IA. Por exemplo: “Faça um site de uma página só para uma padaria pequena, com um botão de pedido. Me dê index.html, style.css e app.js.” Dar nome aos arquivos ajuda.
3. Espere a resposta terminar. O pequeno painel do Code Harvester na página lista os arquivos que encontrou.
4. Aperte Mostrar. A sua página abre numa aba nova. Se você estacionou o painel na borda da tela como uma gaveta fina, o botão Mostrar fica na gaveta.
5. Experimente os três botões de tamanho: Computador, Tablet e Celular. Eles mostram como a página cabe numa tela de computador, de tablet e de celular.
6. Não gostou? Peça uma mudança à IA. Quando ela responder, a prévia se atualiza sozinha, então você pode continuar pedindo e olhando.
7. Quer mais espaço? Aperte Abrir ⤢ no painel. O Workspace abre com uma aba Prévia, um botão Recarregar e uma lista para escolher qual arquivo olhar.

Como ele junta as peças? Uma página web costuma pedir os outros arquivos pelo nome, por exemplo style.css e app.js. A extensão encontra os dois na mesma resposta e os encaixa na página, que fica com a aparência e o funcionamento de quem tem tudo salvo lado a lado. Se a resposta tiver mais de uma página HTML, uma lista suspensa deixa você escolher qual olhar.

É seguro executar um código que uma IA escreveu?

A prévia roda numa sala trancada, que os programadores chamam de sandbox. A página consegue se desenhar e rodar os próprios botões, mas não tem acesso à extensão, ao seu navegador nem aos seus dados. Se a página carregar uma biblioteca da internet, isso também acontece só dentro dessa sala trancada. Mesmo assim, código é código, então trate uma página que você não leu como qualquer arquivo de um desconhecido. A prévia é criada no seu computador e nada é enviado para nós.

Sem extensão? O jeito manual

Funciona sem nenhuma ferramenta. Só tem alguns passos a mais, e você os repete depois de cada mudança.

1. Copie o bloco de HTML do chat.
2. Cole no Bloco de Notas (ou em qualquer editor de texto simples) e salve como index.html. Na janela de salvar, escolha “Todos os arquivos”, para não acabar como index.html.txt.
3. Faça o mesmo com os blocos de CSS e JavaScript, com os nomes que o HTML pede (por exemplo style.css e app.js), na mesma pasta.
4. Dê duplo clique em index.html. Ele abre no seu navegador como uma página de verdade.
5. Mudou alguma coisa? Salve o código novo por cima do arquivo antigo e aperte atualizar no navegador.

O tropeço mais comum é uma página que parece pelada ou com botões que não fazem nada. Na maioria das vezes o nome de um arquivo não bate com o que o HTML pede. Na prévia da extensão, se os nomes forem diferentes, ela usa o próximo arquivo ainda não usado do tipo certo, então perdoa isso. À mão, você mesmo precisa corrigir o nome.

Quando a prévia parece errada

• Parece vazia ou pela metade. A última resposta pode ter só parte do código, por exemplo um arquivo alterado. Peça à IA que “me dê de novo os arquivos completos”.
• Faltam imagens. Um chat não consegue enviar arquivos de imagem. Use imagens com endereços da web ou adicione as suas depois.
• Os botões não fazem nada. Procure um arquivo JavaScript na lista do painel. Se a IA o colocou em outra resposta, peça todos os arquivos numa resposta só.
• Boa no computador, quebrada no celular. Aperte Celular, veja o que está errado e peça à IA que “adapte para telas pequenas”.
• Páginas que precisam de login ou de banco de dados. Aqui você só vê como elas ficam, não como se comportam. Elas precisam de um servidor de verdade.

Peça à IA páginas que apareçam bem na prévia

• Peça todos os arquivos numa resposta só, com o nome do arquivo escrito acima de cada bloco.
• Para uma página simples, peça um arquivo só: “coloque o CSS e o JavaScript dentro do HTML”.
• Diga para quem é: “precisa ficar bonita no celular”.
• Mude uma coisa de cada vez. Fica mais fácil ver o que deu errado.

Quando a página estiver certa, a próxima pergunta é como colocá-la no ar para os outros verem. O nosso guia Onde publicar a página web que a sua IA fez passa pelas opções gratuitas e pagas em palavras simples. O AI Code Harvester faz mais do que a prévia: ele baixa tudo como ZIP (com as suas próprias pastas, se quiser), exporta uma página única ou leva o chat para outra IA. Ele lê chats do ChatGPT e do Gemini e funciona no seu computador. Adicione pela Chrome Web Store.

Bom saber antes de começar

Perguntas frequentes