The npm-dev-mcp server manages npm run dev processes with automated project discovery, background execution, log monitoring, and port management.
Core Capabilities:
Project Management: Automatically detects projects with
package.jsonand dev scripts, including monorepo support and subdirectories. Loads.envfiles automatically and prioritizes projects based on detection algorithms.Process Control: Start, stop, and restart dev servers in the background with directory specification for running multiple servers in parallel. Supports concurrent execution across different projects.
Monitoring & Logging: Real-time log viewing with configurable line counts (1-1000 lines, default 50), directory filtering, and timestamp tracking. Check status of all running processes including PIDs, ports, uptime, and resource usage.
Port Management: Automatic detection and tracking of ports used by development servers with conflict detection. Cross-platform support using lsof (macOS) and netstat (Linux).
Health & Recovery: Check server health with basic or detailed reports including memory usage and component checks. Recover from saved states with configurable auto-recovery (1-10 retries, default 3), force recovery mode, and optional MCP server restart.
Additional Features: Cross-platform compatibility (requires Node.js 18+), command-line interface via npx or global installation, MCP integration with Claude Code, and optional HTTP health endpoints for external monitoring systems like Prometheus.
Automatically detects and applies environment variables from .env files for development servers
Supports Linux environments using netstat command for development server port detection
Provides platform-specific functionality for macOS, utilizing lsof command for port detection
Manages npm run dev processes for Node.js projects with automatic project detection and environment configuration
Controls npm run dev processes with background execution, real-time log monitoring, and process management capabilities
Detects and manages Vite-based development servers, including port management and process control
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@npm-dev-mcpstart dev server for my frontend project"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
@masamunet/npm-dev-mcp
npm run devプロセスを管理するMCPサーバーです。プロジェクトの自動検出、バックグラウンド実行、ログ監視、ポート管理機能を提供します。
機能
プロジェクト自動検出: package.jsonとdevスクリプトを持つディレクトリを自動で検索
モノレポ対応: サブディレクトリのプロジェクトも検出・管理
環境変数読み込み: .envファイルの自動検出・適用
ポート管理: 開発サーバーが使用するポートの自動検出
ログ監視: リアルタイムログ監視と履歴管理
プロセス管理: 複数プロジェクトの並行実行、安全な開始・停止・再起動
Related MCP server: Project Content Server
利用可能なツール
scan_project_dirs
プロジェクト内のpackage.jsonとdevスクリプトを検索します。
{
"success": true,
"message": "2個のプロジェクトが見つかりました",
"projects": [
{
"directory": "/path/to/project",
"name": "my-app",
"devScript": "vite",
"hasEnvFile": true,
"envPath": "/path/to/project/.env",
"priority": 15
}
]
}start_dev_server
指定ディレクトリでnpm run devをバックグラウンドで開始します。
パラメータ:
directory(オプション): 実行ディレクトリ(未指定時は自動検出)。異なるディレクトリを指定することで、複数の開発サーバーを同時に起動できます。
{
"success": true,
"message": "Dev serverが開始されました",
"process": {
"pid": 12345,
"directory": "/path/to/project",
"status": "running",
"startTime": "2024-01-01T00:00:00.000Z",
"ports": [3000]
}
}get_dev_status
npm run devプロセスの状態を確認します。
{
"success": true,
"message": "2個のDev serverが実行中です",
"isRunning": true,
"processes": [
{
"pid": 12345,
"directory": "/path/to/project-a",
"status": "running",
"ports": [3000],
"uptime": 120000
},
{
"pid": 12346,
"directory": "/path/to/project-b",
"status": "running",
"ports": [3001],
"uptime": 60000
}
]
}get_dev_logs
npm run devのログを取得します。
パラメータ:
lines(オプション): 取得行数(デフォルト:50、最大:1000)directory(オプション): 対象のプロジェクトディレクトリ。複数実行時に特定するために使用します。
{
"success": true,
"message": "50行のログを取得しました",
"logs": [
{
"timestamp": "2024-01-01T00:00:00.000Z",
"level": "info",
"source": "stdout",
"message": "Server running on http://localhost:3000"
}
]
}stop_dev_server
npm run devプロセスを停止します。
パラメータ:
directory(オプション): 対象のプロジェクトディレクトリ。複数実行時に特定するために使用します。
{
"success": true,
"message": "Dev serverを正常に停止しました",
"wasRunning": true,
"stoppedProcess": {
"pid": 12345,
"uptime": 300000,
"ports": [3000]
}
}restart_dev_server
npm run devプロセスを再起動します。
パラメータ:
directory(オプション): 対象のプロジェクトディレクトリ。複数実行時に特定するために使用します。
{
"success": true,
"message": "Dev serverを正常に再起動しました",
"restarted": true,
"newProcess": {
"pid": 12346,
"status": "running",
"ports": [3000]
}
}get_health_status
MCPサーバー自身のヘルス状態を取得します。
パラメータ:
detailed(オプション): 詳細なヘルスレポートを取得するかどうか(デフォルト: false)
{
"success": true,
"message": "MCPサーバーは正常状態です",
"health": {
"isHealthy": true,
"uptime": 300,
"devServerStatus": "running",
"memoryUsage": {
"heapUsed": 45,
"rss": 78
},
"checks": {
"memory": true,
"processManager": true,
"devServer": true
},
"timestamp": "2024-01-01T00:00:00.000Z"
}
}recover_from_state
保存された状態からの復旧を試行します。
パラメータ:
force(オプション): 強制的に復旧を実行するかどうか(デフォルト: false)
{
"success": true,
"message": "状態の復旧が完了しました",
"recovery": {
"devProcessesRecovered": true,
"projectContextRecovered": true,
"warnings": [],
"restoredProcesses": [
{
"pid": 12345,
"directory": "/path/to/project",
"status": "running",
"ports": [3000]
}
],
"recoveryTimestamp": "2024-01-01T00:00:00.000Z"
}
}インストールと使用
0. 公開情報
パッケージはnpmレジストリに公開されています:
パッケージ名:
@masamunet/npm-dev-mcpバージョン: 1.1.0
レジストリ: https://www.npmjs.com/package/@masamunet/npm-dev-mcp
1. npx経由での直接使用(推奨)
# プロジェクトをスキャン
npx @masamunet/npm-dev-mcp scan
# dev serverを開始
npx @masamunet/npm-dev-mcp start
# 状態確認
npx @masamunet/npm-dev-mcp status
# ログを表示(ディレクトリ指定可)
npx @masamunet/npm-dev-mcp logs 50
npx @masamunet/npm-dev-mcp logs /path/to/app 50
# サーバー停止(ディレクトリ指定可)
npx @masamunet/npm-dev-mcp stop
npx @masamunet/npm-dev-mcp stop /path/to/app
# ヘルプ表示
npx @masamunet/npm-dev-mcp --help2. グローバルインストール
# グローバルインストール
npm install -g @masamunet/npm-dev-mcp
# 使用例
npm-dev-mcp scan
npm-dev-mcp start
npm-dev-mcp status3. ローカル開発用ビルド
git clone https://github.com/masamunet/npm-dev-mcp.git
cd npm-dev-mcp
npm install
npm run build4. MCPサーバーとして起動
npm start5. Claude Codeでの設定
5.1 コマンドラインから追加(推奨)
Claude Codeのmcpコマンドを使用して簡単に追加できます:
claude mcp add npm-dev-mcp -- npx @masamunet/npm-dev-mcp --mcpこのコマンド実行後、Claude Codeを再起動すると@masamunet/npm-dev-mcpが利用可能になります。
5.2 手動での設定ファイル編集
手動で設定する場合は、設定ファイルを直接編集します:
設定ファイルの場所:
macOS:
~/.claude/claude_desktop_config.jsonWindows:
%APPDATA%\Claude\claude_desktop_config.json設定内容:
方法1: 直接パス指定
{
"mcpServers": {
"@masamunet/npm-dev-mcp": {
"command": "node",
"args": ["/absolute/path/to/@masamunet/npm-dev-mcp/dist/index.js"]
}
}
}方法2: npx経由(--mcpフラグ使用)
{
"mcpServers": {
"@masamunet/npm-dev-mcp": {
"command": "npx",
"args": ["@masamunet/npm-dev-mcp", "--mcp"]
}
}
}注意事項:
方法1の
argsの配列内のパスは絶対パスで指定してください例:
"/Users/username/projects/@masamunet/npm-dev-mcp/dist/index.js"相対パスや
~は使用できません方法2では
--mcpフラグが必要です(MCPサーバーモードを強制)
5.3 Claude Codeの再起動
設定を追加した後、Claude Codeを再起動すると、@masamunet/npm-dev-mcpサーバーが利用可能になります。
5.4 動作確認
Claude Code内で以下のように使用できます:
プロジェクトを検索してください
→ scan_project_dirs ツールが実行される
npm run devを開始してください
→ start_dev_server ツールが実行される
開発サーバーの状態を確認してください
→ get_dev_status ツールが実行される開発
スクリプト
npm run build: TypeScriptをコンパイルnpm run dev: 開発モード(ウォッチモード)npm start: MCPサーバーを起動
プロジェクト構造
src/
├── index.ts # MCPサーバーエントリーポイント
├── types.ts # 型定義
├── components/ # コアコンポーネント
│ ├── ProjectScanner.ts # プロジェクト検出
│ ├── ProcessManager.ts # プロセス管理
│ ├── LogManager.ts # ログ管理
│ ├── PortDetector.ts # ポート検出
│ └── EnvLoader.ts # 環境変数読み込み
├── tools/ # MCPツール実装
└── utils/ # ユーティリティ関数対応プラットフォーム
macOS (lsofコマンド使用)
Linux (netstatコマンド使用)
Node.js 18以上
トラブルシューティング
MCPサーバーが応答しない場合
MCPサーバーがクラッシュしたり応答しなくなった場合の復旧方法:
1. 開発サーバーのみ復旧する場合
Claude Code内での復旧:
開発サーバーを再起動してください→ restart_dev_server ツールが自動実行されます
コマンドラインからの復旧:
# 開発サーバーの状態確認
npx @masamunet/npm-dev-mcp status
# 開発サーバー再起動
npx @masamunet/npm-dev-mcp restart
# ログ確認
npx @masamunet/npm-dev-mcp logs 502. MCPサーバー全体を復旧する場合
Claude Codeの再起動:
Claude Codeアプリケーションを完全に終了
アプリケーションを再起動
MCPサーバーが自動的に再接続されます
手動でのMCPサーバー確認:
# プロセス確認
ps aux | grep @masamunet/npm-dev-mcp
# 必要に応じてプロセス終了
pkill -f @masamunet/npm-dev-mcp3. 設定の確認
MCPサーバーが起動しない場合、設定ファイルを確認:
macOS:
cat ~/.claude/claude_desktop_config.jsonWindows:
type %APPDATA%\Claude\claude_desktop_config.json正しい設定例:
{
"mcpServers": {
"@masamunet/npm-dev-mcp": {
"command": "npx",
"args": ["@masamunet/npm-dev-mcp", "--mcp"]
}
}
}4. PM2を使用したプロセス管理(上級者向け)
より堅牢な運用を行いたい場合、PM2プロセスマネージャーを使用できます:
PM2のインストール:
npm install -g pm2PM2でのMCPサーバー管理:
# MCPサーバーをPM2で開始
npm run pm2:start
# 状態確認
npm run pm2:status
# ログ確認
npm run pm2:logs
# 再起動
npm run pm2:restart
# 停止
npm run pm2:stop
# 完全削除
npm run pm2:deletePM2の利点:
自動再起動(クラッシュ時)
メモリ監視と制限
ログローテーション
クラスター機能(必要に応じて)
5. 外部監視用ヘルスチェックエンドポイント
外部の監視システム(Prometheus、Nagios等)と連携するためのHTTPエンドポイントを提供できます:
ヘルスエンドポイントの有効化:
# 環境変数を設定
export HEALTH_ENDPOINT=true
export HEALTH_PORT=8080
export HEALTH_HOST=127.0.0.1
# MCPサーバーを開始
npm start利用可能なエンドポイント:
# 基本ヘルスチェック
curl http://127.0.0.1:8080/health
# 詳細ヘルスレポート
curl http://127.0.0.1:8080/health/detailed
# Prometheusメトリクス
curl http://127.0.0.1:8080/metrics環境変数:
HEALTH_ENDPOINT: エンドポイントを有効化(true/false)HEALTH_PORT: ポート番号(デフォルト: 8080)HEALTH_HOST: ホスト(デフォルト: 127.0.0.1)HEALTH_PATH: ヘルスチェックパス(デフォルト: /health)
6. よくある問題と解決方法
問題: "spawn ENOENT" エラー
原因: Node.jsまたはnpxが見つからない
解決: PATHの確認とNode.jsの再インストール
問題: 開発サーバーが起動しない
原因: ポートが使用中、package.jsonの設定不備
解決:
npx @masamunet/npm-dev-mcp scanでプロジェクト検出を確認
問題: ログが表示されない
原因: プロセスが正常に開始されていない
解決:
npx @masamunet/npm-dev-mcp statusで状態確認
ライセンス
MIT