개발자를 위한 MCP 추천(1) - Context7 MCP 설치 및 사용방법 : "use context7" 한 줄로 AI가 최신 Next.js App Router 코드를 쓰게 하는 법

2026년 3월 · 개발자를 위한 MCP 추천 시리즈

"MCP가 죽었다"말도 나오는데, 그래도 현시점 쓸만한 MCP 10개

2025년에 썼던 개발자용 MCP 시리즈들이, 이제 상당 부분 구버전이 됐다.
생태계가 빠르게 변했고, 새로 등장한 도구들도 많다.
2026년 3월, 다시 한번 실제로 써보고 쓸 만한 것들만 골라 정리해려고 한다.

이 시리즈를 다시 쓰는 이유

지난 2월 말, 필자가 "MCP는 죽었다, CLI 만세 — Eric Holmes의 도발적 주장"이라는 글을 정리한 적이 있다. Eric Holmes가 주장한 핵심은 간단하다. LLM은 이미 CLI에 능숙하다. 그렇다면 MCP라는 별도의 추상 계층이 굳이 필요한가?

실제로 Claude Code 환경에서 MCP 대신 CLI로 해결되는 경우가 꽤 많다. 디버깅도 쉽고, 별도 프로세스 관리도 없고, 기존 인증도 그대로 쓸 수 있다. 그 글에서 공감하신 분들이 많았다.
그럼에도 불구하고, MCP만이 줄 수 있는 가치가 분명히 존재한다.

 

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

오늘은 개발자를 위한 MCP 시리즈 중에서 "Context7 MCP"에 대해 알아보려고 한다.

 

AI 코딩 도구를 쓰다 보면 한 번쯤 겪는 상황이 있다. Next.js 최신 App Router로 코드 짜달라고 했더니 Pages Router로 짜준다거나, 이미 deprecated된 API를 당당하게 추천해 준다거나. Context7은 바로 이 문제를 해결하기 위해 나온 MCP다.

 

Context7 MCP : AI가 항상 최신 문서로 코드를 생성하게 해준다
LLM은 학습 시점 이후의 라이브러리 변경사항을 모른다. Context7은 프롬프트에 "use context7"만 붙이면 해당 라이브러리의 최신 공식 문서를 실시간으로 AI 컨텍스트에 주입해준다. deprecated API 추천, 할루시네이션 코드 생성 — 이 두 문제를 한 번에 해결한다.

목차

1. Context7 MCP란?
2. 기존 AI 코딩의 근본적 문제점
3. Context7의 작동 원리
4. 설치 방법
5. 주요 Tools 소개
6. 지원 라이브러리 목록
7. "use context7" 매직 키워드 활용법
8. 활용 예시 — Context7 전후 비교
9. 주의사항 및 트러블슈팅
10. Context7 없이도 최신 문서를 참조하는 방법
11. 결론

1. Context7 MCP란?

Context7 MCP는 Upstash에서 개발한 오픈소스 MCP 서버다. 핵심 기능은 하나다 — 최신 라이브러리 공식 문서와 코드 예제를 AI 컨텍스트에 실시간으로 주입하는 것.

Claude, Cursor, Windsurf 등 MCP를 지원하는 어떤 AI 코딩 도구에도 붙일 수 있고, 패키지명은 @upstash/context7-mcp다.

GitHub: https://github.com/upstash/context7

 

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

Context7이 왜 필요한지 먼저 이해해야 한다.

LLM의 구조적 한계
대형 언어 모델은 특정 시점에 수집된 데이터로 학습된다. 학습 이후에 라이브러리가 업데이트되어도 모델은 이를 알 수 없다. 그 결과:

• 이미 deprecated된 API를 자신 있게 추천
• 존재하지 않는 함수를 할루시네이션으로 생성
• 구버전 패턴으로 코드를 작성해 실제로 실행하면 에러 발생

 

구체적인 사례

Next.js를 예로 들면, Pages Router 시절 코드와 App Router 시절 코드는 데이터 페칭 방식부터 완전히 다르다. 학습 시점에 따라 AI가 엉뚱한 패턴을 추천하는 경우가 생긴다.

// Context7 없이 — AI가 구버전 패턴을 추천하는 상황 (예시)
// Next.js App Router를 요청했는데 Pages Router 방식이 나옴

export async function getServerSideProps() {
  // Pages Router 방식 — App Router에서는 동작하지 않음
  const res = await fetch('https://api.example.com/data')
  const data = await res.json()
  return { props: { data } }
}

 

3. Context7의 작동 원리

