VSCode github copilot을 이용한 MCP서버 사용

오늘은 최근 AI분야에서 제일 핫한 MCP를 Visaul Studio Code에서 사용하는 방법을 작성해보려고 한다.

 

우선 MCP를 아주아주 간단하게 설명하자면, Model Context Protocol(MCP)은 LLM(대규모 언어 모델)이 다양한 서비스와 API(GitHub, Google Drive, Figma 등)와 표준화된 방식으로 통신할 수 있게 해주는 프로토콜로, 이는 에이전트나 LLM이 다양한 서비스와 상호작용할 수 있도록 중간 계층 역할을 한다.

즉 여러 Tool들을 Agent가 쉽게 가져다가 쓸 수 있도록 패키징? 해놨다고 생각해야 하나, 아무튼 MCP에 대한 더 자세한 설명은 아래 유튜브들을 보면 좋을 것 같다. 테디노트유튜브, 노마드코더유튜브

 

이 MCP 덕분에 여러 사람들이 개발해 놓은 MCP서버를 이용해서 Agent(llm)이 여러 툴들을 이용해서 실제 복잡한 코드 등을 몰라도 작업을 수행할 수 있게 되었다.

 

대부분 claude desktop 혹은 cursor에서 사용하는 것 같은데, 나는 회사에서 결제해 준 Github copilot을 잘 사용 중이기 때문에 얘한테 mcp를 물려서 사용해 보고자 한다. 

1. VisualStudioCode Insiders 설치

아쉽게도 아직 정식버전 vscode에서는 agent도 지원하지 않는다.(왜지? 이제 agent는 거의 한두 달 정도 된 것 같고 버그도 없어 보이는데)

그래서 Vscode Insider이라는 기존의 파란색 vscode가 아닌 초록색 vscode를 다운로드해야 한다.

 

(물론 예상치 못한 버그들이 있을 수도? 있지만, 나는 아직 버그를 겪어본 적이 없고, 신기능을 빨리 사용해보고 싶은 얼리어답터?이기 때문에 핸드폰이든 뭐든 베타버전 사용하는 걸 좋아한다. TMI)

4/2일 VsCode가 1.99버전으로 업데이트되면서 정식버전에서도 아래에 설명한 모든 기능을 사용할 수 있게 되었다!!

나머지 사용방법은 동일하기 때문에 기본 VsCode를 이용해서 진행하면 된다.

https://code.visualstudio.com/updates/v1_99

March 2025 (version 1.99)

1-1. Github copilot 

이 글을 작성하는 시점인 25.04.01 Vscode Insider의 버전은 1.99.0 이고, 여기서 Github copilot을 활성화시키면 정식 vscode와는 다르게 여러 가지 버튼들이 있는 것이 보인다.

 

쓰면서 익숙해지겠지만, 간단하게 정식버전에서 넘어온 분들께 설명드리자면,

github copilot의 모드는 아래와 같이 3가지 메뉴 Ask,Edit,Agent가 있다.

Ask

Ask 모드는 기본적으로 현재 열려있는 파일에 대해서 답변해 주고, 혹은 파일을 끌어다가 context로 넣어줄 수도 있다. 코드를 직접 수정해주지 않고 채팅형식으로 알려준다. 다양한 모델들을 지원한다. 추가로 Manage Model을 누르면 자신의 외부 api를 이용한 다른 모델들도 사용이 가능하다. (Anthropic, Azure, Gemini, OPenAI, Ollama,OpenRouter..)

즉 왼쪽에 있는 모델들은 github copilot을 결제하면 기본적으로 사용가능한 모델들이고 우측은 자신이 추가로 api를 이용하여 사용할 수 있는 모델이다.

Edit

Edit모드는 ask모드랑 비슷한데 해당 부분에 대해서 코드를 수정해 주고, 해당 변경사항을 받아들일지 거절할지 등을 선택할 수 있다.

