n8n mit Open WebUI verbinden: Integration per Webhook und Pipe

Inhalt

Wenn Sie Open WebUI mit n8n verbinden, können Sie dem Chat fast jede Funktion hinzufügen. Die Integration besteht aus zwei Teilen: einem n8n-Workflow, der mit einem Webhook beginnt, und einer Pipe-Funktion in Open WebUI, die jede Chatnachricht an diesen Webhook schickt und die Antwort des Workflows im Chat anzeigt. Diese Anleitung zeigt beide Seiten, samt dem vollständigen Code der Pipe.

Warum der Aufwand? KI-Chatbots wie ChatGPT machen Teams spürbar produktiver, aber wie in unserem Beitrag über Open WebUI beschrieben, haben gehostete Lösungen ihre Grenzen. Datenschutz ist ein berechtigtes Anliegen, und Sie bekommen nur die Funktionen, die der Anbieter eingebaut hat. Das sind die Hauptgründe für selbst gehostete Open-Source-Lösungen wie Open WebUI oder LibreChat.

n8n ist ein Open-Source-Werkzeug zur Workflow-Automatisierung. In der Low-Code-Oberfläche bauen Sie auch komplexe Workflows, die Aufgaben automatisieren, APIs anbinden und Daten umwandeln. Hängen Sie n8n an Open WebUI, steht all das direkt im Chat zur Verfügung.

Die folgenden Abschnitte zeigen die Einrichtung auf beiden Seiten, praktische Anwendungsfälle und den Code, den Sie für Ihre eigene Integration von n8n und Open WebUI brauchen.

n8n und Open WebUI im Überblick

Was ist Open WebUI?

Open WebUI ist eine selbst gehostete Open-Source-Alternative zu ChatGPT mit einer einfach bedienbaren Oberfläche für Large Language Models. Es bringt fortgeschrittene Funktionen mit, etwa RAG (Retrieval Augmented Generation) über eigene Dokumente, eigene Modellkonfigurationen und ein erweiterbares Pipeline-System.

Die wichtigsten Funktionen:

• Unterstützung mehrerer LLM-Anbieter (OpenAI, Ollama usw.)
• Eingebautes RAG für die Arbeit mit Dokumenten
• Ausführung von Python-Code direkt im Browser
• Erweiterbares Pipeline-System für eigene Funktionen

Eine ausführliche Einführung finden Sie in unserem Leitfaden zu Open WebUI.

Was ist n8n?

n8n ist eine Open-Source-Plattform für Workflow-Automatisierung, in der Sie komplexe Abläufe visuell und mit wenig Code zusammenstellen. Sie verbindet verschiedene Dienste und APIs und eignet sich deshalb für automatisierte Prozesse, für die man sonst viel Code schreiben müsste.

Was n8n mitbringt:

• Visueller Workflow-Editor mit Drag-and-drop
• Hunderte fertige Integrationen für verschiedenste Dienste
• AI-Agent-Nodes für die Anbindung von LLMs
• Code-Nodes für eigene Erweiterungen
• Webhooks als Auslöser für Workflows

Mehr zu n8n und dazu, wie Sie damit KI-Agenten bauen, lesen Sie in unserem Leitfaden zu KI-Agenten mit n8n.

Die Integration von n8n und Open WebUI einrichten

Bevor Sie beginnen, brauchen Sie eine laufende Open-WebUI-Instanz und eine laufende n8n-Instanz. Die Installation von Open WebUI beschreibt unser Open-WebUI-Leitfaden, die von n8n unser n8n-Leitfaden.

Wie funktioniert die Integration von n8n und Open WebUI?

Die Integration schafft einen Kommunikationskanal in beide Richtungen zwischen n8n und Open WebUI. Sie besteht aus zwei Komponenten:

1. Funktion in Open WebUI: Open WebUI hat ein Funktionssystem, das bei bestimmten Ereignissen eigenen Code ausführt. Wir legen eine Funktion an, die jedes Mal läuft, wenn jemand im Chat eine Nachricht schickt.

