Context7 + Klein & RooCode: 이 MCP 서버가 CLINE을 100배 더 효과적으로 만듭니다!

AICodeKing 구독자 71,200명

요약

이 영상에서는 Upstash에서 개발한 Context7 MCP 서버를 소개합니다. Context7은 3,570개 이상의 라이브러리 문서를 벡터 검색과 토큰 제한으로 구조화해 AI 코드 어시스턴트가 최신 API를 정확히 활용하도록 돕습니다. VS Code의 Klein, RooCode와 간단히 연동하는 방법과 주요 도구(resolve library ID, get library docs)의 사용법도 실습합니다. 다만 요약 기능 부재와 CDN 경로 누락 같은 한계가 있으니 보완이 필요하다는 점을 강조합니다.

주요 키워드

Context7 MCP 서버 벡터 검색 토큰 제한 CDN 경로 RAG 검색 resolve library ID get library docs Upstash Klein

하이라이트

🔑 Context7은 업데이트된 문서를 구조화해 AI 코더의 지식 갱신 문제를 해결합니다.
⚡️ 3,570개 이상의 라이브러리를 색인해 벡터 검색과 토큰 제한으로 빠르고 정확한 문맥을 제공합니다.
📌 토큰 한도를 설정하면 필요한 만큼만 문서를 가져와 과도한 컨텍스트 로딩을 방지합니다.
🚀 VS Code에서 Klein, RooCode MCP 서버 설정을 한 번의 복사·붙여넣기로 간단히 끝낼 수 있습니다.
🌟 resolve library ID 도구로 검색어만으로 정확한 라이브러리 ID를 찾아냅니다.
📄 get library docs 도구가 라이브러리 ID를 받아 관련 문서를 반환해 AI 어시스턴트가 참고하게 합니다.
⚠️ 요약 기능이 없어 방대한 문서를 소화하기 어려우며, CDN 경로가 빠져 있어 홀로그램(hallucination) 이슈가 발생할 수 있습니다.
👍 주류 라이브러리(Nuxt.js, Three.js 등)에서는 매우 안정적이며, Upstash의 플랫폼답게 빠른 응답 속도를 자랑합니다.

용어 설명

MCP 서버

AI 기반 코드 어시스턴트를 외부 도구와 연동해 호출하는 서버 인터페이스입니다.

벡터 검색

문서 내용을 숫자 벡터로 변환해 유사도를 기반으로 관련 컨텍스트를 찾아내는 기법입니다.

토큰 제한

불필요한 컨텍스트 과부하를 막기 위해 입력할 최대 토큰(단어 단위) 수를 설정하는 기능입니다.

RAG 검색

Retrieval-Augmented Generation의 약자로, 검색 결과를 생성 모델에 보강해 정확도를 높이는 방식입니다.

CDN 경로

패키지 설치가 필요한 대신 웹에서 직접 라이브러리를 불러오는 URL 경로로, 문서에 명시되지 않으면 모델이 잘못 예측할 수 있습니다.

resolve library ID

기본 검색어를 받아 Context7 색인 내부의 정확한 라이브러리 ID로 매핑해 주는 도구입니다.

get library docs

해당 라이브러리 ID로 문서 컨텍스트를 추출해 반환하는 핵심 도구입니다.

Upstash

벡터(DB) 및 Redis 클라우드 플랫폼으로, Context7 개발사입니다.

AI 코드 어시스턴트가 자주 갖는 지식 업데이트 문제를 설명하고 Context7의 목적을 제시합니다.

[00:25] AI 코더의 주요 문제점인 오래된 지식과 부정확한 CDN 참조에 대해 설명합니다.

[01:17] Context 7의 주요 기능과 3,570개의 라이브러리 문서 인덱싱에 대해 소개합니다.

3,570개 라이브러리 문서를 구조화해 벡터 검색과 토큰 제한 기능을 제공하는 UI를 살펴봅니다.

타임라인 정보가 없습니다.

Perplexity API 기반 자가 에이전트와 비교하며 요약 미지원, CDN 경로 누락 같은 한계를 짚어봅니다.

[02:38] 기존 코드 지원 에이전트와 비교하며 Context 7의 장단점을 설명합니다.

[03:26] CDN 경로 추가 필요성을 언급하고 Klein에서의 설정 방법 소개를 예고합니다.

[03:46] Photogenius AI 스폰서 소개. AI 기반의 올인원 아트 생성기로, 이미지, 비디오, 3D 모델 생성이 가능한 서비스입니다.

AI 이미지·비디오·3D 모델 생성 기능을 제공하는 Photogenius AI의 특징과 할인 코드를 안내합니다.

