[Claude Code] MCP 연결 및 사용 (feat. VSCode Extension)

MCP에 대해

MCP(Model Context Protocol)는 플러그인(Plug-in) 같은 것이다.

자연어로 로컬이 아닌 외부 서비스까지 조작할 수 있도록 클로드 코드의 가동 반경을 넓혀주는 것이다.

대표적인 MCP로 Github가 있으며 Supabase DB까지 조작할 수 있다.

 

MCP 연결

터미널에서 /mcp 명령어를 통해 mcp 목록을 확인할 수 있다.

claude mcp add로 MCP를 추가할수 있으며 claude mcp remove로 삭제할 수 있다.

 

많이 쓰는 MCP인 Context7과 Codex MCP를 연결해보자.

claude mcp add --scope project --transport stdio context7 npx -y @upstash/context7-mc
claude mcp add --scope project --transport stdio codex codex mcp-server

 

--scope를 통해 스코프 설정을 하면 프로젝트 루트에 .mcp.json이 생긴다.

만약 터미널 CLI에서만 사용할 거면 필요 없지만,

삽질 경험상 VSCode 클로드 코드 Extension을 사용한다면 이 옵션이 필요하다는 걸 알게 됐다.

옵션 넣기 전 / 넣고 재시작한 후

 

--transport는 stdio와 http 중 하나로 실행 위치를 설정하는 것이다.

• stdio - 로컬 프로세스 실행
• http - 원격 URL 연결

# codex는 로컬에서 실행되는 명령어
claude mcp add --transport stdio codex -- codex mcp-server

# context7도 npx로 로컬 실행
claude mcp add --transport stdio context7 -- npx -y @upstash/context7-mcp
# → Claude가 codex mcp-server 명령어를 직접 실행하고 stdin/stdout으로 통신

# GitHub는 원격 API
claude mcp add --transport http github https://api.githubcopilot.com/mcp/
# → Claude가 URL에 HTTP 요청을 보내서 통신

 

 

Context7 MCP

최신 문서를 기반으로 정보를 읽어오도록 하는 MCP.

Context7에서는 자체적으로 다양한 공식 문서를 수집해두는데 이를 클로드가 부르는 것이다.

 

확인

> 현재 context7 MCP 사용 가능한지 확인해줘 

● context7 MCP가 사용 가능한지 테스트해보겠습니다. 간단한 라이브러리 조회를 시도해보겠습니다.

● context7 - resolve-library-id (MCP)(query: "React documentation", libraryName: "react")
  ⎿  Available Libraries:

     Each result includes:
     … +48 lines (ctrl+o to expand)

● 네, context7 MCP가 정상적으로 사용 가능합니다!

 

실제 사용 예시

> Context7을 사용해서 Next.js에서 최신 다국어 처리 방법을 설명해줘

● Context7 MCP를 사용해서 Next.js의 최신 다국어 처리 방법을 가져오겠습니다.

● context7 - resolve-library-id (MCP)(query: "Next.js internationalization i18n multilingual App Router", libraryName: "next.js")
  ⎿  Available Libraries:

     Each result includes:
     … +48 lines (ctrl+o to expand)

● context7 - query-docs (MCP)(libraryId: "/vercel/next.js/v16.1.0", query: "internationalization i18n multilingual language routing App Router localization locale")
  ⎿  ### Implement Next.js Internationalization (i18n) using Dynamic Routes and generateStaticParams

     Source: https://context7.com/vercel/next.js/llms.txt
     … +143 lines (ctrl+o to expand)

● 네, 이제 Context7 MCP를 사용해서 Next.js 16 최신 문서를 가져왔습니다!

  Next.js 16 App Router에서 i18n 구현 방법

 

 

Codex MCP

실제 사용 예시

내 토큰으로 인사하는 LLM들!

 

 

---

개인 개발보단 협업 시 더 유리할 것 같습니다.