MCP Modus

AI assistant for Modus Web Components - Get instant help with component documentation, design rules, and setup guides directly in your IDE.

What This Does

This MCP server gives AI assistants (like Cursor, Claude, VS Code) access to complete Modus Web Components documentation. Ask questions like:

• "How do I use a Modus button with primary color?"
• "What are the Modus color guidelines?"
• "Show me how to set up a React project with Modus components"
• "Which components have a disabled attribute?"

Setup

Choose one of the two options below:

Option 1: NPX (Recommended - No Installation)

For any IDE with MCP support:

{
  "mcpServers": {
    "modus-docs": {
      "command": "npx",
      "args": ["-y", "@julianoczkowski/mcp-modus"]
    }
  }
}

Benefits: No installation required, always uses latest version, no permission issues, secure pre-bundled documentation.

Option 2: Global Install

1. Install globally:

   npm install -g @julianoczkowski/mcp-modus

   Note: On some systems, you may need sudo npm install -g @julianoczkowski/mcp-modus

2. Use this config:

   {
     "mcpServers": {
       "modus-docs": {
         "command": "mcp-modus"
       }
     }
   }

Benefits: Faster startup, works offline after installation, secure pre-bundled documentation.

IDE-Specific Instructions

For Cursor IDE

1. Go to Settings → Features → MCP
2. Click "Add New MCP Server"
3. Use one of the JSON configs above

For VS Code (with Continue)

Add to ~/.continue/config.json using one of the JSON configs above.

For Claude Desktop

Add to your config file using one of the JSON configs above:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%/Claude/claude_desktop_config.json

What You Get

📚 Component Documentation (49 components)

Complete API documentation for all Modus Web Components including attributes, events, methods, slots, and usage examples.

| Component | Description | | -------------------------- | --------------------------------------- | | modus-wc-accordion | Expandable/collapsible content sections | | modus-wc-alert | Contextual feedback messages | | modus-wc-autocomplete | Text input with suggestions | | modus-wc-avatar | User profile images | | modus-wc-badge | Status indicators and labels | | modus-wc-breadcrumbs | Navigation path indicators | | modus-wc-button | Interactive action buttons | | modus-wc-button-group | Grouped buttons with selection modes | | modus-wc-card | Content container with elevation | | modus-wc-checkbox | Boolean input control | | modus-wc-chip | Compact interactive elements | | modus-wc-collapse | Animated show/hide content | | modus-wc-date | Date picker input | | modus-wc-divider | Visual content separator | | modus-wc-dropdown-menu | Contextual menu with trigger | | modus-wc-file-dropzone | Drag-and-drop file upload | | modus-wc-handle | Resizable panel divider | | modus-wc-icon | Modus icon display | | modus-wc-input-feedback | Form validation messages | | modus-wc-input-label | Form field labels | | modus-wc-loader | Loading state indicators | | modus-wc-logo | Trimble/Viewpoint brand logos | | modus-wc-menu | Navigation menu container | | modus-wc-menu-item | Menu navigation items | | modus-wc-modal | Dialog overlays | | modus-wc-navbar | Top navigation bar | | modus-wc-number-input | Numeric input with controls | | modus-wc-pagination | Page navigation controls | | modus-wc-panel | Structured layout container | | modus-wc-progress | Progress indicators | | modus-wc-radio | Single-select option control | | modus-wc-rating | Star rating input | | modus-wc-select | Dropdown selection input | | modus-wc-side-navigation | Sidebar navigation | | modus-wc-skeleton | Loading placeholder | | modus-wc-slider | Range value selector | | modus-wc-stepper | Multi-step process indicator | | modus-wc-switch | Toggle on/off control | | modus-wc-table | Data table display | | modus-wc-tabs | Tabbed content navigation | | modus-wc-text-input | Single-line text input | | modus-wc-textarea | Multi-line text input | | modus-wc-theme-switcher | Theme selection control | | modus-wc-time-input | Time picker input | | modus-wc-toast | Notification messages | | modus-wc-toolbar | Action button container | | modus-wc-tooltip | Contextual hover information | | modus-wc-typography | Text styling component | | modus-wc-utility-panel | Slide-out utility panel |

🎨 Design System Rules (6 guides)

Comprehensive design guidelines for building consistent Modus applications.

| Guide | Coverage | | --------------- | --------------------------------------------- | | modus_colors | Color tokens, semantic colors, theme palettes | | modus_icons | Icon names, sizes, usage guidelines | | typography | Font families, sizes, weights, line heights | | spacing | Spacing scale, margins, padding values | | breakpoints | Responsive breakpoints, media queries | | radius_stroke | Border radius values, stroke widths |

⚙️ Project Setup Guides (5 guides)

Step-by-step instructions for integrating Modus Web Components.

| Guide | Coverage | | ----------------- | --------------------------------------------------------- | | setup_html | HTML project setup, CDN usage, basic integration | | setup_react | React project setup, npm installation, component usage | | theme_usage | Theme implementation, light/dark modes, customization | | testing | Testing guidelines, accessibility testing, best practices | | universal_rules | General development rules, coding standards |

Example Usage

Once configured, ask your AI assistant:

"Create a Modus button with warning color and medium size"
"What spacing values should I use in my Modus design?"
"How do I set up a new React project with Modus Web Components?"
"Show me all Modus form components"
"What are the available Modus color tokens?"

The AI will use the MCP server to fetch the latest documentation and provide accurate, up-to-date answers.

Security & Reliability

• 🔒 Pre-bundled Documentation: All documentation is included with the package - no runtime downloads
• 🛡️ No External Dependencies: Runs completely offline after installation
• ✅ Verified Content: Documentation is verified during our CI/CD process
• 🚀 Fast & Secure: No network requests during operation
• 🔐 Secure Publishing: Uses npm Trusted Publishers (OIDC) for secure, automated releases with automatic provenance attestation

Troubleshooting

Server Not Connecting

• Ensure Node.js 20+ is installed: node --version (required for npm 11.5.1+ which supports OIDC)
• For global install: verify with mcp-modus --help
• Check IDE logs for error messages

Documentation Updates

Documentation is pre-bundled with each release for security and reliability. No downloads occur during installation or runtime.

Uninstalling

If you used the NPX option (Option 1), no permanent installation exists. NPX downloads are temporary.

If you used the Global Install option (Option 2), uninstall with:

npm uninstall -g @julianoczkowski/mcp-modus

Need Help?

• GitHub Issues
• Modus Web Components Docs

Built for developers using Modus Web Components | MIT License | Made by Julian Oczkowski