Como criar um gerador de vídeos com IA usando Bolt & CometAPI: um guia passo a passo

TL;DR

O Bolt pode gerar a interface do aplicativo, enquanto a CometAPI fornece a API de geração de vídeo. Mantenha a chave da CometAPI no servidor, envie tarefas do Vidu por meio de POST /v1/videos, consulte periodicamente o ID de tarefa retornado e disponibilize o vídeo concluído por rotas autenticadas de pré-visualização e download. Você precisará de um projeto Bolt, uma conta CometAPI com saldo e acesso ao modelo selecionado, e um runtime de funções de servidor; os exemplos abaixo ensinam o núcleo da integração, enquanto autenticação, cotas, verificações de titularidade e registros persistentes de tarefas devem ser implementados antes do lançamento.

Key Takeaways

• O Bolt gera uma interface responsiva de estúdio de vídeo a partir de uma especificação de aplicativo em linguagem natural.

• A CometAPI fornece inferência de vídeo por meio de modelos suportados de geração, usando uma chave de API protegida no servidor.

• Comece com texto-para-vídeo; estenda para imagem-para-vídeo após verificar o ciclo de vida da tarefa.

• Prontidão para produção requer autenticação, cotas, verificações de titularidade de tarefas, tentativas de nova execução e armazenamento durável de saídas.

• Meça valor real com taxa de conclusão, latência, custo por clipe aceito e aderência ao prompt.

What Are Bolt and CometAPI for AI Video Generation?

Bolt constrói a interface, a lógica do aplicativo e o fluxo de publicação. O Bolt Cloud fornece serviços de projeto como banco de dados, hospedagem, autenticação, armazenamento e funções de servidor. A CometAPI fornece acesso a APIs de modelos, incluindo modelos de vídeo suportados e endpoints de inferência. Mantenha a inferência paga atrás de funções de servidor autenticadas, com registros persistentes de tarefas, verificações de titularidade e controles de cobrança.

Is CometAPI OpenAI-Compatible?

A CometAPI oferece interfaces compatíveis com OpenAI para modelos de texto e chat suportados. Configure o endpoint e o modelo para o SDK e a rota específicos que você utiliza; compatibilidade não significa que todo modelo aceite o mesmo esquema de requisição.

A API de vídeo Vidu é separada da interface de chat compatível com OpenAI. A criação de vídeo usa POST /v1/videos com multipart/form-data, portanto o aplicativo deve chamar o endpoint de vídeo diretamente a partir de uma função protegida no lado do servidor.

How Does the CometAPI Vidu Video API Work?

Create a video task

Crie uma tarefa por meio de POST /v1/videos usando multipart/form-data. Este tutorial utiliza viduq3; viduq3-turbo é outra opção documentada. Confirme o acesso ao modelo para sua chave de API e retenha o ID de tarefa retornado. Veja a referência da API de criação.

POST /v1/videos parameters

A tabela abaixo contém as entradas de criação. Envie campos escalares do formulário como strings. Para seconds, use uma string com valor inteiro de "1" a "16"; o aplicativo pode validar uma duração numérica antes da serialização. O limite de 2.000 caracteres para o prompt neste tutorial é uma política do aplicativo.

O servidor retorna id como o identificador da tarefa; não é um parâmetro de criação. Salve-o no registro de tarefa do usuário solicitante e use-o para solicitações subsequentes de status e conteúdo. A linha de id tachada acima foi mantida apenas para mostrar a exclusão.

• 540p: Use o valor de API 960x528 para experimentos.
• 720p: Use 1280x720 para prévias na web.
• 1080p: Use 1920x1080 para entrega de maior qualidade.

A validação no servidor deve rejeitar combinações não suportadas e impedir que usuários solicitem geração paga sem limites.

Poll the task status

Verifique GET /v1/videos/{task_id} a partir do backend após verificar a titularidade da tarefa. Continue até que a tarefa atinja um estado terminal; preserve o ID da tarefa para que uma atualização de página ou timeout do navegador possa retomar o mesmo job.

