Tutorial: como criar o site com ChatGPT e Claude na Viniun

Neste tutorial você vai criar o site com ChatGPT e Claude (ou com v0, Bolt e Cursor) usando os dados da Viniun: a IA escreve o site, os imóveis vêm do seu estoque no CRM e os formulários viram leads no funil. É o mesmo caminho de quem já tem site próprio feito por IA e hospedado onde quiser. A primeira versão sai em uma tarde.

Quem pode fazer: o dono ou quem tem permissão de edição em INTEGRAÇÕES › API & Webhooks (se o item não aparece no menu, ele não está liberado no seu perfil ou plano). As telas são da conta de demonstração da Viniun, com dados fictícios. Os passos dentro do ChatGPT, do Claude e das outras ferramentas estão descritos em texto. Se a ferramenta for o Lovable, siga o tutorial do Lovable.

O que você precisa antes de começar

• Imóveis publicados na Viniun e os dados da empresa (logo, cores, contatos) preenchidos.
• A chave pública do site criada na aba "Crie seu site com IA" (veja o Passo 2 do tutorial do Lovable).
• Conta na ferramenta escolhida: ChatGPT, Claude, v0, Bolt ou Cursor.
• Um lugar para publicar: Vercel, a própria ferramenta ou a sua hospedagem.

Passo 1: escolha a ferramenta e copie o prompt

Em INTEGRAÇÕES › API & Webhooks › Crie seu site com IA, no quadro 2, clique em Claude ou ChatGPT (os dois trazem o mesmo texto) e copie. A parte "Tecnologia" pede um site gerado no servidor ou em páginas estáticas, o que o Google lê melhor. Se você quiser algo mais simples, só HTML e JavaScript, diga isso na conversa: a IA usa a mesma chave pública.

1. Claude — mostra o prompt para o Claude.
2. ChatGPT — mostra o prompt para o ChatGPT (o mesmo texto).
3. Copiar prompt — copia o texto inteiro.
4. Documentação para a IA — o endereço do resumo da API (llms.txt) que a IA deve ler antes de começar.
5. Tecnologia — pede páginas geradas no servidor ou estáticas, e aceita a versão só com HTML e JavaScript se você pedir.

Passo 2: para v0, Bolt ou Cursor, use o prompt do v0

Clique em v0 (Vercel). Esse prompt pede um site em Next.js com uma página pronta por imóvel, mapa do site e atualização a cada 10 minutos, o melhor resultado no Google. Ele também serve no Bolt e no Cursor. Se a sua hospedagem só aceita arquivos simples (HTML), acrescente ao final: "gere o site como páginas estáticas", e siga o tutorial de hospedagem.

1. v0 (Vercel) — mostra o prompt feito para o v0.
2. Tecnologia — Next.js com uma página por imóvel gerada a partir da lista de imóveis, título e descrição para o Google, mapa do site e arquivo de robôs. A chave fica numa variável do projeto.

Passo 3: entregue a documentação à IA

O prompt já traz o link do llms.txt, um resumo da API feito para IA ler. Se a ferramenta não conseguir abrir links, abra o endereço no navegador, copie tudo e cole na conversa. No Claude, dentro de um Projeto, você pode guardar esse texto no conhecimento do projeto e reaproveitar em todas as conversas.

1. Endereços — o endereço da API, a especificação completa (OpenAPI) e a documentação.
2. Chave pública — pode ficar no navegador: só lê o que o site mostra e envia formulários.
3. Chave secreta — só no servidor. Usada no navegador por um domínio não cadastrado, é recusada.
4. Lista de imóveis para o mapa do site — todos os endereços dos imóveis publicados, para gerar uma página por imóvel e o sitemap.

Passo 4: use a documentação completa quando algo travar

Se a IA errar um campo ou um filtro, mande o link da documentação completa: novo.viniun.com.br/docs/site-api. Ela mostra cada consulta com exemplo e as respostas possíveis. Em ferramentas que aceitam arquivos, como Cursor e Claude, baixe a especificação OpenAPI e anexe ao projeto.

