MCP 서버 마켓플레이스: Cline, Cursor, Windsurf 기능 강화! 꼭 사용하세요!

WorldofAI 구독자 105,000명

요약

이 영상은 Anthropics가 오픈소스로 공개한 mCP(모델 컨텍스트 프로토콜)를 소개하며, AI와 다양한 데이터 소스 및 도구들을 연결하는 플러그인으로서의 역할을 강조합니다. 영상에서는 21st Dev 플러그인, 블렌더 연동, 그리고 Windsurf, Cursor, Cline 등 여러 AI 에이전트를 활용한 실제 데모를 통해 mCP 서버의 활용 가능성을 보여줍니다. 또한 스폰서인 Code Gate를 통해 AI 코드 보안과 효율적인 개발 환경 구축 방법도 설명합니다. 전반적으로 mCP 서버를 이용한 다양한 통합 사례와 마켓플레이스 템플릿 활용법을 안내합니다.

주요 키워드

mCP 모델 컨텍스트 프로토콜 플러그인 Code Gate AI 에이전트 Windsurf Cursor Cline 블렌더 데이터 소스

하이라이트

🔑 mCP는 AI와 데이터 소스를 연결하는 새로운 플러그인 역할을 합니다.
⚡️ Anthropics가 공개한 오픈소스 레포로, 쉽게 확장 가능한 표준을 제공합니다.
🌟 21st Dev 플러그인과 블렌더 연동 데모를 통해 실시간 3D 디자인 구현이 가능합니다.
🚀 Windsurf, Cursor, Cline 등 다양한 AI 에이전트를 활용하는 설정과 데모를 보여줍니다.
📌 Code Gate 스폰서를 통해 AI 개발 시 보안 강화와 효율성 증대를 도모합니다.

용어 설명

mCP (모델 컨텍스트 프로토콜)

AI가 외부 데이터 소스, 파일, 앱, 데이터베이스 등과 연결되어 정보를 주고받을 수 있도록 하는 플러그인 및 표준입니다.

Cline, Cursor, Windsurf

mCP 서버와 연동되어 각각 다른 AI 에이전트로, 사용자가 원하는 작업에 맞춰 다양한 데모와 통합을 지원합니다.

Code Gate

AI 기반 코드 보안 및 관리 솔루션으로, 오픈소스 형태로 제공되어 AI 도구와 데이터 보호에 중점을 둡니다.

21st Dev 플러그인

mCP 기능을 확장하기 위해 개발된 플러그인으로, 컴포넌트 라이브러리를 활용해 커스터마이징이 용이합니다.

Subase

데이터베이스와의 자연스러운 연동을 위해 사용되는 mCP 서버 프로토콜로, AI가 데이터 분석 및 보고서를 생성할 수 있습니다.

영상은 mCP, 즉 모델 컨텍스트 프로토콜에 대해 소개합니다. 오픈소스 레포를 통해 AI와 데이터 소스 연결을 쉽게 한다는 점을 강조합니다.

[00:00] MCP(Model Context Protocol)가 X와 DM에서 큰 관심을 받고 있지만, 많은 사람들이 그 잠재력과 시작 방법을 모르고 있습니다.

[00:18] Anthropic이 공개한 MCP는 AI 어시스턴트를 데이터 소스, 콘텐츠 저장소, 비즈니스 도구와 연결하는 새로운 표준입니다.

21st Dev 플러그인을 예로 들어 mCP의 기능을 시연합니다. 블렌더와의 연동을 통해 실시간 3D 신 제작 사례를 보여줍니다.

[00:45] 21st Dev의 플러그인은 프론트엔드 개발을 위한 컴포넌트 라이브러리와 연동되며, Blender와 통합된 MCP는 3D 디자인 생성을 가능하게 합니다.

[01:43] MCP는 AI 시스템과 다양한 데이터 소스를 표준화된 방식으로 연결하여 개발 효율성을 높이고 시간을 절약해줍니다.

[02:15] Klein, Windsurf, Cursor 등 다양한 AI 에이전트와 MCP 서버의 활용 방법을 소개합니다.

Code Gate를 통해 AI 코드 보안 및 관리를 위한 솔루션을 소개합니다. 간단한 Docker 명령으로 설정할 수 있음을 설명합니다.

[02:27] 스폰서 Code Gate는 AI 코딩 어시스턴트를 위한 오픈소스 보안 솔루션으로, 안전한 개발 환경을 제공합니다.

