So erstellen Sie einen KI-Videogenerator mit Bolt & CometAPI: Eine Schritt-für-Schritt-Anleitung

TL;DR

Bolt kann die Anwendungsoberfläche generieren, während CometAPI die Video-Generierungs-API bereitstellt. Bewahren Sie den CometAPI-Schlüssel auf dem Server auf, reichen Sie Vidu-Aufgaben über POST /v1/videos ein, pollen Sie die zurückgegebene Task-ID und stellen Sie das fertige Video über authentifizierte Vorschau- und Download-Routen bereit. Sie benötigen ein Bolt-Projekt, ein finanziertes CometAPI-Konto mit Zugriff auf das ausgewählte Modell und eine Server-Funktionslaufzeit; die folgenden Beispiele vermitteln die Integrationsgrundlagen, während Authentifizierung, Quoten, Besitzprüfungen und persistente Jobdatensätze vor dem Launch implementiert werden müssen.

Key Takeaways

• Bolt generiert eine responsive Video-Studio-UI aus einer natürlichsprachigen App-Spezifikation.

• CometAPI liefert die Videoinferenz über unterstützte Generierungsmodelle, unter Verwendung eines geschützten serverseitigen API-Schlüssels.

• Starten Sie mit Text-zu-Video; erweitern Sie auf Bild-zu-Video, nachdem der Job-Lifecycle verifiziert ist.

• Produktionsreife erfordert Authentifizierung, Quoten, Task-Besitzprüfungen, Wiederholversuche und langlebige Ausgabespeicherung.

• Messen Sie echten Wert mit Abschlussrate, Latenz, Kosten pro akzeptiertem Clip und Prompt-Treue.

What Are Bolt and CometAPI for AI Video Generation?

Bolt erstellt die Oberfläche, Anwendungslogik und den Veröffentlichungs-Workflow. Bolt Cloud stellt Projektdienste wie Datenbank, Hosting, Authentifizierung, Speicherung und Serverfunktionen bereit. CometAPI liefert den Zugriff auf Modell-APIs, einschließlich unterstützter Videomodelle und Inferenz-Endpunkte. Platzieren Sie die bezahlte Inferenz hinter authentifizierten Serverfunktionen mit persistenten Jobdatensätzen, Besitzprüfungen und Abrechnungskontrollen.

Is CometAPI OpenAI-Compatible?

CometAPI bietet OpenAI-kompatible Schnittstellen für unterstützte Text- und Chat-Modelle. Konfigurieren Sie Endpunkt und Modell für das jeweilige SDK und die verwendete Route; Kompatibilität bedeutet nicht, dass jedes Modell dasselbe Anfrageschema akzeptiert.

Die Vidu-Video-API ist getrennt von der OpenAI-kompatiblen Chat-Schnittstelle. Die Videoerstellung verwendet POST /v1/videos mit multipart/form-data, daher muss die Anwendung den Video-Endpunkt direkt von einer geschützten serverseitigen Funktion aus aufrufen.

How Does the CometAPI Vidu Video API Work?

Create a video task

Erstellen Sie eine Task über POST /v1/videos unter Verwendung von multipart/form-data. Dieses Tutorial verwendet viduq3; viduq3-turbo ist eine weitere dokumentierte Option. Bestätigen Sie den Modellzugang für Ihren API-Schlüssel und bewahren Sie die zurückgegebene Task-ID auf. Siehe die API-Referenz zur Erstellung.

POST /v1/videos parameters

Die folgende Tabelle enthält Eingaben für die Erstellung. Senden Sie skalare Formularfelder als Strings. Für seconds verwenden Sie einen ganzzahligen String von "1" bis "16"; die Anwendung kann eine numerische Dauer vor der Serialisierung validieren. Das Prompt-Limit von 2.000 Zeichen ist eine Anwendungspolitik.

