DEVOCEAN

목적

No-Code 자동화 툴인 n8n과 Open WebUI를 활용하여 간단한 예제를 만들어보고자 합니다.

n8n이란?

• 공식 website: https://n8n.io/

n8n의 Docs를 확인해보면, API가 있는 다양한 서비스들을 연결하거나 No-Code 또는 Low-Code로 데이터를 조작할 수 있도록 도와주는 자동화된 워크플로우 툴입니다.

• 커스터마이징 가능: 고도로 유연한 워크플로우와 커스텀 노드를 구축할 수 있음

• 편리함: n8n을 npm이나 Docker로 사용할 수 있고(Self-Hosted) 클라우드로도 사용 가능

• 개인정보 보호 중심: 개인정보 보호와 보안을 위한 n8n 자체 호스팅

n8n Self-hosted 방식은 Docker 혹은 npm으로 설치할 수 있습니다. 사내 개발환경에서 docker 사용이 불가하기 때문에ㅠㅠ npm으로 설치하였습니다.

• npm: https://docs.n8n.io/hosting/installation/npm/

• docker: https://docs.n8n.io/hosting/installation/docker/

npm 사용시 node 버전은 18 버전 이상이여야 합니다. npm install n8n -g 명령어로 글로벌하게 다운받아 사용해주시면 됩니다.

n8n과 Open WebUI의 조합

Open WebUI와 LLM 워크플로우는 챗봇 중심의 간단한 답변 시스템을 만들 수 있습니다.

하지만 n8n을 활용하면 다양한 역할을 하는 노드들을 엮어 AI 에이전트의 서버를 개발할 수 있다는 점입니다.

또한, 저처럼 백엔드 개발하시는 분들은 불필요하게 프론트엔드 작업을 할 수고가 적어지는 것 같습니다.

n8n 워크플로우 및 시스템 구성

이 예제에서 만들어 볼 간단한 workflow를 구성해 볼 것입니다.

1. Webhook

외부의 request를 트리거로 작성된 workflow를 시작하게 하는 노드입니다. 즉, 특정 이벤트 발생시 workflow를 실행하는 노드입니다.

Webhook 설정에서 HTTP Method(DELETE, GET, POST, PATCH, HEAD, PUT)을 선택할 수 있으며, Path, Authentication, Respond 등 선택하여 이벤트를 받아올 수 있습니다.

• Respond

  • Immediately: 요청 받자마자 즉시 응답, 워크플로우가 끝나는 것을 기다리지 않고 바로 응답을 돌려줌, 즉, 워크플로우의 실행 결과와 응답 내용이 아무런 관계가 없을 때 “받았습니다”만 빨리 알려주고 싶은 경우에 사용

  • When last node finishes: 워크플로우의 마지막 노드까지 실행이 끝나고 나서 응답을 돌려줌, 예를 들어서 외부 서비스인 Slack의 응답값을 이용하고 워크플로우 실행의 결과를 응답으로 보내야할 때 사용함, 워크플로우를 어떻게 구성했느냐에 따라 시간이 초과되어 외부서비스가 timeout 날 가능성이 있음

  • Using ‘Respond to Webhook’ Node: Webhook 노드 에서는 요청을 받아만두고 워크플로우 안에서 Respond to Webhook 노드를 이용하여 내가 원하는 시점에 응답하도록 함, 즉, 조건에 따라 다른 응답 시점과 내용도 자유롭게 커스터마이징해서 사용

이 예제에서는

• POST HTTP METHOD

• Path: n8n

• Respond: Using ‘Respond to Webhook’ Node

  으로 설정하고 진행하겠습니다.

• Test URL: http://localhost:5678/webhook-test/n8n

• Production URL: http://localhost:5678/webhook/n8n

AI Agent

Webhook과 바로 연결된 AI Agent node를 생성하여 연결해보도록 하겠습니다.

• Source for Prompt (User Message): Define below

• Prompt (User Message): {{$json.body.chatInput}}

  • webhook에서 입력한 json.body.chatInput을 참조하게 됨(open WebUI에서 Function 입력 기본값, 변경가능)

• Language Model: OpenAI Chat Model (다른 모델도 사용가능)

  • Credential to connect with: OpenAI의 API Key 추가

  • Model: gpt-4.1-mini