[03:02] CodeGate를 통해 안전하고 효율적인 개발을 시작할 수 있으며, 간단한 Docker 명령어로 AI 기반 코딩 지원을 보호할 수 있습니다.

[03:17] 개발 환경 설정을 위해 Windsurf, Cursor, Clein을 순차적으로 살펴볼 예정이며, 이는 MCP 서버를 사용하는 최적의 방법입니다.

Windsurf, Cursor, Cline 등 다양한 AI 에이전트의 설정 방법과 데모를 시연합니다. mCP 서버를 통한 Node.js 문서 추출 및 브라우저 자동화 사례를 포함합니다.

[03:34] Windsurf에서는 Cascade 설정을 통해 다양한 모델 컨텍스트 프로토콜 서버를 설정할 수 있으며, 템플릿이나 raw 설정 파일을 통해 MCP 서버를 구성할 수 있습니다.

[03:50] 초보자도 쉽게 사용할 수 있도록 템플릿이 제공되지만, Cursor나 Clein에 비해 템플릿의 수가 제한적입니다.

[04:36] Klein과 Rot code는 자율적인 AI 에이전트로, Klein이 MCP 서버와의 호환성이 더 뛰어나고 자체 마켓플레이스를 보유하고 있습니다.

[04:54] Klein의 마켓플레이스는 브라우저 자동화부터 데이터베이스까지 다양한 카테고리의 ready-made 템플릿을 제공합니다.

[05:31] VS Code 마켓플레이스에서 Klein을 무료로 설치할 수 있으며, VS Code LM API를 통해 Copilot API 키를 무료로 사용할 수 있습니다.

[06:02] MCP 서버의 월별 사용 제한에 대해 설명하고, Node.js 문서 추출을 위한 MCP 서버 생성 과정을 시작합니다.

[06:25] 생성된 MCP 서버가 Node.js 문서의 파일 내용과 메타데이터를 검색하는 기능을 수행하며, AI와 데이터 소스를 연결합니다.

[07:03] 생성된 Node.js MCP 서버를 통해 실제 문서 검색 기능을 시연하고, fs 모듈 문서 내용을 검색하는 예시를 보여줍니다.

[07:43] Puppeteer를 이용한 브라우저 자동화 MCP 서버를 소개하고, 실제 채널 분석 예시를 통해 기능을 시연합니다.

Subase 프로토콜을 이용한 데이터베이스 연결 데모와 전체 마켓플레이스 활용법을 설명합니다. 영상은 시청자에게 다양한 통합 사례와 활용팁을 제공하며 마무리됩니다.

[08:45] Supabase MCP 서버를 소개하며, 데이터베이스 연결과 자연스러운 대화형 쿼리 기능을 설명합니다.

[00:00] 모델 컨텍스트 프로토콜이

[00:02] 제 X 타임라인과 DM에서

[00:05] 많은 관심을 받고 있는 것 같습니다.

[00:08] MCP에 관심을 보이는 분들이 많은데

[00:10] 대부분 실제 잠재력을 모르거나

[00:13] 시작하는 방법을 모르시더라고요.

[00:15] 맥락을 설명해드리자면,

[00:18] 작년 말 Anthropic이

[00:21] 놀라운 오픈소스 프로젝트를 공개했습니다.

[00:23] MCP, 즉 Model Context Protocol인데요.

[00:26] AI 어시스턴트를 데이터 소스와

[00:28] 연결하기 위한 새로운 표준입니다.

[00:31] 콘텐츠 저장소나 비즈니스 도구,

[00:33] 개발 환경 등과 연결할 수 있죠.

[00:36] 쉽게 말하면 AI가 사용할 수 있는

[00:39] 도구나 플러그인이라고 생각하시면 됩니다.

[00:41] 필수 기능에 대한 접근을 간소화하죠.

[00:43] MCP로 무엇을 할 수 있는지 보여드리겠습니다.

[00:45] 21st Dev의 이 플러그인을 보세요.

[00:48] Saras firm cloud에서 만든 플러그인인데요,

[00:51] 이것은 강력한 컴포넌트 라이브러리와 연동되는 MCP입니다.

[00:54] 프론트엔드 개발에 필요한 요소들을

[00:57] 쉽게 찾고 커스터마이즈할 수 있게 해주죠.

[00:59] 이 경우에 MCP는

[01:02] AI를 실시간 데이터와 연결하고,

[01:05] 프론트엔드 개발을 더욱 효율적으로 만듭니다.

[01:07] 여기 또 다른 MCP 서버가 있는데,

[01:09] 이것은 Cloud AI가

