在現代 AI 輔助開發的領域中，MCP（Model Context Protocol）Server 就像是強大的外掛引擎，能夠將即時文件查詢、元件自動生成、瀏覽器自動化以及多步驟推理等功能無縫整合到你常用的開發環境中。這篇文章將詳細介紹如何在 macOS 系統上安裝並配置四個最受歡迎的 MCP Server：Context7、Magic、Playwright MCP 以及 Sequential-Thinking MCP。

為什麼選擇 MCP Server？

使用 MCP Server 的主要優勢在於它能夠大幅提升開發效率。首先，它可以將最新的技術文件和程式範例直接提供給大型語言模型，有效減少 API 幻覺問題。其次，透過 AI 自動生成 UI 元件、操作真實瀏覽器環境，甚至執行複雜的分步推理過程，整個開發流程變得更加智能化。最重要的是，只需要一套 CLI 或 JSON 設定檔，就能在 Cursor、VS Code、Claude Desktop 等多個客戶端之間共享這些強大功能。

環境準備：建立基礎開發環境

Node.js 安裝配置

在開始安裝任何 MCP Server 之前，我們需要確保系統已經安裝了 Node.js。推薦使用 Homebrew 進行安裝：

# 使用 Homebrew 安裝最新 LTS 版本
brew install node
node -v  # 驗證安裝結果

如果你偏好使用官方安裝檔，也可以直接從 Node.js 官網下載對應的 .pkg 檔案進行安裝。

Python 環境與 uv 工具安裝

對於 Playwright 和 Sequential-Thinking 這兩個基於 Python 的 MCP Server，我們需要安裝 Python 環境和 uv 套件管理工具：

# 使用一行指令安裝 uv（內建 Python 下載管理功能）
curl -LsSf https://astral.sh/uv/install.sh | sh
uv --version

uv 是新一代的 Python 套件管理器，它能夠自動管理多個 Python 版本，執行速度比傳統的 pip 快上許多倍。

MCP 設定檔路徑配置

不同的開發工具需要將 MCP 設定檔放置在特定的位置：

開發工具 macOS 設定檔路徑
Cursor ~/.cursor/mcp.json
VS Code (Insiders) ~/Library/Application Support/Code/User/settings.json
Claude Desktop ~/Library/Application Support/Claude/claude_desktop_config.json

Context7：你的即時文件助手

Context7 是一個能夠即時獲取最新程式庫文件的 MCP Server，就像擁有一位隨時待命的圖書管理員。

快速安裝步驟

設定過程非常簡單，只需要三個步驟：

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

將上述 JSON 設定複製到對應的 mcp.json 檔案中，儲存後重新啟動你的 IDE。當你在終端機看到 Context7 Documentation MCP Server running on stdio 訊息時，就表示安裝成功了。

要測試 Context7 是否正常運作，可以在任何程式碼提示後加上 use context7，例如：「示範 Next.js Middleware 的使用方式，use context7」。

常見問題排解

問題症狀 解決方案
Cline 顯示 Not connected 改用 command: "node" 搭配絕對路徑
npx 執行速度過慢 可以改用 bunx 來縮短冷啟動時間

Magic：零程式碼 UI 元件生成器

Magic 是一個革命性的工具，能夠自動生成 React 和 Tailwind 元件，讓 UI 開發變得前所未有的簡單。

手動配置設定

Magic 需要 API Key 才能正常運作，首先到 21st.dev Magic Console 申請你的專屬金鑰：

{
  "mcpServers": {
    "@21st-dev/magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic@latest", "API_KEY=\"your-api-key\""]
    }
  }
}

設定完成後，你可以在 IDE 中輸入 /ui create a modern navigation bar，Magic 就會自動為你生成對應的元件檔案。

Magic 常用指令

指令 功能說明
/ui 建立新的 UI 元件
/ui enhance <file> 為現有元件增加動畫效果

Playwright MCP：真實瀏覽器自動化

Playwright MCP 提供了強大的瀏覽器自動化功能，讓你能夠透過 AI 指令直接操控真實的瀏覽器環境。

Python 版本安裝

推薦使用 Python 版本，因為安裝過程更加簡潔：

uv pip install playwright-mcp-server[playwright]  # 安裝 Server 與瀏覽器
playwright install  # 安裝瀏覽器二進位檔案

接著在設定檔中加入：

{
  "mcpServers": {
    "playwright": {
      "command": "playwright-mcp-server",
      "args": ["stdio"]
    }
  }
}

