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

npx chrome-devtools-mcp@latest
# 或全域安裝
npm install -g chrome-devtools-mcp

2. Figma MCP

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

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

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

npm install -g edgeone-pages-mcp
# 配置 EdgeOne API Key
EDGEONE_KEY="your_key" edgeone-pages-mcp start

11. Cloudflare MCP

12. GitHub MCP


🔄 CI/CD 與 DevOps (4個)

13. CircleCI MCP

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

# 多個社群實現可選
# 方案 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

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)

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

# TypeScript
npm install @modelcontextprotocol/sdk

# Python
pip install mcp

範例:創建簡單的 MCP 伺服器(Python)

Continue...