@chinchillaenterprises/mcp-dev-logger
Advanced tools
MCP server for capturing and streaming development server output (npm run dev, etc.)
A Model Context Protocol (MCP) server for capturing and streaming development server output with browser console logging, enhanced organization, and automatic cleanup. Perfect for monitoring npm run dev, yarn dev, pnpm dev, or any other development server commands across all frameworks (Next.js, Vite, Create React App, etc.).
dev_start_frontend_with_browser tool that starts server AND launches browser automaticallylogs/YYYY-MM-DD/processType/logfile.logclaude mcp add dev-logger -s user -- npx @chinchillaenterprises/mcp-dev-logger
# Clone and build locally
git clone <repository-url>
cd mcp-dev-logger
npm install
npm run build
# Add to Claude Code (local development)
claude mcp add dev-logger-local -s user -- node $(pwd)/dist/index.js
Important Note: When using these tools through Claude Code's MCP integration, the tool names will be prefixed with mcp__dev-logger__. For example:
dev_start_log_streaming becomes mcp__dev-logger__dev_start_log_streamingdev_tail_logs becomes mcp__dev-logger__dev_tail_logsThis prefix pattern applies to all MCP servers and helps Claude distinguish between different servers' tools.
Start a development server and stream its output to a log file. Supports multiple concurrent processes.
Parameters:
command (optional): Dev command to run (default: "npm run dev")outputFile (optional): File to write logs to (default: "dev-server-logs.txt")processId (optional): Custom process ID (auto-generated if not provided)cwd (optional): Working directoryenv (optional): Environment variables to passExample:
{
"command": "npm run dev",
"outputFile": "frontend-logs.txt",
"cwd": "/path/to/project",
"env": {
"PORT": "3001",
"NODE_ENV": "development"
}
}
List all running development processes with their status and details.
No parameters required.
Stop development server(s) and logging.
Parameters:
processId (optional): Process ID to stop (if not provided, stops all processes)Restart a specific development server (useful when it crashes or hangs).
Parameters:
processId (required): Process ID to restartclearLogs (optional): Whether to clear the log file on restart (default: false)Check if development server(s) are running and get their status.
Parameters:
processId (optional): Process ID to get status for (if not provided, shows all processes)Returns:
Get the last N lines from the log file.
Parameters:
processId (optional): Process ID to tail logs from (smart fallback for single process)lines (optional): Number of lines to return (default: 50)filter (optional): Grep pattern to filter logsExample:
{
"processId": "npm-frontend",
"lines": 100,
"filter": "ERROR"
}
Clear the log file.
Parameters:
processId (optional): Process ID to clear logs for (smart fallback for single process)backup (optional): Whether to backup logs before clearing (default: false)Launch a TEST BROWSER for students to interact with. All console logs from this browser are captured automatically. Students should use THIS browser (not their regular browser) to test their app.
Parameters:
processId (optional): Process ID to attach browser console tobrowserUrl (optional): URL to open in test browser (default: http://localhost:3000)teachingMode (optional): Enable teaching mode with DevTools open and slower actions (default: true)viewport (optional): Browser window size (default: { width: 1280, height: 800 })highlightErrors (optional): Add visual indicator when console errors occur (default: true)Key Features:
Example:
{
"processId": "npm-frontend",
"browserUrl": "http://localhost:3000",
"teachingMode": true,
"highlightErrors": true
}
Stop browser console capture for a specific process.
Parameters:
processId (optional): Process ID to stop browser console capture forONE-CLICK STUDENT WORKFLOW: Start frontend server AND automatically launch test browser when ready. Perfect for teaching environments - reduces setup from 3 commands to 1!
Parameters:
command (optional): Dev command to run (default: "npm run dev")port (optional): Port to wait for (default: auto-detect from output)waitTimeout (optional): Max time to wait for server in ms (default: 30000)browserDelay (optional): Delay after server ready in ms (default: 1000)teachingMode (optional): Enable teaching features (default: true)processId (optional): Custom process ID (default: "frontend-with-browser")env (optional): Environment variablescwd (optional): Working directoryKey Features:
Example:
{
"command": "npm run dev",
"teachingMode": true,
"processId": "student-project"
}
Success Output:
✅ Starting development server...
✅ Server ready on http://localhost:3000
✅ Launching test browser...
🎯 TEST BROWSER LAUNCHED!
👉 Use the browser window that just opened (with green banner)
📝 All console logs are being saved
🔍 DevTools is open for debugging
⚠️ Errors will flash red on screen
Happy debugging! 🚀
// Start frontend and backend simultaneously
dev_start_log_streaming({
"command": "npm run dev",
"outputFile": "frontend.log",
"processId": "frontend"
})
dev_start_log_streaming({
"command": "npx ampx sandbox --stream-function-logs",
"outputFile": "backend.log",
"processId": "backend"
})
// List all running processes
dev_list_processes()
// Stop just the frontend
dev_stop_log_streaming({ "processId": "frontend" })
// Restart backend with clean logs
dev_restart_log_streaming({
"processId": "backend",
"clearLogs": true
})
// Start Next.js dev server
{
"command": "npm run dev",
"outputFile": "nextjs-dev.log"
}
// Start Vite with custom port
{
"command": "vite --port 3001",
"outputFile": "vite-dev.log",
"env": {
"NODE_ENV": "development"
}
}
// Tail logs filtering for TypeScript errors
{
"lines": 200,
"filter": "TS\\d+"
}
// Get recent errors from build process
{
"lines": 100,
"filter": "ERROR|FAILED|error"
}
Logs are organized in a structured directory hierarchy:
logs/
├── 2025-07-10/ # Date folder (YYYY-MM-DD)
│ ├── frontend/ # Process type folder
│ │ ├── nextjs-14-32-15.log
│ │ └── vite-16-45-22.log
│ ├── backend/
│ │ ├── express-14-33-01.log
│ │ └── api-15-22-11.log
│ └── amplify/
│ └── sandbox-14-35-22.log
└── 2025-07-09/ # Older logs (auto-removed after 3 days)
└── ...
Logs are written with timestamps, process IDs, and error markers. Browser console logs are prefixed with [BROWSER]:
[2024-01-15T10:30:45.123Z] Starting: npm run dev (Process ID: npm-frontend)
[2024-01-15T10:30:46.456Z] [npm-frontend] > my-app@1.0.0 dev
[2024-01-15T10:30:46.457Z] [npm-frontend] > next dev
[2024-01-15T10:30:47.123Z] [npm-frontend] ▲ Next.js 14.0.0
[2024-01-15T10:30:47.124Z] [npm-frontend] - Local: http://localhost:3000
[2024-01-15T10:30:48.789Z] [npm-frontend] [ERROR] Error: Cannot find module './components/Header'
[2024-01-15T10:30:49.123Z] [npm-frontend] [BROWSER] Console capture started for http://localhost:3000
[2024-01-15T10:30:49.456Z] [npm-frontend] [BROWSER] [LOG] React DevTools detected
[2024-01-15T10:30:49.789Z] [npm-frontend] [BROWSER] [WARN] React: Each child should have a unique key prop
[2024-01-15T10:30:50.123Z] [npm-frontend] [BROWSER] [ERROR] Failed to fetch /api/user: 404 Not Found
[2024-01-15T10:30:50.456Z] [npm-frontend] [BROWSER] [LOG] { user: null, loading: false }
[2024-01-15T10:30:50.123Z] Starting: npx ampx sandbox --stream-function-logs (Process ID: npx-backend)
[2024-01-15T10:30:51.456Z] [npx-backend] [INFO] Amplify sandbox starting...
[2024-01-15T10:30:52.123Z] [npx-backend] Process exited with code 0 and signal null
The server automatically generates intelligent process IDs based on the command and output file:
npm run dev + Output: frontend.log → Process ID: npm-frontendnpx ampx sandbox --stream-function-logs + Output: backend.log → Process ID: npx-backend-1, -2, etc.# Start dev server
dev_start_log_streaming
# When build fails, check recent errors
dev_tail_logs { "filter": "ERROR", "lines": 100 }
# Start with TypeScript focus
dev_start_log_streaming { "command": "npm run dev", "outputFile": "ts-errors.log" }
# Check for TS errors
dev_tail_logs { "filter": "TS\\d+|typescript", "lines": 50 }
# Start on different port
dev_start_log_streaming {
"command": "npm run dev",
"env": { "PORT": "3001" }
}
# Restart and clear old logs
dev_restart_log_streaming { "clearLogs": true }
# Start Amplify backend logging
dev_start_log_streaming {
"command": "npx ampx sandbox --stream-function-logs",
"outputFile": "backend-logs.txt",
"processId": "amplify-backend"
}
# Monitor Lambda function logs
dev_tail_logs { "processId": "amplify-backend", "filter": "ERROR|WARN", "lines": 100 }
// Step 1: Start the student's dev server
dev_start_log_streaming({
"command": "npm run dev",
"processId": "student-app"
})
// Step 2: Launch the TEST BROWSER for the student
dev_launch_test_browser({
"processId": "student-app",
"browserUrl": "http://localhost:3000",
"teachingMode": true // DevTools open, slower actions
})
// Step 3: Tell student: "Use the TEST BROWSER window that just opened!"
// They click buttons, fill forms, trigger errors - ALL console logs are captured
// Step 4: When student says "I clicked submit and nothing happened"
dev_tail_logs({
"processId": "student-app",
"filter": "\\[BROWSER\\].*\\[ERROR\\]",
"lines": 20
})
// Shows: [BROWSER] [ERROR] Cannot read property 'name' of undefined
// Step 5: Show all browser activity
dev_tail_logs({
"processId": "student-app",
"filter": "\\[BROWSER\\]",
"lines": 50
})
// Step 6: When done testing
dev_stop_browser_console({ "processId": "student-app" })
What Students See:
The new dev_start_frontend_with_browser combines steps 1 and 2 above into a single command:
// BEFORE (v2.2.0): Two separate commands
dev_start_log_streaming({ "command": "npm run dev", "processId": "student-app" })
// Wait for server to start...
dev_launch_test_browser({ "processId": "student-app" })
// NOW (v2.3.0): Single command does everything!
dev_start_frontend_with_browser({
"command": "npm run dev",
"processId": "student-project",
"teachingMode": true
})
// Server starts, waits for ready, then browser launches automatically!
Benefits for Students:
Common Student Scenarios:
// Scenario 1: React app on default port
dev_start_frontend_with_browser()
// That's it! Uses all smart defaults
// Scenario 2: Vite app with custom command
dev_start_frontend_with_browser({
"command": "npm run dev -- --host",
"processId": "vite-project"
})
// Scenario 3: Next.js on different port
dev_start_frontend_with_browser({
"command": "npm run dev",
"port": 3001, // If auto-detect fails
"env": { "PORT": "3001" }
})
// Scenario 4: Quick demo mode (no DevTools)
dev_start_frontend_with_browser({
"teachingMode": false // Faster, no DevTools
})
dev_get_status to verify server is runningdev_stop_log_streaming firstspawn with detached: true for proper process isolation-pid) to handle child processes${tmpdir}/mcp-dev-logger.json[ERROR] prefixdev_tail_logsnpm run build
npm run dev
# Test with local installation
claude mcp add dev-logger-test -s user -- node $(pwd)/dist/index.js
# Start Claude and test tools
claude
> /mcp # Check if server is connected
MIT License - see LICENSE file for details.
For issues and questions:
FAQs
MCP server for capturing and streaming development server output (npm run dev, etc.)
The npm package @chinchillaenterprises/mcp-dev-logger receives a total of 31 weekly downloads. As such, @chinchillaenterprises/mcp-dev-logger popularity was classified as not popular.
We found that @chinchillaenterprises/mcp-dev-logger demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.