2. Webhook-Trigger in n8n: Auf der n8n-Seite richten wir einen Workflow ein, der mit einem Webhook-Trigger startet. Unsere Open-WebUI-Funktion ruft diesen Webhook auf, n8n verarbeitet die Nachricht und gibt eine Antwort zurück.

Der Ablauf im Einzelnen:

1. Jemand schickt in Open WebUI eine Nachricht
2. Die Open-WebUI-Funktion fängt die Nachricht ab
3. Die Funktion schickt einen HTTP-Request an den n8n-Webhook
4. n8n verarbeitet die Nachricht im Workflow
5. n8n gibt eine Antwort an die Open-WebUI-Funktion zurück
6. Open WebUI zeigt die Antwort im Chat an

So stecken die Workflows von n8n hinter der Chat-Oberfläche von Open WebUI. Sie können Nachrichten verarbeiten, externe Dienste aufrufen und Daten umwandeln, ohne dass jemand den Chat verlassen muss.

Was dieser Ansatz bringt

• Ihr Chatbot kann jede Integration von n8n nutzen.
• Eine einfache Chatnachricht kann einen komplexen, mehrstufigen Prozess anstoßen.
• Die Oberfläche bleibt aufgeräumt, die komplexe Logik liegt in n8n.
• Sie bauen anspruchsvolle Workflows, ohne viel zu programmieren.

In den nächsten Abschnitten richten wir beide Seiten ein: zuerst den Webhook-Workflow in n8n, dann die Open-WebUI-Funktion, die ihn aufruft.

Den Webhook-Workflow in n8n anlegen

Der Webhook-Workflow in n8n ist schnell eingerichtet:

1. Neuen Workflow anlegen: Erstellen Sie in Ihrer n8n-Instanz einen neuen Workflow und fügen Sie als Startpunkt einen "Webhook"-Node hinzu.

2. Webhook-Node konfigurieren:

   • Stellen Sie die HTTP-Methode auf "POST" und kopieren Sie die erzeugte Webhook-URL. Über diese URL schickt die Open-WebUI-Funktion Nachrichten an n8n.
   • Stellen Sie "Respond" auf "Using 'Respond to Webhook' Node". Dann antwortet n8n auf den Webhook-Request erst, wenn der Workflow fertig ist.
   • Stellen Sie "Authentication" auf "Header Auth".
   • Legen Sie für den Webhook-Node neue Zugangsdaten (Credential) an und notieren Sie sich den verwendeten Schlüssel.

   Webhook-Node in n8n mit POST-Methode, Header Auth und der Einstellung "Respond to Webhook"

3. Eigenen Workflow bauen: Hängen Sie an den Webhook-Node einen beliebigen Workflow. Zum Beispiel kann ein "OpenAI"-Node die eingehende Nachricht verarbeiten und eine Antwort erzeugen.

4. Zum Schluss einen "Respond to Webhook"-Node hinzufügen: Dieser Node schickt die Antwort an Open WebUI zurück. Verbinden Sie ihn mit dem letzten Node Ihres Workflows und wählen Sie in den Einstellungen bei "Respond with" die Option "First incoming item".

Ein einfacher Workflow kann so aussehen:

n8n-Workflow: Webhook, Edit Fields, AI Agent mit Tools, Respond to Webhook

Tipp: den n8n-Workflow testen

Einen Workflow, der nur einen Webhook-Trigger hat, zu testen ist mühsam. Fügen Sie deshalb neben dem Webhook-Trigger einen Trigger "When chat message received" hinzu und verbinden Sie beide Trigger mit einem "Edit Fields"-Node, der sie zu einem Workflow zusammenführt. Wählen Sie im "Edit Fields"-Node den "JSON mode" und tragen Sie folgendes JSON ein:

1{
2  "chatInput": {{ JSON.stringify($json.body?.chatInput ?? $json.chatInput) }},
3  "sessionId": "{{ $json.body?.sessionId ?? $json.sessionId }}",
4  "user": {{ "\"" +$json.body?.user.name + "\"" ?? "" }}
5}

