개발자를 위한 MCP 추천(2) - Context7 MCP 설치 및 사용방법(with claude code, gemini cli)

안녕하세요! 갓대희 입니다. :- )

오늘은 이전 개발자를 위한 MCP 들을 소개하는 첫번째 글(Seqeuntial Thinking)에 이어

2번째 글인  "Context7 MCP"에 대해 쓰려고 한다. 

 

 

 Context7 MCP : AI가 최신 문서로 코드를 생성하게 해준다.
초창기 GPT에게 개발 코드를 물어볼때 AI가 deprecated API, 예전 버전의 내용으로 코드를 생성해서 삽질한 경험, 누구나 있을 것이다.
Context7 MCP는 실시간으로 최신 공식 문서를 AI에게 주입해서 이 문제를 해결한다. Upstash에서 개발한 이 오픈소스 도구로 개발 생산성을 향상시켜보자.

 

Context7 이란?

Context7 MCP는 무엇일까요? Upstash에서 개발한 오픈소스 MCP 서버로, 최신 라이브러리 문서와 코드 예제를 실시간으로 AI에게 주입하는 역할을 한다.

간단히 말해, AI 모델의 한계 중 하나인 구식 정보와 할루시네이션 문제를 해결하기 위해 등장한 도구이다. 

 

기존 AI 코딩의 근본적 문제점 💥

LLM의 한계
대규모 언어 모델들은 훈련 시점의 정적 데이터로만 학습되기 때문에 구식 API나 deprecated 메서드 추천, 존재하지 않는 함수를 환각으로 생성, 특정 라이브러리 버전을 고려하지 않은 일반적인 코드 제공이라는 문제가 발생한다.

예를 들어 기존 LLM은 트레이닝 시점 이후에 등장한 새로운 라이브러리 API나 변경사항을 알지 못하고, 그 결과 오래된 코드 예제나 존재하지 않는 함수(할루시네이션)를 제안하기도 한다. 

Context7은 이러한 문제를 해소하고자 LLM의 프롬프트에 실시간으로 공식 문서 내용을 주입하여 최신 정보에 기반한 정확한 응답을 도출하는 역할을 한다.

 

Context7의 혁신적인 작동 원리

Context7이 어떻게 동작하는지 살펴보자.

실시간 문서 주입 프로세스

1. 키워드 감지 : 프롬프트에서 "use context7" 키워드 감지
2. 라이브러리 식별 : 언급된 기술 스택 자동 인식 (FastAPI, Next.js, React Query 등)
3. 문서 조회 : 해당 라이브러리의 최신 공식 문서에서 관련 섹션 파싱
4. 컨텍스트 주입 : 질문 주제에 맞는 문서 내용을 LLM 컨텍스트 윈도우에 삽입
5. 정확한 응답 : 최신 정보를 바탕으로 버전별 정확한 코드 예제 생성

개발 팁
Context7은 밀리세컨드 단위로 작동하기 때문에 개발 속도가 현저히 빨라진다.
게다가 질문의 맥락을 이해해서 관련 문서 섹션만 필터링하므로 불필요한 정보 없이 정확한 내용만 제공받을 수 있어요!

 

Context7 설치 방법

필수 조건

📋 시스템 요구사항

• Node.js 18.0.0 이상 (fetch API 지원 필수)
• MCP 호환 클라이언트 : Claude Desktop, Cursor, Windsurf, VS Code, Zed 등
• 안정적인 인터넷 연결 (실시간 문서 가져오기 위해)

 

 

Claude Desktop 설정

내가 메인으로 쓰는 환경이다. 설정이 가장 간단하고 안정적이다.

claude_desktop_config.json

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
         "-y", 
         "@upstash/context7-mcp@latest"
      ]
    }
  }
}

 

 

 - 설치 확인 

 

