打造 AI Agent 專屬 MCP Server：整合 GitHub Copilot Chat 的完整實作教學

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

Google AD

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

Liker 讚賞

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

MCP Server 現在非常之紅，各大服務商都跟著在釋出自己家的 MCP Server，那麼為了讓自己更理解 MCP Server 的運作原理，那當然就是要自己來做一個 MCP Server 啦！而這一篇將會帶你從零開始，搭建一個屬於自己的 MCP Server，並且搭配 GitHub Copilot Chat 來使用，讓我們可以更方便的使用 MCP Server。

MCP Server

前言

準備環境

開始之前，請優先準備好以下環境：

VSCode
Node.js
GitHub Copilot

想要做一個 MCP Server 也要有一個主題來做為我們的範本，這裡我們就使用六角學院所提供的 todolist api 來做為我們的範本，這個 API 提供了許多的功能，像是新增、刪除、修改等等的功能，這些功能將成為我們 MCP Server 實作的練習範本。

那麼首先請你先打開終端機，並輸入以下指令，建立一個 todolist-hexschool-mcp 的資料夾：

1	mkdir todolist-hexschool-mcp

接著請移動到這個資料夾裡面：

1	cd todolist-hexschool-mcp

然後初始化一下這個專案：

1	npm init -y

初始化完畢之後，這個專案就會產生一個 package.json 的檔案，這個檔案裡面會有一些基本的資訊，像是專案的名稱、版本、描述等等的資訊。

在 MCP 官方網站上面是建議你使用 @types/node、typescript 來開發，但是我這個專案我希望盡可能簡單一點，好懂一點，所以我們只需要安裝以下即可：

1	npm install @modelcontextprotocol/sdk zod axios

這邊我也簡單說明一下這兩個套件：

@modelcontextprotocol/sdk：這是 MCP Server 的核心套件，我們會使用這個套件來建立我們的 MCP Server。
zod：這是用來做資料驗證的套件，我們會使用這個套件來驗證我們的資料是否正確。

接著打開 package.json，並新增以下屬性使專案使用 ES Module 語法：

1
2
3

{
  "type": "module",
}

簡單來講就是將這個專案的模組化，這樣我們就可以使用 ES Module 的語法來撰寫程式碼了。

最後再來建立一個 index.js 檔案，這個檔案就是我們的主程式，這個檔案會是我們的 MCP Server 的進入點。

1	touch index.js

到目前為止，我們已經準備差不多了，如果沒有問題的話，我們就來準備撰寫程式碼吧！

建立 MCP Server 初始環境

基本上起手式很簡單，我們先引入這幾隻檔案

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import axios from "axios";
import { z } from "zod"; // 後面才會用到

引入完畢後，接著要來實例化 MCP Server

const server = new McpServer({
  name: "hexschool-todolist",
  version: "1.0.0",
});

McpServer 的建構子需要傳入一個物件，這個物件裡面有兩個屬性，分別是 name 和 version，這兩個屬性是必填的，這邊的 name 是我們的 MCP Server 的名稱，version 是我們的 MCP Server 的版本。

然後最後面再補一個伺服器啟動的呼叫即可：

async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("六角學院 TodoList MCP Server 啟動中...");
}

main().catch((error) => {
  console.error("Fatal error in main():", error);
  process.exit(1);
});

到這邊為止，我們已經把 MCP Server 的基本架構搭建完成了，接下來我們要來撰寫一些功能，讓這個 MCP Server 可以實際運作起來。

撰寫 Tool

接下來我們要使用 server 中的一個方法，這個方法叫做 tool，這個方法類似於 OpenAI 在講的 Function Calling/Tools Calling 的功能，這個方法可以讓我們定義一些工具，然後讓 AI 可以去呼叫這些工具來完成一些任務。

那我們要先做什麼呢？

以 TodoList API 為例，第一個動作就是先「註冊帳號」，接著才是「登入帳號」，所以我們可以先舉例一個使用者可能的自然語言輸入：

1	我想要註冊一個 todolist 帳號，帳號是 [email protected]，密碼是 example123，暱稱是 example

那麼當 AI 接收到這個輸入的時候，它就會知道使用者想要註冊一個帳號，然後就會去呼叫我們定義好的 tool，然後這個 tool 就會去呼叫 API 來完成這個任務。

首先，透過 Swagger 文件我們可以知道這個 API 的網址是 POST https://todolist-api.hexschool.io/users/sign_up，然後要傳送的資料格式是：

{
  "email": "[email protected]",
  "password": "example",
  "nickname": "example"
}

如果以純 JavaScript 的寫法來說，我們可以這樣寫：

import axios from "axios";

const API_URL = "https://todolist-api.hexschool.io/users/sign_up";

const res = await axios.post(API_URL, {
  email: "[email protected]",
  password: "example123",
  nickname: "example"
});

非常的簡單且單純，但是因為我們要透過 server.tool 來呼叫這個 API，所以我們要把這個 API 的網址和資料格式都定義在 tool 裡面，這樣 AI 才可以知道要怎麼去呼叫這個 API。

而 server.tool 的寫法大概是這樣：