Der Node nimmt entweder die Eingabe aus dem Webhook oder die aus dem Chat und erzeugt daraus eine einheitliche Eingabe für den restlichen Workflow.

Chat-Trigger und Webhook-Trigger, beide mit einem "Edit Fields"-Node verbunden

Zum Testen klicken Sie auf "Open chat" und geben eine Nachricht ein.

Die Funktion in Open WebUI anlegen

Steht der Webhook-Workflow in n8n, folgt als Nächstes eine Pipe-Funktion in Open WebUI.

Was sind Funktionen in Open WebUI?

Open WebUI lässt sich über ein Erweiterungssystem namens "Functions" anpassen und ausbauen. Einer der nützlichsten Typen ist die "Pipe"-Funktion, mit der Sie in Open WebUI eigene "Modelle" oder "Agenten" anlegen.

Eine Pipe ist ein eigener Verarbeitungsweg: Sie fängt Nachrichten ab, verarbeitet sie nach Ihren Vorgaben und gibt eine Antwort zurück. Für die n8n-Integration bauen wir eine Pipe, die Nachrichten an unseren n8n-Webhook schickt und die Antworten anzeigt.

Grundaufbau einer Pipe-Funktion

Eine Pipe-Funktion in Open WebUI ist grundsätzlich so aufgebaut:

1from pydantic import BaseModel, Field
2import requests
3
4class Pipe:
5    # Konfigurationsoptionen (Valves)
6    class Valves(BaseModel):
7        WEBHOOK_URL: str = Field(
8            default="",
9            description="The n8n webhook URL to send messages to"
10        )
11        AUTH_KEY: str = Field(
12            default="",
13            description="Authentication key for the webhook"
14        )
15
16    # Pipe initialisieren
17    def __init__(self):
18        self.valves = self.Valves()
19
20    # Die pipe-Funktion, die Nachrichten verarbeitet
21    def pipe(self, body: dict, __user__: dict = None):
22        try:
23            message = extract_user_message()
24            payload = prepare_payload(message, __user__)
25            result = send_to_n8n(payload)
26            return format_response(result)
27
28        except Exception as e:
29            return {"error": str(e)}

Die wichtigsten Bestandteile:

1. Valves: Konfigurationsoptionen, die man beim Einsatz der Pipe setzen kann. Hier brauchen wir die Webhook-URL von n8n und einen Authentifizierungsschlüssel.

2. Methode __init__: initialisiert die Pipe und legt die Valves an.

3. Methode pipe: Hier passiert die eigentliche Arbeit. Sie bekommt die Nachricht, verarbeitet sie und gibt eine Antwort zurück. In unserer Integration:

   • holen wir die Nachricht aus der Eingabe,
   • bauen einen Payload für n8n mit der Nachricht und den Benutzerdaten,
   • schicken einen Request an den n8n-Webhook und
   • bringen die Antwort von n8n in das Format, das Open WebUI erwartet.

Mit diesem Aufbau ist die Pipe die Brücke zwischen Open WebUI und n8n.

Die Pipe für die n8n-Integration implementieren

Der Grundaufbau ist klar, der n8n-Webhook steht. Hier ist die eigentliche Implementierung.

1. Tragen Sie Name und Beschreibung der Pipe-Funktion ein. Beides ist frei wählbar. Um dieser Anleitung zu folgen, empfehlen wir etwa "n8n Assistant" und "Pipe to call n8n workflows".