Context7의 동작 흐름은 단순하고 명쾌하다.

실시간 문서 주입 프로세스

1. 키워드 감지 — 프롬프트에서 "use context7" 키워드 인식
2. 라이브러리 식별 — 언급된 기술 스택 자동 파악 (Next.js, React, Supabase 등)
3. ID 변환 — resolve-library-id 툴로 라이브러리명을 Context7 ID로 변환
4. 문서 조회 — query-docs 툴로 최신 공식 문서 관련 섹션 파싱
5. 컨텍스트 주입 — 파싱된 문서 스니펫을 AI 컨텍스트 윈도우에 삽입
6. 정확한 코드 생성 — 최신 문서 기반으로 올바른 코드 응답

 

4. 설치 방법

Node.js v18 이상이 필요하다.

하기 방법3가지를 제시했지만, 사실은 요즘은 더 쉽게 AI와 자연어로 설치 요청을 하면 된다. 하지만 이론적인 내용, 원리를 최대한 이해하려고 하는게 좋다고 생각하고 여러 설치 방법도 읽고 넘어가면 좋을 것 같아 몇가지 설치 방법에 대해서도 남겨 놓으려 한다. 

 

ex) 공식 문서 링크를 주거나 https://github.com/upstash/context7 그냥 자연어로 context7 mcp 설치해줘.

 - 이와 같이 데충 말해도 찰떡같이 해주는 시절이 왔다.

  

방법 1. Claude Code 대화형 설치 (권장)

터미널에서 Claude Code를 열고 다음 명령을 실행한다.

# API 키 없이 (무료, 요청 제한 있음)
claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp

# API 키 포함 (권장 — 더 높은 요청 한도)
claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp --api-key YOUR_API_KEY

API 키 발급
무료 API 키는 context7.com/dashboard에서 발급받을 수 있다. API 키 없이도 사용 가능하지만 더 낮은 rate limit이 적용된다. API 키를 사용하면 더 높은 한도가 적용된다. 정확한 플랜별 한도는 대시보드에서 확인을 권장한다.

 

방법 2. settings.json 직접 수정

Claude Code의 MCP 설정 파일에 직접 추가할 수도 있다. ~/.claude/claude_desktop_config.json (Claude Desktop의 경우) 또는 프로젝트 루트의 .claude/settings.json에 아래 내용을 추가한다.

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

// API 키를 포함하려면:
{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp", "--api-key", "YOUR_API_KEY"]
    }
  }
}

 

방법 3. Smithery CLI 원클릭 설치

npx -y @smithery/cli install @upstash/context7-mcp --client claude

 

설치 확인

Claude Code에서 다음 명령으로 MCP 서버 목록을 확인한다.

claude mcp list

context7가 목록에 나타나면 정상적으로 설치된 것이다.

 

5. 주요 Tools 소개

Context7 MCP는 두 가지 핵심 Tool을 제공한다. (출처: upstash/context7 공식 README)

 

Tool 1. resolve-library-id

일반적인 라이브러리 이름을 Context7 데이터베이스에서 사용하는 고유 ID로 변환한다.

입력 예시: "next.js"
출력 예시: "/vercel/next.js"

라이브러리 이름을 검색하면 신뢰도 점수(trust score)와 문서 커버리지 기준으로 가장 적합한 ID를 반환한다. 같은 이름의 라이브러리가 여러 개라면 가장 신뢰도가 높은 것을 우선한다.

// resolve-library-id 사용 예시 (AI가 자동으로 호출)
{
  "tool": "resolve-library-id",
  "input": {
    "libraryName": "react query"
  }
}
// 반환: "/tanstack/query"

 

Tool 2. query-docs

Context7 ID와 질의어를 받아 해당 라이브러리의 최신 공식 문서를 가져온다. 구체적인 질문을 query 파라미터로 전달하면 관련 섹션의 문서를 반환한다.

도구 이름 변경 안내: 구버전 문서에는 get-library-docs로 기재된 경우가 있으나, 현재 공식 최신 이름은 query-docs다. (출처: upstash/context7 한국어 README)

// query-docs 사용 예시 (AI가 자동으로 호출)
{
  "tool": "query-docs",
  "input": {
    "libraryId": "/vercel/next.js",          // resolve-library-id 반환값
    "query": "server component data fetching",  // 필수 — 검색할 질의어
    "tokens": 5000                              // 기본값 5000, 최대 컨텍스트 윈도우까지
  }
}

알아두면 좋은 점
두 Tool 모두 직접 호출할 필요 없다. 프롬프트에 "use context7"를 포함하면 AI가 알아서 두 Tool을 순서대로 호출해서 최신 문서를 가져온다. 완전히 자동이다.

 