server.tool(
  "工具名稱", // 需要為英文名稱
  "工具描述",
  {
    // 參數驗證
  },
  async (input) => {
    // 實際執行邏輯

    // 回傳給 AI 的內容
    return {
      content: [
        {
          type: "text",
          text: "回傳的內容",
        },
      ],
    };
  },
)

透過上面的範例，我們就可以知道 server.tool 的寫法了，這邊就允許我直接貼上程式碼：

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import axios from "axios";
import { z } from "zod";

const API_URL = "https://todolist-api.hexschool.io/users/sign_up";

const server = new McpServer({
  name: "hexschool-todolist",
  version: "1.0.0",
});

server.tool(
  "hexschool_todolist_sign_up",
  "註冊一個帳號",
  {
    email: z.string().email(),
    password: z.string(),
    nickname: z.string(),
  },
  async (input) => {
    const { email, password, nickname } = input;
    const res = await axios.post(API_URL, {
      email,
      password,
      nickname,
    });

    return {
      content: [{
        type: "text",
        text: '註冊成功',
      }]
    }
  }
);

async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("六角學院 TodoList MCP Server 啟動中...");
}

main().catch((error) => {
  console.error("Fatal error in main():", error);
  process.exit(1);
});

以上方 server.tool 的運作來講，AI + MCP Server 運作概念類似於以下流程：

使用者跟 AI 説想要註冊一個 Todolist 帳號
AI 分析需要使用「hexschool_todolist_sign_up」這個工具
接著「hexschool_todolist_sign_up」這個工具會被呼叫
工具會接收到 AI 傳入的參數（email、password、nickname），並同時透過 zod 驗證參數格式
呼叫完畢之後，會將結果回傳給 AI
AI 會將結果回傳給使用者

以上就是我們的 server.tool 的運作流程。

測試 MCP Server

那我們該如何測試這個 MCP Server 呢？使用 node index.js 嗎？

不，因為我們要搭配 GitHub Copilot Chat 來使用，為了避免污染 VSCode Global 的 setting.json 檔案，所以要請你輸入以下指令：

1	mkdir .vscode

接著建立一個 mcp.json 檔案

1	touch .vscode/mcp.json

上面這兩個檔案是在這個專案底下建立一個專案用的 .vscode 資料夾，這個資料夾裡面會有一個 mcp.json 的檔案，這個檔案是用來設定 MCP Server 的。

接著打開 .vscode/mcp.json，並輸入以下內容：

{
  "servers": {
    "todolist-hexschool-mcp": {
      "type": "stdio",
      "command": "node",
      "args": [
        "/Users/rayxu/todolist-hexschool-mcp/src/index.js"
      ]
    }
  }
}

Note
"/Users/rayxu/todolist-hexschool-mcp/src/index.js"請換成你自己的檔案絕對路徑唷

這邊我來簡單說明一下這個檔案的內容：

servers：這個是我們的 MCP Server 的設定屬性
todolist-hexschool-mcp：這是我們的 MCP Server 的名稱，你可以隨意取名
type：這是我們的 MCP Server 的類型，這邊我們使用的是 stdio，也就是標準輸入輸出
command：這是我們的 MCP Server 的指令，這邊我們使用的是 node
args：這是我們要執行的檔案，這邊我們使用的是 index.js，這個檔案就是我們的 MCP Server 的主程式

接著你就可以點一下 VSCode 畫面上的「開始」按鈕

這樣 MCP Server 就會啟動了，然後你就可以在 VSCode 的終端機裡面看到以下的訊息：

2025-05-23 16:13:00.241 [info] 正在啟動伺服器 todolist-hexschool-mcp
2025-05-23 16:13:00.243 [info] 連線狀態: 正在啟動
2025-05-23 16:13:00.257 [info] Starting server from LocalProcess extension host
2025-05-23 16:13:00.271 [info] 連線狀態: 正在啟動
2025-05-23 16:13:00.271 [info] 連線狀態: 正在執行
2025-05-23 16:13:00.596 [warning] [server stderr] 六角學院 TodoList MCP Server 啟動中...
2025-05-23 16:13:00.603 [info] Discovered 2 tools

那我們該如何驗證呢？打開你的 GitHub Copilot Chat，然後切換到 AI Agent 的狀態

Agent 模式

然後你就可以開始詢問 AI 了，例如：

1	我想要註冊一個 todolist 帳號，帳號是 [email protected]，密碼是 example123，暱稱是 example

呼叫的時候，會跳出一些視窗，這些視窗是用來讓你確認要使用的工具，其實因為這是我們自己做的 MCP Server，所以不用太擔心直接點下「繼續」就可以了

接著你就可以看到 AI 回傳的結果啦～

註冊成功

到這裡為止，我們成功搭建了一個可與 GitHub Copilot Chat 互動的基本 MCP Server，從註冊 API 開始，建立了實際可執行的工具邏輯。

接下來你可以嘗試新增更多功能，如登入、新增、刪除任務等，讓這個 Server 真正成為你的 AI 開發好幫手！

當然這邊我還是會提供完整的程式碼給你參考，這邊我會將完整的程式碼放在 GitHub 上面，你可以直接下載下來使用：

GitHub Repository

希望這一篇文章有幫助到你，學會建立自己的 MCP Server 哩！