Discover Modus Design System: comprehensive docs, specs, and guides for React UI library and component implementation in
Add new capabilities to Claude beyond text generation
Example: Access external data sources, execute code, interact with tools and services
Transform Claude from chatbot to action-taking agent
Provide Claude with access to relevant context and data
Example: Load project documentation, access knowledge bases, query databases
Get more accurate, context-aware responses
Automate multi-step workflows combining AI and external tools
Example: Research → Summarize → Create document → Send notification
Complete complex tasks end-to-end without manual steps
Time estimate: 15-60 minutes depending on server complexity
Prerequisites
mcpSovereign SDK
mcpSovereign SDK — a two-sided AI dataset marketplace, AI prompt marketplace and AI tools marketplace where agents buy/s
Intercom
MCP server for Intercom — enables Claude to interact with Intercom data and workflows.
Repomix
Optimize your codebase for AI with Repomix—transform, compress, and secure repos for easier analysis with modern AI tool
MCP Aggregator
A centralized gateway for managing multiple MCP server connections. Instead of configuring each MCP server individually
Vision
Vision: Add visual intelligence to your AI agents - image and video analysis with one-click integration for Claude Code
Modus Design System reduced integration guesswork — categories and install configs on the listing matched the upstream repo.
Strong directory entry: Modus Design System surfaces stars and publisher context so we could sanity-check maintenance before adopting.
We wired Modus Design System into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.
Useful MCP listing: Modus Design System is the kind of server we cite when onboarding engineers to host + tool permissions.
We evaluated Modus Design System against two servers with overlapping tools; this profile had the clearer scope statement.
Modus Design System is a well-scoped MCP server in the explainx.ai directory — install snippets and categories matched our Claude Code setup.
Modus Design System has been reliable for tool-calling workflows; the MCP profile page is a good permalink for internal docs.
According to our notes, Modus Design System benefits from clear Model Context Protocol framing — fewer ambiguous “AI plugin” claims.
Modus Design System is among the better-indexed MCP projects we tried; the explainx.ai summary tracks the official description.
We wired Modus Design System into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.
showing 1-10 of 36
Share your MCP server with the developer community
Select a client to integrate this server.
Claude Desktop configuration
{
"mcpServers": {
"modus-docs": {
"command": "npx",
"args": [
"-y",
"@julianoczkowski/mcp-modus"
]
}
}
}Provides AI assistants with access to Trimble's Modus design system documentation, including component specs, design rules, and setup guides for HTML/React projects.
Modus Design System is a community-built MCP server published by julianoczkowski that provides AI assistants with tools and capabilities via the Model Context Protocol. Discover Modus Design System: comprehensive docs, specs, and guides for React UI library and component implementation in It is categorized under developer tools, design. This server exposes 10 tools that AI clients can invoke during conversations and coding sessions.
You can install Modus Design System in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport. This server supports remote connections over HTTP, so no local installation is required.
AI assistant for Modus Web Components - Get instant help with component documentation, design rules, and setup guides directly in your IDE.
This MCP server gives AI assistants (like Cursor, Claude, VS Code) access to complete Modus Web Components documentation. Ask questions like:
Choose one of the two options below:
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.
Install globally:
npm install -g @julianoczkowski/mcp-modus
Note: On some systems, you may need
sudo npm install -g @julianoczkowski/mcp-modus
Use this config:
{
"mcpServers": {
"modus-docs": {
"command": "mcp-modus"
}
}
}
Benefits: Faster startup, works offline after installation, secure pre-bundled documentation.
Settings → Features → MCPAdd to ~/.continue/config.json using one of the JSON configs above.
Add to your config file using one of the JSON configs above:
~/Library/Application Support/Claude/claude_desktop_config.json%APPDATA%/Claude/claude_desktop_config.jsonComplete API documentation for all Modus Web Components including attributes, events, methods, slots, and usage examples.
<details> <summary><strong>View all 49 components</strong></summary>| 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 |
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 |
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 |
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.
node --version (required for npm 11.5.1+ which supports OIDC)mcp-modus --helpDocumentation is pre-bundled with each release for security and reliability. No downloads occur during installation or runtime.
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
Built for developers using Modus Web Components | MIT License | Made by Julian Oczkowski
Steps
Troubleshooting
✓ Do
✗ Don't
💡 Pro Tips
Architecture
Model Context Protocol standardizes how AI hosts (Claude, Cursor) communicate with external tools and data sources through server implementations.
Protocols
Compatibility
✓ Use when
Use when you need Claude to access external data, execute actions, or integrate with tools. Best for extending AI capabilities beyond conversation.
✗ Avoid when
Avoid when native integrations exist (use official APIs directly), for real-time critical systems, or when security/compliance requires zero external dependencies.
PAL MCP Server
Use Claude Code, Gemini CLI, Codex CLI, or any MCP client with any AI model. Acts as a multi-model proxy supporting Open