MCP.so
Sign In

VA Design System Monitor

@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

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

8

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.

Frequently asked questions

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.

Comments

Basic information

Category

Media & Design

License

MIT license

Transports

stdio

Author

amponce

More Media & Design MCP servers

Constants

Constants AI

One workspace of tools for Claude and ChatGPT. Connect apps, generate video, music, and ads, and build new tools on demand. Generate and publish ad creative directly from your assistant.

Floors.live — Event Floor Plan & Seating Designer

Hakolsound

MCP server for Floors.live — design event floor plans, manage guest lists, and run intelligent seating assignments from Claude, ChatGPT, or Cursor. 32 tools.

Framelink Figma MCP Server

GLips

MCP server to provide Figma layout information to AI coding agents like Cursor

15.3K

KiCAD MCP: AI-Assisted PCB Design

mixelpixx

KiCAD MCP is a Model Context Protocol (MCP) implementation that enables Large Language Models (LLMs) like Claude to directly interact with KiCAD for printed circuit board design.

1.5K

MiniMax MCP

MiniMax-AI

Official MiniMax Model Context Protocol (MCP) server that enables interaction with powerful Text to Speech, image generation and video generation APIs.

1.5K