広告掲載
MCP.so
ログイン

VA Design System Monitor MCP Server

@amponce

リポジトリ

基本情報

カテゴリ

メディアとデザイン

ライセンス

MIT license

トランスポート

stdio

作者

amponce

VA Design System Monitor MCP Server について

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

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

VA Design System Monitor MCP Server の設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

VA Design System Monitor MCP Server のツール

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

概要

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

よくある質問

1

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).

2

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`).

3

Can I get JSON output for programmatic use?

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

4

What Node versions are supported?

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

5

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.

コメント

「メディアとデザイン」の他のコンテンツ

Claude Image Generation

Visual Sandbox

Visual Sandbox runs image, video, audio, 3D and vector models behind one MCP server. Your agent lists the catalogue, reads a model's inputs, estimates the cost, starts a generation and collects the result. You pay per ge

Riddle Quiz Maker

Riddle.com

Creates and manages quizzes, polls, surveys, personality tests, forms, predictors, minigames and leaderboards on Riddle.com – with branching logic, custom design, live stats and embed code.

Uwear.ai

Uwear.ai

Run complete AI fashion photoshoots from ChatGPT, Claude, or Codex. Turn flat-lay, packshot, and mannequin product images into catalog-ready on-model photos and video with saved art direction, automatic QA, and catalog-s

Katto

Katto

AI video clipping MCP server for scored, captioned vertical shorts, with 29 documented tools and dubbing in 19 languages. Hosted OAuth connection with a local installation option.

UGCfy AI

UGCfy AI

Break down any TikTok or Instagram Reels ad and rewrite it for your product, right inside Claude, Cursor, or ChatGPT. Hooks, UGC scripts, and CPM. Free, no API key.

広告掲載