AI 에이전트에 MCP 서버를 추가하는 방법 (FlowiseAI 튜토리얼)

Leon van Zyl 구독자 59,400명

요약

이 영상에서는 Flowise AI에서 기존 LLM 노드를 에이전트 노드로 교체하고 Model Context Protocol(MCP) 서버를 연결해 에이전트가 실시간 기술 문서를 참조하도록 설정하는 과정을 단계별로 설명합니다. Context7 같은 MCP 서버를 등록해 최신 Next.js, Supabase, Tailwind 문서를 가져오는 툴 액션을 추가하고, 이벤트 플래너 앱과 Flowwise Assistant 예제로 동작을 검증합니다. 이를 통해 에이전트의 정확도와 활용 범위를 크게 확장하는 방법을 배울 수 있습니다.

주요 키워드

Model Context Protocol MCP Context7 에이전트 노드 LLM 노드 Flowise AI 툴 액션 Supervisor node Custom MCP

하이라이트

🔑 LLM 노드를 에이전트 노드로 교체해 다양한 툴을 호출할 수 있음을 보여줍니다.
⚡️ MCP(Model Context Protocol)의 개념과 에이전트에 도구를 추가하는 핵심 기능을 안내합니다.
🌟 Context7 MCP 서버로 Next.js, Supabase, Tailwind 등 실시간 기술 문서를 조회해 정확도를 높일 수 있습니다.
📌 Flowise UI에서 Custom MCP 툴을 등록하고 파라미터를 붙여 간단히 서버를 연결하는 과정을 시연합니다.
🔧 resolve library ID와 get library docs 같은 툴 액션으로 문서 경로 탐색과 조회가 자동화됩니다.
🚀 이벤트 플래너 앱 요청 예시로 MCP 연동 후 흐름을 시각적으로 확인해 동작 방식을 검증합니다.
🔄 Flowwise Assistant 예시로 사용자 질문에 실시간 문서를 참고해 답변하는 에이전트를 만드는 방법을 소개합니다.
🎯 단 몇 번의 클릭만으로 에이전트의 기능을 대폭 확장할 수 있음을 강조합니다.
👍 구독과 좋아요 요청으로 커뮤니티 참여를 유도하며 마무리합니다.

용어 설명

MCP

Model Context Protocol(모델 컨텍스트 프로토콜), 에이전트가 외부 도구나 서비스를 호출할 수 있게 해 주는 인터페이스

LLM 노드

Flowise에서 단순히 언어 모델에 입력을 전달해 응답만 생성하는 노드

에이전트 노드

Flowise에서 외부 도구(tool action)를 호출할 수 있는 고급 노드

Context7

최신 기술 문서를 제공하는 대규모 MCP 서버 리포지토리

Supervisor node

Flowise 플로우에서 작업을 위임·조율하는 상위 노드

지난 영상에서 Flowise로 AI 감독 팀을 구성한 과정을 간략히 복기하며, 이번 영상에서는 에이전트에 MCP 서버를 추가해 실시간 문서를 참조하도록 확장할 계획을 소개합니다.

[00:00] 이전 영상에서 FlowWise로 AI 수퍼바이저 팀을 구축했지만, 단순한 LLM 노드만 사용하고 에이전트 노드는 사용하지 않았습니다.

[00:21] 시청자가 Context 7 MCP를 추가하여 에이전트의 실시간 문서 접근 능력을 향상시키는 방법을 요청했습니다.

MCP(Model Context Protocol)의 정의와 역할을 설명하고, 에이전트에 도구를 연결해 최신 버전의 문서를 활용해 출력 정확도를 높이는 이유를 안내합니다.

[00:42] MCP(Model Context Protocol)는 에이전트에 도구를 추가하는 간단한 방법으로, 수백 개의 서버가 존재하며 서비스 제공업체들이 직접 구축합니다.

[01:06] Context 7은 Next.js, Supabase, Tailwind, N8N, FlowWise AI 등의 최신 기술 문서를 포함한 대규모 저장소입니다.

기존 LLM 노드를 삭제하고 에이전트 노드를 추가해 chat.openAI GPT-4.1 모델로 전환한 뒤, 시스템 메시지와 추가 지시사항(use Context7)을 구성하는 과정을 보여줍니다.

[01:39] 소프트웨어 개발팀 향상을 위해 소프트웨어 엔지니어 LLM 노드를 에이전트 노드로 교체하고 MCP 서버를 할당하는 과정을 시작합니다.

