This MCP server provides AI assistants with comprehensive access to Modus Web Components documentation, design guidelines, and setup instructions directly within your IDE.
Component Documentation: Search for components by name or keyword, list all 43+ available components organized by categories, retrieve complete API documentation (attributes, events, and usage examples), and find components by specific attributes like disabled or color.
Design System Guidelines: Access design rules for specific categories (colors, icons, spacing, typography, breakpoints, border radius/stroke), search across all guidelines using keywords, and list available design rule categories.
Project Setup & Best Practices: Get setup guides for HTML, React, and testing environments, access theme implementation instructions, and view universal development rules and best practices.
Key Features: Pre-bundled documentation for secure, fast offline operation with no network dependencies after installation.
Provides access to complete Modus Web Components documentation, design system guidelines, and project setup guides for Trimble's component library
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@MCP Modusshow me how to create a primary button with medium size"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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:
Benefits: No installation required, always uses latest version, no permission issues, secure pre-bundled documentation.
Option 2: Global Install
Install globally:
npm install -g @julianoczkowski/mcp-modusNote: On some systems, you may need
sudo npm install -g @julianoczkowski/mcp-modusUse 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
Go to
Settings → Features → MCPClick "Add New MCP Server"
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.jsonWindows:
%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 |
| Expandable/collapsible content sections |
| Contextual feedback messages |
| Text input with suggestions |
| User profile images |
| Status indicators and labels |
| Navigation path indicators |
| Interactive action buttons |
| Grouped buttons with selection modes |
| Content container with elevation |
| Boolean input control |
| Compact interactive elements |
| Animated show/hide content |
| Date picker input |
| Visual content separator |
| Contextual menu with trigger |
| Drag-and-drop file upload |
| Resizable panel divider |
| Modus icon display |
| Form validation messages |
| Form field labels |
| Loading state indicators |
| Trimble/Viewpoint brand logos |
| Navigation menu container |
| Menu navigation items |
| Dialog overlays |
| Top navigation bar |
| Numeric input with controls |
| Page navigation controls |
| Structured layout container |
| Progress indicators |
| Single-select option control |
| Star rating input |
| Dropdown selection input |
| Sidebar navigation |
| Loading placeholder |
| Range value selector |
| Multi-step process indicator |
| Toggle on/off control |
| Data table display |
| Tabbed content navigation |
| Single-line text input |
| Multi-line text input |
| Theme selection control |
| Time picker input |
| Notification messages |
| Action button container |
| Contextual hover information |
| Text styling component |
| Slide-out utility panel |
🎨 Design System Rules (6 guides)
Comprehensive design guidelines for building consistent Modus applications.
Guide | Coverage |
| Color tokens, semantic colors, theme palettes |
| Icon names, sizes, usage guidelines |
| Font families, sizes, weights, line heights |
| Spacing scale, margins, padding values |
| Responsive breakpoints, media queries |
| Border radius values, stroke widths |
⚙️ Project Setup Guides (5 guides)
Step-by-step instructions for integrating Modus Web Components.
Guide | Coverage |
| HTML project setup, CDN usage, basic integration |
| React project setup, npm installation, component usage |
| Theme implementation, light/dark modes, customization |
| Testing guidelines, accessibility testing, best practices |
| General development rules, coding standards |
Example Usage
Once configured, ask your AI assistant:
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 --helpCheck 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:
Need Help?
Built for developers using Modus Web Components | MIT License | Made by Julian Oczkowski