Bolt & CometAPI로 AI 동영상 생성기 구축하는 방법: 단계별 가이드

TL;DR

Bolt는 애플리케이션 인터페이스를 생성하고, CometAPI는 비디오 생성 API를 제공합니다. CometAPI 키는 서버에만 보관하고, POST /v1/videos로 Vidu 작업을 제출한 뒤 반환된 작업 ID를 폴링하며, 인증된 미리보기 및 다운로드 라우트를 통해 완료된 비디오를 노출하세요. 필요한 것은 Bolt 프로젝트, 선택한 모델 접근 권한이 있는 자금 충전된 CometAPI 계정, 그리고 서버 함수 런타임입니다. 아래 예제는 통합의 핵심을 다루며, 실제 출시 전에는 인증, 쿼터, 소유권 검사, 지속적인 작업 기록이 반드시 구현되어야 합니다.

Key Takeaways

• Bolt는 자연어 앱 사양으로부터 반응형 비디오 스튜디오 UI를 생성합니다.

• CometAPI는 보호된 서버 측 API 키를 사용하는 지원 모델을 통해 비디오 추론을 제공합니다.

• 텍스트-투-비디오로 시작하고, 작업 수명 주기를 검증한 후 이미지-투-비디오로 확장하세요.

• 프로덕션 준비에는 인증, 쿼터, 작업 소유권 검사, 재시도, 내구성 있는 출력 저장이 필요합니다.

• 완료율, 대기 시간(latency), 승인된 클립 비용, 프롬프트 준수를 핵심 가치 지표로 측정하세요.

What Are Bolt and CometAPI for AI Video Generation?

Bolt는 인터페이스, 애플리케이션 로직, 퍼블리싱 워크플로우를 구축합니다. Bolt Cloud는 데이터베이스, 호스팅, 인증, 스토리지, 서버 함수와 같은 프로젝트 서비스를 제공합니다. CometAPI는 지원 비디오 모델과 추론 엔드포인트를 포함한 모델 API 액세스를 제공합니다. 유료 추론은 인증된 서버 함수 뒤에 두고, 지속적인 작업 기록, 소유권 검사, 과금 제어를 갖추세요.

Is CometAPI OpenAI-Compatible?

CometAPI는 지원되는 텍스트 및 채팅 모델에 대해 OpenAI 호환 인터페이스를 제공합니다. 사용하는 SDK와 라우트에 맞게 엔드포인트와 모델을 구성하세요. 호환 가능하다고 해서 모든 모델이 동일한 요청 스키마를 받는다는 의미는 아닙니다.

Vidu 비디오 API는 OpenAI 호환 채팅 인터페이스와 별개입니다. 비디오 생성은 multipart/form-data로 POST /v1/videos를 사용하므로 애플리케이션은 보호된 서버 측 함수에서 비디오 엔드포인트를 직접 호출해야 합니다.

How Does the CometAPI Vidu Video API Work?

Create a video task

multipart/form-data를 사용해 POST /v1/videos로 작업을 생성합니다. 본 튜토리얼은 viduq3를 사용합니다; 문서화된 다른 옵션으로 viduq3-turbo가 있습니다. API 키의 모델 접근 권한을 확인하고 반환된 작업 ID를 보관하세요. creation API reference를 참고하세요.

POST /v1/videos parameters

아래 표는 생성 입력을 설명합니다. 스칼라 폼 필드는 문자열로 보내세요. seconds는 문자열 형태의 정수로 "1"부터 "16"까지 사용합니다; 직렬화 전에 애플리케이션이 숫자 지속 시간을 검증할 수 있습니다. 본 튜토리얼의 2,000자 프롬프트 제한은 애플리케이션 정책입니다.

서버는 작업 식별자로서 id를 반환합니다. 이는 생성 파라미터가 아닙니다. 요청 사용자와 함께 작업 기록에 저장하고 이후 상태 및 콘텐츠 요청에 사용하세요. 위의 취소선이 적용된 id 행은 삭제 사실을 보여주기 위해서만 유지됩니다.

• 540p 티어: 실험용으로 API size 값 960x528을 사용하세요.
• 720p 티어: 웹 미리보기용으로 1280x720을 사용하세요.
• 1080p 티어: 고품질 전달용으로 1920x1080을 사용하세요.