[02:29] 에이전트는 LLM 노드와 달리 도구를 호출할 수 있으며, Context 7을 사용하여 최신 문서를 검색하고 최신 기술을 활용하도록 지시합니다.

[03:11] Context 7 사용을 위한 선택적 설정과 대화 끝에 추가 지시사항을 추가하는 방법을 설명합니다.

[03:23] FlowWise에서 MCP 서버를 에이전트에 추가하는 방법을 시연하며, 도구 추가 메뉴에서 MCP 관련 도구들을 보여줍니다.

Flowise의 툴 설정에서 Custom MCP를 선택하고, Context7 GitHub 리포지토리에서 제공하는 MCP 서버 파라미터 객체를 복사해 붙여 넣어 연결하는 방법을 안내합니다.

[03:53] 사용자 정의 MCP를 선택하여 각 서버의 고유한 연결 매개변수를 설정하는 과정을 설명합니다.

[04:08] Context 7의 GitHub 저장소 문서를 참조하여 Claude Desktop과 유사한 설정 방법을 확인하고 필요한 객체를 복사합니다.

[04:45] MCP 서버 연결 성공을 확인하고 두 액션(라이브러리 ID 해결, 라이브러리 문서 가져오기)을 에이전트에 추가합니다.

새로 등록된 resolve library ID, get library docs 툴 액션을 에이전트에 추가하고, 리스트에 값이 표시되는지 확인해 MCP 서버 연결이 성공했음을 검증합니다.

[05:07] 플로우를 완성하고 Next.js를 사용한 이벤트 플래너 앱 개발 요청으로 시스템을 테스트합니다.

"Next.js로 이벤트 플래너 앱을 빌드" 요청을 통해 에이전트가 MCP 툴을 호출해 최신 문서를 참조하는 전체 프로세스 흐름을 시각적으로 확인합니다.

[05:23] 프로세스 플로우를 분석하여 소프트웨어 엔지니어가 두 MCP 도구를 성공적으로 사용하여 Next.js 문서에 접근하고 적절한 정보를 검색했음을 확인합니다.

[06:17] Context7 문서에서 Next.js 문서를 반환하는 MCP 도구의 동작을 확인하고, 에이전트가 최신 Next.js 앱 라우터를 사용한 프로젝트 설정 방법과 모범 사례를 제시합니다.

[06:48] Flowise Assistant라는 새로운 예제를 만들기 시작하며, 에이전트 노드를 추가하고 GPT 4.1 모델을 설정합니다.

친절한 AI 어시스턴트 역할의 에이전트를 추가하고 MCP 서버를 연결해, "chat flows vs agent flows" 차이를 Context7 문서를 기반으로 설명하도록 설정하고 테스트합니다.

[07:13] Flowise AI 관련 질문에 답하는 친근한 AI 어시스턴트로 시스템 메시지를 구성하고, Context7의 최신 문서를 사용하도록 설정합니다.

[07:30] MCP 서버를 도구로 추가하여 두 가지 작업을 선택하고 Flowise Assistant 설정을 완료합니다.

영상이 유용했다면 좋아요·구독을 부탁하며, 다음 Flowise 콘텐츠 예고와 함께 시청자 참여를 독려하고 영상을 마무리합니다.

[07:54] 채팅 플로우와 에이전트 플로우의 차이점에 대해 질문하여 Flowise Assistant를 테스트하고, MCP 서버의 두 도구가 정상적으로 호출되는 것을 확인합니다.

[00:00] 이전 영상에서 FlowWise를 이용해 이 AI

[00:02] 수퍼바이저 팀을 구축했습니다. 이

[00:05] 수퍼바이저 노드는 플로우 내에서 다양한

[00:07] 워커 노드들 간에 작업을 위임하는

[00:10] 역할을 담당했습니다. 그런데 이

[00:12] 솔루션에서는 에이전트 노드를 전혀

[00:14] 사용하지 않고 있습니다. 이들은 단순히

[00:17] 응답을 생성하는 간단한 LLM 노드이고,

[00:19] 그게 전부입니다. 그런데 누군가가 그

[00:21] 영상에 댓글을 달면서 Context 7 MCP

[00:23] 같은 것으로 이를 향상시키는 것을

[00:24] 보고 싶다고 했습니다. 에이전트의

[00:27] 실시간 버전별 문서 접근 능력을

[00:30] 향상시켜서

[00:32] 결과를 더욱 정확하게 만들고 싶다고

[00:35] 했죠. 그래서 FlowWise 에이전트에

[00:36] MCP 서버를 추가하는 방법을 보여주는

[00:39] 간단한 영상을 만들고 싶었습니다.