Cursor 설정

 - Cursor Settings > Tools & Integrations > New MCP Server

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
         "-y", 
         "@upstash/context7-mcp@latest"
      ]
    }
  }
}

 - 이런 Context7 MCP를 쓰기전에는 Cursor에도 특정 Docs를 지정해서 읽어들이는 기능이 있는데 직접 내가 원하는 문서의 링크를 cursor에 등록하여 사용했다. ( Too Much Information일 수 있지만, 이런 트렌드의 변화해온 과정이 궁금하다면 예전 글을 참고 해서 빠르게 훑어 볼 수 는 있을 것 이다. 하기 url 참고 )

2025.06.19 - [AI/IDE 상황실] - [커서(Cursor AI)] 최적의 Cursor AI 설정을 찾아보자 (with React)

 

 

Claude Code CLI

터미널에서 바로 사용할 수 있는 Claude Code CLI도 Context7을 지원한다.

 - 현재 context7 미설치 확인

 

 - 설치하기 ( 해당 Local 프로젝트에만 설치 )

# 원격 서버 추가

claude mcp add --transport http context7 https://mcp.context7.com/mcp

 

 - 설치하기 ( 전역 ) : 위치는 본인의 버전에 따라 2가지 정도로 추정된다 ( ~/.claude/settings.json 또는 ~/.claude.json )

ex) 해당 본인의 사용자 폴더의 claude.json 파일을 수정하여 직접 파일을 수정하여 주자.

 

Gemini CLI

Gemini CLI에서는 직접 설정 파일에 추가해 보겠다.

 - 현재 연동되어있지 않은 부분 확인 

 

방법1) 설정파일에 직접 추가
 - windows 경로 : C:\Users\사용자계정\.gemini\settings.json

 - 리눅스 계열 : ~/.gemini/settings.json

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": [
		"-y", 
		"@upstash/context7-mcp@latest"
	  ]
    }
  }
}

 

ex) 나의 경우

 

 - 설치 확인 : 정상 연동된 것을 볼 수 있다.

 

사용방법 & 프롬프트 예시

설치가 끝났다면 이제 실제로 사용해보자.

기본 사용법
프롬프트에 "use context7"만 추가하면 된다.
Context7이 자동으로 관련 라이브러리를 식별하고 최신 문서를 가져와서 AI에게 제공 하게된다.

ex) 내 프로젝트의 tailwind css 버전이 너무 오래된 버전이다. 이를 context7을 통해 요청 해보도록 하겠다.

 - Use Context7 을 붙여주자.

/sc:design "Use Context7 Use Sequential Thinking   내 frontend project의 tailwind css가 구버전인것같아. 이를 최신 v4.1.12 버전으로 
마이그레이션 하고싶어."

 

 - Sequential Thinking과 조합을하여 계획을 세우는 모습

 

 - 정상적으로 context7을 사용하려는 모습 > 권한을 허용하여 준다.

 

  - 4.1 버전으로 마이그레이션 계획을 잡는것을 볼 수 있다.

 

 - 완료된 todo List

 

 -  최종 설계 ( 이후 실제 구현 단계는 이 포스팅에서는 너무 부담스런 내용이니 패스 )

 

 - 이런식으로 활용할 수 있고 하기 내용은 AI 추천해준 상황별 예시이니 참고만 해보자.

 

프론트엔드 개발 예제

🌐 Next.js 14 App Router

Next.js 14에서 쿠키의 JWT를 검증하고 
인증되지 않은 사용자를 /login으로 리다이렉트하는 
미들웨어를 만들어줘. use context7

⚛️ React Query v5 & TanStack Router

React Query v5와 TanStack Router를 사용해서 
무한 스크롤이 있는 포스트 목록 페이지를 만들어줘.
사용자가 로그인하지 않으면 로그인 페이지로 리다이렉트해야 해. use context7

🎨 Tailwind CSS 3.4

Tailwind CSS 3.4의 Dynamic Viewport 유닛(dvh)과 
새로운 컨테이너 쿼리를 사용해서 모바일에서 
완벽한 full-height 레이아웃을 만들어줘. use context7