Download the completed video

Após a conclusão, solicite GET /v1/videos/{task_id}/content pelo backend e transmita o resultado ou persista-o em armazenamento controlado. O guia de implementação abaixo mostra como conectar essas operações ao Bolt.

How to Build an AI Video Generator Using Bolt + CometAPI

Step 1: Create the project in Bolt

Abra o Bolt e peça para criar um projeto React + TypeScript. Cole esta especificação na caixa de prompt e depois revise a interface gerada antes de conectar a geração paga:

Build a responsive AI Video Studio using React, TypeScript, and Tailwind CSS.
Use a dark-themed layout with prompt editing, example prompts, 5/10/15-second
choices, 540p/720p/1080p options, Generate Video button, job status,
video preview and download, and a recent-generations section.
Use Bolt Cloud authentication, database, and server functions.
Require sign-in before video creation. Store COMETAPI_KEY only in server secrets.
Create authenticated generate-video and video-status server endpoints.
Connect to real CometAPI tasks; poll status every 10 seconds.
Do not use mock videos in the production path.

Step 2: Configure the CometAPI API key

Crie uma chave de API na CometAPI e adicione um segredo de backend chamado COMETAPI_KEY. Nunca a armazene em arquivos de código-fonte do frontend, exponha a código do navegador ou use uma variável de ambiente com prefixo VITE_.

Nas configurações do seu projeto Bolt, adicione COMETAPI_KEY por meio da interface de gerenciamento de segredos no lado do servidor do projeto. Não a coloque no código-fonte do frontend nem a exponha ao JavaScript do navegador. Trate a linha a seguir como exemplo de nomenclatura, não como um arquivo .env do frontend.

COMETAPI_KEY=your_actual_cometapi_api_key

Step 3: Submit a video-generation task

A função no estilo Deno a seguir fornece o núcleo da requisição ao provedor. Ela deve ser envolvida com validação real de sessão, cotas e registros de tarefas por usuário antes da implantação.

Este exemplo utiliza um layout de função edge do Deno ao estilo Supabase. Peça ao Bolt para colocá-la no runtime de servidor efetivamente configurado para seu projeto. Os comentários sobre autenticação e persistência são pontos de integração, não proteções implementadas: não implante este esqueleto como um endpoint público pago.

// supabase/functions/generate-video/index.ts
import { serve } from "https://deno.land/std/http/server.ts";
serve(async (req: Request) => {
  if (req.method !== "POST") return Response.json({error:"Method not allowed"},{status:405});
  try {
    // Verify the signed-in user and enforce quotas here.
    const {prompt, seconds, size} = await req.json();
    const sizes = ["960x528", "1280x720", "1920x1080"];
    if (typeof prompt !== "string" || !prompt.trim() || prompt.length > 2000 ||
        !Number.isInteger(seconds) || seconds < 1 || seconds > 16 ||
        !sizes.includes(size)) {
      return Response.json({error:"Invalid options"},{status:400});
    }
    const key = Deno.env.get("COMETAPI_KEY");
    if (!key) throw new Error("Missing API key");
    const form = new FormData();
    form.append("model", "viduq3");
    form.append("prompt", prompt.trim());
    form.append("seconds", String(seconds));
    form.append("size", size);
    const response = await fetch("https://api.cometapi.com/v1/videos", {
      method: "POST", headers: {Authorization: `Bearer ${key}`}, body: form,
      signal: AbortSignal.timeout(60000)
    });
    if (!response.ok) throw new Error(`Provider status ${response.status}`);
    const result = await response.json();
    const taskId = result.id ?? result.task_id;
    if (!taskId) throw new Error("Task ID missing");
    // Persist taskId and owner ID in application database here.
    return Response.json({taskId, status: result.status ?? "queued"});
  } catch (e) {
    console.error(e);
    return Response.json({error:"Unable to create video"},{status:500});
  }
});

Step 4: Retrieve generation status

