Como gerar imagens e vídeos com Claude Code para um site

Para gerar imagens e vídeos com Claude Code, conecte-o a um serviço externo por MCP. Peça que escolha um modelo compatível, consulte o custo da solicitação exata e espere sua aprovação. Gere primeiro a imagem, use o ID da geração concluída como primeiro quadro do vídeo e baixe os dois arquivos para o projeto do site.

O exemplo é a página inicial de uma cafeteria: uma foto acolhedora do ambiente, um movimento suave de câmera e texto legível ao lado. Você pode adaptar as instruções para um portfólio ou uma página de produto. Relacione imagem, vídeo e posição na página por nomes de arquivo e IDs explícitos.

O Claude Code pode gerar imagens e vídeos?

O Claude Code organiza a tarefa e edita o código do site. O MCP dá acesso a ferramentas externas. O FlyAIgh envia a solicitação ao modelo de imagem ou vídeo escolhido e retorna a tarefa e o resultado. Escrever SVG ou HTML e compreender uma imagem enviada são capacidades diferentes de gerar uma fotografia ou um vídeo.

Essa diferença ajuda a escolher a solução. Para um ícone simples, gráfico ou animação CSS, código pode ser suficiente. Para uma cena fotográfica ou um movimento de câmera gerado, use um modelo de mídia adequado. Conectar MCP não faz todos os modelos aceitarem as mesmas entradas, durações ou resoluções.

Conecte as ferramentas de geração

Você precisa do Claude Code instalado e com login feito, além de uma assinatura FlyAIgh Basic ou superior ativa. Só o Starter Pack não inclui acesso MCP. Os custos do Claude Code e os créditos de geração do FlyAIgh são separados. No FlyAIgh, abra Ferramentas → MCP, crie uma chave de API e, se quiser, defina um limite diário de créditos.

Execute o comando HTTP abaixo no seu terminal, substituindo o marcador pela sua chave. Trate a configuração salva como segredo: não faça commit dela nem coloque a chave no código do site. O guia MCP do FlyAIgh, listado ao final, traz as instruções atuais. No Claude Code, abra /mcp para verificar a conexão; claude mcp list também lista os servidores configurados.

claude mcp add --transport http flyaigh https://www.flyaigh.com/api/mcp \
  --header "Authorization: Bearer YOUR_FLYAIGH_API_KEY"

Antes de gerar, peça ao Claude Code que chame get_balance e list_models. Escolha o ID do modelo e os parâmetros pelos resultados, sem adivinhar o nome. Para usar sua foto, chame upload_file. Se receber uma URL assinada de upload, envie o conteúdo do arquivo para ela antes de usar file_id. Um caminho local ou uma URL de imagem qualquer não substitui esse ID de referência.

Crie uma imagem para um lugar específico na página

Comece pelo layout, não apenas por um adjetivo de estilo. Defina onde a imagem ficará, a proporção, a posição do assunto e o espaço vazio necessário. Neste exemplo, uma imagem 16:9 ocupa o painel de mídia e o título fica ao lado em HTML. Assim, o texto continua editável e mais fácil de ler no celular.

Peça os modelos de imagem disponíveis e o custo das configurações escolhidas. Os preços de list_models são exemplos com parâmetros padrão; quote calcula a solicitação específica. Aprove antes de executar generate_image. Mudar o modelo, a resolução, a qualidade ou as referências pode mudar o preço.

Quando get_job indicar conclusão, revise a imagem antes de animá-la. Confira composição, letras indesejadas, objetos inventados e o enquadramento em telas estreitas. Guarde o ID da imagem aprovada com o prompt e o modelo. Se houver várias versões, selecione a correta explicitamente: a mais recente não é necessariamente a aprovada.

Transforme a imagem aprovada em vídeo

Depois de aprovar a imagem, escolha um modelo de vídeo compatível com i2v. Passe o ID da geração de imagem concluída como first_frame. Isso vincula o vídeo à imagem selecionada; uma solicitação só de texto descrevendo algo parecido criaria outra cena. Consulte o custo para a duração, resolução, proporção e configuração de áudio escolhidas antes de gerar.

