Bilder und Videos mit Claude Code für eine Website erstellen

Um mit Claude Code Bilder und Videos zu generieren, verbinden Sie es über MCP mit einem externen Dienst. Lassen Sie ein passendes Modell auswählen, die konkrete Anfrage kalkulieren und auf Ihre Freigabe warten. Erstellen Sie zuerst das Bild, verwenden Sie dessen abgeschlossene Generierungs-ID als Startbild des Videos und laden Sie beide Dateien in Ihr Website-Projekt herunter.

Als Beispiel dient die Startseite eines Cafés: ein warmes Innenraumbild, eine ruhige Kamerafahrt und gut lesbarer Text daneben. Die Anweisungen lassen sich auf Portfolios oder Produktseiten übertragen. Ordnen Sie Bild, Video und Position auf der Seite über eindeutige Dateinamen und Generierungs-IDs zu.

Kann Claude Code Bilder und Videos generieren?

Claude Code koordiniert die Aufgabe und bearbeitet den Website-Code. MCP ermöglicht den Zugriff auf externe Tools. FlyAIgh übermittelt die Bild- oder Videoanfrage an das gewählte Modell und liefert Auftrag und Ergebnis zurück. SVG oder HTML zu schreiben und hochgeladene Bilder zu verstehen ist etwas anderes, als Fotografien oder Videos zu generieren.

Diese Unterscheidung hilft bei der Auswahl. Für ein einfaches Symbol, Diagramm oder eine CSS-Animation kann Code genügen. Für eine fotografische Szene oder generierte Kamerabewegung benötigen Sie ein geeignetes Medienmodell. Durch MCP unterstützen nicht automatisch alle Modelle dieselben Eingaben, Längen oder Auflösungen.

Die Generierungstools verbinden

Sie benötigen eine funktionierende Claude-Code-Installation mit Anmeldung sowie ein aktives FlyAIgh-Abo ab Basic. Das Starter Pack allein enthält keinen MCP-Zugang. Claude-Code-Kosten und FlyAIgh-Generierungscredits werden getrennt berechnet. Öffnen Sie in FlyAIgh Tools → MCP, erstellen Sie einen API-Schlüssel und legen Sie bei Bedarf ein tägliches Credit-Limit fest.

Führen Sie den folgenden HTTP-Verbindungsbefehl im eigenen Terminal aus und ersetzen Sie den Platzhalter durch Ihren Schlüssel. Behandeln Sie die gespeicherte Client-Konfiguration vertraulich: weder ins Repository committen noch den Schlüssel in Website-Code einbauen. Die unten verlinkte FlyAIgh-MCP-Anleitung enthält die aktuelle Einrichtung. Prüfen Sie die Verbindung in Claude Code mit /mcp; claude mcp list zeigt ebenfalls konfigurierte Server.

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

Lassen Sie vor der Generierung get_balance und list_models aufrufen. Wählen Sie Modell-ID und Parameter aus den Ergebnissen, statt Modellnamen zu erraten. Für ein eigenes Foto verwenden Sie upload_file. Liefert es eine signierte Upload-URL, müssen die Dateidaten dorthin übertragen werden, bevor file_id verwendbar ist. Ein lokaler Pfad oder eine beliebige Bild-URL ersetzt diese Referenz-ID nicht.

Ein Bild für einen bestimmten Platz auf der Seite erstellen

Beginnen Sie mit dem Layout statt nur mit einer Stilbeschreibung. Legen Sie Position, Seitenverhältnis, Motivplatzierung und nötigen Freiraum fest. Das Beispiel nutzt ein 16:9-Bild in einem Medienbereich; die Überschrift steht daneben als HTML. So bleibt der Text bearbeitbar und auf Mobilgeräten besser lesbar.

Fragen Sie nach verfügbaren Bildmodellen und einem Preis für die gewählten Einstellungen. Die Preise aus list_models sind Beispiele mit Standardparametern; quote berechnet die konkrete Anfrage. Geben Sie diese frei, bevor generate_image ausgeführt wird. Modell, Auflösung, Qualität und Referenzen können den Preis verändern.

Sobald get_job den Abschluss meldet, prüfen Sie das Bild vor der Animation. Achten Sie auf Bildaufbau, unerwünschte Schrift, erfundene Gegenstände und den Ausschnitt auf schmalen Displays. Speichern Sie die freigegebene Bild-ID mit Prompt und Modell. Wählen Sie bei mehreren Versionen ausdrücklich die richtige: Das neueste Ergebnis ist nicht automatisch das freigegebene.

Das freigegebene Bild animieren

Wählen Sie nach der Bildfreigabe ein Videomodell mit i2v-Unterstützung. Übergeben Sie die ID der abgeschlossenen Bildgenerierung als first_frame. Damit ist das Video an das tatsächlich ausgewählte Bild gebunden; eine rein textliche Beschreibung einer ähnlichen Szene würde eine neue Szene erzeugen. Lassen Sie Dauer, Auflösung, Seitenverhältnis und Audioeinstellung vorab kalkulieren.