Der Server liefert id als Task-Identifikator zurück; es ist kein Erstellungsparameter. Speichern Sie ihn mit dem Jobdatensatz des anfragenden Nutzers und verwenden Sie ihn für nachfolgende Status- und Inhaltsanfragen. Die durchgestrichene id-Zeile oben wird nur beibehalten, um die Löschung zu zeigen.

• 540p-Stufe: Verwenden Sie für Experimente den API-Size-Wert 960x528.
• 720p-Stufe: Verwenden Sie 1280x720 für Web-Vorschauen.
• 1080p-Stufe: Verwenden Sie 1920x1080 für hochwertigere Auslieferung.

Serverseitige Validierung muss nicht unterstützte Kombinationen ablehnen und verhindern, dass Nutzer ungebundene bezahlte Generierung anfordern.

Poll the task status

Prüfen Sie GET /v1/videos/{task_id} vom Backend aus, nachdem Sie den Job-Besitz verifiziert haben. Fahren Sie fort, bis die Task einen Endzustand erreicht; bewahren Sie die Task-ID auf, damit eine Seitenaktualisierung oder ein Browser-Timeout denselben Job fortsetzen kann.

Download the completed video

Fordern Sie nach Abschluss GET /v1/videos/{task_id}/content über das Backend an und streamen Sie das Ergebnis oder speichern Sie es in kontrolliertem Speicher. Die nachfolgende Implementierungsführung zeigt, wie diese Operationen mit Bolt verbunden werden.

How to Build an AI Video Generator Using Bolt + CometAPI

Step 1: Create the project in Bolt

Öffnen Sie Bolt und bitten Sie es, ein React- + TypeScript-Projekt zu erstellen. Fügen Sie diese Spezifikation in das Prompt-Feld ein und überprüfen Sie dann die generierte Oberfläche, bevor Sie bezahlte Generierung verbinden:

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

Erstellen Sie in CometAPI einen API-Schlüssel und fügen Sie dann ein Backend-Geheimnis mit dem Namen COMETAPI_KEY hinzu. Speichern Sie ihn niemals in Frontend-Quelldateien, setzen Sie ihn nicht dem Browsercode aus und verwenden Sie keine VITE_-präfixierte Umgebungsvariable.

Fügen Sie in Ihren Bolt-Projekteinstellungen COMETAPI_KEY über die serverseitige Geheimnisverwaltung des Projekts hinzu. Platzieren Sie ihn nicht im Frontend-Quellcode und setzen Sie ihn nicht Browser-JavaScript aus. Behandeln Sie die folgende Zeile als Namensbeispiel, nicht als Frontend-.env-Datei.

COMETAPI_KEY=your_actual_cometapi_api_key

Step 3: Submit a video-generation task

Die folgende Deno-Style-Funktion liefert den Kern der Anbieteranfrage. Sie muss vor der Bereitstellung mit echter Sitzungsvalidierung, Quoten und nutzerbezogenen Jobdatensätzen umhüllt werden.

Dieses Beispiel verwendet ein Supabase-ähnliches Deno-Edge-Function-Layout. Bitten Sie Bolt, es in die für Ihr Projekt tatsächlich konfigurierte Serverlaufzeit zu platzieren. Die Kommentare zu Authentifizierung und Persistenz sind Integrationspunkte, keine implementierten Schutzmechanismen: Stellen Sie dieses Skelett nicht als öffentlich bezahlten Endpunkt bereit.

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

Die Einreichung liefert eine asynchrone Job-ID zurück. Prüfen Sie GET /v1/videos/{task_id} über einen Serverendpunkt, nachdem Sie verifiziert haben, dass der anfragende Nutzer den Job besitzt.

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

Die Task startet in queued, kann zu in_progress wechseln und endet in completed, failed oder error. Aktivieren Sie Vorschau und Download erst nach completed; zeigen Sie bei terminalen Fehlzuständen einen Fehler an und erlauben Sie eine neue Anforderung.

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

