Momentum Design MCP Server

A Model Context Protocol (MCP) server that provides intelligent assistance for integrating Momentum Design System components into your applications. This server helps developers quickly implement components with proper props, styling, and framework-specific syntax for both React and Angular.

🎯 Overview

The Momentum Design MCP Server acts as an intelligent assistant that:

• 📚 Provides comprehensive component documentation with all properties, methods, and events
• 🎨 Offers access to 3,000+ icons, 1,400+ illustrations, animations, and brand visuals
• 🔧 Generates ready-to-use code snippets for React and Angular
• ✨ Suggests proper styling and theming configurations
• ✅ Ensures accessibility best practices are followed
• 🚀 Accelerates development by reducing documentation lookups
• �� Helps discover available components and assets with intelligent search

✨ Features

Component Discovery

• List all available components from the Momentum Design System
• Search components by keyword, category, or functionality
• Get detailed component information including props, events, methods, and slots

Asset Discovery

• List all available assets including icons, illustrations, animations, and brand visuals
• Search 3,000+ icons by name or keyword with type filtering
• Search 1,400+ illustrations with core and colored variants
• Browse animations in Lottie and SVG formats
• Access brand visuals including logos, backgrounds, and images

Code Generation

• React code snippets with TypeScript support
• Angular code snippets with proper template syntax
• Web Components vanilla JavaScript/HTML examples
• Proper imports and dependency declarations

Documentation Access

• Comprehensive property documentation with types, defaults, and descriptions
• Method signatures with parameters and return types
• Event details with payload structures
• Accessibility guidelines and ARIA attribute recommendations
• Usage examples for common scenarios

Intelligent Assistance

• Context-aware suggestions based on your requirements
• Best practices for component composition
• Performance optimization tips
• Troubleshooting common integration issues

⚙️ Configuration

For Cursor

Create or edit .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "momentum-design": {
      "command": "npx",
      "args": ["mcp-server-for-momentum", "--stdio"]
    }
  }
}

For VS Code

Create or edit .vscode/mcp.json in your project root:

{
  "servers": {
    "momentum-design": {
      "command": "npx",
      "args": ["mcp-server-for-momentum", "--stdio"]
    }
  }
}

🎯 Usage

Restart Your Editor

After configuring the MCP server, restart VS Code or Cursor to load the server.

Using with AI Assistant

Once configured, you can use the MCP server through your AI assistant (GitHub Copilot, Cursor AI, etc.) with natural language:

"Create a button component with primary variant in React"
"Show me all form input components"
"Generate an Angular dialog with header and footer"
"Find icons related to video calls"
"What props does the Avatar component accept?"
"Convert this IconNext Icon to Momentum Design format"

Available Tools

The server provides 11 specialized tools that the AI can use:

1. list_components - List all Momentum Design components
2. search_components - Search components by keyword
3. get_component_docs - Get component documentation
4. generate_code - Generate code for React/Angular
5. convert_component - Convert Momentum UI to Momentum Design
6. list_assets - List icons, illustrations, animations
7. search_icons - Search 3,000+ icons
8. search_illustrations - Search 1,400+ illustrations
9. get_animations - Browse animations
10. convert_icon_to_momentum - Convert IconNext to Momentum Design
11. search_color_variable - Find CSS variables for hex colors or list gradient variables

Color Variable Search

The search_color_variable tool provides comprehensive access to Momentum Design's color system:

• 1,068 solid color variables mapped from hex values to CSS variables
• 52 gradient variables for complex background effects
• 267 unique hex values across core, light, and dark themes

Search by hex code:

"What Momentum Design color variable matches #1170cf?"
"Find the CSS variable for hex color #FF0000"

Filter by theme:

"Search for color variables matching #121212 in dark theme"
"Find core color tokens for #ffffff"

List gradients:

"Show me all gradient variables"
"List light theme gradient variables"

📚 Example Questions

Component Discovery & Documentation

Basic Component Info:

• "What components are available in Momentum Design?"
• "Show me all button components"
• "What form input components exist?"
• "List all navigation components"

Detailed Documentation:

• "What props does the Button component accept?"
• "Show me the Avatar component documentation"
• "What events does the Dialog component emit?"
• "What CSS custom properties are available for the Card component?"
• "How do I use the Accordion component?"

Component Search:

• "Find components for displaying user information"
• "Search for components related to file uploads"
• "What components can I use for notifications?"
• "Show me all tooltip-related components"

Code Generation

React Examples:

• "Generate a React button with primary variant and size 40"
• "Create a React Avatar component with online presence"
• "Show me how to use the Dialog component in React with a header and footer"
• "Generate a form with Input and Checkbox components in React"
• "Create a navigation menu using MenuBar in React"

Angular Examples:

• "Generate an Angular template for a primary button"
• "Create an Angular toggle switch component"
• "Show me how to implement a dropdown in Angular"
• "Generate an Angular form with multiple input fields"
• "Create a card layout in Angular with slots"

Web Components:

• "Show me vanilla JavaScript usage of the Badge component"
• "How do I use mdc-icon in plain HTML?"
• "Generate HTML for a progress bar component"

Icon & Illustration Discovery

Icon Search:

• "Find all microphone icons"
• "Search for calendar icons"
• "Show me all video-related icons in bold style"
• "Find icons for messaging features"
• "What icons are available for settings?"
• "Search for user profile icons with filled variant"

Illustration Search:

• "Find illustrations for empty states"
• "Search for error page illustrations"
• "Show me colored illustrations for onboarding"
• "Find illustrations related to collaboration"

Animations:

• "What animations are available?"
• "Show me loading animations in Lottie format"
• "Find animations for success states"

Component Migration & Conversion

Momentum UI to Momentum Design:

• "Convert this Momentum UI Icon component to Momentum Design format"
• "I'm using <Icon name='microphone-muted'/> from Momentum UI - what's the Momentum Design equivalent?"
• "How do I migrate from Momentum UI IconNext to Momentum Design icons?"
• "What's the correct icon name format for Momentum Design (variant suffixes)?"
• "Convert my Momentum UI button to Momentum Design"

Component Comparison

• "What's the difference between Button and ButtonSimple?"
• "Should I use Radio or StaticRadio?"
• "Compare Toggle vs StaticToggle components"
• "When should I use Dialog vs AnnouncementDialog?"

Accessibility

• "What are the accessibility best practices for the Button component?"
• "How do I properly label an Icon for screen readers?"
• "What ARIA attributes does the Modal component support?"
• "Show me accessible form examples"

Theming & Styling

• "What CSS variables can I customize for the Button component?"
• "How do I theme the Avatar component?"
• "What design tokens are available for spacing?"
• "Show me color customization options for Cards"

Color Variable Lookup

Search by hex code:

• "What Momentum Design color variable matches #1170cf?"
• "Find the CSS variable for hex color #FF0000"
• "What's the design system color for this blue #1170CF?"

Filter by theme:

• "Search for color variables matching #121212 in dark theme"
• "Find core color tokens for #ffffff"
• "Show me light theme variables for #1170cf"

List gradients:

• "Show me all available gradient variables"
• "List light theme gradient CSS variables"
• "What gradient variables are available for backgrounds?"

Troubleshooting

• "Why isn't my icon showing up?"
• "The button variant isn't working, what variants are supported?"
• "How do I fix 'invalid icon name' error?"
• "What's the correct import path for React components?"

Complex Implementations

• "Create a complete user profile card with Avatar, Button, and Badge"
• "Generate a modal dialog with a form inside"
• "Build a navigation header with icons and dropdown menus"
• "Create a data table with sortable columns and action buttons"
• "Design a settings page with form controls and toggle switches"