AI 專屬「超級工具箱」全解析：21 個必備 MCP 伺服器與安裝指南
Model Context Protocol (MCP) 是一個開放原始碼標準，讓 AI Agent 能夠安全、有效地使用外部工具。
核心概念
MCP 就像是 AI 的「工具箱規格書」，定義了：
- 工具如何向 AI Agent 介紹自己
- AI Agent 如何安全地呼叫這些工具
- 資料如何在 AI 和外部服務之間傳遞
MCP 運作流程
AI Agent (Claude/Cursor)
↓ 自然語言請求
MCP Client
↓ 格式化請求
MCP Server (如 Supabase)
↓ API 呼叫
外部服務 (資料庫/雲端服務)
↓ 回傳結果
回到 AI Agent
21 個 MCP 伺服器分類介紹
📱 開發與設計工具 (4個)
1. Chrome DevTools MCP
- GitHub: https://github.com/ChromeDevTools/chrome-devtools-mcp
- 功能：讓 AI 直接操作瀏覽器進行除錯
- 適用場景：網頁自動化測試、效能追蹤、進階除錯
- 安裝：
npx chrome-devtools-mcp@latest
# 或全域安裝
npm install -g chrome-devtools-mcp
2. Figma MCP
- 官方文件: https://help.figma.com/hc/en-us/articles/32132100833559
- GitHub (社群版本): https://github.com/GLips/Figma-Context-MCP
- 功能：取得 Figma 設計稿的即時上下文
- 適用場景：設計轉程式碼、UI 開發
- 安裝：
- 遠端版本（官方）：
https://mcp.figma.com/mcp - 桌面版本：在 Figma 桌面應用中啟用（Dev Mode > Enable desktop MCP server）
- 社群版本：
npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio - 遠端版本（官方）：
3. ShadCN MCP
- 官方文件: https://ui.shadcn.com/docs/mcp
- 功能：存取 shadcn/ui 元件庫，透過自然語言瀏覽、搜尋和安裝元件
- 適用場景：React/TypeScript UI 開發，快速建構介面
- 安裝：
# 使用 shadcn CLI 初始化 MCP
pnpm dlx shadcn@latest mcp init
# 或使用 npx
npx shadcn@latest mcp init
4. Semgrep MCP
- 官方文件: https://semgrep.dev/docs/mcp
- 功能：程式碼安全與規範檢查，自動掃描安全漏洞
- 適用場景：DevSecOps、程式碼品質管理、安全審查
- 安裝：
# Semgrep MCP 已整合在 semgrep CLI 中
pip install semgrep
# 在 MCP 客戶端配置中使用
semgrep --mcp
💾 資料庫與文件管理 (4個)
5. Neon MCP
- GitHub: https://github.com/neondatabase/mcp-server-neon
- 功能：Serverless PostgreSQL 資料庫管理，支援分支和即時查詢
- 適用場景：用自然語言操作資料庫、資料庫開發與測試
- 安裝：
npm install -g @neondatabase/mcp-server-neon
# 需要 Neon API Key
NEON_API_KEY="your_key" neon-mcp-server
6. Supabase MCP
- GitHub: https://github.com/supabase-community/supabase-mcp
- 功能：管理資料庫、認證、儲存等後端服務
- 適用場景：全端開發
- 安裝：
- 遠端版本：
https://mcp.supabase.com/mcp - 配置範例（限定專案）：
https://mcp.supabase.com/mcp?project_ref=<your-project-id>- 唯讀模式：
https://mcp.supabase.com/mcp?read_only=true - 遠端版本：
7. Context7 MCP
- 功能：提供最新的程式碼文件和範例
- 適用場景：避免 AI 使用過時 API
- 安裝：
docker run -d -p 8080:8080 upstash/context7-mcp-server
8. Ref MCP
- GitHub: https://github.com/ref-tools/ref-tools-mcp
- 官方網站: https://api.ref.tools/mcp
- 功能：提供即時、準確的軟體文件上下文，支援 GitHub、NPM、PyPI 等文件檢索
- 適用場景：確保程式碼語法準確性、API 文件查詢、減少 token 消耗
- 安裝：
npx ref-tools-mcp@latest
# 或使用 Remote MCP
# https://api.ref.tools/mcp?apiKey=YOUR_API_KEY
☁️ 雲端部署服務 (4個)
9. Vercel MCP
- 官方文件: https://vercel.com/docs/mcp/vercel-mcp
- 功能：管理 Vercel 專案部署、環境變數、域名設定
- 適用場景：前端專案自動化部署、Next.js 應用管理
- 安裝：Remote MCP，需 OAuth 授權連接 Vercel 帳戶
10. EdgeOne Pages MCP
- GitHub: https://github.com/TencentEdgeOne/edgeone-pages-mcp
- 功能：部署靜態網站、HTML 內容或全端專案到騰訊雲 EdgeOne Pages
- 適用場景：快速發佈靜態內容、邊緣運算部署、取得公開 URL
- 安裝：
npm install -g edgeone-pages-mcp
# 配置 EdgeOne API Key
EDGEONE_KEY="your_key" edgeone-pages-mcp start
11. Cloudflare MCP
- GitHub: https://github.com/cloudflare/mcp-server-cloudflare
- 功能：管理 Cloudflare Workers、Pages、KV、D1 資料庫
- 適用場景：邊緣運算、CDN 管理、Serverless 開發
- 安裝：Remote MCP，需 OAuth 授權連接 Cloudflare 帳戶
12. GitHub MCP
- GitHub 文件: https://docs.github.com/en/copilot/concepts/context/mcp
- 功能：直接操作 GitHub 倉庫
- 適用場景：自動化 Git 操作、PR 管理
- 安裝：Remote MCP，透過 OAuth 授權連接 GitHub 帳戶
🔄 CI/CD 與 DevOps (4個)
13. CircleCI MCP
- GitHub: https://github.com/CircleCI-Public/mcp-server-circleci
- 官方網站: https://circleci.com/mcp/
- 功能：管理 CI/CD 流程、檢查構建狀態、修復構建失敗
- 適用場景：檢查構建狀態、重新運行測試、AI 協助修復 CI 問題
- 安裝：
npm install -g @circleci/mcp-server-circleci
# 需要 CircleCI API Token
CIRCLECI_API_TOKEN="your_token" circleci-mcp-server start
14. GitLab MCP
- 功能：管理 GitLab 倉庫、Issue、MR
- 適用場景：GitLab 工作流程自動化
- 安裝：Remote MCP，需 OAuth 授權
15. Kubernetes MCP
- GitHub (社群版本): https://github.com/containers/kubernetes-mcp-server
- 功能：管理 K8s 集群，支援 kubectl、helm、istioctl、argocd 等工具
- 適用場景：容器編排、服務部署、集群管理、故障排查
- 安裝：
# 多個社群實現可選
# 方案 1: containers/kubernetes-mcp-server (支援 Kubernetes 和 OpenShift)
npx kubernetes-mcp-server
# 方案 2: 使用 Docker
docker run -d -p 8080:8080 kubernetes-mcp-server
🧪 測試自動化 (3個)
16. Playwright MCP
- GitHub: https://github.com/microsoft/playwright-mcp
- 功能：生成和執行 E2E 測試，支援多瀏覽器自動化
- 適用場景：瀏覽器自動化測試、UI 測試、跨瀏覽器測試
- 安裝：
npx @playwright/mcp
# 或透過 MCP 客戶端配置
17. Selenium MCP
- GitHub: https://github.com/angiejones/mcp-selenium
- 功能：生成 Selenium 測試腳本、自動化瀏覽器操作、網頁爬取
- 適用場景：傳統 Web 測試、自動化測試、表單填寫、網頁抓取
- 安裝：
# 使用 Angie Jones 的實現（測試自動化專家）
npx mcp-selenium
# 或其他社群實現
pip install selenium-mcp-server
selenium-mcp-server start
18. Frontend Testing MCP (Jest & Cypress)
- GitHub: https://github.com/StudentOfJS/mcp-frontend-testing
- 功能：生成前端單元測試和元件測試，支援 Jest 和 Cypress
- 適用場景：React/Vue 組件測試、程式碼分析、測試策略制定
- 安裝：
npx mcp-frontend-testing
# 提供程式碼分析、測試生成和執行功能
🤖 AI 模型與商業服務 (2個)
19. Replicate MCP
- 功能：呼叫 Replicate 平台上的 AI 模型
- 適用場景：多模態任務、圖像生成
- 安裝：
npm install -g mcp-replicate
REPLICATE_API_TOKEN="your_token" mcp-replicate start
20. Stripe MCP
- GitHub: https://github.com/stripe/agent-toolkit
- 功能：管理金流交易、客戶資料、訂閱服務
- 適用場景：訂閱管理、退款處理、支付整合開發
- 安裝：Remote MCP，需管理員權限 OAuth 授權連接 Stripe 帳戶
🛠️ 開發工具 (1個)
21. MCP SDK
- 官方組織: https://github.com/modelcontextprotocol
- Python SDK: https://github.com/modelcontextprotocol/python-sdk
- TypeScript SDK: https://github.com/modelcontextprotocol/typescript-sdk
- 功能：建立自己的 MCP 伺服器
- 適用場景：客製化工具整合
- 安裝：
# TypeScript
npm install @modelcontextprotocol/sdk
# Python
pip install mcp
範例：創建簡單的 MCP 伺服器（Python）
Continue...