서버 측 검증은 지원되지 않는 조합을 거부하고 사용자가 무제한 유료 생성을 요청하지 못하도록 해야 합니다.

Poll the task status

백엔드에서 작업 소유권을 확인한 뒤 GET /v1/videos/{task_id}를 확인하세요. 작업이 종료 상태에 도달할 때까지 계속 확인합니다. 페이지 새로고침이나 브라우저 타임아웃 이후에도 동일한 작업을 재개할 수 있도록 작업 ID를 보존하세요.

Download the completed video

완료 후 백엔드에서 GET /v1/videos/{task_id}/content를 요청하고 결과를 스트리밍하거나 관리되는 스토리지에 저장합니다. 아래 구현 안내는 이러한 작업을 Bolt에 연결하는 방법을 보여줍니다.

How to Build an AI Video Generator Using Bolt + CometAPI

Step 1: Create the project in Bolt

Bolt를 열고 React + TypeScript 프로젝트 생성을 요청하세요. 다음 사양을 프롬프트 상자에 붙여넣고, 유료 생성 연결 전에 생성된 인터페이스를 검토하세요:

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

CometAPI에서 API 키를 생성한 후, 백엔드 시크릿 COMETAPI_KEY로 추가하세요. 프런트엔드 소스 파일에 저장하거나, 브라우저 코드에 노출하거나, VITE_ 접두 환경 변수를 사용하지 마세요.

Bolt 프로젝트 설정에서 프로젝트의 서버 측 시크릿 관리 인터페이스를 통해 COMETAPI_KEY를 추가하세요. 프런트엔드 소스 코드에 넣거나 브라우저 JavaScript에 노출하지 마세요. 아래 한 줄은 명명 예시이며 프런트엔드 .env 파일이 아닙니다.

COMETAPI_KEY=your_actual_cometapi_api_key

Step 3: Submit a video-generation task

다음 Deno 스타일 함수는 공급자 요청의 핵심을 제공합니다. 배포 전에 실제 세션 검증, 쿼터, 사용자 소유 작업 기록으로 감싸야 합니다.

이 예시는 Supabase 스타일의 Deno 에지 함수 레이아웃을 사용합니다. Bolt에 실제 프로젝트에 구성된 서버 런타임에 이 파일을 배치하도록 요청하세요. 인증과 영속성 관련 주석은 통합 지점이며, 구현된 보호 장치가 아닙니다. 이 스켈레톤을 공개 유료 엔드포인트로 배포하지 마세요.

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

제출은 비동기 작업 ID를 반환합니다. 서버 엔드포인트를 통해 작업 소유권을 확인한 후 GET /v1/videos/{task_id}를 확인하세요.

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

작업은 queued로 시작해 in_progress로 진행될 수 있으며, completed, failed, 또는 error로 종료됩니다. completed 이후에만 미리보기와 다운로드를 활성화하세요. 실패 종료 상태에서는 오류를 표시하고 새 요청을 허용하세요.

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

/api/ 경로는 애플리케이션 라우트이며 직접 구성해야 합니다. Bolt Cloud 서버 함수의 경우 생성된 백엔드 클라이언트와 인증된 엔드포인트 URL을 사용하세요. 컴포넌트가 언마운트될 때 폴링을 취소하고, 429/5xx 응답에는 제한된 백오프를 적용하세요. 브라우저 폴링 마감은 공급자 실패를 증명하지 않습니다. 작업 ID를 보존하고 또 다른 유료 작업을 만들기 전에 상태 확인을 재개하세요.

Step 6: Preview and download the result

작업이 완료되면 백엔드에서 GET /v1/videos/{task_id}/content를 가져옵니다. 인증된 작업 소유자에게 데이터를 스트리밍하거나 관리되는 오브젝트 스토리지에 저장하고 권한 있는 URL을 제공합니다. 브라우저에서 CometAPI 베어러 키를 노출하지 마세요.

애플리케이션은 미리보기 컴포넌트를 위해 사용자 소유의 콘텐츠 라우트 또는 권한 있는 스토리지 URL을 노출해야 합니다. 서명 URL은 만료 전까지 소지한 누구나 접근할 수 있으니 수명을 짧게 유지하세요. 안정적인 다운로드를 위해, 동일 출처 라우트와 적절한 Content-Disposition 헤더를 사용하세요. 교차 출처 URL에 대해서는 브라우저가 download 속성을 무시할 수 있습니다.

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