[00:42] MCP가 처음이시라면, 이는 Model Context

[00:44] Protocol의 줄임말입니다. 간단히 말하면,

[00:47] 에이전트에 도구를 추가하는 간단한

[00:49] 방법입니다. 그리고 이런 종류의

[00:52] 서버가 수백 개, 아니 수천 개나

[00:54] 있습니다. 이 MCP 서버들의 멋진

[00:57] 점은 GitHub 같은 서비스 제공업체

[00:59] 자체에서 에이전트가 자사 서비스와

[01:02] 상호작용하는 데 필요한 모든 도구를

[01:04] 포함한 자체 MCP 서버를 구축한다는

[01:06] 것입니다. Context 7은 최신

[01:09] 문서가 포함된 대규모 저장소입니다.

[01:12] 주로 Next.js, Supabase, Tailwind

[01:14] 같은 기술적 주제와 관련된 문서를

[01:16] 포함하고 있습니다.

[01:20] 그리고 N8N과 물론 FlowWise AI에 대한

[01:23] 문서도 있습니다. 만약 에이전트에게

[01:26] 실시간으로 최신 정보에 접근할 수

[01:28] 있는 능력을 부여하고 싶다면, 이

[01:31] Context 7 MCP를 추가하는 것은

[01:34] 당연한 선택입니다. 그럼 소프트웨어

[01:36] 개발팀을 향상시켜서 FlowWise에

[01:39] MCP 서버를 추가하는 방법을 살펴보겠습니다.

[01:41] 소프트웨어 엔지니어 LLM 노드를

[01:44] 에이전트로 교체하겠습니다. 그리고

[01:46] 그 에이전트에 MCP 서버를 할당하겠습니다.

[01:50] 소프트웨어 엔지니어를 삭제하고

[01:53] 노드 추가로 가서 이번에는

[01:55] 에이전트 노드를 추가해보겠습니다.

[01:58] 이것을 소프트웨어 엔지니어로 이름을 바꾸고

[02:02] 모델 목록에서 Chat OpenAI를

[02:04] 선택하겠습니다. 그리고 제 자격증명을

[02:07] 선택하고, 모델로는 GPT-4o1을

[02:10] 선택하겠습니다. 좋습니다. 그럼

[02:14] 메시지를 추가해보겠습니다. 시스템 역할을

[02:17] 선택하고, 시스템 지시사항으로는

[02:19] 당신은 풀스택 웹 개발자입니다.

[02:22] 수퍼바이저 노드가 제공하는 지시사항을

[02:24] 따르세요. 이는 LLM 노드에서도

[02:26] 정확히 동일했습니다. 하지만 에이전트는

[02:29] LLM 노드와 한 가지 핵심적인 차이점이

[02:32] 있습니다. 도구를 호출할 수 있다는

[02:35] 것입니다. 그럼 추가 지시사항을

[02:37] 넣어보겠습니다. 솔루션에 대해 신중히

[02:40] 생각하세요. Context 7을 사용하여

[02:43] 최신 문서를 검색하고 솔루션이

[02:45] 각 기술의 최신 버전과 기능을

[02:48] 사용하고 있는지 확인하세요. 좋습니다,

[02:50] 저장하겠습니다. 그리고 에이전트가

[02:52] Context 7을 확실히 사용하도록 하기

[02:55] 위해 맨 아래로 스크롤해서 이 입력

[02:58] 메시지에 다음을 추가하겠습니다.

[03:00] 단순히 Context 7을 사용하세요라고

[03:03] 하겠습니다. 시스템 메시지는 대화의

[03:05] 맨 위에 추가되고 중간에 대화가

[03:07] 있을 것입니다. 그리고 저는 에이전트에게

[03:09] 맨 마지막에 다시 한 번 상기시키고

[03:11] context 7을 사용하라고 하는 것입니다. 이것이 전부예요. 이건

[03:14] 선택사항이지만, 만약 문제가 발생하면

[03:16] 언제든지 이 입력 박스를 사용해서

[03:19] 대화 끝에 추가 지시사항을 추가할 수 있습니다.

[03:21] 이제 질문은, 어떻게 MCP 서버를

[03:23] 우리 에이전트에 추가할 수 있을까요? 실제로 이건 정말 쉽습니다.

[03:26] 도구 섹션에서 '도구 추가'를 클릭해보겠습니다.

[03:28] 이 목록에서 FlowWise에서 기본적으로

[03:31] 제공하는 모든 도구 목록을 볼 수 있습니다.

[03:33] MCP를 검색해보면

