VA Design System Monitor

Name: VA Design System Monitor
Author: amponce

@amponce

Repository

About VA Design System Monitor

Open source MCP server for monitoring Department of Veterans Affairs design system usage and compliance

#va-design-system-monitor #monitoring #design-system

Basic information

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "va-design-system-monitor": {
      "command": "npx",
      "args": [
        "va-components",
        "examples",
        "va-radio"
      ]
    }
  }
}

Tools

Get status and maturity for a component

Get component properties/props

Generate implementation examples

List production-ready components

List components needing caution

Filter components by status

Validate component lists

Comprehensive status report

Overview

What is VA Design System Monitor?

A comprehensive tool for monitoring VA Design System component status, maturity levels, and generating implementation examples. It fetches real examples from VA’s official Storybook and is available as both an npm package and an MCP service for AI integration.

How to use VA Design System Monitor?

Install globally with npm install -g va-design-system-monitor, then use CLI commands such as va-components check <component>, va-components examples <component>, and va-components list <status>. It can also be used as an MCP server by configuring npx -y va-design-system-monitor in Cursor or Claude Desktop, or imported programmatically via import { checkComponent } from 'va-design-system-monitor'.

Key features of VA Design System Monitor

Real official examples from VA’s Storybook repository
Component status monitoring with maturity levels
Smart fallbacks when official examples are unavailable
Multiple interfaces: CLI, programmatic API, and MCP service
Production-ready for vets-website and va-application-template infrastructure
Cross-compatible with Node 14.15.0+ through Node 22+

Use cases of VA Design System Monitor

Check the maturity and recommendation level of any VA component before production use
Generate implementation examples for components like va-button or va-alert
Validate multiple components in a codebase with a single command
Produce a comprehensive report of all component statuses
Integrate with AI assistants via MCP tools like get_component_status and getComponentExamples

FAQ from VA Design System Monitor

What are the component status levels?

Status levels include RECOMMENDED (best practice, production-ready), STABLE (safe for production), EXPERIMENTAL (development/testing only), AVAILABLE_WITH_ISSUES, and USE_WITH_CAUTION (known issues or under evaluation).

How do I run the MCP server?

Configure Cursor or Claude Desktop to use npx -y va-design-system-monitor as the command. For Cursor, add to ~/.cursor/mcp.json; for Claude Desktop, add to the relevant config file (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json, Linux: ~/.config/claude-desktop/config.json).

Can I get JSON output for programmatic use?

Yes, add --json to any CLI command (e.g., va-components check va-button --json).

What Node versions are supported?

Node.js versions 14.15.0+ through 22+ are supported.

How can I use it programmatically in my project?

Install locally (npm install va-design-system-monitor), then import functions like checkComponent, getComponentProperties, or getComponentExamples, or use the VAComponentMonitor class for advanced usage with caching and custom URLs.