6. 지원 라이브러리 목록

Context7은 빠르게 변화하는 라이브러리/프레임워크에 특히 유용하다. 아래는 주요 지원 라이브러리 목록이다. (출처: Context7 공식 문서 기준, 실제 지원 여부는 context7.com에서 확인 권장)

카테고리	라이브러리	Context7 ID 예시
프론트엔드 프레임워크	Next.js, React, Vue, Astro, Nuxt	/vercel/next.js
CSS / UI	Tailwind CSS, shadcn/ui, Radix UI	/tailwindlabs/tailwindcss
상태 관리 / 데이터 페칭	TanStack Query, Zustand, Jotai, SWR	/tanstack/query
백엔드 / BaaS	Supabase, Firebase, Prisma, Drizzle	/supabase/supabase
Python 백엔드	FastAPI, Django, Flask, SQLAlchemy	/tiangolo/fastapi
AI / ML	LangChain, LlamaIndex, Hugging Face	/langchain-ai/langchain
테스트	Vitest, Jest, Playwright, Cypress	/vitest-dev/vitest
런타임 / 번들러	Bun, Vite, esbuild, Rollup	/oven-sh/bun

마이너 라이브러리는?
덜 유명한 라이브러리는 Context7 데이터베이스에 없을 수 있다. 이 경우 resolve-library-id가 결과를 반환하지 않는다. context7.com에서 라이브러리 추가 요청이 가능하다.

 

7. "use context7" 매직 키워드 활용법

Context7의 핵심 사용법은 아주 간단하다. 프롬프트 어딘가에 "use context7"를 넣으면 된다.

 

기본 사용법

# 기본 형태
Next.js App Router에서 서버 컴포넌트로 데이터 페칭하는 방법 알려줘. use context7

# 특정 버전 명시
Tailwind CSS v4에서 커스텀 컬러 설정하는 방법 알려줘. use context7

# 여러 라이브러리
Supabase와 Drizzle ORM을 함께 쓰는 방법 코드로 보여줘. use context7

 

사실 예전엔 저렇게 명시적으로 use context7이라고 호출 하는 않으면 잘 동작하지 않았지만, 이제는 너무 똑똑해진 시대에 알아서 Mcp를 서치해서 사용하는 모습도 볼수도 있을 것 이다.

 

자동화 설정 (매번 타이핑 없이)

매번 "use context7"를 입력하기 귀찮다면, Claude Code의 커스텀 룰이나 CLAUDE.md에 다음을 추가하면 자동으로 적용된다.

# CLAUDE.md 또는 .claude/rules/*.md 에 추가
코드 관련 질문에서 라이브러리나 프레임워크가 언급되면
항상 use context7을 적용해서 최신 공식 문서를 참조할 것.

Claude Plugin으로도 사용 가능
claude.com에서 Context7을 플러그인으로 설치하면 claude.com 웹 인터페이스에서도 동일하게 "use context7"로 활용할 수 있다.

 

8. 활용 예시 — Context7 전후 비교

실제로 Context7을 사용하면 어떤 차이가 나는지, 대화 흐름과 코드 결과를 비교해 보자.

 

예시 1: Next.js 데이터 페칭 — Before / After

Context7 없이 (기존 방식)

사용자: Next.js에서 서버사이드로 데이터 페칭하는 코드 작성해줘

Claude: Next.js에서 서버사이드 데이터 페칭은 getServerSideProps를 사용합니다...

AI 응답 예시 (구버전 패턴)

// pages/products.js — Pages Router 방식 (구버전)
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/products')
  const products = await res.json()
  return { props: { products } }
}

export default function Products({ products }) {
  return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>
}

// App Router 프로젝트에서 실행하면 동작하지 않음

 

Context7 사용 후

사용자: Next.js에서 서버사이드로 데이터 페칭하는 코드 작성해줘. use context7

 

Claude: resolve-library-id("next.js") → /vercel/next.js

query-docs("/vercel/next.js", "server side data fetching") → 최신 App Router 문서 조회

Next.js App Router에서는 Server Component에서 직접 async/await로 데이터를 가져옵니다. getServerSideProps는 Pages Router 전용이므로 App Router에서는 사용하지 않습니다...

AI 응답 예시 (최신 App Router 패턴)

// app/products/page.tsx — App Router 방식 (최신)
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }  // ISR: 1시간마다 재검증
  })
  if (!res.ok) throw new Error('Failed to fetch products')
  return res.json()
}

