## MCP 是什麼？

參考
- [什麼是 MCP? 為什麼 MCP 這麼熱門? MCP 的好處在哪?](https://www.explainthis.io/zh-hant/ai/mcp)。
- [什麼是MCP？讓AI成為真正的AI Agent，而不只是「說話」的機器](https://www.ibest.com.tw/news-detail/what-is-mcp/)。

以往語言模型只能拿來問答，為了讓語言模型能實際做點事情，並且有一個統一的標準，就有人提出 MCP 這個標準。我們可以基於這個規範開發「外掛」，賦予語言模型某些能力。

#### 可能應用 1.：建置專案雛形、仿照既有的模組加開新的模組
技術團隊成員在做開發時，我們可以透過 [filesystem](https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem)，請 IDE 幫我們新增資料夾及檔案。

> 以 `filesystem` 來說建議用 npx，不然還要額外煩惱要 mount 到 container 裡的哪裡。

#### 可能應用 2.：Google Drive 文件知識庫
當我們需要查找或比對 Google Drive 裡的文件時，我們可以透過 [gdrive](https://github.com/isaacphi/mcp-gdrive)，請語言模型幫我們代勞。

> 以這個例子來說，每個團隊夥伴可能都要安裝像 `Claude Desktop`、`LM Studio`、`llama`⋯等這樣的工具，並且連接到指定 MCP Server。
>
> 另一種替代方案是，我們架一台 N8N，大家透過 N8N 對語言模型下指令。

#### 可能應用 3.：修飾語言模型產出的成果
在彙整資料的時候，可能會經過好幾個階段，譬如抓（撈）取資料、篩選、轉換、排序、選定範圍，最終用這些處理好的資料按某種形式顯現。

在最後的呈現階段，我們可能有將資料內容從簡體轉為繁體的需求，這不單單是文字上的編碼轉換，而是還要考慮遣詞用字上的不同（譬如 `資料庫/數據庫`、`網友/網民`、`互動/交互`）等。

可能因為語言模型當初被訓練的時候對岸能提供的語料還是比較巨量，比較難避免產出的資料帶有他們的用語。

針對這個情形，我們可以考慮用 OpenCC 撰寫一個 MCP Server，請語言模型將產出結果轉換為我們所熟悉的繁體中文，以因應一些公司行號的需求。

> 但目前如果我們是用 OpenAI，應該還不能串 `MCP`，近期才會擴充，參考[這個 pr](https://github.com/openai/openai-agents-python/pull/40)。

##### 替代方案
另一種替代方案是我們在 N8N 整個資料處理流程的最後加上一個用 OpenCC 轉繁體中文的節點（就不用真的寫成 MCP Server）。

---
## 實際應用 1.：讓你的 cursor 動起來 — 幫 cursor 加裝 MCP Server
（給技術團隊）

詳細操作過程可以直接看[這個影片](https://www.youtube.com/watch?v=UqaV58YDcIc)。

### 步驟 1. 新增設定檔
在`專案根目錄/.cursor/mcp.json` 加入以下內容：

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "你的專案根目錄路徑 1 (必填)"
        "你的專案根目錄路徑 2 (選填)"
        "你的專案根目錄路徑 N (選填)"
      ]
    }
  }
}

> 注意事項：
> - 設定檔有 global/project 兩種 scopes，可以參考官方文件的[這段說明](https://docs.cursor.com/context/model-context-protocol#configuration-locations)
> - 此次示範的是 [filesystem](https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem#npx)，這個 MCP Server 讓你的 LLM 可以對本機的檔案作增刪修查。
> - 以 filesystem 來說，就會建議用 `project configuration`。

### 步驟 2. 檢查啟用狀態
從右上角齒輪點進來，切到 MCP 分頁，可以看到如下畫面：

中間 MCP Servers 各自會有燈號，要按下 Enable，然後等燈號轉綠燈。

> 如果遲遲沒轉綠燈，按 command+shift+p 打 reload window。

### 步驟 3. 啟用自動允許
在教學影片裡有提到，我覺得最好是打開，不然要一直按允許會很煩 🤣。

### 步驟 4. 實際使用
先切到 `agent` 模式，然後跟平常時候一樣輸入 prompt，不須要特別提及要用什麼工具。


譬如：

請幫我為這個專案建立 CHANGELOG.md 在跟 Makefile 同層的目錄。

---
## 實際應用 2. — 讓 Claude 能讀取網頁內容
（給辦公室同仁）

雖然是給辦公室同仁，但其實像 ChatGPT、Grok 現在都直接能讀取網頁內容了，而且串 MCP Server 在電腦額外裝一些套件，目前還是建議大家先瞭解看看就好。

### MCP Clients 的選用
目前網頁版的語言模型服務都還沒支援串連 MCP Servers。想要讓語言模型幫你做事，你可能要下載並安裝像 [`Claude Desktop`](https://claude.ai/download) 這樣的 App，並且讓 MCP Servers 在你的電腦上跑起來，才可以體會到 MCP Servers 的強大之處和它所帶來的方便。

> 附註：
>
> 因為我自己也擔心從此被 Claude 綁架，所以從 [mcp.so](https://mcp.so/clients?q=desktop) 找了幾個替代產品：
> - HyperChat
> - [Witsy](https://github.com/nbonamy/witsy)
> - OpenWeb UI
> - [5ire](https://github.com/nanbingxyz/5ire)
> - MCP Chat Desktop App
> - Dive AI
> - Rijksmuseum MCP Client
> - ~~y-cli~~ （terminal）
>
> #### 感想一：BYOK (Bring Your Own Keys) AI application 會要你另外刷卡掏錢
> 而像 Witsy、5ire，因為要自己提供 api keys，可能要在各 Model > Provider 綁信用卡給錢。
>
> #### 感想二：技術門檻
> 真的到要自架 docker（例如 HyperChat、OpenWeb UI）或在本機上跑 npm 或 python（例如 MCP Chat Desktop App、Dive AI Agent、Rijksmuseum MCP Client）這個程度的話，或許請技術團隊直接架一座公司內部公用的 `OpenWeb UI` 或 `N8N` 會更方便。而因為 N8N 還能編排流程，建額外的節點，覺得直接上 N8N 會好一點。
>
> 而如果真的想要個人可以自己在電腦上使用，還是退回去用 Claude Desktop 比較舒服。

### 串連第一個 MCP Server
譬如目前 Claude Desktop 還不支援取得某個網頁的內容，我們來加裝 [Firecrawl](https://mcp.so/server/firecrawl-mcp-server/mendableai)，讓它可以爬網頁（聽說這個 Firecrawl 是可以取得 JavasScript Rendering 的內容）。

> 關於 Firecrawl 的補充說明：
> 它要申請 API Key 才能使用，每個月提供 500 次免費查詢。
>
> 主要功能包括：
> - 網頁抓取與 JavaScript 渲染：能夠抓取網頁內容，並支援 JavaScript 渲染，以獲取動態生成的資料。
> - 自動重試與批次處理：具備自動重試機制和批次處理能力，確保抓取任務的穩定性與效率。
> - URL 發現與爬取：能夠自動發現並爬取網站中的 URL，深入挖掘網站結構。
> - 內容過濾與提取：提供智慧的內容過濾功能，能夠根據標籤進行包含或排除，精確提取所需資訊。

1. 先打開 Claude Desktop 的 Settings：

2. 切到 Developer 分頁，按 Edit Config：

3. 用你擅長的編輯器打開這個 Config：

4. 在 [firecrawl.dev](https://www.firecrawl.dev/app/api-keys) 註冊並取得 api key。

5. 把 api key 複製出來替換，然後把替換好的內容，寫回 Config 裡。

{
  "mcpServers": {
    "mcp-server-firecrawl": {
      "command": "npx",
      "args": [
        "-y",
        "firecrawl-mcp"
      ],
      "env": {
        "FIRECRAWL_API_KEY": "{你的 API Key}"
      }
    }
  }
}

> 到這裡還是免不了要在本機跑 MCP Server 啦 😅，所以你的電腦上至少要裝 Node.js（和它附帶的 npx）。

6. 重開 Claude Desktop，確認 MCP Server 有在執行（藍燈）。

### 成果展示
再執行一次剛剛的查詢應該可以觀察到，Claude 現在能讀取這個網站的內容了！

--
## 實際應用：那些看起來很好用的 MCP Servers
- https://github.com/modelcontextprotocol/servers/tree/main/src/filesystem
- https://github.com/f4ww4z/mcp-mysql-server