2. Legen Sie den Code der Funktion an:

   1"""
   2title: n8n Pipe Function
   3author: Cole Medin / Andreas Nigg (Pondhouse Data GmbH)
   4version: 0.2.0
   5
   6This module defines a Pipe class that utilizes an N8N workflow for an Agent
   7"""
   8
   9from typing import Optional, Callable, Awaitable
   10from pydantic import BaseModel, Field
   11import os
   12import time
   13import aiohttp
   14import asyncio
   15
   16
   17class Pipe:
   18    class Valves(BaseModel):
   19        n8n_url: str = Field(
   20            default="https://n8n.[your domain].com/webhook/[your webhook URL]"
   21        )
   22        n8n_bearer_token: str = Field(default="...")
   23        input_field: str = Field(default="chatInput")
   24        response_field: str = Field(default="output")
   25        emit_interval: float = Field(
   26            default=2.0, description="Interval in seconds between status emissions"
   27        )
   28        enable_status_indicator: bool = Field(
   29            default=True, description="Enable or disable status indicator emissions"
   30        )
   31
   32    def __init__(self):
   33        self.type = "pipe"
   34        self.id = "n8n_pipe"
   35        self.name = "N8N Pipe"
   36        self.valves = self.Valves()
   37        self.last_emit_time = 0
   38
   39    async def emit_status(
   40        self,
   41        __event_emitter__: Callable[[dict], Awaitable[None]],
   42        level: str,
   43        message: str,
   44        done: bool,
   45    ):
   46        current_time = time.time()
   47        if (
   48            __event_emitter__
   49            and self.valves.enable_status_indicator
   50            and (
   51                current_time - self.last_emit_time >= self.valves.emit_interval or done
   52            )
   53        ):
   54            await __event_emitter__(
   55                {
   56                    "type": "status",
   57                    "data": {
   58                        "status": "complete" if done else "in_progress",
   59                        "level": level,
   60                        "description": message,
   61                        "done": done,
   62                    },
   63                }
   64            )
   65            self.last_emit_time = current_time
   66
   67    async def make_n8n_request(self, payload: dict) -> dict:
   68        """Separate async function to handle the N8N API request"""
   69        headers = {
   70            "Authorization": f"Bearer {self.valves.n8n_bearer_token}",
   71            "Content-Type": "application/json",
   72        }
   73
   74        async with aiohttp.ClientSession() as session:
   75            async with session.post(
   76                self.valves.n8n_url, json=payload, headers=headers
   77            ) as response:
   78                if response.status == 200:
   79                    response_data = await response.json()
   80                    return response_data[self.valves.response_field]
   81                else:
   82                    error_text = await response.text()
   83                    raise Exception(f"Error: {response.status} - {error_text}")
   84
   85    async def pipe(
   86        self,
   87        body: dict,
   88        __user__: Optional[dict] = None,
   89        __metadata__: Optional[dict] = None,
   90        __event_emitter__: Callable[[dict], Awaitable[None]] = None,
   91        __event_call__: Callable[[dict], Awaitable[dict]] = None,
   92    ) -> Optional[dict]:
   93        n8n_response = None
   94
   95        try:
   96            await self.emit_status(
   97                __event_emitter__, "info", "Calling N8N Workflow...", False
   98            )
   99
   100            messages = body.get("messages", [])
   101
   102            # Prüfen, ob eine Nachricht vorhanden ist
   103            if messages:
   104                question = messages[-1]["content"]
   105                if "Prompt: " in question:
   106                    question = question.split("Prompt: ")[-1]
   107
   108                await self.emit_status(
   109                    __event_emitter__, "info", "Processing request...", False
   110                )
   111
   112                # Payload vorbereiten
   113                payload = {"sessionId": __metadata__["chat_id"]}
   114                payload[self.valves.input_field] = question
   115                payload["user"] = __user__
   116
   117                # API-Request senden
   118                n8n_response = await self.make_n8n_request(payload)
   119
   120                # Antwort als Assistant-Nachricht anhängen
   121                body["messages"].append({"role": "assistant", "content": n8n_response})
   122
   123                await self.emit_status(
   124                    __event_emitter__, "info", "Processing response...", False
   125                )
   126
   127            else:
   128                await self.emit_status(
   129                    __event_emitter__,
   130                    "error",
   131                    "No messages found in the request body",
   132                    True,
   133                )
   134                body["messages"].append(
   135                    {
   136                        "role": "assistant",
   137                        "content": "No messages found in the request body",
   138                    }
   139                )
   140                return "No messages found in the request body"
   141
   142        except Exception as e:
   143            error_message = f"Error: {str(e)}"
   144            await self.emit_status(
   145                __event_emitter__,
   146                "error",
   147                error_message,
   148                True,
   149            )
   150            body["messages"].append({"role": "assistant", "content": error_message})
   151            return {"error": error_message}
   152
   153        finally:
   154            await self.emit_status(__event_emitter__, "info", "Complete", True)
   155
   156        return n8n_response
   

