Skip to content

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.

License

Notifications You must be signed in to change notification settings

billnote/spec-workflow-mcp

 
 

Repository files navigation

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

About

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.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 94.4%
  • JavaScript 3.1%
  • CSS 2.1%
  • Other 0.4%