Erstellung von benutzerdefinierten Logos aus Websites mit OpenAI und Gemini

• •HTTP Webhook-Endpunkt (wird von n8n automatisch generiert)
• •Möglicherweise sind Ziel-API-Anmeldedaten erforderlich
• •OpenAI API Key

{
  "meta": {
    "instanceId": "3d7eb9567ae690bf8c9bba1cb43396e6e40c18e15eb5889cf9673ed1713da6db",
    "templateCredsSetupCompleted": true
  },
  "nodes": [
    {
      "id": "4c829734-83d0-43ef-8111-2b8222bff6ee",
      "name": "Bei Empfang der Website-URL",
      "type": "n8n-nodes-base.webhook",
      "position": [
        -1136,
        2224
      ],
      "webhookId": "15a007b2-0c35-47f6-8387-5b3548c2e295",
      "parameters": {
        "path": "175b3350-1d0c-48c5-99d1-06e3b209a68097t657yi97",
        "options": {},
        "httpMethod": "POST",
        "responseMode": "responseNode"
      },
      "typeVersion": 2.1
    },
    {
      "id": "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb",
      "name": "Website-Screenshot erfassen",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        -976,
        2224
      ],
      "parameters": {
        "url": "=https://api.screenshotone.com/take",
        "options": {},
        "sendQuery": true,
        "queryParameters": {
          "parameters": [
            {
              "name": "access_key",
              "value": "[Your ScreenshotOne Access Key]"
            },
            {
              "name": "url",
              "value": "={{ $json.body.websiteUrl }}"
            },
            {
              "name": "format",
              "value": "jpg"
            },
            {
              "name": "block_ads",
              "value": "true"
            },
            {
              "name": "block_cookie_banners",
              "value": "true"
            },
            {
              "name": "block_banners_by_heuristics",
              "value": "false"
            },
            {
              "name": "block_trackers",
              "value": "true"
            },
            {
              "name": "delay",
              "value": "0"
            },
            {
              "name": "timeout",
              "value": "60"
            },
            {
              "name": "response_type",
              "value": "=json"
            },
            {
              "name": "image_quality",
              "value": "80"
            }
          ]
        }
      },
      "typeVersion": 4.2
    },
    {
      "id": "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17",
      "name": "Website-Inhalt abrufen",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        -816,
        2224
      ],
      "parameters": {
        "url": "={{ $('When Website URL Received').item.json.body.websiteUrl }}",
        "options": {}
      },
      "typeVersion": 4.2
    },
    {
      "id": "5995ca13-7f6b-4899-88fb-d85e18921143",
      "name": "Logo-Prompt generieren",
      "type": "@n8n/n8n-nodes-langchain.agent",
      "position": [
        -640,
        2224
      ],
      "parameters": {
        "text": "=Write a prompt to create a logo for this website based of the content of the site and a screenshot of the front page\n\nScreenshot: {{ $('Capture Website Screenshot').item.json.screenshot_url }}\nWebsite data:{{ $json.data }}\n\nOutput the prompt in \"Prompt\"",
        "options": {
          "passthroughBinaryImages": true
        },
        "promptType": "define"
      },
      "typeVersion": 2.2
    },
    {
      "id": "5b7b8344-4acc-46df-8412-30cdaeb49273",
      "name": "Logo-Bild generieren",
      "type": "@n8n/n8n-nodes-langchain.googleGemini",
      "position": [
        -352,
        2224
      ],
      "parameters": {
        "prompt": "={{ $json.output }}",
        "modelId": {
          "__rl": true,
          "mode": "list",
          "value": "models/gemini-2.5-flash-image",
          "cachedResultName": "models/gemini-2.5-flash-image (Nano Banana)"
        },
        "options": {},
        "resource": "image"
      },
      "credentials": {
        "googlePalmApi": {
          "id": "7v8o9EaQkl33woxm",
          "name": "v9"
        }
      },
      "typeVersion": 1
    },
    {
      "id": "f9cc1b9b-b610-442e-8ea9-2ddc18d8de09",
      "name": "Mit Logo antworten",
      "type": "n8n-nodes-base.respondToWebhook",
      "position": [
        -176,
        2224
      ],
      "parameters": {
        "options": {},
        "respondWith": "binary"
      },
      "typeVersion": 1.4
    },
    {
      "id": "f1bc68c6-ccf3-4fdf-97c5-5a86928838f7",
      "name": "Hinweis: Webhook-Trigger Trigger",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -1248,
        2000
      ],
      "parameters": {
        "color": 6,
        "width": 344,
        "height": 212,
        "content": "## 📥 When Website URL Received\n\n**Purpose:** Triggers workflow on POST request with website URL.\n\n**Note:** Body format: {\"websiteUrl\": \"https://example.com\"}"
      },
      "typeVersion": 1
    },
    {
      "id": "a1cef014-ddd9-4db2-8333-a7579608008e",
      "name": "Hinweis: Screenshot-Aufnahme",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -1168,
        2464
      ],
      "parameters": {
        "color": 3,
        "width": 312,
        "height": 212,
        "content": "## 🖼️ Capture Website Screenshot\n\n**Purpose:** Fetches site screenshot via ScreenshotOne API for visual analysis.\n\n**Note:** Replace placeholder with your API key; outputs JSON with screenshot_url."
      },
      "typeVersion": 1
    },
    {
      "id": "62e394c1-363f-4164-81f5-39cde9ca7b22",
      "name": "Hinweis: Inhaltsabruf",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -816,
        2000
      ],
      "parameters": {
        "color": 5,
        "width": 216,
        "height": 196,
        "content": "## 🌐 Fetch Website Content\n\n**Purpose:** Scrapes HTML from the URL for text-based site analysis.\n"
      },
      "typeVersion": 1
    },
    {
      "id": "21b9ad9a-cbb4-4ad2-94d7-6424bf906478",
      "name": "Hinweis: Prompt-Generierung",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -528,
        2464
      ],
      "parameters": {
        "color": 5,
        "width": 312,
        "height": 212,
        "content": "## ✍️ Generate Logo Prompt\n\n**Purpose:** AI agent crafts logo prompt using OpenAI from content and screenshot.\n\n**Note:** Multimodal input; outputs refined prompt for image gen."
      },
      "typeVersion": 1
    },
    {
      "id": "cb688126-2285-4ff0-9beb-259c9d0f7c43",
      "name": "Hinweis: Logo-Generierung",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -368,
        2000
      ],
      "parameters": {
        "color": 2,
        "width": 280,
        "height": 180,
        "content": "## 🎨 Generate Logo Image\n\n**Purpose:** Creates logo via Google Gemini using the AI-crafted prompt.\n\n**Note:** Image resource; returns binary data for response."
      },
      "typeVersion": 1
    },
    {
      "id": "d470c3e0-e75b-455c-b514-7e242fe664dc",
      "name": "Übersicht Hinweis5",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -1888,
        1808
      ],
      "parameters": {
        "color": 4,
        "width": 600,
        "height": 1100,
        "content": "# 🤖 AI Logo Generator from Website URL\n\n## 📋 What This Template Does\nThis workflow receives a website URL via webhook, captures a screenshot and fetches page content, uses OpenAI to craft a logo prompt from visuals and text, then generates the image with Google Gemini for binary response.\n\n## 🔧 Prerequisites\n- n8n instance with webhook support\n- ScreenshotOne account\n- OpenAI account\n- Google AI Studio account\n\n## 🔑 Required Credentials\n\n### ScreenshotOne API Setup\n1. Sign up at screenshotone.com → Dashboard → API Keys\n2. Generate access key\n3. Replace placeholder in \"Capture Website Screenshot\" node\n\n### OpenAI API Setup\n1. platform.openai.com → API Keys\n2. Create secret key\n3. Add as \"OpenAI API\" credential\n\n### Google Gemini API Setup\n1. aistudio.google.com/app/apikey\n2. Create API key\n3. Add as \"Google PaLM API\" credential\n\n## ⚙️ Configuration Steps\n1. Import JSON workflow\n2. Assign credentials to nodes\n3. Replace API key placeholder\n4. Activate webhook\n5. Test with POST {\"websiteUrl\": \"https://example.com\"}\n\n## 🎯 Use Cases\n- Marketing: Generate client logo prototypes\n- Developers: Auto-match logos for sites\n- Designers: Inspire from competitors\n- Education: Demo AI design\n\n## ⚠️ Troubleshooting\n- Screenshot timeout: Increase to 120s, check URL\n- Empty prompt: Verify OpenAI quota\n- Blank logo: Add style to prompt, check limits\n- No trigger: Confirm POST JSON body"
      },
      "typeVersion": 1
    },
    {
      "id": "ae9beb67-4ce8-43be-a73c-37fb446517fd",
      "name": "GPT-5 mini",
      "type": "@n8n/n8n-nodes-langchain.lmChatOpenAi",
      "position": [
        -640,
        2400
      ],
      "parameters": {
        "model": {
          "__rl": true,
          "mode": "list",
          "value": "gpt-5-mini",
          "cachedResultName": "gpt-5-mini"
        },
        "options": {}
      },
      "credentials": {
        "openAiApi": {
          "id": "ymMvgDroJHalwvRf",
          "name": "OpenAI"
        }
      },
      "typeVersion": 1.2
    }
  ],
  "pinData": {},
  "connections": {
    "ae9beb67-4ce8-43be-a73c-37fb446517fd": {
      "ai_languageModel": [
        [
          {
            "node": "5995ca13-7f6b-4899-88fb-d85e18921143",
            "type": "ai_languageModel",
            "index": 0
          }
        ]
      ]
    },
    "5b7b8344-4acc-46df-8412-30cdaeb49273": {
      "main": [
        [
          {
            "node": "f9cc1b9b-b610-442e-8ea9-2ddc18d8de09",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "5995ca13-7f6b-4899-88fb-d85e18921143": {
      "main": [
        [
          {
            "node": "5b7b8344-4acc-46df-8412-30cdaeb49273",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17": {
      "main": [
        [
          {
            "node": "5995ca13-7f6b-4899-88fb-d85e18921143",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "4c829734-83d0-43ef-8111-2b8222bff6ee": {
      "main": [
        [
          {
            "node": "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "0c5f6963-4d1a-4f1e-bf2e-9adc4e53f3fb": {
      "main": [
        [
          {
            "node": "2156cf0b-97f0-425e-a28d-d7ea9e2d7d17",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}