A submissão retorna um ID de job assíncrono. Verifique GET /v1/videos/{task_id} por meio de um endpoint do servidor após confirmar que o usuário solicitante é titular da tarefa.

// Server-only helper
async function getVideoStatus(taskId: string) {
  const key = Deno.env.get("COMETAPI_KEY");
  if (!key) throw new Error("Missing API key");
  const response = await fetch(
    `https://api.cometapi.com/v1/videos/${encodeURIComponent(taskId)}`,
    {headers: {Authorization: `Bearer ${key}`}, signal: AbortSignal.timeout(60000)}
  );
  if (!response.ok) throw new Error(`Status ${response.status}`);
  const task = await response.json();
  return {taskId, status: task.status, progress: task.progress ?? null};
}

A tarefa começa em queued, pode ir para in_progress e termina em completed, failed ou error. Habilite pré-visualização e download apenas após completed; exiba um erro e permita uma nova solicitação para estados de falha terminais.

Step 5: Connect the Bolt frontend

type VideoTask = {taskId: string; status: string; progress?: number | null};
async function startVideo(prompt: string, seconds: number, size: string): Promise<VideoTask> {
  const res = await fetch("/api/generate-video", {
    method: "POST", headers: {"Content-Type":"application/json"},
    body: JSON.stringify({prompt, seconds, size})
  });
  if (!res.ok) throw new Error("Generation request failed");
  return res.json();
}
async function checkVideo(taskId: string): Promise<VideoTask> {
  const res = await fetch(`/api/video-status?id=${encodeURIComponent(taskId)}`);
  if (!res.ok) throw new Error("Status request failed");
  return res.json();
}
async function waitForVideo(taskId: string, onUpdate: (task: VideoTask) => void) {
  const deadline = Date.now() + 20 * 60 * 1000;
  while (Date.now() < deadline) {
    const task = await checkVideo(taskId);
    onUpdate(task);
    if (task.status === "completed") return task;
    if (["failed", "error"].includes(task.status)) throw new Error("Render failed");
    await new Promise(resolve => setTimeout(resolve, 10000));
  }
  throw new Error("Polling paused; resume this task ID before submitting again");
}

Os caminhos /api/ são rotas do aplicativo que você deve configurar. Para funções de servidor do Bolt Cloud, use o cliente de backend gerado e URLs de endpoints autenticados. Cancele a consulta quando o componente for desmontado e use retrocesso limitado para respostas 429/5xx. Um prazo de polling no navegador não prova falha do provedor: preserve o ID da tarefa e retome as verificações de status antes de criar outra tarefa paga.

Step 6: Preview and download the result

Quando um job for concluído, o backend recupera GET /v1/videos/{task_id}/content. Transmita os dados para o titular autenticado da tarefa ou salve-os em armazenamento de objetos controlado e forneça uma URL autorizada. Nunca exponha a chave bearer da CometAPI no navegador.

Seu aplicativo deve expor uma rota de conteúdo de titularidade do usuário ou uma URL de armazenamento autorizada para o componente de pré-visualização. Uma URL assinada é acessível a qualquer pessoa que a possua até expirar; mantenha seu tempo de vida curto. Para downloads confiáveis, use uma rota de mesma origem com um cabeçalho Content-Disposition apropriado, pois navegadores podem ignorar o atributo download para URLs de outra origem.

type VideoPreviewProps = {videoUrl: string};
export function VideoPreview({videoUrl}: VideoPreviewProps) {
  return <div className="rounded-xl p-4">
    <video controls playsInline className="w-full rounded-lg" src={videoUrl}/>
    <a href={videoUrl} download="ai-generated-video.mp4">Download Video</a>
  </div>;
}

Step 7: Test and publish

Teste primeiro uma solicitação de cinco segundos em 540p: “Um close cinematográfico de um smartwatch prateado sobre uma mesa escura. A câmera se move lentamente da esquerda para a direita. A suave luz da manhã reflete no metal.” Verifique se uma solicitação cria uma tarefa, o status avança, o resultado reproduz e o download é bem-sucedido. Teste prompts inválidos, sessões expiradas, limitação de taxa, titularidade de tarefas e falhas do provedor antes de publicar.

