# 什麼是 MCP Server，並在 VScode + Github Copilot 中整合 MCP Server

最近 MCP Server 好紅，所以我就想來了解一下到底在做什麼。

## 什麼是 MCP Server？

我就直接引用各位大神所使用的清楚範例。

> MCP(Model Context Protocol) 就是如同 USB type-C 的存在，統合了多種不同的協定，讓你可以用一條線來連接各種不同的設備。

現在各家 AI 大廠都在推廣自己的 AI Client，並在自己的平台內提供各式各樣的服務與工具。

但是這些服務都是封閉的，只能夠用自己的平台來使用。

或著是有一些既存且實用的 API，但他們可能只提供給自己的 AI Client 使用者或是並沒有提供 AI 服務。

所以我們只能透過不斷的複製貼上，或自己整理好要塞入 AI Client 的資料，來讓 LLM 進行運算。

graph TD
    subgraph Before
        Cline  --> Google_Drive
        Cline  --> PostgreSQL
        Cline  --> GitHub
        Cline  --> Slack
        Cline  --> BraveSearch
        Claude --> Google_Drive
        Claude --> PostgreSQL
        Claude --> GitHub
        Claude --> Slack
        Claude --> BraveSearch
    end

所以 MCP 的出現就統合了所有的服務，讓我只要提供一個慣用的 AI Client ，就可以透過 MCP servers 與各家 service 進行溝通。

graph TD
    subgraph After
        Cline  --> MCP_Servers
        Claude --> MCP_Servers
        MCP_Servers --> Google_Drive
        MCP_Servers --> PostgreSQL
        MCP_Servers --> GitHub
        MCP_Servers --> Slack
        MCP_Servers --> BraveSearch
    end

## MCP Servers

MCP Serves 是開源的，他的實作目前大部分是使用 Python 或是 Nodejs，我就先不去研究他到底是怎麼寫的，

不過基本上他就會在裡面去打你想要使用的 Service 的 API，再取回來資料給 AI Client 去處理，最後再呈現給我們。

我們可以在[這邊](https://github.com/modelcontextprotocol/servers)找到很多已經做好的 MCP Servers。

## 整合

因為我有買 Github Copilot，他可以整合 MCP 服務。所以我就用 VScode insider 搭配 Github Copilot 來整合 MCP Servers。

目前就我所知，也可以使用這些

- VScode insider + Cline
- Claude
- Cursor

好，開始整合吧!

### 事前準備

- 安裝 VScode insider
- 擁有 Github Copilot 的帳號
- 安裝 Docker Desktop
- 後面會裝一個 github 的 MCP server，所以等等可以用 VScode 開啟有 git 的 repository 資料夾來測試

### 開始囉

1. 開啟 VScode insider，並在左側的 Extensions 中搜尋 Github Copilot 及 Github Copilot Chat，並安裝。

2. 點選 Vscode insider 左下角的齒輪 > settings，並在搜尋框 MCP > 選擇 User tab

3. 確保 Chat > Mcp: Enabled 有被勾選起來

4. 接著點擊 Model Context Protocol server configuration Edit in settings.json。剛進來會看到有一個 `mcp-server-time`，他本來就在那邊，就先把他註解掉吧。

5. 接著就到 [modelcontextprotocol/servers](https://github.com/modelcontextprotocol/servers) 去下載一些你想玩的 MCP server 吧!基本上點進去都會有 完整的 README 可以看，看是要怎麼安裝即有哪些 API 可以使用。

6. 為了方便，所以我們使用 Docker 來安裝這些 MCP servers。那我們選擇幾個有趣、簡單的來玩一下

- [Time](https://github.com/modelcontextprotocol/servers/tree/main/src/time)
- [github](https://github.com/modelcontextprotocol/servers/tree/main/src/github)
- [filesystem](https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem)

7. 以 github MCP server 為例，點擊進入後，往下滑會先看到一些可以使用的 API 介紹後，就會看到使用 Docker 安裝的 config

8. 我們把他複製並貼到剛剛 vscode 中的 settings.json。把 src 的部分改成你目前的資料夾位置。記得把 GITHUB_PERSONAL_ACCESS_TOKEN 改成你的 token。這個token就去你的 github主頁 > settings > developer settings > personal access tokens > tokens (classic) > generate new token，然後選擇 repo 的權限就可以取得了。

{
  "chat.mcp.enabled": true,
  "mcp": {
    "inputs": [],
    "servers": {
      "github": {
        "command": "docker",
        "args": [
          "run",
          "-i",
          "--rm",
          "-e",
          "GITHUB_PERSONAL_ACCESS_TOKEN",
          "-v",
          "/Users/yangchihyu/Downloads/github:/data",
          "mcp/github"
        ],
        "env": {
          "GITHUB_PERSONAL_ACCESS_TOKEN": "<your token>"
        }
      },
    }
  }
}

9. 最後再點擊一下你 setting.json 中，這段 config 上的 Start。這時你會看到你的 docker desktop 上面會出現一個 mcp/github 的 image，這時就代表你已經安裝成功了。等等發出 request 的時候，也可以來點進這個 container 去看看他是不是被執行了。

10. 現在就安裝好也啟動了，在你的 github copilot chat的地方，把 mode 改成 Agent。

11. 在 Chatbox 的上方會看到 tool 的圖示。他寫個17，表示有17個tool可以使用，點擊他就可以看到有哪些工具，他會用這些工具來完成你想做的事情。


12. 最後最後!!!來玩玩吧!我們來問他，"我最近有哪些repository有commit?這些commit是屬於哪些repository? zh-tw"


13. 來問看看我的github上還有哪些repo


## 後記

最近很流行 Claude desktop + MCP server + intellij

我沒有買 Claude，只有買 github copilot。

所以我就把 VScode + github copilot agent mode + MCP + Intellij 整合在一起囉

我有用到的 MCP 包含
- Intellij
- filesystem
- github

我就請 copilot 幫我寫完 readme 後，在還沒建立 repository 的狀況下，幫我把這個專案推到我的 github 上


好香
但我開始焦慮要失業啦

###### `AI` `git` `vscode` `github`