VS Code에 Context 7 MCP(Model Context Protocol) 서버를 연결하는 방법

안녕하세요! VS Code에 Context 7 MCP(Model Context Protocol) 서버를 연결하는 자세한 단계별 방법을 정리해 드립니다. Context 7은 AI 코딩 어시스턴트(예: GitHub Copilot Chat)가 최신 라이브러리 및 API 문서를 가져와 정확한 컨텍스트를 제공하도록 돕는 도구입니다.

🛠️ VS Code에 Context 7 MCP 연결 단계

Context 7 MCP를 VS Code에 연결하는 가장 일반적인 방법은 settings.json 파일을 수동으로 편집하거나 VS Code의 MCP 서버 기능을 이용하는 것입니다.

방법 1: `settings.json`을 통한 수동 설정 (권장)

이 방법은 Node.js와 **npm(npx)**이 시스템에 설치되어 있어야 합니다. Context 7 MCP는 npm 패키지로 실행됩니다.

VS Code 설정 열기
- VS Code에서 Ctrl + , (Windows/Linux) 또는 Cmd + , (Mac)를 눌러 설정을 엽니다.
- 검색창에 **mcp**를 입력합니다.
- 검색 결과 중 mcp 관련 설정 항목을 찾습니다 (예: Mcp: Servers).
- 해당 설정 옆에 있는 settings.json에서 편집 링크를 클릭합니다.

Context 7 MCP 설정 추가

열린 settings.json 파일에 다음 JSON 스니펫을 추가하거나 기존 mcp.servers 객체 내에 삽입합니다.

JSON

"mcp.servers": {
    "Context7": {
        "type": "stdio",
        "command": "npx",
        "args": [
            "-y",
            "@upstash/context7-mcp@latest"
        ]
    }
}

참고: 이미 mcp.servers 항목이 있다면, Context7 객체만 기존 설정에 추가해야 합니다.

VS Code 재시작 (선택 사항)
- 설정이 즉시 적용되지 않을 경우, VS Code를 완전히 닫았다가 다시 시작합니다.
연결 확인
- 명령 팔레트(Ctrl + Shift + P 또는 Cmd + Shift + P)를 열고 **MCP: List Servers**를 검색하여 실행합니다.
- 목록에 Context7 서버가 표시되는지 확인합니다.

방법 2: MCP 서버 마켓플레이스를 통한 설치 (VS Code 최신 버전에서 지원)

VS Code의 최신 버전은 MCP 서버를 설치할 수 있는 마켓플레이스를 제공할 수 있습니다.

확장 뷰 열기
- 사이드바에서 확장 아이콘(Ctrl + Shift + X 또는 Cmd + Shift + X)을 클릭합니다.
MCP 서버 검색
- 검색창에 **@mcp**를 입력하여 MCP 서버 목록을 확인하거나, 명령 팔레트에서 MCP: Browse Servers 명령을 실행합니다.
Context 7 설치
- 목록에서 Context 7을 찾아 설치(Install) 버튼을 클릭합니다.
- 설치가 완료되면, MCP SERVERS - INSTALLED 섹션에서 Context 7을 확인할 수 있습니다.

🔑 Context 7 API 키 설정 (선택 사항, 필요시)

Context 7의 일부 고급 기능이나 안정적인 사용을 위해 API 키가 필요할 수 있습니다. Context 7 웹사이트에서 발급받은 API 키가 있다면, 다음과 같이 settings.json 설정을 업데이트할 수 있습니다.

API 키를 환경 변수로 설정:
- VS Code 외부에서 시스템 환경 변수로 CONTEXT7_API_KEY를 설정하는 것이 가장 안전합니다.
HTTP 연결을 통한 설정 (대안):
- 일부 설정에서는 stdio 대신 http 유형을 사용하여 API 키를 헤더에 포함할 수 있지만, 위 방법 1의 stdio 방식이 일반적입니다.

Context 7 MCP: Get Documentation Instantly + VS Code Setup 비디오에서는 Context 7 MCP를 VS Code에 설정하는 방법을 시연하고 있습니다.

