4-6 如何開發 MCP 伺服器?

在這個單元中，我們將進一步探討如何開發 MCP (Model Context Protocol) 伺服器。我們會先回顧 MCP 的整體架構，並詳細介紹如何快速實作一個 MCP 伺服器。我們也會透過一個簡單的範例，展示如何使用 Node.js 開發 MCP 伺服器，並以 GitHub 的 MCP 伺服器為例，說明如何將現有 API 轉換為 MCP 伺服器。

MCP 整體架構回顧

以下是來自 MCP 官方文件的架構圖（如下所述，詳細圖請參考官方文件）。

圖片來源：https://modelcontextprotocol.io/introduction

在之前的單元中，我們曾簡略提到這個架構。MCP 的架構包含以下主要部分：

MCP 客戶端：位於架構的最左側，負責與 MCP 伺服器進行通訊。
MCP 主機：負責管理多個 MCP 客戶端。例如，當我們使用 Cursor 時，Cursor 本身就是一個 MCP 主機，負責在背後管理不同的 MCP 客戶端。
MCP 伺服器：位於架構的右側，負責與資料源或工具源對接，並透過 MCP 的協定與客戶端進行互動。
資料源與工具源：MCP 伺服器背後可以對接到本地的資料源（例如 SQLite 資料庫）或遠端的 Web API（例如天氣 API 或 GitHub API）。

以架構圖為例，假設一個 MCP 主機管理三個 MCP 客戶端，這三個客戶端分別連線到三個不同的 MCP 伺服器，每個伺服器可以對接到不同的資料源。

舉例來說：

本地的 SQLite 資料庫。
遠端的天氣 API，供查詢天氣資訊。
GitHub API，供執行像是提交 Pull Request 的操作。

透過這種架構，MCP 伺服器能讓 AI（如 Cursor）與不同的工具或資料源整合，從而提升工作效率。

快速實作 MCP 伺服器

為了讓大家快速上手 MCP 伺服器的開發，我們將以官方提供的「天氣 MCP 伺服器」範例為基礎，展示如何使用 Node.js 實作一個簡單的 MCP 伺服器。以下是具體步驟：

步驟 1：參考官方文件

MCP 官方網站 (Model Context Protocol) 提供了一個針對伺服器開發者的快速指南 (連結)。在這個指南中，有一個簡單的教學，展示如何開發一個天氣相關的 MCP 伺服器，讓使用者能在 Cursor 或其他 MCP 客戶端上查詢天氣資訊。官方範例支援多種程式語言，包括 Python、Node.js、Java、C# 等。本文將以 Node.js 為例進行說明。

步驟 2：環境準備

在開始開發前，請確保本機已安裝以下工具：

Node.js 和 NPM。
一個專案資料夾，用於存放 MCP 伺服器的程式碼。

接著，根據官方範例，執行以下步驟：

建立一個新的專案資料夾。
初始化專案：運行 npm init。
安裝必要套件：
- model-context-protocol：MCP 的官方 SDK。
- zod：用於參數驗證。
- Typescript：作為開發依賴（可選，視需求而定）。

執行以下指令安裝依賴：

npm init -y
npm install @modelcontextprotocol/sdk zod
npm install -D @types/node typescript

步驟 3：撰寫 MCP 伺服器程式碼

MCP 的 SDK 已封裝了協定相關的複雜邏輯，因此開發 MCP 伺服器非常簡單。核心工作是將現有的資料源或 Web API 包裝成 MCP 伺服器。以下是一個簡單的天氣 MCP 伺服器的程式碼範例：

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

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

server.tool("getWeather", { city: z.string() }, async ({ city }) => {
  // 寫一些不同的邏輯
  // 去呼叫某一個 API
  return {
    content: [
      {
        type: "text",
        text: `現在 ${city} 的天氣非常好，大晴天出太陽，但又不會太熱，適合全家出門玩`,
      },
    ],
  };
});

const transport = new StdioServerTransport();
await server.connect(transport);

這段程式碼的邏輯如下：

引入 MCP 的 Server 模組，建立一個伺服器實例。
使用 tool 方法為伺服器添加一個名為 getWeather 的工具，該工具接受一個 city 參數，並回傳天氣資訊。
使用 StdioServerTransport 建立通訊通道，並將伺服器與該通道連繫。

步驟 4：測試 MCP 伺服器

完成伺服器程式碼後，可以在 Cursor 中進行測試。步驟如下：

啟動 MCP 伺服器（運行程式碼）。
在 Cursor 中配置 MCP 伺服器的連線（具體配置方式請參考前單元）。
測試功能，例如輸入：「台北現在的天氣如何？」。

假設伺服器運行正常，Cursor 會找到 getWeather 工具，將「台北」作為 city 參數傳入，並顯示回傳結果：「現在台北的天氣很好，適合全家出遊！」。你可以在 Cursor 的 MCP 輸出日誌中查看請求和回應的詳細資訊。

運作流程總結

以下是 MCP 伺服器在 Cursor 中運作的完整流程：

使用者透過 Cursor 提問，例如：「台北現在的天氣如何？」。
Cursor (作為 MCP 主機) 在已連線的 MCP 客戶端中搜尋合適的工具，找到 getWeather。
Cursor 的 AI 模型 (例如 GPT) 解析問題，將「台北」提取為 city 參數。
MCP 客戶端將參數傳送至 MCP 伺服器。
MCP 伺服器執行 getWeather 工具，處理參數並回傳結果。
Cursor 接收結果，進行格式化後顯示給使用者。

進階範例：開發 GitHub MCP 伺服器

為了展示如何將現有 API 轉換為 MCP 伺服器，我們以 GitHub 的 MCP 伺服器為例，說明如何讓 Cursor 支援提交 Pull Request 的功能。

參考官方開源專案

MCP 官方的開源專案中有一個 servers 資料夾 (連結)，包含多個官方 MCP 伺服器的實作，其中就包括 GitHub MCP。

以下是 GitHub MCP 伺服器的核心運作方式

跟上面的天氣範例相比，GitHub 的核心邏輯類似，差異在於工具的處理邏輯。天氣範例模擬了一個簡單的回傳結果，GitHub 範例則實際呼叫了 GitHub 的 API。

具體來說 GitHub MCP 伺服器的運作流程如下：

Cursor 的 MCP 客戶端呼叫 GitHub MCP 伺服器，傳入參數。
伺服器驗證參數並呼叫 GitHub API。
API 回傳結果後，伺服器格式化結果並傳回 Cursor。
Cursor 顯示結果給使用者。

此系列文章為 《給工程師的 Cursor 工作流 — 透過 AI 代理全方位提升開發生產力》 搭配的教材。希望透過這系列文章，將過去協助導入 AI 工具及使用 Cursor 的經驗擴展並分享給想提升生產力的讀者。如果對課程感興趣的讀者，可以加入 E+ 成長計畫，觀看影片學習。