Agent

마지막으로 Agent모드는 우리가 아는 그 agent가 맞으며, copilot이 우리 워크스페이스 전체를 확인하여 코드들을 수정해 준다. MCP도 이 Agent 모드에서 사용할 수 있다.

2. VSCode MCP server Setting

2-1. MCP 설정 켜기

위에서 말했듯이, GitHub Copilot Chat의 Agent 모드에서 사용할 수 있는데 그전에 설정을 해줘야 한다. 

1. VS Code 설정에서 mcp를 검색하여 해당 설정을 켜준다

(설정에 적혀있는 데로 settings.json을 열어서 아래 옵션을 true로 바꿔주면 된다.)

"chat.mcp.discovery.enabled": true,

2-2. MCP 서버 추가

2-2-1. MCP서버 찾기

우선 자신이 추가하고자 하는 MCP 서버를 아래 여러 사이트에서 찾아보자

modelcontextprotocol/servers , awesome-mcp-servers , mcpservers.org , zapier , smithery

우선 나는 그중 유명한 smithery에서 MCP서버를 찾아서 등록해 보겠다. 

원하는 MCP 서버를 골랐으면 이제 VSCODE에 등록을 해보자

2-2-2. Settings.json에 직접 추가

Smitery에서 원하는 mcp server을 찾아서 누르면 친절하게 json을 제공해 준다. 

 

저 json 포맷을 복사하여, 아까 vscode의 setting.json을 열어서 mcp 부분에 붙여 넣기 해주면 끝이다. 위에 inputs와 servers부분은 건드리지 말고 servers안에 자신이 원하는 mcp서버 json들을 붙여 넣어주면 된다.(해당 MCP서버 이름부터 복사해 주면 된다. 위의 예시에서는 mcp-youtube-transcript)

추가해주고 나면 아래 이미지에서 볼 수 있듯이 해당 server 설정 위에 서버를 실행시킬 수 있는 버튼이 나오고 버튼을 누르면 MCP서버가 실행되는 방식이다.

 

2-2-3. 명령 팔레트 사용

위처럼 settings.json에 붙여 넣는 식 말고 vscode의 명령 팔레트(Ctrl+Shift+P)에서 MCP: Add Server를 실행하여 추가할 수도 있다. 아래 이미지에서처럼 원하는 방식으로 동일하게 smithery에서 커맨드를 복사하여 붙여 넣어주면 된다. 

3. MCP 서버 사용

마지막으로 이제 MCP 서버를 사용해 보겠다.

우선 Github copilot의 모드를 Agent로 바꿔주면 좌측 상단에 서버모양과 스패너 모양이 보인다.

서버모양을 누르면 start server이라는 버튼이 나오고 이를 눌러야 아까 등록한 mcp 서버들이 켜지게 된다.

이후 스패너 모양을 누르면 agent가 활용할 수 있는 mcp서버의 도구들이 나오게 된다. 

이제 그냥 agent모드에서 알아서 시키면 해당 tool들을 이용해서 작업을 수행하게 된다. 

나는 유튜브요약과 옵시디언 mcp 서버를 추가하였고 이를 활용해서 유튜브를 요약해서 옵시디언에 노트를 추가하도록 시켜봤다. 실제로 옵시디언에도 해당 노트가 잘 추가되는 것을 볼 수 있다.!!!!!!!!!!! 회사에서 지원해준 github copilot을 더욱 유용하게 쓸 수 있게 되었다. 

4. 요약

1. VScode Insider 다운로드

2. Github copilot 활성화

3. vscode 설정에서 MCP 설정 켜기

4. 원하는 MCP 서버 settings.json 혹은 명령어 팔레트 이용해서 등록

5. github copilot agent 모드 사용

 

위의 내용 모두 1.99 release note에 포함되어있으니 자세한 것들은 찾아보면 좋을 것 같다.!!!

March 2025 (version 1.99)