[03:35] 브레이브 검색 MCP 도구 같은 MCP 전용 도구들을 볼 수 있습니다.

[03:38] 사용자 정의 MCP GitHub, PostgreSQL,

[03:41] 순차적 사고, Slack 그리고 물론

[03:44] 슈퍼 게이트웨이도 있습니다. 하지만 당연히

[03:48] 이 목록에는 context 7이 보이지 않습니다.

[03:51] 그래서 우리가 할 수 있는 건

[03:53] 사용자 정의 MCP를 선택하는 것입니다. 그런 다음

[03:55] 매개변수 섹션에서 MCP 서버

[03:58] 설정을 전달할 수 있습니다. 각 MCP 서버는

[04:02] 고유한 연결 매개변수 목록을 가지고 있습니다.

[04:05] 그래서 우리는 그냥

[04:06] 문서를 확인하면 됩니다. 좋습니다.

[04:08] 이 GitHub 저장소를 스크롤하면

[04:11] 다양한 도구에서 이 MCP 서버를

[04:13] 설치하는 방법에 대한 모든 섹션들을 볼 수 있습니다.

[04:15] FlowWise는 Claude Desktop과 유사한

[04:17] 지시사항을 사용합니다. 그래서

[04:19] 어떤 서버든 설정 지시사항을 찾을 때는

[04:21] Claude Desktop 솔루션을 보시면 됩니다.

[04:23] 이것을 확장하면 MCP 서버를 포함하는

[04:25] 이 객체를 얻게 됩니다. 그리고

[04:28] context 7의 매개변수를 포함하는

[04:30] 이 객체가 있습니다. 우리가 원하는 건

[04:32] 오직 이 객체뿐입니다. 그럼 이걸 복사해보겠습니다.

[04:35] 그리고 FlowWise로 돌아가서

[04:38] 해당 속성들만 붙여넣어보겠습니다. 그런 다음

[04:42] 이 액션 목록을 새로고침합니다. 이제

[04:45] values가 보여야 합니다. 이는 우리가

[04:48] MCP 서버에 성공적으로 연결되었다는 뜻입니다.

[04:51] 이제 이 두 액션 모두 추가해야 합니다.

[04:53] 그래서 각각을 클릭해보겠습니다.

[04:55] 이제 우리 에이전트는 이 두 도구나

[04:57] 액션에 접근할 수 있게 됩니다.

[05:00] 믿기 어렵겠지만, 우리가 해야 할 일은 이게 전부입니다.

[05:02] 그럼 이걸 조건 노드에 연결해보겠습니다.

[05:04] 그리고 루프에 연결해보겠습니다.

[05:07] 좋습니다. 이 플로우를 저장하고

[05:10] 채팅에서 'Next.js를 사용해서

[05:12] 이벤트 플래너 앱을 만들어'라고 말해보겠습니다.

[05:15] 좋습니다. 이런 응답을 받았고

[05:18] 우리가 정말 확인하고 싶은 건 프로세스 플로우에서 무슨 일이 일어났는지입니다.

[05:23] 소프트웨어 엔지니어가 여기서 호출된 것을 볼 수 있습니다.

[05:25] 우리 에이전트가 사용할 수 있는 도구 목록을 볼 수 있습니다.

[05:27] 이걸 확장하면

[05:30] 라이브러리 ID 해결 도구와

[05:32] 두 번째는 라이브러리 문서 가져오기

[05:33] 도구였던 것을 볼 수 있습니다. 그리고 에이전트가

[05:36] 이 두 도구를 모두 사용하기로 결정한 것도 볼 수 있습니다.

[05:37] 맞죠? 우리는 시스템 프롬프트로 시작해서

[05:40] 이 앱을 만들어달라고 요청했습니다.

[05:42] 수퍼바이저가 소프트웨어 개발자에게

[05:45] 앱을 계획하고 만들라고 지시했습니다. 그런 다음 우리 에이전트가

[05:48] 첫 번째 도구를 호출한 것을 볼 수 있습니다.

[05:51] 이 라이브러리 ID 해결 도구는

[05:53] 단순히 context 7에 대한 쿼리로

[05:56] context 7 내에서 Next.js

[05:58] 문서에 대한 올바른 경로를 검색하는 것입니다.

[06:00] 그리고 에이전트가 두 번째 도구를 호출했습니다.

[06:03] 이번에는 올바른 경로에서

[06:06] Next.js 문서를 반환하도록 요청하고 있습니다.

[06:09] 그리고 에이전트가 두 번째 도구를 호출했습니다.