[01:11] 3D 디자인 도구인 Blender와 직접 통신할 수 있게 해줍니다.

[01:14] 이 통합을 통해 Claude에게

[01:16] 간단히 프롬프트를 입력하면

[01:18] 미래적인 도시 스카이라인 같은 것을

[01:21] Blender에서 3D 장면으로 생성할 수 있습니다.

[01:24] 이 경우 MCP 서버는

[01:26] Claude와 Blender를 연결하여

[01:29] AI가 명령을 보내고

[01:31] 데이터를 받을 수 있게 해줍니다.

[01:33] 이 데모들을 통해

[01:35] 명확한 아이디어를 얻으셨길 바랍니다.

[01:37] 아직 이해가 안 되셨다면,

[01:39] 영상에서 더 자세히 살펴볼 예정이니 걱정마세요.

[01:42] 본질적으로 이것은

[01:43] 매우 유용한 도구입니다.

[01:46] AI 시스템을 파일, 앱, 데이터베이스 같은

[01:49] 데이터 소스와 연결하는 것을

[01:51] 간단하고 표준화된 방식으로 만들어주거든요.

[01:54] 모든 도구마다 맞춤 연결을

[01:56] 따로 만들 필요 없이,

[01:58] MCP 서버가 범용 플러그처럼 작동하여

[02:01] 시간과 노력을 절약해줍니다.

[02:04] AI 개발을 간소화하고

[02:06] 효율성을 높이며,

[02:08] 더 나은 데이터 접근성으로

[02:10] AI를 더 스마트하게 만들 수 있죠.

[02:13] 모든 것이 안전하고 확장 가능합니다.

[02:15] 오늘은 MCP 서버를

[02:17] Klein, Windsurf, Cursor와 같은

[02:20] 다양한 AI 에이전트와 함께 사용하는 방법을 보여드리겠습니다.

[02:23] 본격적으로 시작하기 전에,

[02:26] 오늘의 스폰서를 소개해드리겠습니다.

[02:27] Code Gate입니다.

[02:30] AI 코딩 어시스턴트를 위한

[02:33] 최고의 보안 솔루션이자

[02:35] AI 프레임워크로,

[02:37] 코드를 안전하게 보호하고 AI 도구를 쉽게 관리하며

[02:40] 더 이상 비밀 유출 걱정이 없습니다.

[02:43] 가장 좋은 점은 완전한 오픈소스라는 거죠.

[02:45] 여러 모델을 사용하거나

[02:47] 민감한 데이터를 관리할 때도

[02:49] Code Gate는 모든 AI 상호작용을 중앙화하고 보호합니다.

[02:52] 작업 공간 관리부터 실시간 위험 감지까지,

[02:55] Code Gate는 여러분의 개발 과정이

[02:58] 안전하게 유지되도록 보장합니다.

[03:00] 개발을 안전하게 유지하면서

[03:02] 안전하고 효율적인 개발을 시작해보세요.

[03:05] 간단한 Docker 명령어로

[03:07] AI 기반 코딩 지원을 보호할 수 있습니다.

[03:09] CodeGate로 당신의 코드를 안전하게 지키세요.

[03:11] 당신의 코드는 안전할 가치가 있습니다.

[03:14] Stack Lock의 CodeGate를 방문해보세요.

[03:17] 개발을 단순화하고 강화하세요.

[03:19] 아래 설명란의 링크를 통해

[03:20] 먼저 Windsurf로 시작하여

[03:21] 이를 설정하는 방법을 보여드리겠습니다.

[03:24] 그 다음 Cursor, 마지막으로 Clein을 보여드릴 건데

[03:26] 이것이 MCP 서버를 사용하는 최선의 방법입니다.

[03:28] Windsurf를 사용하실 경우

[03:31] 설정 탭으로 이동하여

[03:34] Windsurf를 통해 사용하실 수 있습니다.

[03:36] 설정 탭으로 이동한 다음

[03:37] Cascade 설정으로 가시면

[03:40] 다양한 모델 컨텍스트 프로토콜 서버를

[03:43] 시작할 수 있습니다. 제공된 템플릿을

[03:45] 사용하거나 raw 설정 파일을 통해

[03:47] MCP 서버를 직접 편집할 수 있습니다.

[03:50] 초보 개발자의 경우

[03:53] 설정이 약간 어려울 수 있지만

[03:54] 이미 생성된 다양한 템플릿을

[03:56] 사용할 수 있어 쉽게 사용 가능합니다.

[03:58] 미리 만들어진 템플릿을 사용할 수 있지만

[04:00] 지금 말씀드리자면

