Cómo crear un generador de video con IA con Bolt & CometAPI: guía paso a paso

TL;DR

Bolt puede generar la interfaz de la aplicación, mientras que CometAPI proporciona la API de generación de video. Mantén la clave de CometAPI en el servidor, envía tareas de Vidu mediante POST /v1/videos, consulta el ID de tarea devuelto y expón el video completado a través de rutas autenticadas de vista previa y descarga. Necesitarás un proyecto de Bolt, una cuenta de CometAPI con saldo y acceso al modelo seleccionado, y un entorno de ejecución para funciones de servidor; los ejemplos a continuación enseñan el núcleo de la integración, mientras que la autenticación, las cuotas, las verificaciones de propiedad y los registros persistentes de trabajos deben implementarse antes del lanzamiento.

Key Takeaways

• Bolt genera una interfaz de estudio de video adaptable a partir de una especificación de aplicación en lenguaje natural.

• CometAPI proporciona inferencia de video mediante modelos de generación compatibles, utilizando una clave de API protegida del lado del servidor.

• Comienza con texto a video; amplía a imagen a video después de verificar el ciclo de vida del trabajo.

• La preparación para producción requiere autenticación, cuotas, verificaciones de propiedad de tareas, reintentos y almacenamiento duradero de resultados.

• Mide el valor real con tasa de finalización, latencia, costo por clip aceptado y adherencia al prompt.

What Are Bolt and CometAPI for AI Video Generation?

Bolt construye la interfaz, la lógica de la aplicación y el flujo de publicación. Bolt Cloud proporciona servicios de proyecto como base de datos, hosting, autenticación, almacenamiento y funciones de servidor. CometAPI ofrece acceso a la API de modelos, incluidos modelos de video compatibles y endpoints de inferencia. Mantén la inferencia de pago detrás de funciones de servidor autenticadas, con registros persistentes de trabajos, verificaciones de propiedad y controles de facturación.

Is CometAPI OpenAI-Compatible?

CometAPI ofrece interfaces compatibles con OpenAI para modelos de texto y chat admitidos. Configura el endpoint y el modelo para el SDK y la ruta específicos que uses; la compatibilidad no implica que todos los modelos acepten el mismo esquema de solicitud.

La API de video Vidu es independiente de la interfaz de chat compatible con OpenAI. La creación de video usa POST /v1/videos con multipart/form-data, por lo que la aplicación debe llamar al endpoint de video directamente desde una función protegida del lado del servidor.

How Does the CometAPI Vidu Video API Work?

Create a video task

Crea una tarea mediante POST /v1/videos usando multipart/form-data. Este tutorial utiliza viduq3; viduq3-turbo es otra opción documentada. Confirma el acceso al modelo para tu clave de API y conserva el ID de tarea devuelto. Consulta la referencia del API de creación.

POST /v1/videos parameters

La siguiente tabla contiene entradas de creación. Envía los campos escalares del formulario como cadenas. Para seconds, usa una cadena con valor entero de "1" a "16"; la aplicación puede validar una duración numérica antes de la serialización. El límite de 2.000 caracteres del prompt en este tutorial es una política de la aplicación.

El servidor devuelve id como el identificador de la tarea; no es un parámetro de creación. Guárdalo con el registro del trabajo del usuario solicitante y úsalo para solicitudes posteriores de estado y contenido. La fila de id tachada arriba se mantiene solo para mostrar la eliminación.

• Nivel 540p: Usa el valor de API 960x528 para experimentos.
• Nivel 720p: Usa 1280x720 para vistas previas web.
• Nivel 1080p: Usa 1920x1080 para entregas de mayor calidad.

La validación del lado del servidor debe rechazar combinaciones no admitidas y evitar que los usuarios soliciten generación de pago sin límites.

Poll the task status

Comprueba GET /v1/videos/{task_id} desde el backend después de verificar la propiedad del trabajo. Continúa hasta que la tarea alcance un estado terminal; conserva el ID de tarea para que una recarga de página o un timeout del navegador puedan reanudar el mismo trabajo.

Download the completed video

Tras completarse, solicita GET /v1/videos/{task_id}/content a través del backend y transmite el resultado o persístelo en almacenamiento controlado. La guía de implementación a continuación muestra cómo conectar estas operaciones con Bolt.

How to Build an AI Video Generator Using Bolt + CometAPI

Step 1: Create the project in Bolt

Abre Bolt y pídele que cree un proyecto React + TypeScript. Pega esta especificación en el cuadro de prompt y luego revisa la interfaz generada antes de conectar la generación de pago:

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

Crea una clave de API en CometAPI y añade un secreto de backend llamado COMETAPI_KEY. Nunca la almacenes en archivos de código del frontend, la expongas al código del navegador ni uses una variable de entorno con prefijo VITE_.

En la configuración de tu proyecto de Bolt, agrega COMETAPI_KEY mediante la interfaz de gestión de secretos del lado del servidor del proyecto. No la coloques en el código fuente del frontend ni la expongas a JavaScript del navegador. Trata la siguiente línea como un ejemplo de nomenclatura, no como un archivo .env del frontend.

