/spec-workflow-mcp

A Model Context Protocol (MCP) server that provides structured spec-driven development workflow tools for AI-assisted software development, featuring a real-time web dashboard and VSCode extension for monitoring and managing your project's progress directly in your development environment.

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

Spec Workflow MCP

npm version VSCode Extension

A Model Context Protocol (MCP) server for structured spec-driven development with real-time dashboard and VSCode extension.

โ˜• Support This Project

Buy Me A Coffee

๐Ÿ“บ Showcase

๐Ÿ”„ Approval System in Action

Approval System Demo

See how the approval system works: create documents, request approval through the dashboard, provide feedback, and track revisions.

๐Ÿ“Š Dashboard & Spec Management

Dashboard Demo

Explore the real-time dashboard: view specs, track progress, navigate documents, and monitor your development workflow.

โœจ Key Features

  • Structured Development Workflow - Sequential spec creation (Requirements โ†’ Design โ†’ Tasks)
  • Real-Time Web Dashboard - Monitor specs, tasks, and progress with live updates
  • VSCode Extension - Integrated sidebar dashboard for VSCode users
  • Approval Workflow - Complete approval process with revisions
  • Task Progress Tracking - Visual progress bars and detailed status
  • Multi-Language Support - Available in 11 languages

๐ŸŒ Supported Languages

๐Ÿ‡บ๐Ÿ‡ธ English โ€ข ๐Ÿ‡ฏ๐Ÿ‡ต ๆ—ฅๆœฌ่ชž โ€ข ๐Ÿ‡จ๐Ÿ‡ณ ไธญๆ–‡ โ€ข ๐Ÿ‡ช๐Ÿ‡ธ Espaรฑol โ€ข ๐Ÿ‡ง๐Ÿ‡ท Portuguรชs โ€ข ๐Ÿ‡ฉ๐Ÿ‡ช Deutsch โ€ข ๐Ÿ‡ซ๐Ÿ‡ท Franรงais โ€ข ๐Ÿ‡ท๐Ÿ‡บ ะ ัƒััะบะธะน โ€ข ๐Ÿ‡ฎ๐Ÿ‡น Italiano โ€ข ๐Ÿ‡ฐ๐Ÿ‡ท ํ•œ๊ตญ์–ด โ€ข ๐Ÿ‡ธ๐Ÿ‡ฆ ุงู„ุนุฑุจูŠุฉ

๐Ÿš€ Quick Start

Step 1: Add to your AI tool

Add to your MCP configuration (see client-specific setup below):

{
  "mcpServers": {
    "spec-workflow": {
      "command": "npx",
      "args": ["-y", "@pimzino/spec-workflow-mcp@latest", "/path/to/your/project"]
    }
  }
}

With auto-started dashboard:

{
  "mcpServers": {
    "spec-workflow": {
      "command": "npx",
      "args": ["-y", "@pimzino/spec-workflow-mcp@latest", "/path/to/your/project", "--AutoStartDashboard"]
    }
  }
}

Step 2: Choose your interface

Option A: Web Dashboard (Required for CLI users)

npx -y @pimzino/spec-workflow-mcp@latest /path/to/your/project --dashboard

Option B: VSCode Extension (Recommended for VSCode users)

Install Spec Workflow MCP Extension from the VSCode marketplace.

๐Ÿ“ How to Use

Simply mention spec-workflow in your conversation:

  • "Create a spec for user authentication" - Creates complete spec workflow
  • "List my specs" - Shows all specs and their status
  • "Execute task 1.2 in spec user-auth" - Runs a specific task

See more examples โ†’

๐Ÿ”ง MCP Client Setup

Augment Code

Configure in your Augment settings:

{
  "mcpServers": {
    "spec-workflow": {
      "command": "npx",
      "args": ["-y", "@pimzino/spec-workflow-mcp@latest", "/path/to/your/project"]
    }
  }
}
Claude Code CLI

Add to your MCP configuration:

claude mcp add spec-workflow npx @pimzino/spec-workflow-mcp@latest -- /path/to/your/project

Important Notes:

  • The -y flag bypasses npm prompts for smoother installation
  • The -- separator ensures the path is passed to the spec-workflow script, not to npx
  • Replace /path/to/your/project with your actual project directory path

Alternative for Windows (if the above doesn't work):

claude mcp add spec-workflow cmd.exe /c "npx @pimzino/spec-workflow-mcp@latest /path/to/your/project"
Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "spec-workflow": {
      "command": "npx",
      "args": ["-y", "@pimzino/spec-workflow-mcp@latest", "/path/to/your/project"]
    }
  }
}

Or with auto-started dashboard:

{
  "mcpServers": {
    "spec-workflow": {
      "command": "npx",
      "args": ["-y", "@pimzino/spec-workflow-mcp@latest", "/path/to/your/project", "--AutoStartDashboard"]
    }
  }
}
Cline/Claude Dev

Add to your MCP server configuration:

{
  "mcpServers": {
    "spec-workflow": {
      "command": "npx",
      "args": ["-y", "@pimzino/spec-workflow-mcp@latest", "/path/to/your/project"]
    }
  }
}
Continue IDE Extension

Add to your Continue configuration:

{
  "mcpServers": {
    "spec-workflow": {
      "command": "npx",
      "args": ["-y", "@pimzino/spec-workflow-mcp@latest", "/path/to/your/project"]
    }
  }
}
Cursor IDE

Add to your Cursor settings (settings.json):

{
  "mcpServers": {
    "spec-workflow": {
      "command": "npx",
      "args": ["-y", "@pimzino/spec-workflow-mcp@latest", "/path/to/your/project"]
    }
  }
}
OpenCode

Add to your opencode.json configuration file:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "spec-workflow": {
      "type": "local",
      "command": ["npx", "-y", "@pimzino/spec-workflow-mcp@latest", "/path/to/your/project"],
      "enabled": true
    }
  }
}

๐Ÿ“š Documentation

๐Ÿ“ Project Structure

your-project/
  .spec-workflow/
    approvals/
    archive/
    specs/
    steering/
    templates/
    user-templates/
    config.example.toml

๐Ÿ› ๏ธ Development

# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev

See development guide โ†’

๐Ÿ“„ License

GPL-3.0

โญ Star History

Star History Chart