Die /api/-Pfade sind Anwendungsrouten, die Sie konfigurieren müssen. Für Bolt-Cloud-Serverfunktionen verwenden Sie den generierten Backend-Client und authentifizierte Endpunkt-URLs. Beenden Sie das Polling, wenn die Komponente unmountet, und verwenden Sie begrenztes Backoff für 429/5xx-Antworten. Eine Browser-Polling-Deadline beweist keinen Anbieterfehler: Bewahren Sie die Task-ID auf und setzen Sie die Statusprüfungen fort, bevor Sie eine weitere bezahlte Task erstellen.

Step 6: Preview and download the result

Wenn ein Job abgeschlossen ist, ruft das Backend GET /v1/videos/{task_id}/content ab. Streamen Sie die Daten an den authentifizierten Job-Besitzer oder speichern Sie sie in kontrolliertem Objektspeicher und stellen Sie eine autorisierte URL bereit. Geben Sie den CometAPI-Bearer-Schlüssel niemals im Browser preis.

Ihre Anwendung sollte eine nutzerbezogene Inhaltsroute oder eine autorisierte Speicher-URL für die Vorschaukomponente bereitstellen. Eine signierte URL ist für jeden mit Zugriff bis zum Ablaufzeitpunkt zugänglich; halten Sie ihre Lebensdauer kurz. Für zuverlässige Downloads verwenden Sie eine Same-Origin-Route mit einem geeigneten Content-Disposition-Header, da Browser das download-Attribut bei Cross-Origin-URLs möglicherweise ignorieren.

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

Testen Sie zunächst eine 5-sekündige 540p-Anfrage: „Eine kinoreife Nahaufnahme einer silbernen Smartwatch auf einem dunklen Schreibtisch. Die Kamera bewegt sich langsam von links nach rechts. Sanftes Morgenlicht reflektiert vom Metall.“ Überprüfen Sie, dass eine Anfrage eine Task erstellt, der Status fortschreitet, das Ergebnis abspielbar ist und der Download funktioniert. Testen Sie ungültige Prompts, abgelaufene Sitzungen, Ratenbegrenzung, Task-Besitz und Anbieterfehler, bevor Sie veröffentlichen.

Abnahmeprüfung: Melden Sie sich als zweiter Nutzer an und bestätigen Sie, dass der Job des ersten Nutzers weder gelesen noch heruntergeladen werden kann; aktualisieren Sie die Seite während des Renderns und bestätigen Sie, dass die gespeicherte Task wiederhergestellt werden kann; untersuchen Sie Browseranfragen und gebaute Assets auf versehentliche Schlüssel-Exposition. Veröffentlichen Sie erst, wenn alle drei Prüfungen zusätzlich zu Wiedergabe und Download bestehen.

How Can You Add Image-to-Video Generation?

Für Bild-zu-Video fügen Sie eine validierte Bilddatei als input_reference im Multipart-Body hinzu. Die aktuelle Route dokumentiert maximal 20 MB pro Bild; erzwingen Sie bei Bedarf ein kleineres Anwendungslimit und validieren Sie Content-Type und tatsächliche Dateiinhalte auf dem Server. Leiten Sie das Bild über das authentifizierte Backend; senden Sie den CometAPI-Schlüssel nicht mit dem Browser-Upload.

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

Beschreiben Sie bei Bild-Eingaben gewünschte Bewegung und Kameraführung statt die Szene lediglich zu wiederholen: „Die Figur wendet sich dem Fenster zu. Vorhänge bewegen sich sanft in der Brise. Gesicht, Kleidung und Licht beibehalten. Eine subtile Vorwärtsbewegung der Kamera verwenden.“

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

Vergleichen Sie Modelle auf denselben Prompts, derselben Dauer, Auflösung und denselben Akzeptanzkriterien. Dieser Abschnitt definiert eine Vergleichsmethode; er beansprucht keinen getesteten Sieger. Protokollieren Sie Modellversion, Route, Testdatum und Stichprobengröße für veröffentlichte Ergebnisse.

