金大哥 - devserver-mcp MCP 详情

article

README

🚀 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 接收结构化的错误数据，而非原始日志。

📚 详细文档

核心工作流程

传统调试流程：

发现问题 → 2. 滚动查看终端 → 3. 找到相关错误 → 4. 进行谷歌搜索 使用 DevServer MCP 的流程：
错误发生 → 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 许可证。

devserver-mcp