AI 多代理人聊天介面建置器 - n8n 工作流程

• 需要交付精緻介面但不想建置獨立前端的自動化顧問。


• 尋求整合客製化程式碼與 AI 服務之進階 n8n 範本的開發人員。


• 使用專門 LLM 代理人（RAG、資料庫、網路）並需要集中儀表板的團隊。


• 希望利用 n8n Webhook 觸發器來處理複雜應用程式服務的使用者。

這個強大的 n8n 工作流範本大幅簡化了 AI 服務的交付。它解決了需要獨立的前端應用程式來與複雜、專門的 AI 代理人互動的營運挑戰。透過專業地運用 n8n Webhook 節點和高度客製化的程式碼節點，此自動化會直接從您的 n8n 實例動態生成響應式、可客製化的網頁 UI。此設定消除了外部部署的開銷，讓使用者能無縫地與專門的代理人互動——例如資料庫搜尋代理人、網路搜尋代理人，以及 RAG 知識代理人。所有查詢都會在內部路由並透過此強健的 n8n 工作流架構處理，展示了 n8n 本身所具備的強大應用程式開發能力。

整個過程分為兩個連接的 n8n 工作流：UI 顯示 (GET) 與請求處理 (POST)。

1. UI 請求與生成： 使用者存取主要的 n8n Webhook 觸發器（GET 請求）。流程立即轉移到 JavaScript 程式碼 n8n 節點，該節點執行後渲染出完整的客製化 HTML 頁面（包含深色/淺色模式的 CSS 和用於互動的客戶端 JavaScript）。接著，回應 Webhook 節點會將此 HTML 以二進制檔案的形式傳回，顯示聊天介面。


2. 使用者互動與觸發： 當使用者輸入訊息並點擊『傳送』或在客製化 UI 中選擇專門的代理人按鈕時，嵌入的 JavaScript 會向次要的 n8n Webhook 觸發器 (Webhook1) 發送一個非同步的 POST 請求。此請求的負載包含使用者的訊息以及選定的 agenttype（general、database、web 或 rag）。


3. 代理人路由： Switch n8n 節點使用傳入負載中的 agenttype 參數，動態地將執行路由至適當的專門 AI 鏈。


4. AI 處理： 訊息由對應的 AI 代理人 n8n 節點（例如 AI 代理人 資料庫）處理，利用已連接的 OpenAI 聊天模型（針對 GPT 設定）。實際部署時，使用者應確保 AI 代理人 n8n 節點已配置好必要的工具（SQL 連接器、網路爬蟲、向量資料庫）。


5. 回應標準化： 專門的程式碼 n8n 節點（例如 格式化回應 - 程式碼）會將從 AI 代理人收到的輸出標準化，萃取出最終的回應文字，並與 agent_type 等中繼資料一起重新包裝。


6. 最終傳遞： 最後的回應 Webhook n8n 節點將標準化的 JSON 回應傳回給客戶端 JavaScript，以便客製化 UI 能動態更新聊天視窗以顯示 AI 的答案。

若要部署此進階 n8n 範本，請遵循以下步驟：

1. 匯入： 將提供的 n8n 工作流 JSON 匯入到您的 n8n 實例中。


2. 憑證： 設定或驗證您的 OpenAI 憑證，確保它們已連結到四個 OpenAI 聊天模型節點。


3. UI 工作流設定： 啟用第一個 Webhook 節點 (Webhook) 並記下其公開 URL。這是使用者用來查看介面的 URL（必須設定為 GET 請求）。


4. 代理人工作流設定： 啟用處理 POST 請求的第二個 Webhook 節點 (Webhook1)。記下其完整的公開端點 URL。


5. 更新前端 URL： 前往生成 UI 的 JavaScript 中的程式碼 n8n 節點。在 JavaScript 部分中搜尋 const WEBHOOK_URL，並將佔位符 URL 替換為您第二個 Webhook (Webhook1) 實際啟用的 URL。


6. 配置代理人： 自訂四個 AI 代理人 n8n 節點（通用、資料庫、網路、RAG），以配置其專門任務所需的提示詞、工具和向量儲存庫。這完成了您對此複雜 n8n 工作流的設定。

• Webhook (GET)： 用於顯示 UI 的主要 n8n 觸發器。當使用者導覽至該端點時啟動工作流，預期接收 GET 請求。


• JavaScript 中的程式碼： 這個關鍵的 n8n 節點包含數百行程式碼，用來生成一個完整、可運作的 HTML/CSS/JS 前端應用程式，然後將其作為二進制檔案傳回。它負責管理主題切換並設定與 n8n 工作流通訊的客戶端邏輯。


• 回應 Webhook： 傳回前一個程式碼 n8n 節點所生成的原始 HTML，指示瀏覽器渲染客製化聊天應用程式。


• Webhook1 (POST)： 次要的 n8n 觸發器。此節點透過客製化 UI 發出的 POST 請求接收使用者輸入和選定的 agenttype，從而啟動 AI 處理流程。


• Switch (切換)： 一個核心的流程控制 n8n 節點，它使用輸入屬性 {{ $json.body.agenttype }} 來有效率地將請求路由至四個平行 AI 處理分支中的一個。


• AI 代理人 - 通用 / 資料庫 / 網路 / Rag： 專門的 LangChain 代理人 n8n 節點。每個節點都旨在配置不同的工具（例如 SQL 工具、搜尋工具、RAG 鏈）來處理特定類型的查詢，在單一 n8n 範本內提供多代理人系統。


• OpenAI 聊天模型 (x4)： 為代理人提供智慧的語言模型 n8n 節點（範本中設定為 GPT-4.1-mini），透過 OpenAI 憑證運作。


• 格式化回應 - 程式碼 (x4)： 這些程式碼 n8n 節點會將從 AI 代理人收到的輸出標準化，確保以一致的 JSON 結構（{response: '...', agent_type: '...'}）傳回給前端 JavaScript，使互動更可靠。


• 回應 Webhook (x4)： 這些最終的 n8n 節點將標準化的 JSON 回應資料傳回瀏覽器，以動態更新 UI。