COMETAPI_KEY=your_actual_cometapi_api_key

Step 3: Submit a video-generation task

La siguiente función al estilo Deno proporciona el núcleo de la solicitud al proveedor. Debe envolverse con validación real de sesión, cuotas y registros de trabajos propiedad del usuario antes del despliegue.

Este ejemplo utiliza un esquema de función edge en Deno al estilo Supabase. Pídele a Bolt que lo ubique en el runtime de servidor realmente configurado para tu proyecto. Los comentarios sobre autenticación y persistencia son puntos de integración, no protecciones implementadas: no publiques este esqueleto como un endpoint público de 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

El envío devuelve un ID de trabajo asincrónico. Comprueba GET /v1/videos/{task_id} a través de un endpoint del servidor después de verificar que el usuario solicitante es propietario del trabajo.

// 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};
}

La tarea comienza en queued, puede pasar a in_progress y termina en completed, failed o error. Habilita la vista previa y la descarga solo después de completed; muestra un error y permite una nueva solicitud para estados terminales de fallo.

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");
}

Las rutas /api/ son rutas de aplicación que debes configurar. Para funciones de servidor de Bolt Cloud, usa el cliente de backend generado y las URLs de endpoints autenticadas. Cancela el polling cuando el componente se desmonte y usa backoff acotado para respuestas 429/5xx. Un plazo de sondeo del navegador no demuestra fallo del proveedor: conserva el ID de tarea y reanuda las comprobaciones de estado antes de crear otra tarea de pago.

Step 6: Preview and download the result

Cuando un trabajo se completa, el backend recupera GET /v1/videos/{task_id}/content. Transmite los datos al propietario autenticado del trabajo o guárdalos en almacenamiento de objetos controlado y proporciona una URL autorizada. Nunca expongas la clave bearer de CometAPI en el navegador.

Tu aplicación debe exponer una ruta de contenido de propiedad del usuario o una URL de almacenamiento autorizada para el componente de vista previa. Una URL firmada es accesible para cualquiera que la tenga hasta su expiración; mantén su vida útil corta. Para descargas fiables, usa una ruta del mismo origen con un encabezado Content-Disposition apropiado, ya que los navegadores pueden ignorar el atributo download para URLs de origen cruzado.

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

Prueba primero una solicitud de cinco segundos a 540p: “Un primer plano cinematográfico de un reloj inteligente plateado sobre un escritorio oscuro. La cámara se mueve lentamente de izquierda a derecha. La luz suave de la mañana se refleja en el metal.” Verifica que una solicitud cree una tarea, que el estado avance, que el resultado se reproduzca y que la descarga sea correcta. Prueba prompts inválidos, sesiones caducadas, limitación de tasa, propiedad de tareas y fallos del proveedor antes de publicar.

Comprobación final: inicia sesión como un segundo usuario y confirma que el trabajo del primer usuario no se puede leer ni descargar; actualiza la página durante el renderizado y confirma que la tarea guardada se puede recuperar; inspecciona las solicitudes del navegador y los assets compilados para detectar exposición accidental de la clave. Publica solo después de que estas tres comprobaciones pasen además de la reproducción y la descarga.

How Can You Add Image-to-Video Generation?

Para imagen a video, añade una imagen validada como input_reference en el cuerpo multipart. La ruta actual documenta un máximo de 20 MB por imagen; aplica un límite menor en la aplicación si es necesario y valida el tipo de contenido y el contenido real del archivo en el servidor. Pasa la imagen por el backend autenticado; no envíes la clave de CometAPI con la carga desde el 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 imagen, describe el movimiento y la acción de cámara deseados en lugar de repetir únicamente la escena: “El personaje gira hacia la ventana. Las cortinas se mueven suavemente con la brisa. Conserva el rostro, la ropa y la iluminación. Usa un sutil movimiento de cámara hacia adelante.”

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

Compara modelos con los mismos prompts, duración, resolución y criterios de aceptación. Esta sección define un método de comparación; no afirma un ganador probado. Registra la versión del modelo, la ruta, la fecha de prueba y el tamaño de muestra para cualquier resultado publicado.

• Tasa de finalización: Divide los trabajos exitosos por los trabajos enviados para medir la fiabilidad.
• Latencia: Rastrea los tiempos de procesamiento P50 y P95 para entender la experiencia típica y las solicitudes más lentas.
• Adherencia al prompt: Usa revisión humana o evaluación estandarizada para medir qué tan de cerca siguen las salidas las instrucciones solicitadas.
• Consistencia temporal: Revisa la continuidad cuadro a cuadro para evaluar la estabilidad visual.
• Sincronización de audio: Revisa el timing y la inteligibilidad para evaluar diálogo y sonido.
• Costo por clip aceptado: Divide el gasto total por las salidas aprobadas para entender la economía operativa.

How Much Does the CometAPI Video Generation API Cost?