Verificação de conclusão: faça login como um segundo usuário e confirme que o job do primeiro usuário não pode ser lido ou baixado; atualize a página durante a renderização e confirme que a tarefa salva pode ser recuperada; inspecione requisições do navegador e artefatos de build para exposição acidental de chaves. Publique apenas após esses três testes passarem, além de reprodução e download.

How Can You Add Image-to-Video Generation?

Para imagem-para-vídeo, adicione um arquivo de imagem validado como input_reference no corpo multipart. A rota atual documenta um máximo de 20 MB por imagem; imponha um limite menor no aplicativo se necessário e valide o tipo de conteúdo e o conteúdo real do arquivo no servidor. Passe a imagem pelo backend autenticado; não envie a chave da CometAPI com o upload do navegador.

const form = new FormData();
form.append("model", "viduq3");
form.append("prompt", prompt);
form.append("seconds", "5");
form.append("size", "1280x720");
form.append("input_reference", imageFile);
const response = await fetch("https://api.cometapi.com/v1/videos", {
  method: "POST", headers: {Authorization: `Bearer ${apiKey}`}, body: form
});
if (!response.ok) throw new Error(`API ${response.status}`);
const result = await response.json();
console.log(result.id ?? result.task_id);

Para entradas de imagem, descreva o movimento e a ação de câmera desejados em vez de apenas repetir a cena: “A personagem se vira em direção à janela. As cortinas se movem suavemente com a brisa. Preserve o rosto, a roupa e a iluminação. Use um sutil movimento de câmera para frente.”

Vidu Q3 vs Other AI Video Models: What Should You Measure?

Compare modelos com os mesmos prompts, duração, resolução e critérios de aceitação. Esta seção define um método de comparação; não afirma um vencedor testado. Registre a versão do modelo, rota, data do teste e tamanho da amostra para quaisquer resultados publicados.

• Taxa de conclusão: Divida jobs bem-sucedidos por jobs enviados para medir confiabilidade.
• Latência: Acompanhe P50 e P95 do tempo de processamento para entender a experiência típica e as requisições mais lentas.
• Aderência ao prompt: Use revisão humana ou avaliação padronizada para julgar o quão de perto as saídas seguem as instruções solicitadas.
• Consistência temporal: Verifique a continuidade quadro a quadro para avaliar a estabilidade visual.
• Sincronização de áudio: Revise o tempo e a inteligibilidade para avaliar diálogo e som.
• Custo por clipe aceito: Divida o gasto total por saídas aprovadas para entender a economia operacional.

How Much Does the CometAPI Video Generation API Cost?

A tabela abaixo fornece preços de referência para as APIs Vidu Q3 e Vidu Q3 Turbo na CometAPI. Os custos reais podem variar conforme o modelo, resolução e configurações de geração. Verifique os preços mais recentes e a disponibilidade de modelos em sua conta da CometAPI antes de estimar seu orçamento de geração de vídeo.

A API Vidu Q3 Turbo na CometAPI começa em $0.028 por segundo. Os preços podem variar por resolução, modo de geração e versão do modelo. Verifique as tarifas atuais em sua conta da CometAPI antes de gerar vídeos.

Os exemplos de preços acima se aplicam à geração padrão de texto-para-vídeo e imagem-para-vídeo. Outros modos de geração ou configurações de imagem de referência podem ter tarifas diferentes. Custos adicionais, incluindo impostos, armazenamento, banda e tentativas repetidas de geração, estão excluídos.

Com base nas tarifas de referência, um vídeo de cinco segundos em 720p custa aproximadamente $0.616 com Vidu Q3 ou $0.308 com Vidu Q3 Turbo. Em 540p, as estimativas correspondentes são $0.280 e $0.140. Essas cifras são cálculos ilustrativos, não cobranças garantidas. Para orçamento preciso, compare custos estimados com uso real da API e registros de faturamento.