export default async function ProductsPage() {
  const products = await getProducts()  // Server Component에서 직접 await

  return (
    <ul>
      {products.map((p: { id: string; name: string }) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  )
}

// App Router 최신 패턴 — Server Component에서 async/await 직접 사용

Context7을 사용하면 AI가 최신 Next.js 문서를 참조해서 App Router에 맞는 Server Component 패턴, ISR 설정 등을 정확하게 코드로 제시한다.

 

예시 2: Tailwind CSS v3 → v4 마이그레이션

Tailwind CSS는 v4에서 설정 방식이 근본적으로 바뀌었다. 학습 시점에 따라 AI가 v3 방식을 추천할 수 있다.

사용자: Tailwind CSS에서 커스텀 색상 추가하는 방법 알려줘

Claude: tailwind.config.js의 theme.extend.colors에 추가하면 됩니다...

AI 응답 (Tailwind v3 방식 — v4에서는 동작하지 않음)

// tailwind.config.js — v3 방식
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1a73e8',
      },
    },
  },
}
// Tailwind v4는 tailwind.config.js를 사용하지 않음

사용자: Tailwind CSS v4에서 커스텀 색상 추가하는 방법 알려줘. use context7

 

Claude: resolve-library-id("tailwind css") → /tailwindlabs/tailwindcss

query-docs("/tailwindlabs/tailwindcss", "custom colors theme")

Tailwind CSS v4에서는 tailwind.config.js 대신 CSS 파일에서 직접 @theme 지시어로 커스텀 값을 정의합니다...

AI 응답 (Tailwind v4 최신 방식)

/* app.css — Tailwind v4 방식: CSS에서 직접 테마 정의 */
@import "tailwindcss";

@theme {
  --color-brand: #1a73e8;
  --color-brand-light: #4a9af5;
  --color-brand-dark: #0d47a1;
}

/* 사용: <div class="bg-brand text-brand-light"> */
/* v4 최신 패턴 — tailwind.config.js 없이 CSS만으로 테마 설정 */

핵심 포인트
Tailwind v3 → v4는 설정 파일 자체가 바뀐 큰 변화다. Context7 없이는 AI가 v3 방식(tailwind.config.js)을 추천할 가능성이 높다. "use context7"을 붙이면 v4의 CSS 기반 @theme 방식을 정확하게 안내해준다.

 

예시 3: 라이브러리 검색부터 코드 생성까지 전체 흐름

Context7의 두 Tool이 순서대로 호출되는 전체 흐름을 보여주는 예시다.

사용자: React Query로 무한 스크롤 구현하는 코드 짜줘. use context7

 

Claude: TanStack Query (React Query) 문서를 조회하겠습니다.

Step 1: resolve-library-id("react query") → /tanstack/query

Step 2: query-docs("/tanstack/query", "infinite scroll useInfiniteQuery", tokens: 5000)

→ TanStack Query v5 공식 문서에서 useInfiniteQuery 관련 섹션 3개 조회됨

TanStack Query v5에서는 useInfiniteQuery의 API가 변경되었습니다. getNextPageParam을 옵션에서 직접 정의하며, initialPageParam이 필수입니다...

AI 응답 — TanStack Query v5 최신 패턴

import { useInfiniteQuery } from '@tanstack/react-query'
import { useInView } from 'react-intersection-observer'
import { useEffect } from 'react'

function ProductList() {
  const { ref, inView } = useInView()

  const {
    data, fetchNextPage, hasNextPage, isFetchingNextPage
  } = useInfiniteQuery({
    queryKey: ['products'],
    queryFn: ({ pageParam }) =>
      fetch(`/api/products?cursor=${pageParam}`).then(r => r.json()),
    initialPageParam: 0,               // v5 필수 — v4에서는 없었음
    getNextPageParam: (lastPage) => lastPage.nextCursor,
  })

  useEffect(() => {
    if (inView && hasNextPage) fetchNextPage()
  }, [inView, hasNextPage, fetchNextPage])

  return (
    <>
      {data?.pages.map((page) =>
        page.items.map((item) => <div key={item.id}>{item.name}</div>)
      )}
      <div ref={ref}>
        {isFetchingNextPage && '로딩 중...'}
      </div>
    </>
  )
}
// v5 필수 옵션 initialPageParam 포함 — Context7이 최신 문서를 참조한 결과

v4 → v5 차이가 중요한 이유
TanStack Query v5에서 initialPageParam이 필수가 되었다. Context7 없이 v4 기준으로 코드를 받으면 이 옵션이 빠져 있어 런타임 에러가 발생한다. 이런 미묘한 버전 차이를 Context7이 정확히 잡아준다.

 

