Vibe coding com o ChatGPT: canvas, Codex e como criar apps a partir do ChatGPT

Você pode fazer vibe coding com o ChatGPT de três maneiras. Pedir um app pequeno no chat e ver o preview no canvas; passar tarefas de uma base de código real ao Codex, o agente de código da OpenAI; ou conectar um criador de apps com IA como o Mythex para que o ChatGPT construa, hospede e publique um app completo com banco de dados. A primeira é mais rápida para uma ferramenta de uma página, a segunda serve a desenvolvedores e a terceira entrega um app no ar, com logins e dados, sem sair do ChatGPT.

Aqui está como cada uma funciona, um prompt para cada e onde cada uma para. Se quiser o contexto do termo, leia o que é vibe coding.

Opção 1: chat do ChatGPT e canvas

Para uma ferramenta rápida, basta pedir. O ChatGPT escreve o código e, no canvas, pode mostrar páginas simples em HTML e React para você clicar e pedir mudanças.

Escreva uma calculadora de gorjeta de uma página, com campos para o valor da conta, a porcentagem da gorjeta (botões para 10, 15, 20 e um campo personalizado) e o número de pessoas. Mostre a gorjeta e o valor por pessoa, atualizando enquanto eu digito. Deixe com visual limpo no celular.

Bom para: calculadoras, jogos simples, rascunhos de landing page e aprendizado. Peça "explique este arquivo como se eu fosse novo em programação" e você aprende rápido.

Onde para: não há backend. Nada que você digita é salvo para outros usuários, não há login e, para compartilhar, você teria de copiar o código para algum lugar e hospedar por conta própria. No momento em que você diz "e salve para minha equipe ver", você já passou do que o chat oferece.

Vibe coding de copiar e colar

Muita gente começa pedindo código ao ChatGPT e colando em arquivos no computador ou em um serviço de hospedagem. Funciona para sites estáticos pequenos, mas desmorona rápido. Cada mudança significa achar o arquivo certo, colar a parte certa e torcer para que nada dependesse do que você substituiu. Se você se pegar fazendo isso mais do que algumas vezes, passe para uma das duas próximas opções.

Opção 2: Codex para uma base de código real

O Codex é o agente da OpenAI para trabalho de software. Você dá uma tarefa em linguagem simples e ele trabalha em um repositório: lê o código, faz mudanças em vários arquivos, executa comandos e testes e entrega o resultado para você revisar. A OpenAI o oferece no ChatGPT, como ferramenta de linha de comando e como extensão de editor; confira o site da OpenAI para saber quais planos o incluem e os limites atuais.

Um prompt no estilo de tarefa funciona melhor:

Neste repositório, adicione um botão de exportar CSV à página de Pedidos. Ele deve exportar os pedidos filtrados no momento, com as colunas data, cliente, total e status. Adicione um teste para a função de exportação e execute a suíte de testes.

Bom para: desenvolvedores e fundadores técnicos com um projeto existente que querem um agente para tirar tarefas inteiras da lista. Ele trabalha com a sua stack e as suas convenções.

O que continua com você: onde o app roda, o banco de dados, os segredos, a publicação e os domínios. O Codex muda código; ele não é uma hospedagem.

Codex e Mythex juntos

O Codex também pode se conectar a servidores MCP, incluindo o do Mythex. Adicione https://mcp.mythex.ai/mcp como servidor MCP personalizado no Codex, aprove o acesso no Mythex e o Codex poderá trabalhar em um projeto do Mythex no sandbox na nuvem, com preview, banco de dados e publicação cuidados pelo Mythex. Nosso post sobre criar apps do Mythex a partir do Claude, Cursor ou Codex mostra o passo a passo.

Opção 3: crie um app completo a partir do ChatGPT com o Mythex

Se você quer ficar em uma conversa do ChatGPT e terminar com um app de verdade, hospedado, conecte o Mythex. O Mythex funciona dentro do ChatGPT como um app: o ChatGPT conversa com as ferramentas do Mythex via MCP, o protocolo aberto que permite a assistentes usar ferramentas hospedadas em outro lugar (o que é MCP).

Depois de conectado, o ChatGPT pode criar um projeto no Mythex, escrever o código em um sandbox privado na nuvem, iniciar um preview ao vivo, adicionar banco de dados e armazenamento de arquivos e publicar o app em uma URL pública. Os resultados voltam com um link para você abrir o projeto no Mythex e acompanhar o preview.

Como conectar

1. No Mythex, abra as configurações da conta e copie o endereço MCP.
2. No ChatGPT, adicione o Mythex nas configurações de apps ou conectores usando esse endereço. Os menus do ChatGPT mudam de vez em quando, então siga a página de ajuda da OpenAI sobre como adicionar um app se os nomes forem diferentes.
3. Uma página do Mythex abre: entre e escolha Allow access. Não há chave para colar.
4. Inicie uma conversa e mencione o Mythex no seu pedido.

Conectar funciona em qualquer plano do Mythex. As ferramentas de sandbox (construir, visualizar, publicar) exigem o Mythex Pro ($25 por mês), e o tempo de sandbox e a hospedagem saem dos seus créditos do Mythex. O uso do ChatGPT continua no seu plano da OpenAI.

Um primeiro prompt para testar

Use o Mythex para criar para mim um controle de candidaturas a vagas. Eu adiciono candidaturas com empresa, cargo, link, data da candidatura, status (enviada, entrevista, oferta, rejeitada) e observações. Mostre um quadro por status onde eu possa arrastar cards e um gráfico simples de candidaturas por semana. Salve tudo em um banco de dados e proteja com login. Inicie o preview e me dê o link.

Depois, uma mudança por mensagem:

No projeto do Mythex, adicione uma data de lembrete a cada candidatura e destaque os cards cujo lembrete seja hoje ou esteja atrasado.

Publique e me envie a URL ao vivo.

Bom para: quem já planeja e pensa no ChatGPT e quer o resultado no ar, com dados que persistem, sem aprender hospedagem. Como é um projeto comum do Mythex, você pode continuar no chat do Mythex a qualquer momento.

Qual opção combina com o que você está criando

Hábitos de prompt que funcionam no ChatGPT

• Nomeie a ferramenta quando quiser que ela seja usada. "Use o Mythex para…" deixa claro que o pedido é para o seu projeto, não uma resposta genérica.
• Uma mudança por mensagem. Listas longas de edições produzem listas longas de efeitos colaterais.
• Peça um plano antes de passos grandes. "Antes de mudar qualquer coisa, liste o que vai mudar e espere o meu OK."
• Cole os erros exatos. O texto completo do erro vale mais que qualquer descrição.
• Pergunte o que mudou. "Resuma suas últimas três mudanças em palavras simples" mantém você orientado quando não está lendo o código.

Há mais na nossa folha de prompts de vibe coding.

Mantenha tudo seguro

• Nunca cole senhas ou chaves de API reais em uma conversa do ChatGPT. Se o seu app precisa de uma chave, guarde-a nos segredos do projeto. As ferramentas do Mythex só informam os nomes dos segredos, nunca os valores.
• Antes de publicar, confira se os usuários não veem os dados uns dos outros e se nenhuma chave foi parar em código que roda no navegador. Nosso guia vibe coding é seguro? lista as verificações com prompts que você pode colar.

Usa o Claude também? O guia complementar cobre vibe coding com o Claude e o Claude Code. Para uma visão modelo a modelo, veja ChatGPT vs Claude vs Gemini para criar apps.

Perguntas