먼저 5초 540p 요청으로 테스트하세요: “A cinematic close-up of a silver smartwatch on a dark desk. The camera slowly moves left to right. Soft morning light reflects from the metal.” 하나의 요청이 하나의 작업을 생성하는지, 상태가 진행되는지, 결과가 재생되는지, 다운로드가 성공하는지 확인하세요. 퍼블리시 전에 잘못된 프롬프트, 만료된 세션, 속도 제한, 작업 소유권, 공급자 실패도 테스트하세요.

완료 검사: 두 번째 사용자로 로그인해 첫 번째 사용자의 작업을 읽거나 다운로드할 수 없는지 확인하세요. 렌더링 중 페이지를 새로고침하고 저장된 작업을 복구할 수 있는지 확인하세요. 브라우저 요청과 빌드 자산에 키가 실수로 노출되지 않았는지 검사하세요. 위 세 가지 검사와 함께 재생 및 다운로드까지 모두 통과한 후에만 게시하세요.

How Can You Add Image-to-Video Generation?

이미지-투-비디오의 경우 multipart/form-data 본문에 검증된 이미지 파일 하나를 input_reference로 추가하세요. 현재 라우트는 이미지당 최대 20 MB를 문서화합니다. 필요하다면 더 작은 애플리케이션 한도를 적용하고, 서버에서 콘텐츠 유형과 실제 파일 내용을 검증하세요. 이미지는 인증된 백엔드를 통해 전달하고, 브라우저 업로드에 CometAPI 키를 포함하지 마세요.

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

이미지 입력에서는 장면을 반복하기보다 원하는 동작과 카메라 액션을 묘사하세요: “The character turns toward the window. Curtains move gently in the breeze. Preserve face, clothing, and lighting. Use a subtle forward camera motion.”

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

동일한 프롬프트, 길이, 해상도, 수용 기준에서 모델을 비교하세요. 이 섹션은 비교 방법을 정의하며, 검증된 우승자를 주장하지 않습니다. 어떤 공개 결과에도 모델 버전, 라우트, 테스트 날짜, 샘플 수를 기록하세요.

• 완료율: 제출 작업 대비 성공 작업 수로 신뢰성을 측정합니다.
• 대기 시간(latency): P50과 P95 처리 시간을 추적해 전형적 경험과 느린 요청을 파악합니다.
• 프롬프트 준수: 요청 지시를 얼마나 잘 따랐는지 사람 검토 또는 표준화된 평가로 측정합니다.
• 시간적 일관성: 프레임 간 연속성을 확인해 시각적 안정성을 평가합니다.
• 오디오 동기화: 타이밍과 명료성을 검토해 대사와 사운드를 평가합니다.
• 승인된 클립당 비용: 총 지출을 승인된 출력 수로 나눠 운영 경제성을 파악합니다.

How Much Does the CometAPI Video Generation API Cost?

아래 표는 CometAPI에서 Vidu Q3와 Vidu Q3 Turbo API의 참고 가격을 제공합니다. 실제 비용은 모델, 해상도, 생성 설정에 따라 달라질 수 있습니다. 비디오 생성 예산을 추정하기 전에 CometAPI 계정에서 최신 가격과 모델 가용성을 확인하세요.

CometAPI의 Vidu Q3 Turbo API는 초당 $0.028부터 시작합니다. 가격은 해상도, 생성 모드, 모델 버전에 따라 달라질 수 있습니다. 비디오 생성 전 계정에서 현재 요율을 확인하세요.

위 가격 예시는 표준 텍스트-투-비디오와 이미지-투-비디오 생성에 적용됩니다. 다른 생성 모드나 참조 이미지 구성은 다른 요율을 가질 수 있습니다. 세금, 저장소, 대역폭, 반복 생성 시도 등 추가 비용은 제외되어 있습니다.

참고 요율에 따르면, 5초 720p 비디오는 Vidu Q3로 약 $0.616, Vidu Q3 Turbo로 약 $0.308이 듭니다. 540p에서는 각각 $0.280과 $0.140입니다. 이 수치는 보장된 요금이 아닌 예시 계산입니다. 정확한 예산 책정을 위해 추정 비용을 실제 API 사용량과 청구 기록과 비교하세요.

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