Beschreiben Sie die Bewegung gesondert: eine langsame Kamerafahrt nach vorn, leichter Dampf, eine unbewegte Tasse. Beginnen Sie mit der kürzesten unterstützten Dauer, die zur Seite passt. Für ein ruhiges Startseitenmotiv ist kein kompletter Szenenwechsel nötig. Das Startbild lenkt die Generierung, fixiert aber nicht jedes Pixel von Gegenständen oder Logos.

Verfolgen Sie den Fortschritt mit get_job und der erhaltenen Video-Auftrags-ID. Sehen Sie sich anschließend den gesamten Clip an, einschließlich Ton, falls vorhanden. Prüfen Sie Tassenform, Kanten, Kamerabewegung und Schlussbild. Auch ein abgeschlossener Auftrag kann visuelle Fehler enthalten. Für eine Schleife prüfen Sie den Übergang vom Ende zum Anfang.

Dateien herunterladen und auf der Website einbinden

Laden Sie das freigegebene Bild und das fertige Video herunter. Private Download-Links aus get_job laufen nach 1 Stunde ab; mit einem erneuten get_job erhalten Sie bei Bedarf einen frischen Link. Verwenden Sie keine temporär signierte URL als dauerhafte Medienquelle. Dokumentieren Sie die Zuordnung von Bild-ID, Video-ID, Prompt, Modell und endgültigen Dateinamen.

In Next.js sind Dateien aus public/media unter /media erreichbar. Bei anderen Frameworks nutzen Sie deren Verzeichnis für statische Dateien oder Ihr eigenes CDN. Das Beispiel setzt ein echtes JPEG-Poster namens hero-poster.jpg und ein im Browser abspielbares MP4 namens hero.mp4 voraus. Konvertieren Sie bei Bedarf: Eine PNG-Datei in .jpg umzubenennen ändert nicht ihr Format. API-Schlüssel und Generierungsaufrufe gehören nicht auf die öffentliche Seite.

Das HTML-Beispiel bietet native Bedienelemente, ein Vorschaubild und Wiedergabe auf Nutzerwunsch. preload="none" soll das vorzeitige Laden des Videos vermeiden; Browser können davon abweichen. Auf schmalen Displays stehen die Elemente untereinander, Text und Medien bleiben getrennt. In React JSX verwenden Sie className, playsInline und die entsprechenden JSX-Attributnamen.

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

Überarbeitungen und Ausgaben kontrollieren

Geben Sie jede Generierung einzeln frei und gleichen Sie den Preis mit Guthaben und Schlüssellimit ab. Das tägliche Limit begrenzt Ausgaben, macht Überarbeitungen aber nicht kostenlos. Falls im Tool-Aufruf verfügbar, schützt expected_credits vor einer geänderten Kalkulation; es ist kein Gesamtbudget für das Projekt.

Wenn unklar ist, ob eine Anfrage angekommen ist, prüfen Sie zuerst den bestehenden Auftrag. Derselbe idempotency_key verhindert innerhalb von 24 Stunden bei identischer Anfrage einen doppelten Auftrag; geänderte Parameter unter diesem Schlüssel führen zu einem Konflikt. Eine neue kreative Version ist eine neue Anfrage und kann Credits kosten. Ein erfolgreich erzeugter Clip, der Ihnen nicht gefällt, ist kein fehlgeschlagener Auftrag.

• Keine Verbindung: /mcp, HTTP-Endpunkt, API-Schlüssel und das erforderliche aktive Abo prüfen.
• Referenz abgelehnt: ein abgeschlossenes Bild des eigenen Kontos oder eine vollständig hochgeladene file_id verwenden. Für i2v gehört sie in first_frame.
• Medium verschwunden: den abgelaufenen Link mit get_job erneuern und die Datei dauerhaft hosten; nicht erneut generieren.
• Wiedergabe oder Ausschnitt falsch: Dateiformat, Netzwerkantwort, mobile Abmessungen und CSS prüfen. Ein cover-Zuschnitt kann Teile des Motivs ausblenden.

Quellen und weiterführende Anleitungen

Die Abgrenzung der Fähigkeiten folgt Anthropics Dokumentation; Tool-Namen und Referenzen entsprechen der aktuellen FlyAIgh-MCP-Implementierung. Das Website-Beispiel nutzt das Standardverhalten von HTML-Video. Prüfen Sie beim Ausführen die aktuellen Modelloptionen und Preise.

• Claude: Fähigkeiten zur Bildgenerierung
• Claude Code: Tools mit MCP verbinden
• FlyAIgh: MCP-Einrichtung und Tool-Referenz
• MDN: das HTML-Videoelement
• Ein Bild in FlyAIgh animieren
• Geeignete Referenzbilder vorbereiten
• Ein Produktvideo aus Fotos erstellen