백엔드 개발 예제

🔥 FastAPI + SQLAlchemy

FastAPI에서 JWT 인증과 RBAC 권한 시스템이 포함된 
사용자 관리 CRUD API를 만들어줘. PostgreSQL과 
SQLAlchemy 2.0을 사용해서. use context7

🍃 MongoDB Aggregation

MongoDB에서 주문 데이터를 월별로 그룹핑하고 
총액을 계산하는 복잡한 aggregation 파이프라인을 작성해줘.
조회 성능 최적화도 고려해서. use context7

클라우드 & DevOps 예제

☁️ Cloudflare Workers

Cloudflare Worker로 JSON API 응답을 
5분간 캐시하고 CORS 헤더를 설정하는 
프록시 서버를 만들어줘. use context7

💳 Stripe Payment Intent v2024

Stripe의 최신 Payment Intent API로 
구독 결제 시스템을 구현해줘. 
웹훅으로 결제 상태 동기화도 포함해서. use context7

Context7의 고급 기능

🔧 주요 도구들

• resolve-library-id: 일반적인 라이브러리 이름을 Context7 호환 ID로 변환
• get-library-docs: Context7 ID를 사용해서 특정 주제의 최신 문서 가져오기
• 자동 라이브러리 감지: 프롬프트에서 언급된 기술 스택 자동 식별
• 문맥 기반 필터링: 질문 의도에 맞는 문서 섹션만 발췌
• 버전별 호환성: 사용 중인 라이브러리 버전에 맞는 예제 제공

 

Context7과 다른 MCP 서버 연동 예시

MCP 서버 조합

• Context7 + GitHub MCP: 최신 문서 + 실제 프로젝트 코드 분석
• Context7 + PostgreSQL MCP: 최신 라이브러리 + 데이터베이스 연동
• Context7 + File System MCP: 최신 문서 + 로컬 파일 작업
• Context7 + Slack MCP: 개발 문서 + 팀 커뮤니케이션 자동화

 

정리

• 실시간 문서 주입의 위력: Context7 덕분에 AI가 최신 API를 정확하게 사용하는 코드를 생성할 수 있게 되었습니다.
• 개발 속도 향상: 더 이상 탭을 왔다갔다하면서 공식 문서를 확인할 필요가 없어졌어요.
• 에러 감소: deprecated된 API나 환각으로 인한 코드 오류가 현저히 줄어들었습니다.
• MCP 생태계의 가능성: Context7은 MCP의 힘을 보여주는 완벽한 예시입니다. 앞으로 더 많은 유용한 MCP 서버들이 나올 것 같아요.

 

자주 묻는 질문 ❓

Q: Context7은 무료인가요?

A: 네, Context7은 완전 무료이고 오픈소스입니다. Upstash에서 개발하고 유지보수하고 있어요.

Q: 모든 라이브러리가 지원되나요?

A: 주요 라이브러리들은 대부분 지원되고, GitHub에서 새로운 라이브러리 추가 요청도 받고 있습니다. 지원되지 않는 라이브러리가 있다면 이슈를 등록해보세요!

Q: 인터넷 연결이 없어도 작동하나요?

A: 아니요, Context7은 실시간으로 최신 문서를 가져오기 때문에 인터넷 연결이 필요합니다.

Q: 회사 내부 라이브러리도 추가할 수 있나요?

A: 현재는 공개 라이브러리만 지원하지만, 로컬에서 Context7을 포크해서 내부 문서 시스템과 연동하는 것은 가능합니다.

참고 자료

• Context7 GitHub 저장소 - 소스코드와 최신 업데이트
• Model Context Protocol 공식 문서 - MCP 프로토콜 이해
• Upstash Context7 블로그 - 상세한 기술 설명
• MCP 서버 저장소 - 다른 유용한 MCP 서버들