iT邦幫忙

2025 iThome 鐵人賽

DAY 11
0
生成式 AI

三十天解鎖上下文超能力:MCP 實戰系列 第 11

Day 11 - 在 OpenWebUI中 呼叫 n8n 工作流

  • 分享至 

  • xImage
  •  

大家好,鐵人賽邁入第十一天!

在過去幾天,我們在 n8n 的世界裡,打造了一個越來越聰明的 AI Agent,並為它裝備了計算機、天氣、新聞、音樂推薦等多種強大的工具。我們的 MCPClient 工作流,實質上已經是一個功能完備的 MCP 伺服器 (Server)

但是,它一直都還在 n8n 的內部環境中運行。今天,我們要打破這道牆,讓一個外部的、專業的 AI 應用 (MCP Host),來呼叫我們親手打造的 MCP 伺服器。

我們今天的主角,就是強大的開源 AI 平台—— Open WebUI

一、Open WebUI 介紹

什麼是 Open WebUI 呢?簡單來說,它是一個完全私有、能在自己電腦上運行的 AI 助理。它是一個功能強大、介面美觀的開源專案,可以讓你輕鬆管理並與本地大型語言模型 (LLM) 互動,就像是為 LLM 量身打造的「Stable Diffusion WebUI」。

為什麼選擇 Open WebUI?

Open WebUI 不僅僅是一個對話介面,它更是一個完整的 AI 平台,整合了眾多實用功能:

  • 本地雲端皆可使用:完美支援 Ollama,讓你輕鬆運行 Llama 3, Mistral 等開源模型。同時也支援連接 OpenAI、Groq 等雲端 API。
  • 強大的知識庫 (RAG) 功能:可以上傳自己的文件,讓 AI 根據你的資料回答問題。
  • 即時網路搜尋:讓 AI 能直接讀取網頁內容並進行摘要或問答。
  • 模型建立器 (Model Builder):透過圖形化介面「創造」屬於你自己的模型角色。
  • 多模態互動與圖片生成:支援語音輸入並可串接 Stable Diffusion 或 DALL-E。

二、安裝 Open WebUI (Docker 一鍵部署)

在開始之前,你只需要準備好一樣東西:Docker

打開你的終端機 (Terminal 或 PowerShell),複製並貼上以下指令來同時安裝 Open WebUI 和 Ollama(運行 LLM 的後端)。

# (建議使用此版本,除非你有 NVIDIA GPU)
docker run -d -p 3000:8080 -v ollama:/root/.ollama -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:ollama

執行後,Docker 會自動下載映像檔並啟動服務。整個過程大概需要幾分鐘。


三、首次啟動與設定

安裝完成後,打開你的瀏覽器,輸入 http://localhost:3000

image

  1. 註冊管理員帳號:第一次進入時,請先註冊一個管理員帳號。
  2. 下載模型:登入後,點擊右上角的設定圖示 ⚙️ > Models。在 Pull a model... 的欄位中輸入 llama3mistral,然後點擊下載按鈕。
  3. 基礎測試:下載完成後,回到主畫面,選擇剛剛下載的模型,和它聊幾句,確保 Open WebUI 和 Ollama 基礎環境運作正常。

四、整合 n8n:讓 Open WebUI 擁有使用工具的能力

基礎環境好了,現在進入最關鍵的整合步驟!我們需要告訴 Open WebUI:「嘿,在 n8n 那裡有一個很厲害的 MCP 伺服器,它有很多工具可以用!」

這個「告知」的過程,我們透過 Open WebUI 的 Pipeline 功能來實現。

步驟一:獲取 n8n MCP 伺服器的 URL

  1. 回到 n8n,打開我們一直在擴充的 MCP Demo 工作流。
  2. 把原先使用 chat Trigger 改成 webhook Trigger 節點,並且點擊進去複製 url,這就是我們 MCP 伺服器的地址!

截圖 2025-09-04 下午4.02.14
截圖 2025-09-04 下午4.02.39

步驟二:在 Open WebUI 中匯入 n8n Pipeline

Open WebUI 的社群已經為我們準備好了連接 n8n 的 Pipeline 範本,我們只需要匯入並稍作修改即可。

  1. 在 Open WebUI 中,點擊左側選單的 Pipelines
  2. 點擊 Import from URL
  3. 在彈出的輸入框中,貼上以下 URL,然後點擊 Import
    https://openwebui.com/f/owndev/n8n_pipeline
    
    image

步驟三:設定 Pipeline 連接到你的 n8n

  1. 匯入成功後,你會看到一個圖形化的編輯介面。找到名為 n8n Workflow 的方塊。
  2. 點擊這個方塊,右側會滑出它的設定。
  3. 找到 url 欄位,將裡面預設的地址,替換成你剛剛從 n8n 複製的 MCP Server Webhook URL

截圖 2025-09-04 下午3.59.07

五、終極測試:在 Open WebUI 中呼叫所有工具!

  1. 回到 Open WebUI 的主聊天介面。
  2. 點擊模型選擇框下方的 Pipeline 按鈕(一個漏斗圖示)。
  3. 選擇我們剛剛儲存的 N8N pipe
  4. 現在,你可以開始對這個「超級強化」後的 AI 下達各種指令了:
    • 測試計算機: 500 * 3.14 是多少?
    • 測試天氣: 幫我查一下臺南今天的天氣
    • 測試新聞: 找幾篇關於 AI 的最新新聞
    • 測試 Spotify: 我今天想聽點輕快的音樂,有推薦的歌單嗎?

你會發現,Open WebUI 中的 LLM 會像我們之前在 n8n 聊天室裡一樣,自主地判斷何時需要使用工具,並透過我們設定的 Pipeline,成功地呼叫(其實是 localhost:5678) n8n MCP 伺服器,然後將執行結果回傳到你的聊天視窗中!

截圖 2025-09-04 下午4.22.18
截圖 2025-09-04 下午4.22.30
截圖 2025-09-04 下午4.31.43
這邊會出現一個錯誤,是因為免費的api會被google限額,導致出現429
截圖 2025-09-04 下午4.32.19
在管理員控制台中的函式,選擇剛剛匯入的n8n pipe設定,再把下圖改成關閉就可以解決了
截圖 2025-09-04 下午4.39.40

截圖 2025-09-04 下午4.36.20

六、今日總結

恭喜你!今天我們完成了一項驚人的整合,成功地將兩個強大的開源專案——Open WebUI 和 n8n——串連在一起,打造了一個真正屬於你自己的、可無限擴充的 AI Agent 平台。

我們學到了:

  1. 如何快速部署 Open WebUI + Ollama 的本地 AI 環境。
  2. 利用 Open WebUI 的 Pipeline 功能,將其作為一個 MCP Host。
  3. 成功讓外部應用程式呼叫我們在 n8n 中建立的 MCP Server。

這標誌著我們 n8n 篇章的技術巔峰。明天,我們將對整個 n8n 的旅程進行一次全面的回顧與總結,並探討它的優勢與極限,為我們下一階段的 Python 實戰篇章,拉開序幕!


上一篇
Day 10 - 使用 n8n 打造依照使用者心情獲取spotify歌單 mcp server
系列文
三十天解鎖上下文超能力:MCP 實戰11
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言