How Can You Migrate an Existing Video Generator to Bolt + CometAPI?

Migre gradualmente por trás de um adaptador de provedor. Valide requisições e comportamento de saída, comece com uma pequena parcela de usuários, compare taxas de sucesso e latência, e mantenha uma rota de rollback até que o desempenho seja aceitável.

FAQ

How can I make an approved visual style repeatable across a series?

Trate um clipe aprovado como uma especificação criativa reprodutível: salve o prompt exato, modelo e rota, duração, resolução, versão do ativo de referência e identificador da saída. Use um pequeno conjunto de imagens de referência e uma descrição consistente de iluminação, lente, paleta e detalhes do sujeito. Altere uma variável principal por iteração para identificar o que ajudou. Um prompt repetido não garante a mesma saída; se a rota expuser uma semente (seed), registre-a, mas ainda revise cada clipe para continuidade antes de montar uma sequência.

How should a multi-shot story stay coherent when each generation is a short clip?

Divida o roteiro em planos com uma ação clara e uma composição de abertura e fechamento definidas. Mantenha uma folha de continuidade para aparência de personagens, figurino, objetos de cena, iluminação e direção de câmera. Onde for suportado, passe um quadro aprovado para o próximo plano como referência de imagem em vez de confiar apenas em prosa. Monte, corte e equilibre o áudio em uma passagem de edição separada. Revise as transições como sequência: um clipe que parece forte sozinho ainda pode quebrar a continuidade quando colocado ao lado de outro.

What should happen if the browser times out after a paid submission?

Trate isso como resultado incerto até que a tarefa do provedor salva seja reconciliada. Mantenha um identificador de requisição local do aplicativo e seu ID de tarefa do provedor, permita que o usuário reabra esse job e retome as verificações de status. Se a submissão em si tiver expirado antes de retornar um ID, inspecione logs de requisição e registros de uso disponíveis antes de oferecer outra tentativa. Não prometa que um timeout HTTP significa que não houve cobrança. Torne qualquer nova tentativa paga explícita e use um bloqueio de requisição em nível de aplicativo para evitar envios por duplo clique.

What should I review before accepting private customer reference images?

Decida quais ativos seu aplicativo pode aceitar, se quem fez o upload tem permissão para usá-los e quais serviços downstream os receberão. Verifique os termos atuais do provedor para retenção, logging, exclusão e uso permitido antes de prometer confidencialidade. Evite material pessoal ou confidencial em demonstrações compartilhadas. Minimize o que você armazena, isole objetos privados por usuário e defina um fluxo de expiração e exclusão tanto para uploads quanto para arquivos gerados. Um bucket privado de armazenamento de aplicativo não descreve, por si só, a política de retenção do provedor de modelo.

How can I keep the project portable if my backend or video provider changes?

Mantenha a interface dependente de um esquema de jobs pertencente ao aplicativo, com campos de requisição específicos do provedor e mapeamento de status dentro de um adaptador separado. Salve tanto seu ID interno de job quanto o ID de tarefa do provedor, e retenha referências aos ativos necessários para regenerar uma requisição. Mantenha o código e a configuração gerados pelo Bolt sob controle de versão. Ao substituir um backend, migre registros de usuários e jobs e teste limites de acesso, URLs assinadas e downloads históricos antes de alternar o tráfego; uma exportação de código por si só não transfere um banco de dados ativo nem seus arquivos de vídeo armazenados.

Conclusion

Bolt + CometAPI é uma base prática para um aplicativo de geração de vídeo: o Bolt acelera a criação do app web, e a CometAPI fornece acesso a modelos de vídeo suportados. Comece com um fluxo seguro de texto-para-vídeo, comprove que o ciclo de vida de jobs e os controles de faturamento funcionam e, então, adicione referências de imagem, histórico de geração, seleção de modelos e ferramentas criativas avançadas. A separação das interações do frontend da inferência paga no servidor é essencial para um produto seguro e confiável.