1. Para IA — aviso no topo com os links do llms.txt e do OpenAPI e o endereço da API.
2. Download OpenAPI Document — baixa a especificação completa para anexar à ferramenta.
3. Todos os endereços (sitemap) — a lista de imóveis usada para criar as páginas e o mapa do site.
4. Enviar contato (lead) — como o formulário do site manda o contato para o funil.

Passo 5: monte o site com ChatGPT e Claude (ou v0, Bolt e Cursor)

ChatGPT: cole o prompt e peça o projeto completo, arquivo por arquivo; o modo de edição de código (canvas) ajuda a revisar. Claude: cole o prompt numa conversa ou num Projeto; a prévia (Artifacts) serve para ver o visual, mas pode não buscar os imóveis, porque essas prévias limitam o acesso à internet. v0 e Bolt: cole o prompt; a prévia costuma já mostrar os seus imóveis (se a chave tiver lista de domínios, inclua o endereço da prévia) e a publicação é feita pela própria ferramenta. Cursor: cole o prompt no chat do editor, rode o projeto no seu computador e veja em localhost.

Peça os ajustes em português, um por vez, e repita as regras do prompt sempre que a IA esquecer: não inventar imóvel, todo formulário para a Viniun, contato só da imobiliária.

Passo 6: use a chave certa em cada lugar

Site que roda no navegador usa a chave pública (vk_pub_SUA_CHAVE). Se o site busca os dados no servidor, como um Next.js na Vercel, você pode usar uma chave secreta com as permissões Ler imóveis, Ler dados do site e Criar leads, guardada numa variável de ambiente do servidor. Nunca coloque a chave secreta numa variável que vai para o navegador.

1. Nova chave — cria uma chave com as permissões que você escolher.
2. Permissões — o que a chave pode fazer. Dê só o necessário.
3. Navegador: bloqueada — a chave secreta não funciona dentro de um site aberto no navegador, a não ser em domínios que você liberar.
4. Ícone de globo — abre a lista de sites que podem usar a chave no navegador.

Passo 7: libere os domínios de teste e o definitivo

Na chave pública, cadastre cada endereço onde o site vai rodar, um por linha: localhost para testar no computador (Cursor), *.vercel.app para as prévias da Vercel e o seu domínio com e sem www. Endereço fora da lista recebe o erro 403. Na demonstração preenchemos a janela sem clicar em Criar.

1. Site no navegador — a permissão da chave pública.
2. Sites que podem usar — localhost, os endereços de teste da ferramenta e o seu domínio, com e sem www.
3. Criar — cria a chave; ela aparece uma única vez.

Passo 8: publique e teste o primeiro lead

No v0, publique na Vercel; no Bolt, pelo botão de publicar; com ChatGPT, Claude ou Cursor, gere os arquivos e suba na sua hospedagem, como mostra o tutorial de hospedagem. Depois envie um formulário pelo site e confira em CRM › Leads: o contato chega com origem Site e segue o rodízio. Por fim, tire da lista de domínios os endereços de teste que não usa mais.

Quais são as dicas e os erros mais comuns?

• A IA inventou imóveis ou preços: lembre a regra "todos os dados vêm da API" e peça para apagar os dados de exemplo.
• Funciona na prévia e não no site publicado: o domínio novo não está na lista da chave. Inclua com e sem www.
• Erro 429: chamadas demais em pouco tempo. Peça à IA para guardar as respostas por 5 a 10 minutos, como o prompt já manda.
• Google: prefira páginas geradas no servidor ou estáticas, uma por imóvel, com mapa do site. Site montado só no navegador indexa pior.
• Não confunda: este tutorial cria um site. Para conversar com seus dados dentro do ChatGPT e do Claude, veja o tutorial de conexão.

Próximos passos

• Tutorial: criar o site com Lovable
• Tutorial: hospedar o site na Hostinger, HostGator e outras
• Tutorial: o site pronto da Viniun, sem programar
• API, webhooks e integrações da imobiliária
• Seus imóveis no ChatGPT e no Claude