KI-Multi-Agenten-Chat-Interface-Baukasten - n8n-Workflow

• Automatisierungsberater, die polierte Schnittstellen liefern müssen, ohne separate Frontends erstellen zu müssen.


• Entwickler, die nach erweiterten n8n-Vorlagen suchen, die benutzerdefinierten Code und KI-Dienste integrieren.


• Teams, die spezialisierte LLM-Agenten (RAG, Datenbank, Web) nutzen und ein zentrales Dashboard benötigen.


• Benutzer, die den n8n Webhook-Trigger für komplexes Anwendungs-Serving nutzen möchten.

Diese leistungsstarke n8n-Workflow-Vorlage vereinfacht die Bereitstellung von KI-Diensten dramatisch. Sie löst das betriebliche Problem, eine dedizierte Frontend-Anwendung für die Interaktion mit hochentwickelten, spezialisierten KI-Agenten zu benötigen. Durch die fachkundige Nutzung des n8n Webhook-Knotens und eines stark angepassten Code-Knotens generiert diese Automatisierung direkt aus Ihrer n8n-Instanz dynamisch eine reaktionsschnelle, anpassbare Weboberfläche. Dieses Setup eliminiert den Overhead externer Bereitstellung und ermöglicht es Benutzern, nahtlos mit spezialisierten Agenten zu interagieren – wie einem Datenbank-Suchagenten, einem Websuchagenten und einem RAG-Wissensagenten. Alle Anfragen werden intern über diese robuste n8n-Workflow-Architektur weitergeleitet und verarbeitet, was die inhärenten leistungsstarken Anwendungsentwicklungsmöglichkeiten von n8n demonstriert.

Der gesamte Prozess ist in zwei verbundene n8n-Workflows unterteilt: UI-Anzeige (GET) und Anwendungsverarbeitung (POST).

1. UI-Anfrage & Generierung: Ein Benutzer ruft den primären n8n Webhook-Trigger auf (GET-Anfrage). Der Ablauf wechselt sofort zum n8n-Knoten "Code in JavaScript", der ausgeführt wird und eine vollständige, angepasste HTML-Seite rendert (einschließlich CSS für Dunkel-/Hellmodus und Client-seitigem JavaScript für die Interaktion). Der initiale n8n-Knoten "Antwort an Webhook" gibt dieses HTML dann als Binärdatei zurück und zeigt die Chat-Oberfläche an.


2. Benutzerinteraktion & Trigger: Wenn der Benutzer eine Nachricht eingibt und auf 'Senden' klickt oder eine Schaltfläche für einen spezialisierten Agenten in der benutzerdefinierten Oberfläche auswählt, sendet das eingebettete JavaScript eine asynchrone POST-Anfrage an einen sekundären n8n Webhook-Trigger (Webhook1). Diese Anfrage-Payload enthält die Nachricht des Benutzers und den ausgewählten agenttype (general, database, web oder rag).


3. Agenten-Routing: Der n8n-Knoten "Switch" verwendet den Parameter agenttype aus der eingehenden Payload, um die Ausführung dynamisch an die entsprechende spezialisierte KI-Kette weiterzuleiten.


4. KI-Verarbeitung: Die Nachricht wird vom jeweiligen n8n-Knoten des KI-Agenten (z. B. KI-Agent Datenbank) verarbeitet, wobei das verbundene OpenAI Chat Model (konfiguriert für GPT) genutzt wird. Für die tatsächliche Bereitstellung sollten Benutzer sicherstellen, dass der KI-Agent-n8n-Knoten mit den notwendigen Werkzeugen (SQL-Konnektoren, Web-Scraping, Vektordatenbanken) konfiguriert ist.


5. Antwort-Standardisierung: Ein spezialisierter n8n-Knoten des Typs "Code" (z. B. "Antwort formatieren - Code") standardisiert die Ausgabe des KI-Agenten, extrahiert den endgültigen Antworttext und verpackt ihn zusammen mit Metadaten wie dem agent_type neu.


6. Endgültige Übergabe: Der letzte n8n-Knoten "Antwort an Webhook" gibt die standardisierte JSON-Antwortdaten zurück an den Browser, sodass die benutzerdefinierte Oberfläche das Chat-Fenster dynamisch mit der Antwort der KI aktualisieren kann.