• Abschlussrate: Teilen Sie erfolgreiche Jobs durch eingereichte Jobs, um die Zuverlässigkeit zu messen.
• Latenz: Verfolgen Sie P50- und P95-Verarbeitungszeit, um das typische Erlebnis und langsamere Anfragen zu verstehen.
• Prompt-Treue: Verwenden Sie menschliche Bewertung oder standardisierte Evaluierung, um zu beurteilen, wie eng Ausgaben den Anweisungen folgen.
• Zeitliche Konsistenz: Prüfen Sie die Bild-zu-Bild-Kontinuität, um visuelle Stabilität zu bewerten.
• Audio-Synchronität: Überprüfen Sie Timing und Verständlichkeit, um Dialog und Ton zu bewerten.
• Kosten pro akzeptiertem Clip: Teilen Sie die Gesamtausgaben durch freigegebene Ausgaben, um die Betriebskosten zu verstehen.

How Much Does the CometAPI Video Generation API Cost?

Die folgende Tabelle liefert Referenzpreise für Vidu Q3 und Vidu Q3 Turbo APIs in CometAPI. Tatsächliche Kosten können je nach Modell, Auflösung und Generierungseinstellungen variieren. Prüfen Sie die aktuellen Preise und Modellverfügbarkeit in Ihrem CometAPI-Konto, bevor Sie Ihr Budget für die Videogenerierung schätzen.

Die Vidu Q3 Turbo API in CometAPI beginnt bei $0.028 pro Sekunde. Die Preise können je nach Auflösung, Generierungsmodus und Modellversion variieren. Prüfen Sie die aktuellen Tarife in Ihrem CometAPI-Konto, bevor Sie Videos generieren.

Die obigen Preisbeispiele gelten für Standard-Text-zu-Video- und Bild-zu-Video-Generierung. Andere Generierungsmodi oder Referenzbild-Konfigurationen können abweichende Tarife haben. Zusätzliche Kosten, einschließlich Steuern, Speicher, Bandbreite und wiederholter Generierungsversuche, sind ausgeschlossen.

Basierend auf den Referenzraten kostet ein 5-sekündiges 720p-Video ungefähr $0.616 mit Vidu Q3 oder $0.308 mit Vidu Q3 Turbo. Bei 540p betragen die entsprechenden Schätzungen $0.280 bzw. $0.140. Diese Zahlen sind illustrative Berechnungen und keine garantierten Gebühren. Für eine genaue Budgetierung vergleichen Sie geschätzte Kosten mit tatsächlicher API-Nutzung und Abrechnungsaufzeichnungen.

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

Migrieren Sie schrittweise hinter einem Provider-Adapter. Validieren Sie Anfragen und Ausgabeverhalten, starten Sie mit einem kleinen Nutzeranteil, vergleichen Sie Erfolgsraten und Latenz, und behalten Sie eine Rollback-Route bei, bis die Performance akzeptabel ist.

FAQ

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

Behandeln Sie einen genehmigten Clip als reproduzierbare kreative Spezifikation: Speichern Sie den exakten Prompt, Modell und Route, Dauer, Auflösung, Version der Referenz-Assets und die Output-ID. Verwenden Sie eine kleine Menge Referenzbilder und eine konsistente Beschreibung von Beleuchtung, Linse, Palette und Motivdetails. Ändern Sie pro Iteration eine größere Variable, damit Sie erkennen können, was geholfen hat. Ein wiederholter Prompt garantiert nicht dieselbe Ausgabe; falls die Route einen Seed bereitstellt, zeichnen Sie ihn auf, prüfen Sie dennoch jeden Clip auf Kontinuität, bevor Sie eine Sequenz zusammenstellen.

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