如果你偏好 Node.js 版本，也可以使用 npx -y @executeautomation/playwright-mcp-server 進行安裝。預設情況下，Playwright 會在背景無頭模式運行，如果需要看到瀏覽器視窗，可以在參數中加入 --headed。

macOS 特定問題解決

問題 解決方案
Chromium 二進位檔案下載卡住 如果在公司網路環境，先設定 export HTTP_PROXY 再重試
VS Code 無法啟動服務 在設定中加入 "transportType": "stdio" 避免端口衝突

Sequential-Thinking MCP：多代理連鎖推理

Sequential-Thinking MCP 是一個創新的推理工具，能夠執行類似人類思考的多步驟邏輯分析。

安裝與配置

最簡單的方式是使用 uvx 直接執行：

# 線上執行模式
uvx --from git+https://github.com/arben-adm/mcp-sequential-thinking mcp-sequential-thinking

如果需要本地安裝：

git clone https://github.com/arben-adm/mcp-sequential-thinking.git
cd mcp-sequential-thinking
uv pip install -e .

在 mcp.json 中加入設定：

{
  "mcpServers": {
    "sequential-thinking": {
      "command": "mcp-sequential-thinking"
    }
  }
}

使用方式

呼叫 sequentialthinking 工具時，可以傳入類似以下的參數：

{
  "thought": "分析資料表關聯",
  "nextThoughtNeeded": true,
  "thoughtNumber": 1,
  "totalThoughts": 5
}

透過連續呼叫，就能形成類似思維鏈條的推理過程。

四大 MCP Server 功能比較

Server 核心功能 安裝指令 環境需求 測試指令
Context7 即時程式庫文件查詢 npx -y @upstash/context7-mcp Node 18+ use context7
Magic AI 產生 UI 元件 npx -y @21st-dev/magic Node 18+ + API Key /ui create ...
Playwright MCP 瀏覽器自動化 uv pip install playwright-mcp-server Python 3.9+ + Playwright binaries open https://example.com
Sequential-Thinking 多步驟推理 mcp-sequential-thinking Python 3.9+ + uv sequentialthinking {}

常見問題排解指南

在安裝過程中，你可能會遇到一些常見問題。如果 npx 找不到套件，可以嘗試更新 npm 版本 npm i -g npm 或改用 bunx。當遇到 uv 權限不足的問題時，可以使用 sudo uv ... 或變更 $HOME/.local/share/uv 資料夾的擁有者權限。如果 IDE 無法偵測到 MCP，請檢查 JSON 設定檔是否位於正確路徑，並確實重新啟動 IDE。

實際應用場景

這四個 MCP Server 的組合使用能夠大幅提升開發效率。Context7 能夠確保你總是使用最新的 API 文件，避免因為文件過時而產生的錯誤。Magic 讓 UI 開發變得輕鬆愉快，特別是在快速原型製作階段。Playwright MCP 則是自動化測試和網頁爬蟲的利器，而 Sequential-Thinking 能夠協助處理複雜的邏輯分析任務。

當這些工具整合在一起時，你的 MacBook 瞬間變成了一個功能強大的開發工作站。無論是建立新專案、除錯現有程式碼，還是進行複雜的資料分析，這些 MCP Server 都能提供實質的協助。

學會正確配置和使用這些工具，就像為你的開發流程安裝了渦輪增壓器。透過 AI 的協助，許多原本需要花費大量時間的重複性工作都能夠自動化處理，讓你有更多時間專注在創新和解決複雜問題上。

關於作者

Ewan Mak — tenten.co 作者專頁

身為資深開發者，我深信 MCP Server 代表著 AI 輔助開發的未來趨勢。把這些工具想像成你的 AI 智囊團外掛：Context7 像是隨時在你身邊的圖書管理員，Magic 是全能的 UI 設計師，Playwright 是不知疲倦的 QA 自動化助手，而 Sequential-Thinking 則是你的思考導航員。當這四者完美串聯時，你的開發效率將獲得革命性的提升。

提升你的數位開發能力

如果你希望進一步優化開發流程，或需要專業的數位解決方案協助，Tenten 團隊擁有豐富的 AI 整合經驗和技術專業，能夠為你的專案提供全方位的技術支援。從 MCP Server 整合、自動化工具開發到完整的數位轉型策略，我們都能提供客製化的解決方案。

準備好讓你的開發流程更上一層樓了嗎？立即預約諮詢會議，讓我們的專家團隊為你打造最適合的技術解決方案。

References

Share this post
Ewan Mak

I'm a Full Stack Developer with expertise in building modern web applications that fast, secure, and scalable. Crafting seamless user experiences with a passion for headless CMS, Vercel and Cloudflare

Loading...