• Memory: Simple Memory

  • Session ID: Define below

  • Key: {{ $ ( 'Webhook').item.json.body.sessionId }}

  • Context Window Length: 5

• Tool: MCP Client\

  • SSE Endpoint: MCP Server(SSE)가 시작되는 URL 지정

  • Authentication : 필요한 경우 (선택 사항)

Respond to Webhook

Webhook 노드를 Using 'Respond to Webhook' node 로 설정했기 때문에, Respond to Webhook 노드 설정이 필요합니다.

• Respond With: 외부 요청에 응답할 데이터를 어디서 가져올지 정함

  • All Incoming Items: 들어온 모든 데이터를 JSON 배열로 응답

  • Binary File: 워크플로우 중간에 처리된 파일을 응답으로 직접 전송, HTTP Header에 Content-Type도 파일 확장자에 맞게 자동 설정됨

  • First Incoming Item: 들어온 데이터 중 첫번째 item 만 응답(JSON 객체 타입)

  • JSON: JSON 에디터에 직접 json 응답을 작성하여 지정하여 이 값이 그대로 나감

  • JWT Token: JWT 토큰 형식으로 응답 전송, Secret로 설정

  • No Data: 204 No Content 같은걸 나타낼때 사용, 받기는 했으나 응답할 내용이 없을 때

  • Redirect: 브라우저나 클라이언트를 다른 주소로 보냄, Location Header 자동 설정됨

  • Text: text/plain으로 응답

여기서는 First Incoming Item 사용

Workflow 저장 및 활성화

Save하여 진행상황을 저장하고, Inactive를 Active로 전환하여 플로우를 실행할 수 있도록 변경하면 됩니다.

확인해보기

Execute workflow 버튼을 눌러 지금까지 구성한 Workflow를 확인해보겠습니다.

저는 Postman을 이용하여 n8n webhook에 트리거를 주었습니다.

• HTTP Method: POST

• URL: http://localhost:5678/webhook-test/n8n

• Body

{
	"chatInput": "{chat input string}",
	"sessionId": "{memory에 key가 될 값}"
}

200 OK status code와 함께 model이 생성한 output을 응답으로 받은 것을 확인할 수 있습니다.

그렇다면, n8n으로 만든 workflow와 Open WebUI를 연결해보도록 하겠습니다.

2. Open WebUI

Open WebUI는 로컬 환경에서 LLM 모델을 적용하고 웹 인터페이스로 다양한 상호작용을 할 수 있는 환경을 제공합니다.

간단하게 설치과정을 요약하자면, docker, pip 등 방식이 있는데 마찬가지로 사내환경에서 docker가 안되기 때문에… pip로 설치하였습니다.

• Quick Start: https://docs.openwebui.com/getting-started/quick-start/

저는 파이썬 개발은 PyCharm을 이용하고 있어서, Python Packages에 open-webui를 검색하여 설치하였습니다.

Open WebUI 서비스 구동은 open-webui serve 로 실행시키면 됩니다.

Open WebUI와 n8n을 연동하자

Open WebUI를 실행시키고 로그인을 진행한 후,

1. 관리자 패널 > 함수 > 함수 검색 클릭

2. 새로운 창에서 Functions - N8N Pipe 검색

3. 목록에서 N8N Pipe 클릭, open webui 주소를 localhost:8080 설정하고 Import to WebUI

4. Function 그대로 저장

5. N8N Pipe Function 옆에 톱니바퀴를 눌러서 N8N Url(http://localhost:5678/webhook-test/n8n)으로 수정 및 실행

   
   

6. 메인에서 N8N Pipe로 설정 후, 채팅창에 원하는 말을 입력(chatInput)

   
   

마지막으로, chatInput을 아무거나 입력해서 보내면 성공적으로 n8n으로부터 응답이 오는 것을 알 수 있습니다.

앞으로 적용해보고 싶은 것들?

RAG와 MCP server를 추가해서, 더 다양한 데이터를 기반으로 업무와 관련된 정확한 답변을 얻을 수 있도록 하고 싶습니다.

조금씩 공부해보면서 블로그 글도 올려보겠습니다. 감사합니다!!