La tabla a continuación proporciona precios de referencia para las APIs Vidu Q3 y Vidu Q3 Turbo en CometAPI. Los costos reales pueden variar según el modelo, la resolución y la configuración de generación. Consulta los precios y la disponibilidad de modelos más recientes en tu cuenta de CometAPI antes de estimar tu presupuesto de generación de video.

La API Vidu Q3 Turbo en CometAPI comienza en $0.028 por segundo. El precio puede variar según la resolución, el modo de generación y la versión del modelo. Consulta las tarifas actuales en tu cuenta de CometAPI antes de generar videos.

Los ejemplos de precios anteriores se aplican a generación estándar de texto a video e imagen a video. Otros modos de generación o configuraciones de imagen de referencia pueden tener tarifas diferentes. No se incluyen costos adicionales, como impuestos, almacenamiento, ancho de banda y reintentos de generación.

Según las tarifas de referencia, un video de cinco segundos a 720p cuesta aproximadamente $0.616 con Vidu Q3 o $0.308 con Vidu Q3 Turbo. A 540p, las estimaciones correspondientes son $0.280 y $0.140. Estas cifras son cálculos ilustrativos y no cargos garantizados. Para una presupuestación precisa, compara los costos estimados con el uso real de la API y los registros de facturación.

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

Migra gradualmente detrás de un adaptador del proveedor. Valida solicitudes y el comportamiento de salida, empieza con una pequeña parte de los usuarios, compara tasas de éxito y latencia, y conserva una ruta de rollback hasta que el rendimiento sea aceptable.

FAQ

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

Trata un clip aprobado como una especificación creativa reproducible: guarda el prompt exacto, el modelo y la ruta, duración, resolución, versión del recurso de referencia y el identificador de salida. Usa un pequeño conjunto de imágenes de referencia y una descripción consistente de iluminación, lente, paleta y detalles del sujeto. Cambia una variable importante por iteración para identificar qué ayudó. Un prompt repetido no garantiza la misma salida; si la ruta expone una semilla, regístrala, pero revisa cada clip para continuidad antes de ensamblar una secuencia.

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

Divide el guion en planos con una acción clara y una composición de apertura y cierre definidas. Mantén una hoja de continuidad para la apariencia del personaje, vestuario, utilería, iluminación y dirección de cámara. Donde se admita, pasa un cuadro aprobado al siguiente plano como imagen de referencia en lugar de depender solo del texto. Ensambla, recorta y equilibra el audio en una pasada de edición separada. Revisa las transiciones como una secuencia: un clip que se ve sólido por sí solo puede romper la continuidad cuando se coloca junto a otro.

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

Trata esto como un resultado incierto hasta que se reconcilie la tarea guardada del proveedor. Conserva un identificador de solicitud de aplicación local y su ID de tarea del proveedor, permite que el usuario reabra ese trabajo y reanude las comprobaciones de estado. Si el envío en sí expiró antes de devolver un ID, inspecciona los registros de solicitudes y los registros de uso disponibles antes de ofrecer otro intento. No prometas que un timeout HTTP significa que no se realizó ningún cargo. Haz que cualquier nuevo intento de pago sea explícito y usa un bloqueo de solicitudes a nivel de aplicación para evitar envíos por doble clic.

What should I review before accepting private customer reference images?

Decide qué recursos puede aceptar tu aplicación, si quien sube tiene permiso para usarlos y qué servicios downstream los recibirán. Revisa los términos actuales del proveedor sobre retención, registro, eliminación y uso permitido antes de prometer confidencialidad. Evita material de referencia personal o confidencial en demostraciones compartidas. Minimiza lo que almacenas, aísla objetos privados por usuario y define un flujo de expiración y eliminación tanto para cargas como para archivos generados. Un bucket de almacenamiento privado de la aplicación no describe por sí solo la política de retención del proveedor del modelo.

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

Mantén la interfaz dependiente de un esquema de trabajo propiedad de la aplicación, con campos de solicitud específicos del proveedor y mapeo de estados dentro de un adaptador separado. Guarda tanto tu ID de trabajo interno como el ID de tarea del proveedor y conserva referencias a los recursos necesarios para regenerar una solicitud. Mantén el código y la configuración generados por Bolt bajo control de versiones. Al reemplazar un backend, migra registros de usuarios y trabajos y prueba límites de acceso, URLs firmadas y descargas históricas antes de cambiar el tráfico; una exportación de código por sí sola no transfiere una base de datos activa ni sus archivos de video almacenados.

Conclusion

Bolt + CometAPI es una base práctica para una aplicación de generación de video: Bolt acelera la creación de aplicaciones web y CometAPI proporciona acceso a modelos de video compatibles. Comienza con un flujo seguro de texto a video, demuestra que el ciclo de vida del trabajo y los controles de facturación funcionan y luego añade referencias de imagen, historial de generaciones, selección de modelos y herramientas creativas avanzadas. La separación de las interacciones del frontend de la inferencia de pago del lado del servidor es esencial para un producto seguro y fiable.