[04:02] Cursor나 Clein에 비해

[04:05] 다른 에이전트들처럼

[04:06] 템플릿이 많지는 않습니다.

[04:08] Cursor나 Clein에 비해 적은 편이죠.

[04:11] GitHub School과 같은 여러 서버 템플릿이 있어서

[04:28] AI 에이전트가 프롬프트를 기반으로

[04:31] 원하는 MCP 서버를 생성할 수 있게 해줍니다.

[04:34] 하지만 오늘 영상을 만든 주된 이유는

[04:36] Klein과 Rot code 때문입니다.

[04:38] Klein이나 Rot code를 모르시는 분들을 위해

[04:40] 설명드리자면, 이는 기본적으로 자율적인 AI 에이전트입니다.

[04:43] 저는 Klein을 선호하는데

[04:44] Rot code보다 MCP 서버와의

[04:47] 호환성이 더 좋기 때문입니다.

[04:49] Klein이 자체 마켓플레이스를 가지고 있어

[04:52] MCP 서버와 더 잘 작동합니다.

[04:54] 이 마켓플레이스에서는

[04:56] 이미 만들어진 템플릿에

[04:58] 바로 접근할 수 있습니다.

[05:00] Windsurf나 Cursor처럼

[05:02] MCP 서버 설정을 위해

[05:04] 번거로운 과정을 거칠 필요가 없죠.

[05:07] 이미 만들어진 템플릿들이

[05:09] 다양한 카테고리로 준비되어 있어서

[05:11] 브라우저 자동화부터

[05:13] 데이터베이스까지 접근할 수 있습니다.

[05:16] 수많은 카테고리의 서버에 접근할 수 있죠.

[05:19] 제가 설치한 것들 중

[05:20] 몇 가지를 보여드렸는데

[05:22] 오늘은 가장 좋은 것들을

[05:23] 소개해드리고

[05:25] 사용법과 함께

[05:27] Klein으로 직접 만드는 방법도

[05:29] 알려드리겠습니다.

[05:31] Klein이 없으시다면

[05:33] VS Code 마켓플레이스에서

[05:34] 무료로 쉽게 설치할 수 있습니다.

[05:37] 앱 비용 없이

[05:38] 완전히 무료로 설치 가능하며

[05:40] 더욱 좋은 점은 MCP 서버를

[05:43] 무료로 만들고 접근할 수 있다는 것입니다.

[05:46] 설정 탭으로 가서

[05:48] API 제공자를 선택한 다음

[05:50] VS Code LM API를 선택하면

[05:53] Copilot API 키를 무료로 사용할 수 있습니다.

[05:56] 별도의 비용 지불 없이

[06:00] 완전히 무료로 이용 가능합니다.

[06:02] 이것에는 월별 제한이 있습니다.

[06:04] 그점을 유의해 주시고,

[06:05] 어떤 종류의 MCP 서버든 생성할 수 있습니다.

[06:09] 예를 들어, Node.js의 문서를 추출하는

[06:12] MCP 서버를 만들고 싶다면

[06:13] Node.js 문서에서 필요한 내용을 가져오고

[06:16] 필수적인 패키지들을 설치할 것입니다.

[06:19] 이 서버를 실행하는 데 필요한

[06:21] 패키지들이 설치되고 있는 것을

[06:23] 확인할 수 있습니다.

[06:25] 이것은 본질적으로 제가

[06:27] Node.js 문서에서 파일 내용이나 메타데이터를

[06:30] 검색하는 데 도움을 주는 MCP 서버입니다.

[06:33] 대규모 언어 모델은

[06:34] 항상 최신 상태를 유지할 수 없지만,

[06:36] 이 경우에는 데이터 소스를

[06:38] AI와 연결하여 Node.js를

[06:40] 참조할 수 있게 됩니다.

[06:43] MCP 서버가 생성된 것 같고

[06:45] 이제 실제로 접근할 수 있습니다.

[06:48] 접근하기 위해서는 MCP 서버로 가서

[06:49] 설치된 항목으로 이동한 다음

[06:52] 방금 생성한 Node.js를 찾아보면 됩니다.

[06:54] 이것이 바로 생성된 것으로

[06:57] 모듈 문서 가져오기와

[06:59] 문서 검색과 같은 기능이 있습니다.

[07:01] 두 개의 개별 도구를 만들었죠.

[07:03] 이제 우리가 할 수 있는 것은

[07:05] Cine으로 가서 다시 채팅으로 돌아가

[07:09] 'fs 모듈 문서의 내용을 보여줄 수 있나요?'라고

