Anleitung zur Verwendung von Apiframe in n8n (Schritt-für-Schritt-Anleitung)

In dieser Anleitung erfahren Sie, wie Sie Apiframe mit n8n verbinden, um KI-Bilder (oder Videos, Musik usw.) aus jedem Workflow zu generieren.

Wir werden behandeln:

1. Was wir bauen
2. Voraussetzungen
3. Erstellen von Apiframe-Anmeldedaten in n8n
4. Workflow 1 - Einfache Bilderzeugung mit /imagine
5. Workflow 2 - Abfrage von Ergebnissen mit /fetch
6. Workflow 3 - Empfohlen: Verwendung von Webhooks für Echtzeitergebnisse
7. Erweiterung des Musters auf andere Apiframe-Endpunkte

Alle Beispiele verwenden den Midjourney-/imagine-Endpunkt, aber das gleiche Muster funktioniert für die meisten anderen Endpunkte und Modelle.

I. Was wir bauen werden

Wir werden zwei kleine n8n-Integrationen erstellen:

1. Ein Bild auf Abruf generieren
   • Auslöser: Manuell, Webhook, Google Sheet, alles möglich
   • HTTP-Anfrage: POST https://api.apiframe.pro/imagine
   • Erhalten Sie eine task_id zurück. Sie können sie speichern oder protokollieren.
2. Die endgültigen Bilder automatisch abrufen
   • Indem Sie Apiframe mit /fetch abfragen, bis die Aufgabe abgeschlossen ist
   • Oder (empfohlen) lassen Sie Apiframe den n8n-Webhook aufrufen, wenn die Aufgabe abgeschlossen ist

Sobald die Bild-URLs in n8n ankommen, können Sie alles tun: sie an Slack, in Airtable, Google Drive, usw.

II. Voraussetzungen

Sie benötigen:

• Ein Apiframe-Konto und einen API-Schlüssel. Diesen können Sie von Ihrem Apiframe-Dashboard abrufen (oder Hier klicken). Dieser API-Schlüssel wird verwendet, um unsere Anfragen über den Authorization-Header zu authentifizieren.

• Eine n8n-Instanz (selbst gehostet oder in der Cloud)
• Grundlegende Vertrautheit mit n8n-Knoten (HTTP-Anfrage, Webhook, Set, IF, usw.). Der HTTP-Anfrage-Knoten ist die generische Methode, um jede REST-API in n8n aufzurufen.

III. Apiframe-Anmeldedaten in n8n erstellen

Wir werden die Anmeldedaten einmal konfigurieren und dann in allen HTTP-Anfrage-Knoten wiederverwenden.

• Schritt 1: Gehen Sie in n8n zu Anmeldedaten → Anmeldedaten erstellen.

• Schritt 2: Wählen Sie Header Auth (oder "HTTP Header Auth", "API-Schlüssel im Header" je nach Ihrer Version)

• Schritt 3: Konfigurieren Sie:
  • Header-Name: Authorization
  • Wert: Ihr Apiframe-API-Schlüssel (genau wie in Ihrem Dashboard angezeigt)

• Schritt 4: Geben Sie ihm einen Namen wie Apiframe Auth und speichern Sie

Apiframe erwartet:

Authorization: YOUR_API_KEY
Content-Type: application/json

IV. Workflow 1 - Grundlegende Bilderzeugung mit /imagine

Wir werden einen einfachen Workflow erstellen:

1. Erstellen Sie den Workflow

1. Erstellen Sie in n8n einen Neuen Workflow.
2. Fügen Sie einen Manueller Auslöser Knoten.

2. Fügen Sie einen "Set"-Knoten für die Eingabeaufforderung hinzu

1. Fügen Sie einen Set Knoten nach dem manuellen Auslöser hinzu.
2. In Werte → Feld hinzufügen → String:
   • Name: Eingabeaufforderung
   • Wert: etwas wie ein filmisches Foto einer Cyberpunk-Stadt bei Nacht, ultra detailliert, 4k
3. (Optional) Fügen Sie ein weiteres String-Feld hinzu:
   • Name: Seitenverhältnis
   • Wert: 3:2

Jetzt sieht das Ausgabe-JSON des Set-Knotens ungefähr so aus:

{
  "prompt": "a cinematic photo of a cyberpunk city at night, ultra detailed, 4k",
  "aspect_ratio": "3:2"
}

3. Fügen Sie den HTTP-Anfrageknoten für /imagine hinzu