9. 주의사항 및 트러블슈팅

자주 겪는 문제들

문제 1: rate limit 초과
API 키 없이 사용할 경우 낮은 rate limit이 적용되며, 초과하면 429 Too Many Requests 에러가 발생한다. 정확한 한도는 플랜에 따라 다르며 공식 문서에서 확인한다.
해결: context7.com/dashboard에서 API 키를 발급받아 설치 시 --api-key 옵션으로 전달하면 더 높은 한도가 적용된다.

문제 2: 라이브러리를 찾지 못하는 경우
resolve-library-id가 결과를 반환하지 않으면 해당 라이브러리가 Context7 데이터베이스에 없는 것이다.
해결: context7.com에서 라이브러리 추가 요청이 가능하다. 또는 라이브러리 이름을 더 정확하게 입력해 보거나 GitHub URL로 시도해본다.

문제 3: MCP 서버가 시작되지 않음
Node.js 버전이 v18 미만이면 실행되지 않는다.
해결: node --version으로 버전 확인 후 Node.js v18 이상으로 업그레이드한다.

문제 4: GitHub Copilot(VSCode)에서 get-library-docs 동작 안 함
일부 환경에서 Tool 호출 방식 차이로 동작하지 않는 경우가 보고되어 있다. (GitHub Issue #202)
해결: Claude Code 또는 Cursor 환경에서 사용을 권장한다.

 

10. Context7 없이도 최신 문서를 참조하는 방법

Context7 MCP를 설치하지 않거나, 지원하지 않는 라이브러리를 사용할 때 활용할 수 있는 대안이다.

 

방법 1. Claude Code WebFetch로 공식 문서 직접 읽기

Claude Code에는 URL을 직접 읽는 WebFetch 도구가 내장되어 있다. 공식 문서 URL을 직접 전달하면 Context7 없이도 최신 내용을 참조할 수 있다.

# 프롬프트 예시 — URL을 직접 전달
"https://nextjs.org/docs/app/building-your-application/data-fetching 를 읽고
 App Router 방식으로 데이터 페칭 코드 짜줘"

"https://tailwindcss.com/docs/v4-beta 공식 문서 참고해서
 Tailwind v4 마이그레이션 체크리스트 정리해줘"

 

방법 2. npm 명령어로 버전 정보 빠르게 확인

Claude Code Bash 도구로 npm 명령어를 실행하면 현재 최신 버전과 패키지 정보를 즉시 확인할 수 있다.

# 최신 버전 확인
npm info react version
npm info next version
npm info @tanstack/react-query version

# 패키지 상세 정보 (peer deps, 지원 Node 버전 등)
npm view tailwindcss

# 설치된 패키지 버전 확인
npm list next react

 

방법 비교

방법	최신성	편의성	정확성	추천 상황
Context7 MCP	최신	자동 (키워드 하나)	높음	일상적인 코딩 — 주요 라이브러리
WebFetch (직접 URL)	최신	수동 (URL 입력)	높음	특정 페이지를 정확히 알 때, 마이너 라이브러리
npm info / view	최신	간단	중간 (버전만)	버전 확인, peer deps 파악
모델 학습 지식	구버전 위험	자동	낮음 (단순 문법 외)	기본 문법 질문만 권장

권장 조합
Context7에 등록된 주요 라이브러리는 Context7 MCP로, 마이너 라이브러리나 특정 페이지가 필요할 때는 WebFetch로 URL을 직접 넘기는 방식을 병행하면 대부분의 상황을 커버할 수 있다.

 

11. 결론

Context7 MCP는 AI 코딩 도구의 가장 오래된 불만 중 하나 — 구식 코드 추천 — 를 깔끔하게 해결한다. 설치는 명령어 한 줄이고, 사용은 "use context7" 네 글자면 충분하다.

특히 Next.js, React, Tailwind CSS처럼 빠르게 변화하는 프레임워크를 매일 쓰는 개발자라면 체감 효과가 크다. 무료로 시작할 수 있으니 지금 바로 설치해보자.

Context7 MCP 핵심 요약

• 패키지: @upstash/context7-mcp
• 설치: claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp
• 사용: 프롬프트에 "use context7" 추가
• Tools: resolve-library-id, query-docs
• 무료 API 키: context7.com/dashboard (한도는 플랜별 상이 — 대시보드 확인)
• Node.js v18 이상 필요

 

참고: GitHub - upstash/context7 / Context7 공식 문서 / Upstash 블로그