[07:12] 요청하면 생성된 MCP 서버를 사용하여

[07:14] 정확한 내용을 검색할 것입니다.

[07:17] 생성된 서버가 올바른 내용을

[07:19] 가져오는 것을 볼 수 있습니다.

[07:22] 모듈 문서를 가져오고 있고

[07:24] 요청하고 검색한 내용의 맥락을

[07:27] 제공하고 있습니다.

[07:30] 이 모든 것이 우리가 개발한 도구 덕분인데,

[07:32] 이 도구는 검색하고

[07:33] 올바른 모듈을 제공하는 기능이 있습니다.

[07:35] 당신을 위해

[07:37] 보시다시피 제가 찾고 있던 내용에 기반한

[07:39] 정확한 문서를 제공했습니다.

[07:41] 여기 또 다른 유용한 MCP 서버가 있는데

[07:43] 이것은 제가 최근에 마켓플레이스를 통해

[07:47] 설치한 것입니다.

[07:48] 이것은 브라우저 자동화를

[07:51] 도와주는 서버입니다.

[07:53] Puppeteer인데, 이를 통해

[07:56] 스크린샷을 찍을 수 있고

[07:58] 실시간으로 브라우저 자동화를

[08:01] 수행할 수 있습니다.

[08:04] 놀라운 점은 제가

[08:07] Puppeteer에 MCP 서버를 활용하라는

[08:09] 프롬프트를 보냈고, 제 채널에서

[08:11] 지난 7일 동안 가장 인기 있는 영상을

[08:14] 찾으라고 했더니, 도구를 사용해서

[08:17] 스크랩하여 보여주었는데,

[08:19] Manis 영상이 가장 인기있었고 2일 만에 75K 조회수를

[08:22] 기록했다는 것을 알려줬습니다.

[08:24] 이것은 제가 꼭 추천하는 것인데,

[08:25] 정말 대단한 것은 제가

[08:27] 이 MCP 서버를 단 몇 분 만에

[08:29] 만들 수 있었고

[08:31] 이런 내용을 검색할 수 있다는 겁니다.

[08:34] 생각해보세요, 이것을

[08:36] 더 복잡한 작업으로 지시할 수 있어서

[08:37] 여러 페이지를 스크랩하고

[08:40] 로그를 제공할 수도 있습니다.

[08:43] 또 다른 유용한 MCP 서버는

[08:45] Supabase입니다. 이것은

[08:47] Supabase 프로토콜의 MCP 서버를 사용하여

[08:51] 간단한 데이터베이스 연결을

[08:54] 할 수 있게 해주고, 기본적으로

[08:56] 클라이언트 내에서

[08:58] 자연스러운 대화를 가능하게 합니다.

[09:01] 복잡한 쿼리가 필요 없이 AI에게 요청하여

[09:03] 리포트를 생성하거나 데이터베이스를

[09:06] 분석할 수 있습니다. 심지어

[09:08] 풀스택 앱을 쉽게 만들 수 있는데,

[09:10] 이 통합으로 데이터베이스와

[09:12] 시스템 작업이 가능합니다.

[09:15] 이것이 Model Context Protocol의

[09:17] 핵심입니다. Anthropic 팀에게 큰 박수를,

[09:19] 오픈소스로 만들어준 것과

[09:22] Client 팀이

[09:23] 이 마켓플레이스를 개발하여

[09:26] 애드온과 플러그인으로

[09:28] 워크플로우를 향상시킬 수 있게 해준 것에 감사합니다.

[09:30] 이것들을 사용하시기를 추천드립니다.

[09:33] AI가 더 나은 맥락을 얻고

[09:35] 이러한 도구들을 활용하여

[09:38] 작업을 더 효율적이고

[09:40] 생산적으로 실행하는 데 도움이 될 것입니다.

[09:42] 오늘 영상에서 사용한

[09:43] 모든 링크는 설명란에 남겨두겠습니다.

[09:45] 뉴스레터를 구독하시고

[09:46] Patreon과 Twitter도 팔로우해 주세요.

[09:48] 마지막으로 구독과

[09:50] 알림 설정, 좋아요 부탁드리며

[09:51] 이전 영상들도

[09:53] 확인해 주세요. 많은

[09:54] 유익한 콘텐츠가 있습니다.

[09:56] 이것으로 마치겠습니다.

[09:58] 시청해 주셔서 감사합니다.

[09:59] 좋은 하루 보내시고

[10:01] 곧 다시 만나요. 안녕히 계세요!