1. Fügen Sie einen HTTP-Anfrage Knoten nach dem Set-Knoten hinzu.
2. Konfigurieren Sie:
   • Methode: POST
   • URL: https://api.apiframe.pro/imagine
   • Für die Authentifizierung wählen Sie den "Generischen Anmeldedatentyp", dann "Header Auth", dann die “Apiframe Auth” Anmeldedaten, die Sie zuvor erstellt haben.
   • Für den Body aktivieren Sie "Body senden" und fügen wir unsere Felder hinzu: Eingabeaufforderung, Seitenverhältnis und optional webhook_url für später.

Wenn Sie diesen Knoten ausführen, gibt Apiframe etwas zurück wie:

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a"
}

Das bedeutet, dass die Aufgabe in der Warteschlange/Verarbeitung. Bilder werden asynchron generiert; Sie erhalten die endgültigen URLs nicht von /imagine selbst.

Sie können jetzt:

• Protokollieren Sie das task_id
• Speichern Sie es in einer Datenbank / Google Tabelle
• Geben Sie es an einen „Fetch“-Workflow weiter

V. Workflow 2 - Abfrage von Apiframe mit /fetch

Jetzt holen wir uns die tatsächlichen Bild-URLs mit dem /fetch Endpunkt.

Apiframe stellt einen POST https://api.apiframe.pro/fetch Endpunkt bereit, der task_id entgegennimmt und entweder das Endergebnis oder eine Status: "processing" Antwort zurückgibt.

Wir werden einen minimalen „Warten dann Abrufen“-Ablauf durchführen.

1. Fügen Sie einen Warteknoten hinzu

Nach dem /imagine HTTP-Anfrageknoten:

1. Fügen Sie einen Warten Knoten hinzu.
2. Stellen Sie ihn so ein, dass er beispielsweise 2–3 Sekunden wartet.

Dies gibt Apiframe Zeit, die Generierung abzuschließen. Die Generierungszeit hängt von der Komplexität der Aufgabe und der Systemauslastung ab.

2. Fügen Sie den /fetch HTTP-Anfrageknoten hinzu

Fügen Sie einen weiteren HTTP-Anfrage Knoten nach dem Warteknoten hinzu:

• Methode: POST
• URL: https://api.apiframe.pro/fetch
• Für die Authentifizierung wählen Sie den "Generischen Anmeldedatentyp", dann "Header Auth", dann die „Apiframe Auth“, wie zuvor.
• Für den Body aktivieren Sie "Body senden" und fügen wir unser task_id Feld

Verarbeitung (Aufgabe läuft noch):

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a",
  "task_type": "imagine",
  "status": "processing",
  "percentage": "40"
}

Abgeschlossen (Aufgabe erledigt, Bild-URLs bereit):

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a",
  "task_type": "imagine",
  "original_image_url": "https://.../grid.png",
  "image_urls": [
    "https://.../image1.png",
    "https://.../image2.png",
    "https://.../image3.png",
    "https://.../image4.png"
  ]
}

3. Umgang mit „noch in Bearbeitung“

Für eine schnelle Entwicklungsumgebung können Sie:

• Einfach länger warten und einmal abrufen.
• Oder einen einfachen IF-Knoten nach dem Abrufen hinzufügen:
  • Bedingung: Status gleich "Verarbeitung"
  • Wenn „wahr“: zu einem weiteren Warten + Abrufen verzweigen
  • Wenn „falsch“: mit Ihrer endgültigen Logik fortfahren (Slack, Airtable, etc.)

In der Produktion empfiehlt Apiframe die Verwendung von Webhooks anstelle von Polling um unnötige Anfragen zu vermeiden und sofortige Updates zu erhalten.

Lassen Sie uns das als Nächstes tun.

VI. Workflow 3 - Webhook-basierte Ergebnisse (empfohlen)

Dies ist die saubere, „Echtzeit“-Architektur:

• Workflow A: Generierungsanfrage senden (mit webhook_url und webhook_secret)
• Workflow B: Webhook empfangen von Apiframe, wenn die Generierung abgeschlossen ist

1. Erstellen Sie Workflow B - Den Webhook-Empfänger

1. Erstellen Sie einen Neuen Workflow in n8n und benennen Sie ihn Apiframe – Bild abgeschlossen.
2. Fügen Sie einen Webhook-Knoten hinzu. Konfigurieren Sie den Webhook-Knoten:
   • HTTP-Methode: POST
   • Pfad: so etwas wie apiframe/midjourney-completed
   • Antwortmodus:
     • Zum Beispiel, Wenn der letzte Knoten fertig ist (damit Sie Daten zurückgeben können, wenn Sie möchten).