[04:26] Photogenius AI의 다양한 기능 소개. AI 아바타, 로고, 썸네일 등을 생성할 수 있으며, 10달러부터 시작하고 25% 추가 할인 혜택을 제공합니다.

VS Code에서 Klein 또는 RooCode MCP 서버 탭을 통해 Context7 설정 파일을 복사·붙여넣기로 적용합니다.

[04:58] Klein과 RooCode에서 MCP 서버 설정 방법 설명. GitHub에서 코드를 복사하여 VS Code에서 설정하는 과정을 안내합니다.

resolve library ID와 get library docs 도구의 역할과 규칙 파일에서 토큰 제한 설정 방법을 설명합니다.

[05:46] MCP 서버의 두 가지 주요 도구인 resolve library ID와 get library docs의 기능 설명. library ID를 검색하고 컨텍스트를 반환하는 방식을 설명합니다.

[06:22] 토큰 사용량 설정과 library ID 파일 관리 방식 설명. 작은 주제는 2k 토큰, 필요시 10k 토큰까지 사용하며, ID 재사용으로 API 비용을 절약합니다.

Context7을 사용해 새로운 Agent SDK 예제를 생성하고 라이브러리 ID를 업데이트하는 과정을 시연합니다.

[06:57] OpenAI Agents SDK 사례 언급. 지난달 출시된 새로운 SDK에 대한 컨텍스트 설정 시도를 소개합니다.

[07:10] Context 7을 사용한 간단한 에이전트 생성 방법을 설명합니다. Context 7은 명시적으로 언급해야 작동하며, resolve 도구로 라이브러리 이름을 가져오고 메인 도구로 컨텍스트를 수집합니다.

[07:36] 코드가 정확하고 표준을 잘 따르지만, Amazon Nova SDK나 Dart 문서 등 일부 최신 기술은 아직 지원되지 않습니다. 하지만 Next.js나 Three.js 같은 메인스트림 기술에는 잘 작동합니다.

[08:22] Search MCP와 함께 사용하면 효과적이며, Upstash가 개발한 만큼 성능이 뛰어납니다. 기존 200개의 MCP 도구들과 함께 사용하면 좋은 시너지를 낼 수 있습니다.

메인스트림 라이브러리 지원 현황과 향후 SDK 확장 예측, 추가 CDN 경로 보완을 권장합니다.

타임라인 정보가 없습니다.

[00:00] [음악]

[00:03] [박수]

[00:04] 안녕하세요, 다른 영상에 오신 것을 환영합니다.

[00:08] 최근에 정말 놀라운 새로운 MCP 서버를 발견했는데

[00:12] 이것에 대해 이야기하고 싶었습니다.

[00:14] 이것은 Context 7이라고 불리며

[00:17] Upstach라는 훌륭한 벡터와 Redis DB 플랫폼에서 만들었지만

[00:21] 그것들과는 전혀 관련이 없습니다.

[00:25] 실제로 이것은 MCP 서버를 지원하는

[00:28] AI 코더를 더 신뢰성 있고

[00:30] 특정 작업에서 더 뛰어나게 만들도록 설계되었습니다.

[00:34] 이러한 AI 코더들과 관련된

[00:35] 가장 흔한 오류나 문제 중 하나는

[00:39] 대부분의 경우 이 AI 코더들이

[00:41] 오래된 지식을 가지고 있어서

[00:44] 코드가 구식이 된다는 점입니다.

[00:47] 예를 들어, Claude 3.5 Sonnet은

[00:51] Next.js 15에 대해 모르고

[00:53] 알고 있더라도 CDN 참조나 다른 것들이

[00:57] 때때로 매우

[00:59] 좋지 않습니다.

[01:00] 이는 무엇이 잘못되었는지 이해하려는

[01:03] 많은 사람들을 혼란스럽게 만들고

[01:05] AI에게 이러한 종류의 오류를

[01:08] 수정하도록 요청해도 여전히 할 수 없습니다.

[01:11] CDN 참조나

[01:12] 새로운 구조로 코딩하는 방법을

[01:15] 모르기 때문입니다.

[01:17] 이것이 바로 Context 7이 해결하고자 하는 문제입니다.

[01:21] 기본적으로

[01:23] 가장 표면적인 수준에서 보면

[01:26] 문서들을 가져와서 구조화된 방식으로

[01:28] 분류했습니다. 이것이 그들의 사이트이며

[01:32] 더 시각적인 모습을 볼 수 있고

[01:35] MCP 서버를 사용하고 싶지 않다면

[01:37] 수동으로 복사하여 붙여넣을 수도

[01:40] 있습니다.

[01:41] 현재 약

