Devserver MCP

🚀 DevServer MCP

DevServer MCP 是一個 MCP 服務器，它能夠即時監控開發服務器日誌，按類型和嚴重程度對錯誤進行分類，並通過服務器發送事件（SSE）向 Claude Code 即時發送錯誤通知。

🚀 快速開始

# 安裝並構建
pnpm install && pnpm build

# 啟動帶有 SSE 服務器的監控（使用默認端口 9338）
node dist/server.js --monitor pnpm run dev

# 連接 Claude Code（端口在重啟時保持一致）
claude mcp add --transport sse devserver-mcp http://127.0.0.1:9338/sse

現在，當錯誤發生時，Claude Code 會收到即時通知！

✨ 主要特性

• 即時通知：通過 SSE 傳輸即時發出錯誤警報。
• 智能解析：識別 TypeScript、Svelte、Vite 錯誤模式。
• 錯誤關聯：將錯誤與最近的文件更改關聯起來。
• 嚴重程度分類：區分關鍵錯誤、警告和信息提示。
• 多客戶端支持：可同時連接多個 Claude Code 實例。
• AI 集成：Claude Code 接收結構化的錯誤數據，而非原始日誌。

📚 詳細文檔

核心工作流程

傳統調試流程：

1. 發現問題 → 2. 滾動查看終端 → 3. 找到相關錯誤 → 4. 進行谷歌搜索 使用 DevServer MCP 的流程：
2. 錯誤發生 → 2. Claude Code 即時通知 → 3. 獲取帶有文件位置的分類錯誤 → 4. 詢問“如何修復此問題？”

MCP 工具

• get_dev_server_status - 獲取當前服務器健康狀況和錯誤計數。
• get_error_summary - 按類型/嚴重程度分組的錯誤信息。
• get_error_history - 按時間順序排列的錯誤列表，支持過濾。
• get_file_errors - 獲取特定文件的錯誤信息。
• suggest_monitoring_setup - 提供特定項目的設置建議。

端口配置

默認端口（9338）：

# 使用默認端口啟動
node dist/server.js --monitor pnpm run dev

# 連接 Claude Code
claude mcp add --transport sse devserver-mcp http://127.0.0.1:9338/sse

每個項目使用自定義端口：

# 前端項目使用端口 9339
node dist/server.js --port 9339 --monitor pnpm run dev

# 後端項目使用端口 9340
node dist/server.js --port 9340 --monitor npm run dev:api

# 連接到特定項目
claude mcp add --transport sse frontend-devserver http://127.0.0.1:9339/sse
claude mcp add --transport sse backend-devserver http://127.0.0.1:9340/sse

優點：

• ✅ 端口一致 - 每次重啟使用相同端口，無需重新添加 MCP 服務器。
• ✅ 按項目設置端口 - 可同時運行多個項目。
• ✅ 衝突檢測 - 若端口已被使用，會給出有用的錯誤信息。

架構

基於 SSE 的即時系統：

• 監控模式 (--monitor)：啟動開發服務器，解析日誌，並通過 SSE 廣播錯誤。
• HTTP 服務器：在指定端口上為 Claude Code 連接提供 /sse 端點。
• 錯誤緩衝：為新連接的客戶端維護最近的錯誤歷史記錄。
• 多客戶端支持：多個 Claude Code 實例可同時連接。 即時錯誤流意味著任何開發服務器問題發生後的 1 - 2 秒內，Claude Code 就能收到通知。

錯誤分類

內置以下錯誤模式：

• TypeScript 編譯錯誤
• Svelte 組件警告
• Vite 構建失敗
• 網絡/API 錯誤
• 運行時 JavaScript 錯誤
• 可訪問性問題

配置

創建 devserver-mcp.config.json 文件：

{
    "processPatterns": ["pnpm run dev", "npm run dev"],
    "historyLimit": 1000,
    "correlationWindow": 5000,
    "watchPaths": ["src", "lib"],
    "excludePaths": ["node_modules", ".git"],
    "patterns": [
        {
            "name": "custom-error",
            "pattern": "CUSTOM: (.+)",
            "category": "runtime",
            "severity": "critical"
        }
    ]
}

開發

pnpm install     # 安裝依賴
pnpm build       # 構建項目
pnpm dev         # 監聽模式
pnpm test        # 運行測試
pnpm typecheck   # 類型檢查

故障排除

連接失敗

# 檢查監控服務器是否正在運行
ps aux | grep "node.*server.js"

# 重啟監控服務器（默認端口 9338）
node dist/server.js --monitor pnpm run dev

# 驗證連接
claude mcp add --transport sse devserver-mcp http://127.0.0.1:9338/sse

端口已被使用

# 錯誤信息：端口 9338 已被使用！
# 解決方案：使用不同的端口
node dist/server.js --port 9339 --monitor pnpm run dev

# 然後使用新端口進行連接
claude mcp add --transport sse devserver-mcp http://127.0.0.1:9339/sse

無即時通知

# 檢查 MCP 連接狀態
claude mcp list

# 如有需要，移除並重新連接
claude mcp remove devserver-mcp
claude mcp add --transport sse devserver-mcp http://127.0.0.1:9338/sse

多個項目

# 每個項目應使用不同的端口
# 項目 A
node dist/server.js --port 9338 --monitor pnpm run dev

# 項目 B
node dist/server.js --port 9339 --monitor npm run dev

# 在 Claude Code 中使用不同的名稱連接兩個項目
claude mcp add --transport sse project-a http://127.0.0.1:9338/sse
claude mcp add --transport sse project-b http://127.0.0.1:9339/sse

📄 許可證

本項目採用 MIT 許可證。