공급자 어댑터 뒤에서 점진적으로 이전하세요. 요청과 출력 동작을 검증하고, 소수 사용자부터 시작해 성공률과 대기 시간을 비교하고, 성능이 만족스럽기 전까지 롤백 경로를 유지하세요.

FAQ

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

승인된 클립을 재현 가능한 크리에이티브 사양으로 취급하세요: 정확한 프롬프트, 모델 및 라우트, 길이, 해상도, 참조 자산 버전, 출력 식별자를 저장합니다. 참조 이미지는 소수로 유지하고, 조명, 렌즈, 팔레트, 피사체 세부 묘사를 일관되게 사용하세요. 반복 시에는 주요 변수를 한 번에 하나만 변경해 도움이 된 요인을 식별합니다. 반복된 프롬프트가 동일 출력을 보장하지는 않습니다. 라우트가 시드를 노출한다면 기록하되, 시퀀스 조립 전 각 클립을 계속 검토하세요.

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

스크립트를 한 번에 하나의 명확한 동작과 정의된 시작/종결 구도로 구성된 샷들로 나누세요. 캐릭터 외형, 의상, 소품, 조명, 카메라 방향을 위한 연속성 시트를 유지하세요. 가능하다면 승인된 프레임을 다음 샷의 이미지 참조로 전달하고, 문장에만 의존하지 마세요. 편집은 별도의 단계에서 조립, 트리밍, 오디오 밸런싱을 수행합니다. 시퀀스로 전환을 검토하세요: 독립적으로는 좋아 보이는 클립도 인접 샷과의 연속성을 해칠 수 있습니다.

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

저장된 공급자 작업이 조정될 때까지 결과가 불확실한 상태로 취급하세요. 로컬 애플리케이션 요청 식별자와 공급자 작업 ID를 보관하고, 사용자가 그 작업을 다시 열어 상태 확인을 재개할 수 있게 하세요. ID 반환 전 제출 자체가 타임아웃되었다면, 다른 시도를 제공하기 전에 사용 가능한 요청 로그와 사용 기록을 확인하세요. HTTP 타임아웃이 비용 부과 없음(no charge)을 의미한다고 약속하지 마세요. 새로운 유료 시도는 명시적으로 수행하고, 이중 클릭 제출을 막기 위해 애플리케이션 수준 요청 잠금을 사용하세요.

What should I review before accepting private customer reference images?

애플리케이션이 수용하는 자산 범위, 업로더의 사용 권한, 전달 대상 다운스트림 서비스를 결정하세요. 비밀 준수를 약속하기 전에 현재 공급자 약관의 보존, 로깅, 삭제, 허용 사용을 확인하세요. 공유 데모에서는 개인 또는 기밀 참조 자료를 피하세요. 저장을 최소화하고, 사용자별로 사유 객체를 분리하며, 업로드와 생성 파일 모두에 대해 만료와 삭제 워크플로우를 정의하세요. 사설 스토리지 버킷만으로는 모델 공급자의 보존 정책을 설명하지 않습니다.

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

인터페이스는 애플리케이션 소유의 작업 스키마에 의존하도록 유지하고, 공급자별 요청 필드와 상태 매핑은 별도 어댑터에 넣으세요. 내부 작업 ID와 공급자 작업 ID를 모두 저장하고, 요청 재생성에 필요한 자산 참조를 유지하세요. Bolt가 생성한 애플리케이션 코드와 구성을 버전 관리하세요. 백엔드를 교체할 때는 사용자와 작업 기록을 마이그레이션하고, 접근 경계, 서명 URL, 과거 다운로드를 테스트한 후 트래픽을 전환하세요. 코드 내보내기만으로는 라이브 데이터베이스나 저장된 비디오 파일이 이전되지 않습니다.

Conclusion

Bolt + CometAPI는 비디오 생성 애플리케이션을 위한 실용적인 기반입니다. Bolt는 웹 앱 생성을 가속하고, CometAPI는 지원되는 비디오 모델 액세스를 제공합니다. 보안이 확보된 텍스트-투-비디오 워크플로우로 시작해 작업 수명 주기와 과금 제어가 작동함을 증명한 뒤, 이미지 참조, 생성 기록, 모델 선택, 고급 크리에이티브 도구를 추가하세요. 프런트엔드 상호작용과 유료 서버 측 추론을 분리하는 것은 안전하고 신뢰할 수 있는 제품의 핵심입니다.