Descreva o movimento separadamente: câmera avançando devagar, vapor discreto, xícara parada. Comece com a menor duração compatível que atenda à página. Evite pedir uma mudança completa de cenário para um visual tranquilo de página inicial. O primeiro quadro orienta a geração, mas não trava cada pixel dos objetos ou logotipos.

Acompanhe o progresso com get_job e o ID da tarefa de vídeo recebido. Ao terminar, assista ao clipe inteiro e ouça o áudio, se houver. Confira a forma da xícara, as bordas, o movimento da câmera e o último quadro. Uma tarefa concluída ainda pode ter defeitos visuais. Para reprodução em loop, verifique o salto do fim para o início.

Baixe os arquivos e coloque-os no site

Baixe a imagem aprovada e o vídeo concluído. Os links de arquivos privados retornados por get_job expiram após 1 hora; chame get_job novamente se precisar de outro link. Não use uma URL assinada temporária como endereço permanente de mídia do site. Guarde a relação entre IDs de imagem e vídeo, prompt, modelo e nomes finais dos arquivos.

Em Next.js, os arquivos de public/media são servidos em /media. Em outro framework, use o diretório de recursos estáticos ou sua própria CDN. O exemplo pressupõe um JPEG verdadeiro chamado hero-poster.jpg e um MP4 reproduzível no navegador chamado hero.mp4. Converta os arquivos se necessário: trocar .png por .jpg não converte o conteúdo. Não coloque chaves de API nem chamadas de geração na página pública.

O exemplo HTML oferece controles nativos, imagem de capa e reprodução iniciada pelo visitante. preload="none" evita solicitar o vídeo antecipadamente, embora o comportamento possa variar entre navegadores. Em telas estreitas, os elementos ficam empilhados e o texto separado da mídia. Em React JSX, use className, playsInline e os nomes de atributos correspondentes.

<section class="hero">
  <div>
    <h1>Your page heading</h1>
    <p>Your introduction</p>
  </div>
  <video controls playsinline preload="none"
    poster="/media/hero-poster.jpg"
    width="1280" height="720">
    <source src="/media/hero.mp4" type="video/mp4">
    <a href="/media/hero.mp4">Download video</a>
  </video>
</section>
<style>
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
  .hero video {
    display: block;
    width: 100%;
    height: auto;
  }
  @media (max-width: 48rem) {
    .hero { grid-template-columns: minmax(0, 1fr); }
  }
</style>

Controle as revisões e os gastos

Aprove cada geração separadamente e compare o custo com o saldo e o limite da chave. O limite diário ajuda a controlar o gasto, mas não torna as revisões gratuitas. Quando disponível na chamada, expected_credits protege contra alterações no valor previsto; não é um orçamento total do projeto.

Se não souber se a solicitação foi enviada, confira a tarefa existente antes de tentar novamente. Reutilizar idempotency_key para a mesma solicitação em até 24 horas evita duplicatas; mudar os parâmetros com a mesma chave causa conflito. Uma nova versão criativa é outra solicitação e pode gastar créditos. Um clipe gerado com sucesso que não agradou não é uma tarefa com falha.

• Sem conexão: confira /mcp, o endpoint HTTP, a chave de API e a assinatura ativa exigida.
• Referência recusada: use uma imagem concluída da sua conta ou um file_id com upload completo. No modo i2v, passe-o em first_frame.
• Mídia desapareceu: renove o link vencido com get_job e hospede o arquivo em um caminho estável; não gere novamente.
• Reprodução ou corte incorreto: confira formato, resposta de rede, dimensões no celular e CSS. Um corte cover pode esconder parte do assunto.

Fontes e guias relacionados

A distinção de capacidades segue a documentação da Anthropic; ferramentas e referências seguem a implementação atual do MCP do FlyAIgh. O exemplo usa o comportamento padrão de vídeo HTML. Consulte as opções e os preços atuais ao executar o processo.

• Claude: capacidades de geração de imagens
• Claude Code: conectar ferramentas com MCP
• FlyAIgh: configuração MCP e ferramentas
• MDN: o elemento de vídeo HTML
• Animar uma imagem no FlyAIgh
• Preparar boas imagens de referência
• Criar um vídeo de produto a partir de fotos