3. Klicken Sie auf "Save", um die Pipe-Funktion anzulegen.

Die n8n-Pipe in Open WebUI konfigurieren

Nach dem Anlegen tragen Sie in der Pipe die Webhook-URL von n8n und den Authentifizierungsschlüssel ein:

1. Öffnen Sie in Ihrer Open-WebUI-Instanz im Admin Panel den Reiter "Functions".
2. Wählen Sie Ihre Funktion "n8n Assistant" aus.
3. Klicken Sie auf das Zahnrad-Symbol neben dem Modellnamen.
4. Füllen Sie die Felder wie unten beschrieben aus.
5. Klicken Sie auf "Save".

Valves-Einstellungen der n8n-Pipe in Open WebUI

So funktioniert die n8n-Pipe

Die Pipe für die n8n-Integration im Detail:

1. Konfiguration über Valves:

   • n8n_url: die Webhook-URL aus Ihrem n8n-Workflow
   • n8n_bearer_token: das Authentifizierungstoken, das Sie in n8n eingerichtet haben
   • input_field: der Feldname, unter dem die Nachricht gesendet wird (Standard: "chatInput")
   • response_field: der Feldname, unter dem die Antwort von n8n erwartet wird (Standard: "output")
   • emit_interval und enable_status_indicator: steuern die Statusmeldungen während der Verarbeitung

2. Initialisierung:

   • Die Methode __init__ gibt der Pipe eine eindeutige ID und einen Namen.
   • Sie belegt die Valves mit Standardwerten, die man überschreiben kann.

3. Statusmeldungen:

   • Die Methode emit_status gibt während der Verarbeitung laufend Rückmeldung.
   • Solange n8n noch nicht geantwortet hat, zeigt sie einen "in_progress"-Status an.
   • So sieht man im Chat, dass gerade etwas passiert.

4. Der Request an n8n:

   • Die Methode make_n8n_request übernimmt die HTTP-Kommunikation mit n8n.
   • Sie schickt die Nachricht und die Session-Informationen an den Webhook.
   • Sie setzt die Authentifizierungs-Header und verarbeitet die Antwort.

5. Die Hauptlogik der Pipe:

   • holt die letzte Nachricht aus dem Gesprächsverlauf,
   • baut einen Payload mit Nachricht, Session-ID und Benutzerdaten,
   • ruft den n8n-Webhook asynchron auf,
   • hängt die Antwort an das Gespräch an und
   • fängt Fehler ab und zeigt eine Fehlermeldung im Chat, wenn etwas schiefgeht.

6. Umgang mit der Antwort:

   • Die Pipe hängt die Antwort von n8n mit der Rolle "assistant" an das messages-Array an.
   • Mehr braucht Open WebUI nicht, um die Antwort im Chat anzuzeigen.

Die Seite von Open WebUI bleibt damit schlank. Die komplexe Logik liegt vollständig in Ihrem n8n-Workflow, die Pipe reicht nur Nachrichten zwischen den beiden Systemen hin und her.

Anwendungsfälle für die Integration von n8n und Open WebUI

Steht die Integration, sind zum Beispiel diese Anwendungsfälle möglich.

1. Chatbot mit Datenbankanbindung

Verbinden Sie den Chatbot mit Ihrer Unternehmensdatenbank, damit er Fragen zu Lagerbestand, Kundendaten oder Verkaufszahlen beantwortet:

• Frage im Chat: "Wie viele Produkte haben wir auf Lager?"
• Open WebUI schickt die Frage an n8n
• Der n8n-Workflow fragt Ihre Datenbank ab
• Das Ergebnis wird aufbereitet und im Chat angezeigt

2. Mehrere APIs in einem Ablauf

Kombinieren Sie mehrere APIs in einem Workflow, um eine einzige Frage zu beantworten:

• Frage im Chat: "Wie wird das Wetter bei meiner nächsten Reise nach Berlin?"
• Der n8n-Workflow sucht im Kalender nach den Reisedaten
• Danach fragt er eine Wetter-API nach der Vorhersage
• Am Ende fasst er beides zu einer zusammenhängenden Antwort zusammen

3. Dokumente erzeugen und verarbeiten

Bauen Sie Workflows, die Dokumente erstellen und verarbeiten:

• Anfrage im Chat: "Erstelle einen Verkaufsbericht für Q1"
• Der n8n-Workflow holt die Daten aus Ihrem CRM
• Er erzeugt daraus einen PDF-Bericht
• Er lädt den Bericht in einen Cloud-Speicher hoch
• Im Chat erscheint ein Download-Link

Das funktioniert auch in die andere Richtung: ein Workflow, der eingehende Dokumente liest und strukturierte Daten zurückgibt. Wie dieser Extraktionsschritt aussieht, zeigt unser Beitrag zur Dokumentenextraktion mit LLMs.

4. Mehrere KI-Modelle kombinieren

Setzen Sie für unterschiedliche Aufgaben unterschiedliche Modelle ein:

• Jemand lädt ein Bild mit Text hoch
• Der n8n-Workflow liest den Text mit einem Vision-Modell aus
• Ein Sprachmodell analysiert den Inhalt
• Ein spezialisiertes Modell formuliert schließlich die Antwort

Fazit

Für die Verbindung von n8n und Open WebUI brauchen Sie zwei Bausteine: einen n8n-Workflow, der mit einem Webhook-Node beginnt und mit einem "Respond to Webhook"-Node endet, und eine Pipe-Funktion in Open WebUI, die Chatnachrichten an diesen Webhook weiterleitet. Zusammen ergeben sie eine Chat-Oberfläche, die mehr kann als jedes der beiden Werkzeuge allein.

Das bringt Ihnen dieser Ansatz:

• Volle Kontrolle über Ihre Daten und Workflows
• Erweiterbarkeit über die Integrationen von n8n
• Schnellere Umsetzung dank Low-Code
• Selbst gehostete Infrastruktur für Datenschutz und Sicherheit

Als nächster Schritt bietet es sich an, den einfachen OpenAI-Node durch einen eigenen Workflow zu ersetzen, etwa für einen der Anwendungsfälle oben. Wenn dabei etwas Nützliches entsteht, teilen Sie es gern mit der Community.

Sie möchten einen selbst gehosteten Chat wie diesen an die Systeme Ihres Unternehmens anbinden? Genau solche Lösungen richtet unser Team für KI-Beratung gemeinsam mit Kunden ein. Sprechen Sie uns an.

Weiterlesen

• KI-Agenten mit smolagents bauen (auf Englisch)
• Zuverlässige KI-Agenten bauen: Best Practices
• KI-Agenten ohne Framework bauen (auf Englisch)
• Fortgeschrittene KI-Agenten bauen (auf Englisch)
• Ein eigenes LLM mit vLLM und HTTPS hosten
• LLM-Aufrufe mit Langfuse tracen und überwachen

Sie möchten zuverlässige KI-Agenten-Systeme bauen?

Wir haben auf Basis aktueller Forschung einen ausführlichen Leitfaden (auf Englisch) erstellt, wie Sie robuste KI-Agenten-Systeme bauen, die auch im produktiven Betrieb funktionieren. Der Leitfaden behandelt:

• die 14 systematischen Fehlerquellen in Multi-Agenten-Systemen
• belegte Best Practices für das Design von Agenten
• strukturierte Kommunikationsprotokolle und Prüfmechanismen

Über den Autor

Andreas Nigg

Mitgründer, Pondhouse Data

Andreas entwickelt seit mehr als acht Jahren Datenanwendungen. Bei Pondhouse Data konzipiert und baut er KI-Systeme und integriert sie in komplexe, gewachsene Unternehmensumgebungen.

Sprechen Sie mit Andreas über Ihr ProjektAuf LinkedIn folgen