Um diese erweiterte n8n-Vorlage bereitzustellen, führen Sie die folgenden Schritte aus:

1. Importieren: Importieren Sie die bereitgestellte n8n Workflow-JSON in Ihre n8n-Instanz.


2. Anmeldeinformationen: Richten Sie Ihre OpenAI-Anmeldeinformationen ein oder überprüfen Sie diese und stellen Sie sicher, dass sie mit den vier OpenAI Chat Model-Knoten verknüpft sind.


3. UI-Workflow-Einrichtung: Aktivieren Sie den ersten Webhook-Knoten (Webhook) und notieren Sie dessen öffentliche URL. Dies ist die URL, die Benutzer aufrufen, um die Oberfläche anzuzeigen (er muss als GET-Anfrage konfiguriert sein).


4. Agenten-Workflow-Einrichtung: Aktivieren Sie den zweiten Webhook-Knoten (Webhook1), der POST-Anfragen verarbeitet. Notieren Sie dessen vollständige öffentliche Endpunkt-URL.


5. Frontend-URL aktualisieren: Wechseln Sie zum n8n-Knoten Code in JavaScript (der die UI generiert). Suchen Sie im JavaScript-Abschnitt nach const WEBHOOK_URL und ersetzen Sie die Platzhalter-URL durch die tatsächliche, aktive URL Ihres zweiten Webhooks (Webhook1).


6. Agenten konfigurieren: Passen Sie die vier KI-Agenten-n8n-Knoten (Allgemein, Datenbank, Web, RAG) mit den spezifischen Prompts, Werkzeugen und Vektordatenbanken an, die für ihre speziellen Aufgaben erforderlich sind. Dies schließt die Einrichtung dieses komplexen n8n-Workflows ab.

• Webhook (GET): Der primäre n8n-Trigger zur Anzeige der UI. Er startet den Workflow, wenn ein Benutzer zu dem Endpunkt navigiert, und erwartet eine GET-Anfrage.


• Code in JavaScript: Dieser entscheidende n8n-Knoten enthält Hunderte von Codezeilen, die eine vollständige, funktionale HTML-/CSS-/JS-Frontend-Anwendung generieren, welche dann als Binärdatei zurückgegeben wird. Er verwaltet die Umschalter für das Thema und legt die Client-seitige Logik für die Kommunikation zurück zum n8n-Workflow fest.


• Antwort an Webhook: Gibt das vom vorhergehenden Code-n8n-Knoten generierte Roh-HTML zurück und weist den Browser an, die benutzerdefinierte Chat-Anwendung zu rendern.


• Webhook1 (POST): Der sekundäre n8n-Trigger. Dieser Knoten empfängt Benutzereingaben und den ausgewählten agenttype über eine POST-Anfrage von der benutzerdefinierten UI und startet den KI-Verarbeitungsprozess.


• Switch: Ein zentraler n8n-Knoten zur Ablaufsteuerung, der die Eingabeeigenschaft {{ $json.body.agenttype }} verwendet, um die Anfrage effizient zu einem von vier parallelen KI-Verarbeitungszweigen zu leiten.


• KI-Agent - Allgemein / Datenbank / Web / Rag: Spezialisierte LangChain Agent n8n-Knoten. Jeder soll mit unterschiedlichen Werkzeugen (z. B. SQL-Tool, Such-Tool, RAG-Kette) konfiguriert werden, um spezifische Anfragetypen zu bearbeiten und so ein Multi-Agenten-System innerhalb einer einzigen n8n-Vorlage bereitzustellen.


• OpenAI Chat Model (x4): Der Sprachmodell-n8n-Knoten, der die Intelligenz für die Agenten bereitstellt (in der Vorlage auf GPT-4.1-mini eingestellt) über OpenAI-Anmeldeinformationen.


• Antwort formatieren - Code (x4): Diese Code-n8n-Knoten normalisieren die von den KI-Agenten empfangene Ausgabe und stellen sicher, dass eine konsistente JSON-Struktur ({response: '...', agent_type: '...'}) an das Frontend-JavaScript zurückgegeben wird, was die Interaktion zuverlässig macht.


• Antwort an Webhook (x4): Diese abschließenden n8n-Knoten geben die standardisierten JSON-Antwortdaten zurück an den Browser, um die UI dynamisch zu aktualisieren.