Kopieren Sie die Produktions-URL – dies werden wir als webhook_url in Apiframe festlegen.

2. Sichern Sie den Webhook mit "webhook_secret"

Apiframe ermöglicht es Ihnen, ein webhook_secret in der /imagine-Anfrage zu übergeben; es wird als x-webhook-secret-Header bei Webhook-Aufrufen zurückgesendet.

1. Fügen Sie einen IF-Knoten nach dem Webhook-Knoten hinzu.
2. Überprüfen Sie im IF-Knoten:
   • Linke Seite: Ausdruck wie ={{ $json["headers"]["x-webhook-secret"] }}
   • Bedingung: gleich
   • Rechte Seite: Ihr Geheimnis, z.B. mein-super-geheimnis
3. Wenn das Geheimnis nicht übereinstimmt, gehen Sie zu einem Zweig, der einfach endet (oder den Versuch protokolliert).

Dies stellt sicher, dass nur die Webhooks von Apiframe verarbeitet werden.

3. Zugriff auf die Bild-URLs im Webhook-Payload

Der Webhook-Body wird wie das zuvor gezeigte „abgeschlossene“ Payload aussehen:

{
  "task_id": "29e983ca-7e86-4017-a9e3-ef6fe9cd5f2a",
  "task_type": "imagine",
  "original_image_url": "https://.../grid.png",
  "image_urls": [
    "https://.../image1.png",
    "https://.../image2.png",
    "https://.../image3.png",
    "https://.../image4.png"
  ]
}

Sie können auf die Bild-URLs zugreifen und sie dann weiterleiten an:

• Slack-Knoten (senden Sie eine Nachricht mit der URL)
• Airtable / Notion (speichern Sie die URL)
• HTTP-Anfrage (an das Backend Ihrer App senden)

4. Aktualisieren Sie Workflow A, um den Webhook zu verwenden

Kehren Sie zurück zu Workflow A (derjenige, der /imagine) aufruft und bearbeiten Sie den HTTP-Anfrage-Knoten, um Folgendes einzuschließen:

• webhook_url
• webhook_secret

Beispiel für einen JSON-Body im HTTP-Anfrage-Knoten:

{
  "prompt": "a cinematic photo of a cyberpunk city at night, ultra detailed, 4k",
  "aspect_ratio": "3:2",
  "webhook_url": "https://your-n8n-domain.com/webhook/apiframe/midjourney-completed",
  "webhook_secret": "my-super-secret"
}

Jetzt ist der Ablauf:

1. Workflow A → /imagine mit webhook_url + webhook_secret
2. Apiframe generiert das Bild im Hintergrund
3. Wenn fertig, ruft Apiframe Ihren Webhook (Workflow B) mit den endgültigen URLs auf
4. Workflow B verarbeitet sie und sendet sie, wohin Sie möchten

Kein Polling, keine zusätzlichen HTTP-Anfragen – nur ereignisgesteuert.

VII. Dieses Muster auf andere Apiframe-Endpunkte erweitern

Der schöne Teil: Sobald Sie n8n → Apiframe einmal verbunden haben, können Sie dasselbe Muster für alles wiederverwenden.

Einige Ideen:

• Variationen: ändern Sie die URL zu https://api.apiframe.pro/variations und senden Sie die ursprüngliche task_id + neue Eingabeaufforderung.
• Hochskalierungen: gleiche Authentifizierung, anderer Endpunkt/Körper.
• Gesichtstausch: Senden Sie zwei Bild-URLs (Quelle & Ziel) an den Gesichtstausch Endpunkt.
• Beschreiben: Erstellen Sie einen n8n-Workflow, bei dem Sie eine Bild-URL einfügen und Apiframe eine Eingabeaufforderung dafür zurückgibt.
• Andere Medien: Flux, Ideogram, Luma, Suno usw. folgen alle demselben REST-Muster: POST mit JSON, enthalten webhook_url + webhook_secret wenn Sie Webhooks möchten.

Jeder von diesen wird einfach zu einem weiteren HTTP-Anforderungs-Knoten (oder zwei, wenn Sie auch /fetch) verwenden, mit den gleichen „Apiframe Auth“-Anmeldedaten.

VIII. Abschluss

Sie haben jetzt:

• Ein grundlegender /imagine Workflow um Midjourney über Apiframe in n8n auszulösen
• Ein Polling-Setup mit /fetch für schnelle Experimente
• Eine webhook-basierte Architektur für Echtzeit-, produktionsreife Pipelines