Mantine MCP Server

An MCP (Model Context Protocol) server for the Mantine React component library. This server provides AI assistants with tools to explore, search, and get documentation for Mantine components and hooks.

Features

• Search Components & Hooks: Fuzzy search across all Mantine components and hooks
• Component Documentation: Fetch detailed documentation including props, examples, and Styles API
• Hook Documentation: Get comprehensive hook documentation with usage examples
• Installation Commands: Generate correct install commands for any package manager
• Category Browsing: Explore components organized by package (core, dates, charts, etc.)
• Audit Checklist: Best practices checklist for Mantine implementations

Quick Start

Select your MCP client and run the init command:

Claude Code

npx mantine-mcp init --client claude-code

Cursor

npx mantine-mcp init --client cursor

VS Code (GitHub Copilot)

npx mantine-mcp init --client vscode

Codex

npx mantine-mcp init --client codex

OpenCode

npx mantine-mcp init --client opencode

After running the init command, restart your AI assistant and try prompts like:

• "Show me all available components in @mantine/core"
• "How do I use the Modal component in Mantine?"
• "Help me set up Mantine in my Next.js project"

Manual Configuration

If you prefer to configure manually, add the following to your MCP client's configuration file:

Claude Code

Add to .mcp.json in your project root:

{
  "mcpServers": {
    "mantine": {
      "command": "npx",
      "args": ["-y", "mantine-mcp"]
    }
  }
}

Cursor

Add to .cursor/mcp.json in your project:

{
  "mcpServers": {
    "mantine": {
      "command": "npx",
      "args": ["-y", "mantine-mcp"]
    }
  }
}

VS Code

Add to .vscode/mcp.json in your project:

{
  "servers": {
    "mantine": {
      "command": "npx",
      "args": ["-y", "mantine-mcp"]
    }
  }
}

Codex

Add to ~/.codex/config.toml:

[mcp_servers.mantine]
command = "npx"
args = ["-y", "mantine-mcp"]

OpenCode

Add to ~/.config/opencode/opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "mantine": {
      "type": "local",
      "command": ["npx", "-y", "mantine-mcp"],
      "enabled": true
    }
  }
}

CLI Commands

mantine-mcp init

Initialize the MCP server for your AI assistant.

# List supported clients
npx mantine-mcp init --list

# Configure for a specific client
npx mantine-mcp init --client claude-code
npx mantine-mcp init --client cursor
npx mantine-mcp init --client vscode
npx mantine-mcp init --client codex
npx mantine-mcp init --client opencode

# Force overwrite existing config
npx mantine-mcp init --client claude-code --force

# Specify custom working directory
npx mantine-mcp init --client cursor --cwd /path/to/project

mantine-mcp serve

Start the MCP server directly (used internally by AI assistants).

npx mantine-mcp serve

Available Tools

Once configured, the following tools are available to your AI assistant:

list_mantine_components

List available Mantine UI components, optionally filtered by category.

// List all core components
{ category: "core", limit: 20 }

// List date components
{ category: "dates" }

search_mantine

Search for components or hooks by name or description.

// Search for button-related components
{ query: "button" }

// Search hooks only
{ query: "state", category: "hooks" }

get_component_docs

Get detailed documentation for a specific component.

{ name: "Button" }
{ name: "Modal" }
{ name: "DatePicker" }

get_hook_docs

Get documentation for a specific hook.

{ name: "useDisclosure" }
{ name: "useLocalStorage" }

get_install_command

Generate installation commands for Mantine packages.

// Basic setup
{ packages: ["core", "hooks"] }

// Full setup with dates and charts
{ packages: ["core", "hooks", "dates", "charts"], packageManager: "pnpm" }

list_mantine_categories

List all Mantine packages with descriptions.

list_mantine_hooks

List all available hooks from @mantine/hooks.

get_mantine_audit_checklist

Get a comprehensive checklist for auditing Mantine implementations.

Supported Packages

| Package | Description | |---------|-------------| | @mantine/core | Core components library (100+ components) | | @mantine/hooks | 50+ hooks for state and UI management | | @mantine/form | Form management library | | @mantine/dates | Date inputs and calendars | | @mantine/charts | Recharts-based charts library | | @mantine/notifications | Notification system | | @mantine/spotlight | Command center (Ctrl+K) | | @mantine/code-highlight | Code highlighting | | @mantine/tiptap | Rich text editor | | @mantine/dropzone | File drag and drop | | @mantine/carousel | Carousel component | | @mantine/nprogress | Navigation progress | | @mantine/modals | Centralized modals manager |

Example Prompts

Once configured, try these prompts with your AI assistant:

Browse & Search

• "Show me all available components in @mantine/core"
• "Find me a date picker component from Mantine"
• "What hooks does Mantine provide?"

Get Documentation

• "How do I use the Modal component in Mantine?"
• "Show me examples of the useDisclosure hook"
• "What props does the Button component accept?"

Installation & Setup

• "Help me set up Mantine in my Next.js project"
• "What packages do I need for a form with date inputs?"
• "Generate the install command for Mantine with charts"

Build Features

• "Create a login form using Mantine components"
• "Build a dashboard layout with Mantine AppShell"
• "Implement dark mode toggle with Mantine"

Troubleshooting

MCP Not Responding

1. Check Configuration - Verify the MCP server is properly configured
2. Restart Client - Restart your AI assistant after configuration changes
3. Clear npx cache - Run npx clear-npx-cache if having issues

No Tools Available

1. Verify Connection - In Claude Code, run /mcp to check server status
2. Check Logs - In Cursor, check View → Output → "MCP: project-*"
3. Re-enable Server - Try disabling and re-enabling the MCP server

Development

# Clone the repository
git clone https://github.com/projectashik/mantine-mcp.git
cd mantine-mcp

# Install dependencies
npm install

# Build
npm run build

# Development with watch
npm run dev

# Type check
npm run typecheck

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT - see LICENSE for details.

Author

Ashik Chapagain - GitHub

Links

• npm Package
• GitHub Repository
• Mantine Documentation
• MCP Specification