[06:11] 이번에는 Next.js 문서를

[06:13] 올바른 경로에서 반환하도록 요청하고 있습니다.

[06:17] 그리고 주제와 함께

[06:19] 효과적으로 검색 쿼리가 됩니다. 그리고 그것은

[06:22] 물론 다음을 반환합니다

[06:23] Context7 문서에서. 따라서

[06:26] 우리의 에이전트는 이것이 우리가

[06:28] 새 프로젝트를 설정하는 방법이라고 말하고 있습니다

[06:30] 최신 Next.js 앱 라우터를 사용하여 다음

[06:34] 모범 사례와 규칙을 따르는

[06:37] 현재 문서에서 찾을 수 있습니다. 이것은

[06:39] 정말 대단합니다. 매우 간단했죠?

[06:42] 우리는 소프트웨어 개발을

[06:44] 팀을 완전히 새로운 수준으로 끌어올렸습니다. 이제

[06:46] 하나 더 예제를 만들어 보겠습니다. 이것을

[06:49] Flowise Assistant라고 부르겠습니다. 그리고 제가 할 일은

[06:53] 에이전트 노드를 추가하는 것뿐입니다. 이것을 연결해 보겠습니다

[06:56] 이것을 Flowise로 이름을 바꿔보겠습니다

[06:59] Assistant입니다. 그다음 모델의 경우,

[07:02] chat open AI를 사용하고 GPT를 선택해 보겠습니다

[07:06] 4.1입니다. 그다음 메시지에서 다음을 선택해 보겠습니다

[07:09] 시스템 메시지를 보내고 당신은

[07:13] 질문에 답하는 친근한 AI 어시스턴트입니다

[07:16] Flowise AI와 관련된 질문입니다. 사용해 주세요

[07:20] Context7의 최신 문서를

[07:22] 사용자의 질문에 답하기 위해. 좋습니다

[07:24] 이것을 저장해 봅시다. 그다음 아래에서

[07:27] Context7 사용도 추가해 보겠습니다.

[07:30] 그리고 마지막으로 우리의 MCP를 추가해 봅시다

[07:32] 서버입니다. 도구 아래에서 다음을 찾아 봅시다

[07:35] MCP입니다. custom MCP를 선택하고 우리의 추가해 봅시다

[07:39] MCP 서버 구성입니다. 그리고

[07:42] 물론 이 목록을 새로 고쳐야 합니다.

[07:44] 그다음 이 두 가지 작업을 선택해 봅시다.

[07:46] 좋습니다. 이 흐름을 저장해 봅시다. 그리고 우리는

[07:49] 이제 강력한 액세스 권한을 가져야 합니다

[07:51] FlowWise 내에서 Flowise 어시스턴트입니다.

[07:54] 이것을 테스트해 봅시다. 채팅에서

[07:56] 차이점이 무엇인지 물어 봅시다

[07:58] 채팅 플로우와 에이전트 플로우 사이의. 좋습니다. 우리는

[08:01] 스트리밍되는 응답을 받고 있습니다. 하지만

[08:03] 우리가 정말 관심 있는 것은

[08:05] 어떤 도구가 호출되었는지 보는 것입니다. 그리고 할 수 있습니다

[08:07] 이미 MCP의 두 도구를 볼 수 있습니다

[08:10] 서버는 실제로 호출되었습니다. 그리고 만약 우리가

[08:12] 프로세스 플로우를 확장하고 다음을 살펴보면

[08:14] 에이전트, 이 두 도구는 실제로

[08:17] 호출되었습니다. 에이전트가 요청한 것을 볼 수 있습니다

[08:19] Flowise용 라이브러리를 가져오기 위해. 그리고

[08:22] 두 번째 도구를 살펴봅시다.

[08:23] 그리고 실제로 다음을 가리키고 있음을 볼 수 있습니다

[08:25] 주제 채팅이 있는 이러한 Flowise 문서

[08:28] 플로우 대 에이전트 플로우입니다. 바라건대 당신이

[08:30] 이 비디오가 유용하다고 생각했습니다. 만약 그렇다면,

[08:32] 좋아요 버튼을 눌러주세요. 구독해 주세요

[08:34] 더 많은 FlowWise 콘텐츠를 위한 제 채널,

[08:36] 그리고 이 다른 Flowise를 확인해 보세요

[08:38] 우리가 다음을 구축한 여기의 비디오

[08:40] 처음부터 슈퍼바이저 팀을 만들었습니다. 그렇지 않으면,

[08:43] 다음 영상에서 만나겠습니다. 안녕!