Zenn
🦀

Open WebUIをn8n AIエージェントワークフローに接続する方法

に公開
n8n
Model Context Protocol
Open WebUI
AIエージェント
tech

Open WebUIをn8n AIエージェントワークフローに接続する方法

1.はじめに

1.1 目的

本記事は、ノーコードでAIエージェントを開発できるn8nと、Open WebUIを接続する方法を記載します。

なお、本記事はHow to Connect Open WebUI to an n8n AI Agent Workflowを参考にして作成しています。

1.2 想定読者

構築関連は説明していません。

  • Open WebUIの環境をDockerを利用して構築できている方
  • n8nの環境を構築できている方、操作が理解できている方
  • MCP(Model Context Protocol) を理解されている方

1.3 システム構成

以下のようなシステム構成を前提としてます

  • Grok : イーロンマスク率いるX社が提供する大規模LLM
  • Taivily: AIエージェント専用に構築された検索エンジンでAPIを提供しています
  • Open Weather: 天気予報のAPIを提供しています
  • Taivily MCP : TaivilyのAPIを呼び出すMCP(Model Context Protocol) Serverです。
  • Weather MCP : Open WeatherのAPIを呼び出すMCP Serverです。
  • n8n : ノーコードのAIエージェント開発環境です。

注意事項：MCP Serverは、SSEプロトコルで起動している必要があります。stdioしかサポートしていない場合、supergateway等を利用してSSEプロトコルサーバとして起動して下さい。

1.4 Open WebUIとn8nを接続できると何が嬉しいのか？

単純に言うと、Difyと同じことができるということでしょうか。
Open WebUIとLLMだけだと、RAGやMCP Serverと言ったデータベース・サービスやAPIが利用が難しいですが、
n8nを利用することでノーコード(+ローコード)で各種サービスと連動した
AIエージェントのバックエンドサーバを開発できる点です。
Difyでも当然良いですが、DifyはDocker環境が必須になるので、Docker環境が利用できない場合の
選択肢としてn8nは魅力的です。
n8nだけでも良いのですが、Open-WebUIをフロントエンドにすることで、
他のLLMと簡単に使い分けることができます。
(Open-WebUIを使うと、複数のLLMに同時にプロンプトを投げたりとか、多少便利です)

1.5 ゴール

以下のようにOpen-WebUIからn8nを呼び出したチャットができるようになります。
fig1

2.設定手順

2.1 n8nの設定

2.1.1 最終イメージ

最終的に以下の図のワークフローを構築します。(MCPは複数なくても構いません)
fig2

上記の各ノードの設定を記載していきます。

2.1.2 Webhook

最初にWebhookを追加して下さい。Webhookを設定することで、RESTのEndpointとして動作させることができます。
fig3

設定

  • HTTP Method : Postに変更して下さい。(必須)
  • Path : デフォルトのままでも良いですが、簡単にするためにn8nとしています。(オプション)
  • Respond: "Using `Respond to Webhook' Node"にしてください(必須)

URLは2種類払い出されます。イマイチ使い分けが理解できていません・・

2.2.2 AI Agent

AI Agentを追加して下さい。

fig4

設定

  • Source for Prompt : "Define below"に変更して下さい。(必須)
  • Promput(User Message): {{$json.body.chatInput}} に変更して下さい(必須)

上記設定でWebhookから入力されたjson.body.chatInputを参照するようになります。

2.2.3 Model

ご自身が利用されているLLMを追加してください。OpenAI/Gemini/Groq/Claude/Ollama何でも構いません。
fig5

設定

  • Credential to connect with: API Keyを設定して下さい。(必須)
  • Model : 利用したいモデルを選択して下さい。(必須)

上記は、Grok(xAi)を利用した場合の例です。

2.2.4 Simple Memory

次にSimple Memoryを追加して下さい。

fig6

設定

  • Session ID : "Define below"に変更して下さい。(必須)
  • Key : {{ $(‘Webhook’).item.json.body.sessionId }} に変更して下さい(必須)
  • Context Window Length : 5の場合は5回分のチャット履歴が記憶されます。(オプション)