[01:44] 3,570개의 라이브러리에 대한

[01:47] 문서가 인덱싱되어 있습니다.

[01:49] 라이브러리들과 각각의 문서가

[01:52] 차지하는 토큰 수를

[01:55] 확인할 수 있습니다. 이것을 클릭하면

[01:59] 여기서 내가 원하는 컨텍스트의

[02:01] 크기에 대한 토큰 제한을 설정할 수 있고

[02:04] 검색 쿼리도 설정할 수 있습니다.

[02:07] 기본적으로 RAG 검색과 같은

[02:10] 방식으로 주어진 쿼리를 기반으로

[02:14] 관련된 컨텍스트를 찾아

[02:16] 제공합니다. MCP 서버도

[02:20] 주로 같은 일을 합니다. 미들웨어를

[02:22] 검색하면 이러한 응답을 받고

[02:26] 최대 토큰 수를 줄이면

[02:28] 내용도 더 작아지는데 이는

[02:32] 좋습니다. 기본적으로 문서를

[02:35] 제공하는 것이 주요 작업입니다.

[02:38] 제 채널의 구독자들은

[02:40] 제가 일반적으로 자체

[02:42] 코드 지원 에이전트를 가지고 있다는 것을 아실 텐데

[02:45] 쿼리를 주면 perplexity API를

[02:47] 사용하여 문서를

[02:50] 생성하고 AI 코더가 참조할 수 있게

[02:53] 합니다. 이것도 기본적으로 그렇게 하지만

[02:56] 한 가지 단점은 내용을 더 작은 조각으로

[02:59] 요약할 수 없다는 것입니다.

[03:01] 벡터 검색과 토큰 제한만 가능하고

[03:05] 전체 내용을 맥락에서 파악하여

[03:07] 요약하고 내가 원하는 것만

[03:09] 출력할 수는 없습니다. 이것이

[03:13] 제한점일 수 있습니다. 또한 일반적으로

[03:16] CDN 경로가 문서에 작성되어 있지 않아서

[03:19] 여전히 그런 것들에 대해 환각할 수 있습니다.

[03:22] 제가 해본 간단한

[03:24] 테스트를 기반으로 하면

[03:26] 패키지 관리에 의존하지 않는 많은 앱들을 위해

[03:30] CDN 경로를 추가하는 것을

[03:32] 추천드립니다. 실제로 많은 사람들이

[03:34] 요즘 AI 코더를 이러한 용도로

[03:37] 사용합니다. 이제 Klein에서 어떻게

[03:40] 설정하고 이 MCP 서버를

[03:42] 사용하는지 보여드리겠습니다. 하지만 그전에

[03:46] 그전에 오늘의 스폰서를

[03:48] 소개해 드리겠습니다. Photogenius AI는

[03:51] AI 기반의 올인원 아트 생성기로,

[03:54] 원하는 것을 입력하면

[03:56] 즉시 멋진 비주얼을 만들어냅니다.

[03:58] 이미지 생성, 비디오 생성,

[04:01] 심지어 3D 모델 생성까지

[04:04] Flux, Stable Diffusion,

[04:06] Google의 이미지 생성 모델,

[04:09] V2 비디오 생성 모델, Cling 등

[04:12] 여러분이 생각할 수 있는

[04:14] 모든 이미지나 비디오 생성 모델을

[04:15] 프롬프트만 입력하면 바로

[04:18] 생성할 수 있습니다.

[04:20] 3D 모델도 몇 초 만에

[04:22] 생성할 수 있고,

[04:24] 게다가 고급 AI 이미지 편집도

[04:26] 가능합니다. AI 아바타 생성,

[04:29] 배경 제거, 로고 제작,

[04:31] 이모지 생성, 유튜브

[04:34] 썸네일 생성, 앱 아이콘

[04:36] 생성 등 다양한 기능을 제공하며,

[04:38] 가장 좋은 점은

[04:40] 10달러부터 시작하는 가격과

[04:43] 제 쿠폰 코드 king25를 사용하면

[04:46] 추가로 25% 할인을 받을 수 있다는 것입니다.

[04:49] 꼭 한번

[04:50] 설명란의 링크를 통해

[04:53] photogenius.ai를 방문해서

[04:54] 멋진 작품을 만들어보세요. 다시 본론으로 돌아가서,

[04:58] GitHub 페이지에서 이 코드를 복사하고

[05:00] VS Code를 실행하세요.

[05:04] 이제 Klein이나 RooCode 중

[05:06] Klein을 사용하신다면, MCP 서버 탭으로 가서

[05:10] installed 옵션을 선택하세요.

[05:12] 아래로 스크롤해서

[05:16] configure MCP server 옵션을 선택하면

