Skip to main content
Glama

MCP Modus

MCP Modus

NPM Version License: MIT

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.

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.

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 (43+ components)

  • Complete API documentation for all Modus Web Components

  • Usage examples and best practices

  • Attribute and event references

🎨 Design System Guidelines

  • Color palettes and usage rules

  • Icon guidelines and available icons

  • Spacing, typography, and layout systems

  • Border radius and stroke guidelines

⚙️ Project Setup Guides

  • HTML project setup instructions

  • React project integration guide

  • Theme implementation and customization

  • Testing guidelines and best practices

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.

Troubleshooting

Server Not Connecting

  • Ensure Node.js 18+ is installed: node --version

  • For global install: verify with mcp-modus --help

  • Check IDE logs for error messages

Removing Downloaded Documentation

If you used the NPX option (Option 1), the documentation is temporarily cached by NPX. To clear this cache:

# Clear NPX cache for this package npx clear-npx-cache @julianoczkowski/mcp-modus # Or clear entire NPX cache npm cache clean --force

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

npm uninstall -g @julianoczkowski/mcp-modus

Need Help?


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

Deploy Server
-
security - not tested
F
license - not found
-
quality - not tested

local-only server

The server can only run on the client's local machine because it depends on local resources.

Provides AI assistants with access to complete Modus Web Components documentation, enabling instant help with component usage, design system guidelines, and project setup directly in your IDE.

  1. What This Does
    1. Setup
      1. Option 1: NPX (Recommended - No Installation)
      2. Option 2: Global Install
    2. IDE-Specific Instructions
      1. For Cursor IDE
      2. For VS Code (with Continue)
      3. For Claude Desktop
    3. What You Get
      1. 📚 Component Documentation (43+ components)
      2. 🎨 Design System Guidelines
      3. ⚙️ Project Setup Guides
    4. Example Usage
      1. Troubleshooting
        1. Server Not Connecting
        2. Removing Downloaded Documentation
        3. Need Help?

      MCP directory API

      We provide all the information about MCP servers via our MCP API.

      curl -X GET 'https://glama.ai/api/mcp/v1/servers/julianoczkowski/mcp-modus'

      If you have feedback or need assistance with the MCP directory API, please join our Discord server