Context 7 MCP: Get Documentation Instantly + VS Code Setup 이 영상은 Context 7 MCP를 VS Code에 설정하는 방법을 보여줍니다.

VS Code에 Context 7 MCP를 연결하기 위한 Node.js와 **npm(npx)**을 시스템에 설치하는 가장 일반적이고 권장되는 방법을 운영체제별로 자세히 정리해 드립니다.

💻 Node.js와 npm(npx) 설치 방법

Node.js를 설치하면 패키지 관리 도구인 **npm (Node Package Manager)**이 자동으로 함께 설치되며, npx도 npm의 한 기능으로 포함됩니다. npx는 패키지를 설치하지 않고 바로 실행할 수 있게 해주는 도구입니다.

1. 공식 설치 관리자 사용 (권장)

가장 간단하고 일반적인 방법입니다.

Node.js 공식 웹사이트 접속: *
- Node.js 공식 웹사이트(https://nodejs.org/ko/)에 접속합니다.
버전 선택 및 다운로드:
- 보통 두 가지 버전이 있습니다:
  - LTS (Long Term Support, 장기 지원): 안정성이 검증되어 대부분의 사용자에게 권장됩니다.
  - Current (최신 기능): 최신 기능이 포함되지만, 아직 테스트 중일 수 있습니다.
- LTS 버전을 클릭하여 시스템에 맞는 설치 관리자(.msi, .pkg 등)를 다운로드합니다.
설치 진행:
- 다운로드한 파일을 실행하고, 기본 설정을 그대로 두고 설치 마법사를 따라 진행합니다.
- 설치 과정에서 npm과 npx가 자동으로 함께 설치됩니다.

2. 설치 확인

설치가 완료되면 터미널(명령 프롬프트 또는 PowerShell, Terminal 등)을 열고 다음 명령어를 입력하여 정상적으로 설치되었는지 확인합니다.

Node.js 버전 확인:
Bash
```
node -v
```
예시: v20.10.0 (설치된 버전에 따라 다름)
npm 버전 확인:
Bash
```
npm -v
```
예시: 10.2.3 (설치된 버전에 따라 다름)

🍎 macOS 사용자: Homebrew를 사용한 설치 (선택 사항)

macOS 사용자는 패키지 관리자인 Homebrew를 사용하여 Node.js를 설치하는 것이 개발 환경 관리에 더 편리할 수 있습니다.

Homebrew 설치 확인 또는 설치:
- 터미널에서 brew -v를 입력하여 Homebrew가 설치되어 있는지 확인합니다.
- 설치되어 있지 않다면, Homebrew 공식 웹사이트의 지침에 따라 설치합니다.
Node.js 설치:
- 다음 명령어를 터미널에 입력하여 Node.js (npm, npx 포함)를 설치합니다.
Bash
```
brew install node
```
설치 확인:
- 위의 설치 확인 섹션의 명령어를 사용하여 버전을 확인합니다.

🧊 Windows 사용자: NVM for Windows를 사용한 설치 (선택 사항)

Windows 사용자는 **NVM (Node Version Manager)**을 사용하여 여러 버전의 Node.js를 쉽게 전환하며 관리할 수 있습니다.

NVM for Windows 다운로드:
- NVM for Windows GitHub 페이지에서 최신 nvm-setup.exe 파일을 다운로드하여 설치합니다.
Node.js 설치:
- 터미널(관리자 권한으로 실행)을 열고 다음 명령어를 입력하여 LTS 버전의 Node.js를 설치하고 사용하도록 설정합니다.
Bash
```
nvm install lts
nvm use [설치된_lts_버전]  # 예: nvm use 20.10.0
```
설치 확인:
- 위의 설치 확인 섹션의 명령어를 사용하여 버전을 확인합니다.

이제 시스템에 Node.js, npm, npx가 설치되었으므로, 이전 답변에서 안내해 드린 단계에 따라 VS Code의 settings.json에 Context 7 MCP 설정을 추가할 수 있습니다.