Brechen Sie das Skript in Shots mit einer klaren Aktion sowie definierter Anfangs- und Schlusskomposition auf. Pflegen Sie ein Kontinuitätsblatt für Charakteraussehen, Garderobe, Requisiten, Beleuchtung und Kameraführung. Wo unterstützt, geben Sie einen genehmigten Frame als Bildreferenz in den nächsten Shot weiter, statt nur auf Prosa zu vertrauen. Montieren, trimmen und balancieren Sie Audio in einem separaten Schnittdurchlauf. Prüfen Sie Übergänge als Sequenz: Ein Clip, der allein stark wirkt, kann die Kontinuität neben einem anderen Clip brechen.

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

Behandeln Sie dies als ungewisses Ergebnis, bis die gespeicherte Anbieter-Task abgeglichen ist. Behalten Sie eine lokale Anwendungsanfrage-ID und deren Anbieter-Task-ID bei, lassen Sie den Nutzer diesen Job erneut öffnen und den Status fortsetzen. Wenn die Einreichung selbst auslief, bevor eine ID zurückkam, prüfen Sie verfügbare Anfragelogs und Nutzungsdaten, bevor Sie einen weiteren Versuch anbieten. Versprechen Sie nicht, dass ein HTTP-Timeout bedeutet, dass keine Gebühr anfiel. Machen Sie jeden neuen bezahlten Versuch explizit und verwenden Sie eine Anforderungssperre auf Anwendungsebene, um Doppelklick-Einreichungen zu verhindern.

What should I review before accepting private customer reference images?

Entscheiden Sie, welche Assets Ihre Anwendung akzeptieren darf, ob der Uploader die Erlaubnis zu deren Nutzung hat und welche Downstream-Dienste sie erhalten. Prüfen Sie die aktuellen Anbieterbedingungen zu Aufbewahrung, Protokollierung, Löschung und zulässiger Nutzung, bevor Sie Vertraulichkeit zusagen. Vermeiden Sie persönliche oder vertrauliche Referenzmaterialien in öffentlichen Demos. Minimieren Sie, was Sie speichern, isolieren Sie private Objekte nach Nutzer und definieren Sie Ablauf- und Lösch-Workflows sowohl für Uploads als auch generierte Dateien. Ein privater Anwendungspeicher-Bucket beschreibt nicht per se die Aufbewahrungsrichtlinie eines Modellanbieters.

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

Halten Sie die Oberfläche abhängig von einem anwendungseigenen Job-Schema, mit providerspezifischen Anforderungsfeldern und Status-Mapping in einem separaten Adapter. Speichern Sie sowohl Ihre interne Job-ID als auch die Anbieter-Task-ID und behalten Sie Referenzen auf die Assets, die zur Reproduktion einer Anfrage benötigt werden. Bewahren Sie den von Bolt generierten Anwendungscode und die Konfiguration unter Versionskontrolle auf. Beim Ersetzen eines Backends migrieren Sie Nutzer- und Jobdatensätze und testen Sie Zugriffsgrenzen, signierte URLs und historische Downloads, bevor Sie den Traffic umschalten; ein Code-Export allein überträgt keine Live-Datenbank oder deren gespeicherte Videodateien.

Conclusion

Bolt + CometAPI ist eine praxisnahe Grundlage für eine Video-Generierungsanwendung: Bolt beschleunigt die Web-App-Erstellung, und CometAPI liefert den Zugang zu unterstützten Videomodellen. Starten Sie mit einem sicheren Text-zu-Video-Workflow, verifizieren Sie den Job-Lifecycle und Abrechnungskontrollen, fügen Sie dann Bildreferenzen, Generierungshistorie, Modellauswahl und fortgeschrittene Kreativwerkzeuge hinzu. Die Trennung von Frontend-Interaktionen und bezahlter serverseitiger Inferenz ist entscheidend für ein sicheres und zuverlässiges Produkt.