GitHub Copilot + MCP Server 串接 VSCode 打造 AI 開發流程教學

發表於 2025-05-22 分類於 AI

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

近代來講，AI 開發已經成為工程師必備的技能之一，但是我們在使用 AI 工具時，總是會遇到一些狀況，如：AI 回傳的內容不如預期，或是 AI 無法理解我們的需求，這些問題都會影響我們的開發效率，所以為了解決這個問題，MCP Server 應運而生。

GitHub Copilot + MCP Server

前言

什麼是 MCP Server

簡單來講 MCP（Model Context Protocol）是一種 AI 協議，概念就跟 HTTP 協議一樣，只要大家都遵守這個協議，那麼就可以互相串接/溝通…

如果要解釋這一大串的話，我覺得實在很難懂，所以我想簡單一點解釋：

「大家講好一個遊戲規則，然後大家都遵守這個遊戲規則，就可以一起玩這個遊戲。」

為什麼這樣講呢？每個服務商都有自己的規則，像是 GitHub、Figma、Google 等等，這些服務都有自己的 API，而這些 API 都有服務商自己的遊戲規則，但 AI 不可能都懂這些規則，所以我們透過一個顧問來幫我們處理這些事情，這個中介人就是 MCP Server。

以 GitHub 為例，當我們透過 GitHub Copilot 來發起一個請求時，GitHub Copilot 會先分析、拆解這個請求，當分析出你這個請求內容跟 GitHub 有關時，就會跑去跟 MCP Server 説：「ㄟㄟ，我這邊有一個請求是跟 GitHub 有關的，你可以幫我跟 GitHub 詢問一下這些東西在哪嗎？」，然後 MCP Server 就會去翻他的手冊（API 文件），然後告訴 GitHub Copilot：「這個東西在這裡」，然後再依照你的需求來執行/回應給你結果。

透過這種方式 AI 的準確度可以大幅度的增加，而且也可以讓 AI 知道你在講什麼，這樣就不會出現 AI 回傳的內容不如預期的狀況了。

那麼講到現在，我們也差不多要進入正題了，在正題開始之前，你必須要準備好以下的環境（並安裝好）：

準備好以上我們才能夠往下繼續唷～

設定並取得 MCP Server

那我們該如何找到自己要的 MCP Server 呢？取得的方式有兩處：

你可以從這兩處找到你想要嘗試的 MCP Server，那麼這邊我就挑選 GitHub 的 MCP Server 作為示範

GitHub MCP Server

這邊要特別提醒一下，當你點擊進去之後，這個儲存庫會是棄用的，所以你還要再點一下 https://github.com/github/github-mcp-server 才能到最新版的

GitHub MCP Server

那麼接下來該怎麼做呢？你可能會找不到任何 Docker 跟安裝指令，因為 GitHub MCP Server 的安裝方式是透過這兩個標籤來進行安裝的：

其實這兩個標籤都有幫各位寫好相關安裝連結

https://insiders.vscode.dev/redirect/mcp/install?name=github&inputs=%5B%7B%22id%22%3A%22github_token%22%2C%22type%22%3A%22promptString%22%2C%22description%22%3A%22GitHub%20Personal%20Access%20Token%22%2C%22password%22%3Atrue%7D%5D&config=%7B%22command%22%3A%22docker%22%2C%22args%22%3A%5B%22run%22%2C%22-i%22%2C%22--rm%22%2C%22-e%22%2C%22GITHUB_PERSONAL_ACCESS_TOKEN%22%2C%22ghcr.io%2Fgithub%2Fgithub-mcp-server%22%5D%2C%22env%22%3A%7B%22GITHUB_PERSONAL_ACCESS_TOKEN%22%3A%22%24%7Binput%3Agithub_token%7D%22%7D%7D

這邊我示範的是 VSCode 正式版，因為 Insiders 屬於測試版本，建議一般使用者避免使用。

當你點下去之後，會跳出一個視窗，請選擇「安裝伺服器」

安裝伺服器

接著你的 VSCode 就會跳出 setting.json 的畫面，內容如下：

{
"mcp": {
        "servers": {
            "github": {
                "command": "docker",
                "args": [
                    "run",
                    "-i",
                    "--rm",
                    "-e",
                    "GITHUB_PERSONAL_ACCESS_TOKEN",
                    "ghcr.io/github/github-mcp-server"
                ],
                "env": {
                    "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}"
                }
            }
        },
        "inputs": [
            {
                "id": "github_token",
                "type": "promptString",
                "description": "GitHub Personal Access Token",
                "password": true
            }
        ]
    }
}