Which integrations are available for this server?

Tracks and categorizes Svelte component warnings and errors during development, enabling immediate debugging assistance Monitors and categorizes TypeScript compilation errors in real-time, providing structured error data with file locations and severity classification Monitors Vite build failures and development server issues, providing real-time error notifications and categorization

How do I use DevServer MCP?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@DevServer MCP show me the recent errors in my Svelte components" 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.

DevServer MCP

An MCP server that monitors development server logs in real-time, categorizes errors by type and severity, and provides Claude Code with immediate error notifications via Server-Sent Events (SSE).

DevServer MCP:

Real-time notifications: Instant error alerts via SSE transport
Intelligent parsing: Recognizes TypeScript, Svelte, Vite error patterns
Error correlation: Links errors to recent file changes
Severity classification: Critical vs warning vs info
Multiple client support: Connect multiple Claude Code instances simultaneously
AI integration: Claude Code receives structured error data instead of raw logs

Quick Start

# Install and build
pnpm install && pnpm build

# Start monitoring with SSE server (uses default port 9338)
node dist/server.js --monitor pnpm run dev

# Connect Claude Code (port stays consistent across restarts)
claude mcp add --transport sse devserver-mcp http://127.0.0.1:9338/sse

Now Claude Code receives immediate notifications when errors occur!

Core Workflow

Traditional debugging:

Notice something broken → 2. Scroll through terminal → 3. Find relevant error → 4. Google it

With DevServer MCP:

Error occurs → 2. Instant notification in Claude Code → 3. Get categorized errors with file locations → 4. Ask "How do I fix this?"

MCP Tools

get_dev_server_status - Current server health and error counts
get_error_summary - Errors grouped by type/severity
get_error_history - Chronological error list with filtering
get_file_errors - Errors for a specific file
suggest_monitoring_setup - Project-specific setup recommendations

Port Configuration

Default Port (9338):

# Start with default port
node dist/server.js --monitor pnpm run dev

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

Custom Port Per Project:

# Frontend project on port 9339
node dist/server.js --port 9339 --monitor pnpm run dev

# Backend project on port 9340  
node dist/server.js --port 9340 --monitor npm run dev:api

# Connect to specific projects
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

Benefits:

✅ Consistent ports - same port every restart, no need to re-add MCP server
✅ Per-project ports - run multiple projects simultaneously
✅ Conflict detection - helpful error messages if port is already in use

Architecture

SSE-Based Real-Time System:

Monitor mode (--monitor): Spawns dev server, parses logs, broadcasts errors via SSE
HTTP server: Serves /sse endpoint for Claude Code connections on specified port
Error buffering: Maintains recent error history for newly connected clients
Multi-client support: Multiple Claude Code instances can connect simultaneously

Real-time error streaming means Claude Code gets notified within 1-2 seconds of any dev server issue.

Error Categories

Built-in patterns for:

TypeScript compilation errors
Svelte component warnings
Vite build failures
Network/API errors
Runtime JavaScript errors
Accessibility issues

Configuration

Create 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"
        }
    ]
}

Development

pnpm install     # Install deps
pnpm build       # Build project
pnpm dev         # Watch mode
pnpm test        # Run tests
pnpm typecheck   # Type checking

Troubleshooting

Connection Failed

# Check if monitoring server is running
ps aux | grep "node.*server.js"

# Restart monitoring server (default port 9338)
node dist/server.js --monitor pnpm run dev

# Verify connection
claude mcp add --transport sse devserver-mcp http://127.0.0.1:9338/sse

Port Already in Use

# Error: Port 9338 is already in use!
# Solution: Use a different port
node dist/server.js --port 9339 --monitor pnpm run dev

# Then connect with the new port
claude mcp add --transport sse devserver-mcp http://127.0.0.1:9339/sse

No Real-Time Notifications

# Check MCP connection status
claude mcp list

# Remove and reconnect if needed
claude mcp remove devserver-mcp
claude mcp add --transport sse devserver-mcp http://127.0.0.1:9338/sse

Multiple Projects

# Each project should use a different port
# Project A
node dist/server.js --port 9338 --monitor pnpm run dev

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

# Connect both in Claude Code with different names
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

License

MIT

DevServer MCP

DevServer MCP

Quick Start

Core Workflow

MCP Tools

Port Configuration

Architecture

Error Categories

Configuration

Development

Troubleshooting

Connection Failed

Port Already in Use

No Real-Time Notifications

Multiple Projects

License

Resources

Looking for Admin?

Appeared in Searches

Latest Blog Posts

MCP directory API