Langflow-Prozess in n8N-Chatbot importieren und Branding anpassen

Fortgeschritten

Dies ist ein Engineering, AI-Bereich Automatisierungsworkflow mit 7 Nodes. Hauptsächlich werden Set, HttpRequest, ChatTrigger und andere Nodes verwendet, kombiniert mit KI-Technologie für intelligente Automatisierung. Erstelle KI-gesteuerte Website-Chatbots mit Langflow-Backend und benutzerdefiniertem Branding

Voraussetzungen
  • Möglicherweise sind Ziel-API-Anmeldedaten erforderlich
Workflow-Vorschau
Visualisierung der Node-Verbindungen, mit Zoom und Pan
Workflow exportieren
Kopieren Sie die folgende JSON-Konfiguration und importieren Sie sie in n8n
{
  "id": "jChHsZ0OR79bITzc",
  "meta": {
    "instanceId": "a4bfc93e975ca233ac45ed7c9227d84cf5a2329310525917adaf3312e10d5462",
    "templateCredsSetupCompleted": true
  },
  "name": "Import Langflow Flow in n8n Chatbot and Branded it",
  "tags": [],
  "nodes": [
    {
      "id": "5d3d611f-72e9-43b4-98ee-d4e10cd7591d",
      "name": "Bei Chatnachricht-Eingang",
      "type": "@n8n/n8n-nodes-langchain.chatTrigger",
      "position": [
        -720,
        0
      ],
      "webhookId": "560cad1a-7d5c-43ae-818e-1ff432e4cae4",
      "parameters": {
        "mode": "webhook",
        "public": true,
        "options": {
          "allowedOrigins": "*"
        }
      },
      "typeVersion": 1.1
    },
    {
      "id": "9bc309e9-0878-4140-8a2c-fadb51e3dd65",
      "name": "Felder bearbeiten",
      "type": "n8n-nodes-base.set",
      "position": [
        -280,
        0
      ],
      "parameters": {
        "options": {},
        "assignments": {
          "assignments": [
            {
              "id": "6a50a699-9598-452a-bc38-a87e2be9084c",
              "name": "output",
              "type": "string",
              "value": "={{ $json.outputs[0].outputs[0].results.message.data.text }}"
            }
          ]
        }
      },
      "typeVersion": 3.4
    },
    {
      "id": "fe301be1-4845-4e76-aee8-27c61bf894e1",
      "name": "Notiz",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -740,
        -340
      ],
      "parameters": {
        "color": 6,
        "width": 720,
        "height": 220,
        "content": "### Enable n8n CDN on your website\n<link href=\"https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css\" rel=\"stylesheet\" />\n<script type=\"module\">\n\timport { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';\n\n\tcreateChat({\n\t\twebhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'\n\t});\n</script>"
      },
      "typeVersion": 1
    },
    {
      "id": "ca73efeb-bdbd-4824-9b3f-b6222d1db010",
      "name": "Notiz1",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -740,
        -960
      ],
      "parameters": {
        "color": 3,
        "width": 720,
        "height": 600,
        "content": "## Langflow\n\nLangflow is a low-code, visual development platform designed to help users build and deploy AI applications with minimal coding. It provides an intuitive drag-and-drop interface, allowing users to create complex AI workflows by connecting reusable components. Langflow supports integration with various APIs, language models, and databases, making it versatile for tasks such as chatbots, document Q&A systems, and content generation. Its Python-based architecture ensures compatibility with popular AI frameworks and tools, facilitating rapid prototyping and deployment of AI solutions.\n\n### Basic Langflow Flow:\n![image](https://n3wstorage.b-cdn.net/test/langflow_flow.png)"
      },
      "typeVersion": 1
    },
    {
      "id": "edd68237-94c1-4b21-ac10-fac5512dc7e0",
      "name": "Notiz2",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        0,
        -960
      ],
      "parameters": {
        "color": 6,
        "width": 800,
        "height": 840,
        "content": "### Customize n8n Chatbot\n\n```js\ncreateChat({\n\twebhookUrl: '',\n\twebhookConfig: {\n\t\tmethod: 'POST',\n\t\theaders: {}\n\t},\n\ttarget: '#n8n-chat',\n\tmode: 'window',\n\tchatInputKey: 'chatInput',\n\tchatSessionKey: 'sessionId',\n\tmetadata: {},\n\tshowWelcomeScreen: false,\n\tdefaultLanguage: 'en',\n\tinitialMessages: [\n\t\t'Hi there! 👋',\n\t\t'My name is Nathan. How can I assist you today?'\n\t],\n\ti18n: {\n\t\ten: {\n\t\t\ttitle: 'Hi there! 👋',\n\t\t\tsubtitle: \"Start a chat. We're here to help you 24/7.\",\n\t\t\tfooter: '',\n\t\t\tgetStarted: 'New Conversation',\n\t\t\tinputPlaceholder: 'Type your question..',\n\t\t},\n\t},\n});\n```"
      },
      "typeVersion": 1
    },
    {
      "id": "0fb9d211-07fd-4309-b91c-aa21e877a915",
      "name": "Langflow",
      "type": "n8n-nodes-base.httpRequest",
      "position": [
        -500,
        0
      ],
      "parameters": {
        "url": "https://LANGFLOW_URL/api/v1/run/FLOW_ID?stream=false",
        "method": "POST",
        "options": {},
        "jsonBody": "={\n  \"input_value\": \"{{ $json.chatInput }}\",\n  \"output_type\": \"chat\",\n  \"input_type\": \"chat\"\n}",
        "sendBody": true,
        "sendHeaders": true,
        "specifyBody": "json",
        "authentication": "genericCredentialType",
        "genericAuthType": "httpHeaderAuth",
        "headerParameters": {
          "parameters": [
            {
              "name": "Content-Type",
              "value": "application/json"
            }
          ]
        }
      },
      "credentials": {
        "httpHeaderAuth": {
          "id": "u4ZE9bSDfxZX3Ljj",
          "name": "Langflow API"
        }
      },
      "typeVersion": 4.2
    },
    {
      "id": "705ecc2a-b0af-4165-8ef3-c693e82cd1ce",
      "name": "Notiz3",
      "type": "n8n-nodes-base.stickyNote",
      "position": [
        -560,
        -60
      ],
      "parameters": {
        "height": 220,
        "content": "Set LANGFLOW_URL and FLOW_ID"
      },
      "typeVersion": 1
    }
  ],
  "active": false,
  "pinData": {},
  "settings": {
    "executionOrder": "v1"
  },
  "versionId": "6fe12868-d03f-4c86-a472-3b5ce254d4ef",
  "connections": {
    "0fb9d211-07fd-4309-b91c-aa21e877a915": {
      "main": [
        [
          {
            "node": "9bc309e9-0878-4140-8a2c-fadb51e3dd65",
            "type": "main",
            "index": 0
          }
        ]
      ]
    },
    "5d3d611f-72e9-43b4-98ee-d4e10cd7591d": {
      "main": [
        [
          {
            "node": "0fb9d211-07fd-4309-b91c-aa21e877a915",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}
Häufig gestellte Fragen

Wie verwende ich diesen Workflow?

Kopieren Sie den obigen JSON-Code, erstellen Sie einen neuen Workflow in Ihrer n8n-Instanz und wählen Sie "Aus JSON importieren". Fügen Sie die Konfiguration ein und passen Sie die Anmeldedaten nach Bedarf an.

Für welche Szenarien ist dieser Workflow geeignet?

Fortgeschritten - Engineering, Künstliche Intelligenz

Ist es kostenpflichtig?

Dieser Workflow ist völlig kostenlos. Beachten Sie jedoch, dass Drittanbieterdienste (wie OpenAI API), die im Workflow verwendet werden, möglicherweise kostenpflichtig sind.

Workflow-Informationen
Schwierigkeitsgrad
Fortgeschritten
Anzahl der Nodes7
Kategorie2
Node-Typen4
Schwierigkeitsbeschreibung

Für erfahrene Benutzer, mittelkomplexe Workflows mit 6-15 Nodes

Autor

Full-stack Web Developer based in Italy specialising in Marketing & AI-powered automations. For business enquiries, send me an email at info@n3w.it or add me on Linkedin.com/in/davideboizza

Externe Links
Auf n8n.io ansehen

Diesen Workflow teilen

Kategorien

Kategorien: 34