安裝 MCP Servers

在開始建立 VibeBlog 之前，我先設置了開發環境，安裝了幾個有用的 MCP (Model Context Protocol) servers 來提升開發效率。

🔗 快速連結

以下是本文提到的所有 MCP servers 和相關資源的快速連結，點擊即可直接訪問：

💡 提示: 所有連結都在新分頁開啟，方便您隨時回來繼續閱讀。每個連結都顯示了完整的網址，方便您複製或分享。

什麼是 MCP？

Model Context Protocol (MCP) 是由 Anthropic 於 2024 年 11 月推出的開放標準，旨在為大型語言模型（LLM）應用提供標準化接口，使其能夠連接並交互外部數據源和工具。

MCP 的核心目標是克服 LLM 應用僅依賴其訓練數據的局限性，使其能夠動態獲取所需的上下文信息，以執行更廣泛的任務。通過定義一套通用的準則和格式，MCP 使 LLM 應用可以在需要時獲取相關信息、執行操作，從而增強其功能和使用範圍。

更多關於 MCP 的資訊，可以參考：

• MCP 官方網站
• MCP GitHub 組織
• MCP 中文站

已安裝的 MCP Servers

1. sequential-thinking

• 工具數量: 1 個工具已啟用
• 狀態: ✅ 啟用中
• 用途: 提供順序思考功能，幫助進行複雜的問題分析和解決
• 說明: 這個工具可以幫助 AI 進行結構化的思考過程，將複雜問題分解成多個步驟，逐步分析和解決。
• 相關連結:
  • 這是 MCP 協議內建的思考工具，無需額外安裝
  • 了解更多：MCP 官方文檔

2. chrome-devtools

• 工具數量: 26 個工具已啟用
• 狀態: ✅ 啟用中
• 用途: 強大的 Chrome 開發工具整合，可以進行瀏覽器調試、網路監控等功能
• 功能:
  • 瀏覽器頁面截圖和快照
  • 網路請求監控和分析
  • 控制台訊息查看
  • 頁面元素操作（點擊、填寫表單等）
  • 性能分析
• 相關資源:
  • Chrome DevTools Protocol 文檔

3. context7

• 工具數量: 2 個工具已啟用
• 狀態: ✅ 啟用中
• 用途: 提供最新的程式庫文檔和代碼範例，非常適合快速查找 API 文檔
• 功能:
  • 自動解析程式庫名稱並獲取對應的 Context7 兼容 ID
  • 獲取最新的程式庫文檔和代碼範例
  • 支持多種模式：code（API 參考和代碼範例）和 info（概念指南和架構說明）
• 使用場景: 在開發 VibeBlog 時，我經常使用 context7 來快速查找 SvelteKit、TypeScript 等框架的最新文檔和最佳實踐。
• 相關連結:
  • 🔗 Context7 官方網站

4. gitmcp

• 工具數量: 4 個工具已啟用
• 狀態: ✅ 啟用中
• 用途: Git 和 GitHub 整合，可以搜尋代碼、獲取文檔等
• 功能:
  • 從 GitHub 倉庫獲取完整文檔
  • 語義搜尋文檔內容
  • 搜尋代碼（使用 GitHub Search API）
  • 獲取任意 URL 的內容
• 使用場景: 在開發過程中，我使用 gitmcp 來搜尋 VibeBlog 相關的代碼和文檔，幫助理解專案結構和實現細節。
• 相關連結:
  • 🔗 MCP Servers 列表（GitHub） - 查找 gitmcp 相關資訊
  • 🔗 GitHub 官方網站

5. awslabs.openapi-mcp-server

• 狀態: ❌ 錯誤
• 備註: 此 server 目前有錯誤，需要進一步檢查配置
• 預期功能: 提供 OpenAPI 規範的 API 整合功能
• 相關連結:
  • 🔗 AWS Labs GitHub
  • 🔗 OpenAPI 官方網站

為什麼選擇這些 MCP Servers？

在開發 VibeBlog 的過程中，我選擇這些 MCP servers 的原因：

1. 提升開發效率: context7 和 gitmcp 讓我可以快速查找文檔和代碼，不需要頻繁切換瀏覽器標籤。
2. 增強 AI 能力: sequential-thinking 幫助 AI 進行更結構化的思考，解決複雜問題時更加可靠。
3. 實際測試: chrome-devtools 讓 AI 可以直接操作瀏覽器，測試網站功能，確保開發的每個步驟都經過驗證。
4. 符合工作流程: 根據 VibeBlog 的設計理念，我們強調「每個需要的步驟，都用 chrome-devtools 打開瀏覽器實際根據功能操作看看，確認沒問題再繼續下一步」。

設置截圖

實際應用案例

在開發 VibeBlog 的過程中，這些 MCP servers 發揮了重要作用：

• 使用 context7 查找 SvelteKit 文檔: 在實現多語言支持時，快速查找 SvelteKit 5 的 runes 模式文檔，了解 $derived 和 $state 的正確用法。
• 使用 chrome-devtools 測試功能: 在實現標籤系統時，實際打開瀏覽器測試路由和語言切換功能，確保一切正常運作。
• 使用 gitmcp 搜尋專案文檔: 在需要了解專案結構時，直接搜尋 GitHub 倉庫中的相關文檔和代碼。
• 使用 sequential-thinking 解決複雜問題: 在設計 Precomputed Tags 架構時，使用順序思考工具來分析問題、設計方案並驗證可行性。

下一步

有了這些 MCP servers，我可以更高效地：

• 快速查找和學習新的程式庫
• 進行複雜的問題分析
• 調試和測試應用程式
• 管理 Git 倉庫和代碼

接下來，我將繼續使用這些工具來完善 VibeBlog 的功能，並探索更多 MCP servers 的可能性。

參考資源

• MCP 官方網站 - 了解 MCP 協議的詳細資訊
• MCP GitHub 組織 - 查看官方 MCP servers 和工具
• MCP 中文站 - 中文資源和文檔
• Chrome DevTools Protocol - Chrome 開發工具協議文檔