上記で、Webhookから入力されたjson.body.sessionIdをキーとして記憶されます。

2.2.5 MCP Tool

次にMCP Toolを追加して下さい。

fig7

設定

  • SSE Endpoint: MCP Server(SSE)が起動しているURLを指定して下さい。(オプション)
  • Authentication : 必要ならば(オプション)

同様に、他のMCP Toolも追加して下さい。

2.2.6 Respond to Webhook

最後に、Respond to Webhookを追加して下さい。

fig8

設定

  • Respond With : First Incoming Item に変更して下さい。(必須)

これで、最初のWebhookにAI Agentのレスポンスを戻すことができます。

2.2.7 SaveとActive

フローが完成したら画面右上のSaveボタンを押下して保存してください。
また、Activeにしてフローが利用できる状態にして下さい。

fig9

2.2.8 動作確認

Chromeの拡張機能である
Talend API Tester等を利用して、動作確認をしてみましょう。

fig10

設定

  • METHOD : POSTに変更して下さい。(必須)
  • SCHME: Webhookに表示されていたURLに変更して下さい。(必須)
  • HEADERS : これもapplication/jsonに変更してください。(必須)
  • BODY : 図のようにsessionID(ランダムな数字)と、chatInput(LLMに与えたいプロンプト)を設定して下さい。

上記設定でSendして、Reponseが200 OK、BODYにoutputが返却されていればOKです。

2.2 Open-WebUI

2.2.1 N8N Pipeのダウンロード

Open-WebUIにログイン後、「管理者パネル」ー「Functions」タブを開いて下さい。

fig11

注意：上記図はすでに追加された状態です。

手順1. 「Functionを探す」を押下する
別タブでOpen-WebUIのCommunityサイトが開きます。

手順2. Sing Inする
Sign Inしないとダウンロードできないので、Sign Inして下さい。
Sign Inすると以下のような画面に遷移します。

fig12

手順3. Getする
Search Toolで検索するのですが、Functionを選択した後に、N8Nと入力して検索してください。ｋ

fig13

何個か表示されますが、「N8N Pipe」を選択して下さい。
以下のような画面に遷移するので、Getボタンを押下して取り込んで下さい。

fig14

手順4. 保存する
ローカルのOpen-WebUIに以下のような画面に遷移すると思います。右下の保存ボタンを押下して保存して下さい。

fig15

2.2.2 N8N Pipeの設定

Functionの一覧画面に戻った後、N8N Pipeの横にある歯車ボタンを押下して下さい。
以下のような画面に遷移します。

fig16

設定

  • N8N URL : WebhookのURLを入力して下さい。

設定できたら「有効」ボタンを押下して、利用できるようにして下さい。

注意：上記図はdocker環境を利用した場合です。

以上で設定が全て完了しました。

3. 動作確認

3.1 Open-WebUIでの動作確認

Open-WebUIのモデル選択のプルダウンに「N8N Pipe」が表示されるはずです。
選択して、プロンプトに送信すると、N8N側のフローが動作して回答が届きます。

fig17

3.2 N8Nでの動作結果の確認

N8Nで、Executionsのタブを選択すると実行結果の一覧画面に遷移します。

fig18

Workflowのn8nを選択すると、以下のようにフローの実行状態を見ることができます。

fig19

更に各ノードを選択すると、細かなパラメータ含む実行結果を参照することができます。

fig20

4. おわりに

Open-WebUIからn8nを連携させる方法を説明しました。
n8nはMCP Serverだけではなく、多種多様なサービスをすでにサポートしているので、
ワークフローとエージェントを混在させたようなこともできると思います。
また、Webhookだけではなく、SlackやGithubをトリガーに設定することもできるので、
Devin的なAIエージェントも構築できるので、応用範囲が非常に広いOSSでこれから普及するのではないでしょうか。

5.謝辞

n8nの開発チームの皆様、How to Connect Open WebUI to an n8n AI Agent Workflowを執筆されたJes Fink-Jensenさんに感謝です。

Discussion