npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

devall

v0.0.1

Published

One dashboard to run services and collaborate with coding agents.

Readme

Early preview version

One dashboard. All your services.

npx devall

A lightweight, real-time development dashboard for managing and monitoring multiple development services from a single interface.

Features

  • Service Management: Start, stop, and restart all your development services from one interface
  • Real-time Monitoring: Live status updates and log streaming via WebSocket
  • Project Switching: Quickly jump between projects and spin up all their services instantly
  • Quick Commands: Access commonly used commands for each repository right from the dashboard
  • Direct IDE/Git Integration: Open projects in VS Code or your Git client with one click
  • MCP Integration: Control DevAll via AI assistants (Claude, Cline) through Model Context Protocol
  • Ngrok Tunneling: Expose local services to the internet with built-in ngrok support
  • Configuration-based: Simple JSONC configuration (JSON with comments!)
  • Cross-platform: Works on macOS, Linux, and Windows

Use Cases

Multi-Service Development

Working on a full-stack app with frontend, backend, database, and workers? Start them all with one command and monitor everything in real-time. No more juggling terminal tabs.

Monorepo Management

Managing multiple packages in a monorepo? DevAll is a monorepo's best friend. Commit your devall.jsonc to the repository so the entire team has everything ready to go, or keep personal configs in devall.local.jsonc for your specific setup.

Context Switching

Jump between client projects throughout the day? Save a DevAll config for each project and switch contexts instantly—all services start with one command.

Team Onboarding

New developer joining the team? Share your DevAll config and they'll have the entire development environment running in seconds, no documentation hunting required.

Quick Access to Tools

Need to run migrations, clear cache, or execute common commands? Add them to your config and access them directly from the dashboard instead of searching through terminal history.

Installation

Using npx (Recommended)

Always use the latest version without global installation:

npx devall

Global Installation (Optional) - not a great idea

npm install -g devall

Quick Start

  1. Create a devall.jsonc configuration file in your project root (supports JSONC with comments!):
{
  // DevAll uses JSONC format, allowing helpful comments in your configuration
  "servers": [
    {
      "id": "api",
      "name": "Backend API",
      "command": "npm",
      "args": ["run", "dev:api"],
      "port": 3000,
      "autostart": true
    },
    {
      "id": "frontend",
      "name": "Frontend",
      "command": "npm",
      "args": ["run", "dev:frontend"],
      "port": 5173, // Vite default port
      "autoOpen": true // Open in browser when ready
    },
    {
      "id": "db",
      "name": "Database",
      "command": "docker-compose",
      "args": ["up", "db"],
      "port": 5432
    },

    // Monorepo packages
    {
      "id": "admin",
      "name": "Admin Dashboard",
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./packages/admin", // Run from subfolder
      "port": 3001,
      "color": "#c586c0"
    },

    // External dependencies
    {
      "id": "shared",
      "name": "Shared Components",
      "command": "npm",
      "args": ["run", "build:watch"],
      "cwd": "../shared-ui", // Parent directory
      "watchFiles": false // Don't auto-restart build tasks
    },

    // Microservices
    {
      "id": "gateway",
      "name": "API Gateway",
      "command": "yarn",
      "args": ["start:dev"],
      "cwd": "./services/gateway",
      "port": 8080,
      "secondary": true // Optional service
    }
  ]
}
  1. Start the dashboard:
npx devall

Or if installed globally:

devall
  1. Open your browser at http://localhost:7777 to view the dashboard

Configuration

Why JSONC?

DevAll uses JSONC (JSON with Comments) format for configuration files, which provides:

  • Inline comments to document service purposes and configurations
  • Better team collaboration with explanatory notes
  • Easier maintenance by commenting out services temporarily
  • Configuration documentation right where you need it

Configuration Structure

The configuration file supports two main sections:

Dashboard Configuration (Optional)

{
  "dashboard": {
    "port": 7777, // Dashboard UI port (default: 7777)
    "openBrowser": true // Auto-open dashboard on start
  }
}

Service Configuration Properties

The servers array contains service definitions with these properties:

| Property | Type | Required | Description | Example | | ------------ | ------- | -------- | --------------------------------------------- | ------------------ | | id | string | ✅ | Unique identifier for the service | "api" | | name | string | ✅ | Display name in the dashboard | "Backend API" | | command | string | ✅ | Command to execute | "npm" | | args | array | ❌ | Command arguments | ["run", "dev"] | | cwd | string | ❌ | Working directory (relative or absolute) | "./packages/api" | | port | number | ❌ | Port to monitor and set as PORT env var | 3000 | | color | string | ❌ | Hex color for dashboard UI | "#569cd6" | | icon | string | ❌ | Icon name for dashboard (if icons configured) | "Server" | | autostart | boolean | ❌ | Start automatically when dashboard launches | true | | autoOpen | boolean | ❌ | Open in browser when service starts | false | | watchFiles | boolean | ❌ | Auto-restart on file changes (default: true) | true | | secondary | boolean | ❌ | Mark as secondary/optional service | false |

Icons Configuration (Optional)

Map service types to icon names:

{
  "icons": {
    "web": "Globe",
    "api": "Server",
    "worker": "Cog",
    "frontend": "Layout",
    "database": "Database"
  }
}

MCP Server (AI Integration)

DevAll includes an MCP (Model Context Protocol) server that lets you control your services through AI assistants like Claude Desktop, VS Code with Cline/Roo-Cline, and other MCP-compatible tools.

The MCP server comes pre-built with DevAll - no additional setup needed! Just configure your AI assistant to use it.

Available Tools

All 16 DevAll commands are automatically available as MCP tools:

  • Service control: startService, stopService, restartService
  • Status & info: getStatus, listServices, getServiceInfo
  • Logs: getServiceLogs, getServiceErrors
  • Health monitoring: getServiceHealth, getPorts, getProcesses
  • Configuration: getConfig, validateConfig
  • Tunneling: exposeService, unexposeService, getTunnelStatus

Installation for Claude Desktop

Open your Claude Desktop config file:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json

Add the DevAll MCP server:

Option 1: Using npx (recommended - works from any directory)

{
  "mcpServers": {
    "devall": {
      "command": "npx",
      "args": ["devall", "mcp", "start"]
    }
  }
}

Option 2: Using absolute path (if installed locally)

{
  "mcpServers": {
    "devall": {
      "command": "node",
      "args": ["/absolute/path/to/node_modules/devall/mcp/bin/index.js"]
    }
  }
}

Then restart Claude Desktop. The DevAll tools will now appear in Claude's MCP tools list.

Installation for VS Code (Cline/Roo-Cline)

Open VS Code settings and search for "MCP" or edit your settings.json:

{
  "cline.mcpServers": {
    "devall": {
      "command": "npx",
      "args": ["devall", "mcp", "start"]
    }
  }
}

Or for Roo-Cline:

{
  "roo-cline.mcpServers": {
    "devall": {
      "command": "npx",
      "args": ["devall", "mcp", "start"]
    }
  }
}

Then reload VS Code: Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux) and run "Developer: Reload Window"

Alternative: Add via CLI

Claude Desktop:

# Get the config for Claude Desktop
npx devall mcp info

VS Code:

code --add-mcp '{"name":"devall","command":"npx","args":["devall","mcp","start"]}'

Usage Example

Once configured, you can ask your AI assistant:

"Start my api service and show me its logs"

The AI will:

  1. Call startService with your api service
  2. Call getServiceLogs to fetch recent logs
  3. Present the information in a readable format

More examples:

  • "What services are currently running?"
  • "Show me the last 50 error logs from the frontend service"
  • "Restart all services"
  • "Check the health status of all my services"
  • "Expose my api service via ngrok"

MCP Management Commands

npx devall mcp info     # Show status and setup instructions
npx devall mcp setup    # Install dependencies and build (one-time)
npx devall mcp install  # Install dependencies only
npx devall mcp build    # Build the server only
npx devall mcp start    # Start server (stdio mode)
npx devall mcp start --sse --port 3001  # Start SSE server for web clients

For Development / Local Repository

If you're working with a cloned repository (not the published npm package), you need to build the MCP server first:

npx devall mcp setup

This is only needed once during development.

Troubleshooting

Server not appearing in AI tools:

  • Verify config file location and syntax
  • Restart your AI application completely
  • Check server status: npx devall mcp info

Connection errors:

  • Ensure DevAll dashboard is running: npx devall
  • Check server URL (default: http://localhost:7777)

See mcp/README.md for full documentation and advanced configuration.

Contributing

Want to add features, report bugs, or request new functionality? Feel free to reach out or open an issue on the repository!

License

MIT