• May 05, 2024
• Less than a minute read

2024年五月我發現的最佳網站

本文從技術部落格的專業角度撰寫了2024年五月我發現的一些最佳網站，並提供了選擇題目、研究關鍵字、撰寫引人入勝內容等方面的建議。

• Oct 23, 2025
• 5 min read

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）

• Aug 21, 2025
• 11 min read

Open Graph 與 AI 搜尋：程式設計師的實作指南

你是不是常常在社群媒體上分享連結，然後發現預覽圖、標題、描述都亂七八糟？或是，你辛苦寫的文章，在 Facebook 上分享出去卻像個沒穿衣服的原始人？別擔心，這不是你的錯，很可能是你還沒跟 Open Graph (OG) 這個「社群媒體形象大使」打好關係！

• Jul 23, 2025
• 10 min read

永久免費！Claw Cloud 部署 n8n + 自動備份工作流到 GitHub，打造你的超強自動化基地！

哈囉，各位科技探險家們！你是不是也常常被那些重複性、瑣碎的工作搞得一個頭兩個大？每天打開電腦，面對一堆需要手動處理的任務，是不是覺得人生苦短，不該浪費在這些無聊的事情上？別擔心，今天，身為你的專屬部落格顧問，我要來跟你分享一個超級厲害的「自動化黃金組合」，保證讓你從此告別手動地獄，輕鬆打造屬於你自己的「超能力」自動化基地！

• Jul 20, 2025
• 2 min read

ChatGPT Agent 革命：你的第一個 AI 智慧助理，自動化完成所有任務！

嘿，你是不是也常常覺得時間不夠用，每天被各種瑣碎的任務追著跑？一下要回覆堆積如山的 Email，一下要整理報告，還要規劃下個禮拜的家庭旅遊… 是不是常常幻想有個分身來幫你處理這一切？