Devserver MCP

🚀 DevServer MCP

DevServer MCPは、開発サーバーのログをリアルタイムで監視し、エラーをタイプと重大度に分類し、Server-Sent Events (SSE) を介してClaude Codeに即時のエラー通知を提供するMCPサーバーです。

DevServer MCPの特徴:

• リアルタイム通知: SSEトランスポートを介した即時のエラーアラート
• インテリジェントな解析: TypeScript、Svelte、Viteのエラーパターンを認識
• エラー関連付け: エラーを最近のファイル変更に関連付ける
• 重大度分類: 重大、警告、情報の分類
• 複数クライアント対応: 複数のClaude Codeインスタンスを同時に接続可能
• AI統合: 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が即時通知を受け取ります！

✨ 主な機能

従来のデバッグフロー

1. 何かが壊れていることに気づく → 2. ターミナルをスクロールする → 3. 関連するエラーを見つける → 4. ググる

DevServer MCPを使用した場合

1. エラーが発生する → 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インスタンスを同時に接続可能

リアルタイムエラーストリーミングにより、Claude Codeは開発サーバーの問題が発生してから1 - 2秒以内に通知を受け取ります。

エラーカテゴリ

• 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