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

Pode fazer vibe coding com o ChatGPT de três formas. Peça-lhe no chat uma app pequena e pré-visualize-a no canvas; entregue tarefas numa base de código real ao Codex, o agente de programação da OpenAI; ou ligue um criador de apps com IA, como o Mythex, para que o ChatGPT possa construir, alojar e publicar uma app completa com base de dados. A primeira é a mais rápida para uma ferramenta de uma só página, a segunda serve os programadores, e a terceira dá-lhe uma app ativa com início de sessão e dados sem sair do ChatGPT.

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

Opção 1: chat e canvas do ChatGPT

Para uma ferramenta rápida, basta pedir. O ChatGPT escreve o código e, no canvas, pode mostrar páginas HTML e React simples para as experimentar e pedir alterações.

Escreva uma calculadora de gorjetas de uma só página com campos para o valor da conta, a percentagem de 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, atualizados à medida que escrevo. Que fique bem num telemóvel.

Ideal para: calculadoras, jogos simples, rascunhos de páginas de destino e aprendizagem. Se perguntar “explique este ficheiro como se eu fosse novo em programação”, aprende depressa.

Onde para: não há backend. Nada do que introduz fica guardado para outros utilizadores, não há início de sessão e, para partilhar, teria de copiar o código para algum lado e alojá-lo você mesmo. No momento em que disser “e guarda isto para a minha equipa ver”, já ultrapassou o chat.

Vibe coding por copiar e colar

Muita gente começa por pedir código ao ChatGPT e colá-lo em ficheiros no computador ou num serviço de alojamento. Funciona para sites estáticos pequenos, mas rapidamente deixa de funcionar. Cada alteração obriga a encontrar o ficheiro certo, colar a parte certa e esperar que nada mais dependesse do que foi substituído. Se se apanhar a fazer isto mais do que algumas vezes, passe para uma das duas opções seguintes.

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

O Codex é o agente da OpenAI para trabalho de software. Dá-lhe uma tarefa em linguagem simples, e ele trabalha sobre um repositório: lê o código, faz alterações em vários ficheiros, executa comandos e testes e entrega-lhe o resultado para revisão. A OpenAI disponibiliza-o no ChatGPT, como ferramenta de linha de comandos e como extensão de editor; consulte o site da OpenAI para saber que planos o incluem e quais os limites atuais.

Um prompt em formato de tarefa é o mais adequado:

Neste repositório, acrescente um botão de exportação para CSV na página de Encomendas. Deve exportar as encomendas atualmente filtradas, com as colunas data, cliente, total e estado. Acrescente um teste para a função de exportação e execute a bateria de testes.

Ideal para: programadores e fundadores técnicos com um projeto existente que querem um agente a tirar-lhes tarefas completas da lista. Funciona com a sua stack e as suas convenções.

O que continua a tratar você: onde a app corre, a base de dados, os segredos, a implementação e os domínios. O Codex altera código; não é um servidor de alojamento.

Codex e Mythex em conjunto

O Codex também se pode ligar 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 pode trabalhar num projeto Mythex no seu sandbox na cloud, com a pré-visualização, a base de dados e a publicação tratadas pelo Mythex. O nosso artigo sobre criar apps Mythex a partir do Claude, do Cursor ou do Codex explica o processo.

Opção 3: criar uma app completa a partir do ChatGPT com o Mythex

Se quer continuar numa conversa do ChatGPT e acabar com uma app real e alojada, ligue o Mythex. O Mythex funciona dentro do ChatGPT como uma app: o ChatGPT comunica com as ferramentas do Mythex através do MCP, o protocolo aberto que permite aos assistentes usar ferramentas alojadas noutro sítio (o que é o MCP).

Depois de ligado, o ChatGPT pode criar um projeto Mythex, escrever o código num sandbox privado na cloud, iniciar uma pré-visualização em direto, acrescentar uma base de dados e armazenamento de ficheiros, e publicar a app num URL público. Os resultados voltam com um link para abrir o projeto no Mythex e acompanhar a pré-visualização.

Como ligar

1. No Mythex, abra as Definições da conta e copie o endereço MCP.
2. No ChatGPT, adicione o Mythex nas definições de apps ou conectores com esse endereço. Os menus do ChatGPT mudam de tempos a tempos, por isso siga a página de ajuda da OpenAI sobre como adicionar uma app se os nomes forem diferentes.
3. Abre-se uma página do Mythex: inicie sessão e escolha Permitir acesso. Não há nenhuma chave para colar.
4. Comece uma conversa e mencione o Mythex no seu pedido.

A ligação funciona em qualquer plano do Mythex. As ferramentas do sandbox — construir, pré-visualizar, publicar — exigem o Mythex Pro (25 dólares por mês), e o tempo de sandbox e o alojamento saem dos seus créditos Mythex. A sua utilização do ChatGPT continua no seu plano da OpenAI.

Um primeiro prompt para experimentar

Use o Mythex para criar um acompanhamento de candidaturas de emprego para mim. Acrescento candidaturas com empresa, função, link, data de candidatura, estado (candidatei-me, entrevista, proposta, recusado) e notas. Mostre um quadro por estado onde possa arrastar cartões, e um gráfico simples de candidaturas por semana. Guarde tudo numa base de dados e proteja-o com um início de sessão. Inicie a pré-visualização e dê-me o link.

Depois, uma alteração de cada vez, numa mensagem:

No projeto Mythex, acrescente uma data de lembrete a cada candidatura e destaque os cartões cujo lembrete seja hoje ou esteja em atraso.

Publique e envie-me o URL em direto.

Ideal para: pessoas que já planeiam e pensam no ChatGPT e querem o resultado em direto, com dados persistentes, sem aprender alojamento. Como é um projeto Mythex comum, pode continuar no chat do Mythex em qualquer altura.

Qual opção serve o que está a construir

Hábitos de prompt que funcionam no ChatGPT

• Indique a ferramenta quando a quiser usar. “Use o Mythex para…” deixa claro que o pedido é para o seu projeto, e não uma resposta genérica.
• Uma alteração por mensagem. Listas longas de edições produzem listas longas de efeitos secundários.
• Peça um plano antes de passos grandes. “Antes de alterar fosse o que fosse, liste o que vai mudar e aguarde o meu OK.”
• Cole os erros exatos. O texto completo do erro vale mais do que qualquer descrição.
• Pergunte o que mudou. “Resuma as suas últimas três alterações em palavras simples” mantém-no orientado quando não está a ler o código.

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

Mantenha-o seguro

• Nunca cole palavras-passe reais nem chaves de API numa conversa do ChatGPT. Se a sua app precisar de uma chave, guarde-a nos segredos do projeto. As ferramentas do Mythex só comunicam nomes de segredos, nunca valores.
• Antes de publicar, verifique que os utilizadores não conseguem ver os dados uns dos outros e que nenhuma chave acabou no código que corre no navegador. O nosso guia o vibe coding é seguro? lista as verificações com prompts que pode colar.

Usa também o Claude? 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