[05:20] MCP 설정 파일이 열립니다.

[05:23] 여기에 복사한 코드를

[05:25] 붙여넣기하면 준비가 완료됩니다.

[05:28] 잠시 후 시작되면

[05:31] MCP 서버가 여기에 표시됩니다. RooCode도

[05:35] 같은 방식으로 설정할 수 있으며,

[05:37] 프로젝트와 전역 수준에서

[05:39] MCP를 설정할 수 있습니다.

[05:41] 자, 이제 살펴보면

[05:46] 두 가지 도구가 있습니다. resolve library ID와

[05:49] get library docs입니다. library

[05:53] docs는 원하는 컨텍스트를 반환하는

[05:55] 주요 도구인데, 이를 위해서는

[05:58] 정확한 library ID가 필요합니다.

[06:01] 이 library ID를 찾기 위해

[06:04] resolve library ID 도구를 사용하는데,

[06:07] 이는 기본 검색어를 입력받아

[06:10] library ID를 검색하고

[06:12] 그에 따른 컨텍스트를

[06:14] 검색합니다.

[06:16] rules 파일에서는

[06:20] 작은 주제의 경우

[06:22] 최대 2k 토큰만 사용하도록 설정했고,

[06:26] 필요한 경우

[06:28] 10k까지 사용하도록 했습니다. 이렇게 모호하게

[06:31] 설정하면 필요에 따라 유연하게 사용할 수 있죠.

[06:35] 또 다른 설정으로는

[06:37] library ID들의 파일을 유지하도록 했는데,

[06:41] 이렇게 하면 이미 검색한

[06:43] library ID를 다시 찾는 데

[06:46] 시간을 낭비하지 않고

[06:47] 파일에서 바로 참조할 수 있어서

[06:50] API 비용을 절약할 수 있습니다.

[06:53] 이제

[06:55] 한번 시도해 보겠습니다.

[06:57] 지난달 출시된 OpenAI Agents SDK가 있는데

[07:01] 당연히 아무도 이것에 대한

[07:04] 컨텍스트를 가지고 있지 않습니다.

[07:07] 그래서 이걸 이용해서

[07:10] Context 7을 사용해서 간단한 에이전트를 만들어보겠습니다

[07:14] 명시적으로 언급하지 않으면

[07:16] 항상 사용하지는 않기 때문에 말씀드리는 겁니다

[07:18] 이제 보시면 Context 7이

[07:21] 먼저 resolve 도구를 호출해서

[07:24] 라이브러리 이름을 가져오고

[07:27] 그 다음 메인 도구를 사용해서

[07:29] 라이브러리의 컨텍스트를 수집합니다

[07:32] 파라미터들을 정확하게 사용하고 있죠

[07:36] 컨텍스트를 획득하고 나면 완료됩니다

[07:39] 새로운 라이브러리 ID로 마크다운 파일도 업데이트했네요

[07:42] 잘 작동하고 있고 이 코드는 정확합니다

[07:45] 표준을 잘 따르고 있어서

[07:48] 정말 놀랍습니다만 완전히 업데이트된 것은 아닙니다

[07:52] 예를 들어 제가 테스트하던

[07:55] Amazon Nova SDK는 여기 없네요

[07:58] 하지만 점차 성장할 것이고

[08:00] 새로운 SDK들도 지원될 것으로 보입니다

[08:03] 최신 SDK를 항상 지원하는 것은

[08:06] 아직 완벽하지 않습니다

[08:08] Nova SDK도 없고

[08:11] Dart 문서들도 없지만

[08:14] Next.js나 Three.js 같은

[08:16] 메인스트림 기술들에 대해서는

[08:19] 아주 잘 작동할 겁니다

[08:22] 제가 사용하는 것처럼

[08:24] Search MCP와 함께 사용하면

[08:28] 아주 잘 작동할 겁니다

[08:31] Upstash가 만들어서

[08:34] 잘 만들어졌고 빠릅니다

[08:35] 저는 이게 굉장히 멋지다고 생각해서 제 생각을 공유하고 싶었습니다

[08:40] 이미 가지고 있는

[08:41] 200개의 MCP 도구들과 함께 사용하면

[08:44] 정말 좋을 것 같습니다

[08:48] 전반적으로 아주 멋집니다

[08:48] 여러분의 생각도 아래 댓글로 공유해주세요

[08:52] 채널 구독도 해주시고

[08:54] Super Thanks로 후원하거나

[08:57] 채널 멤버십에 가입해서

[08:59] 특별한 혜택도 받아보세요

[09:01] 다음 영상에서 뵙겠습니다. 안녕히 계세요

[09:04] [음악]