Mantine UI MCP Server

Mantine UI MCP Server

A Model Context Protocol (MCP) server that provides tools for working with Mantine UI components.

Features

Documentation Tools

• get_component_docs: Get detailed documentation for any Mantine component
• search_components: Search for Mantine components by keyword
• list_components: List all available Mantine components

Component Generation

• generate_component: Generate custom Mantine-based components with variants

Theme Utilities

• create_theme_config: Create Mantine theme configurations
• create_component_theme: Create component-specific theme configurations

Installation

Global Installation

# Install globally
npm install -g @hakxel/mantine-ui-server

# Run the server directly
mantine-ui-server

Using with npx

npx @hakxel/mantine-ui-server

Configuration

For Claude Desktop

Add the server configuration to your Claude Desktop config file:

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

{
  "mcpServers": {
    "mantine": {
      "command": "npx",
      "args": ["@hakxel/mantine-ui-server"],
      "env": {
        "MANTINE_VERSION": "7.16.2" // Optional: specify version
      }
    }
  }
}

For VS Code with Claude Extension

Add to your VSCode settings or Cline extension settings:

{
  "mcpServers": {
    "mantine": {
      "command": "npx", 
      "args": ["@hakxel/mantine-ui-server"],
      "env": {
        "MANTINE_VERSION": "7.16.2" // Optional: specify version
      }
    }
  }
}

Usage Examples

Get Component Documentation

get_component_docs(component: "Button", section: "props")

Returns detailed documentation for the Button component, specifically its props.

Search Components

search_components(query: "input")

Returns a list of all components matching the search query "input".

Generate a Component

generate_component(
  name: "CustomButton", 
  mantineComponent: "Button",
  props: {
    size: "md",
    variant: "filled"
  },
  styling: {
    useModule: true
  }
)

Generates a new CustomButton component based on Mantine's Button.

Create a Theme Configuration

create_theme_config(
  extension: "colors",
  definitions: {
    primary: ["#90CAF9", "#2196F3", "#1976D2"],
    secondary: ["#CE93D8", "#9C27B0", "#7B1FA2"]
  },
  darkMode: true
)

Creates a color palette theme configuration for light and dark modes.

Environment Variables

• MANTINE_VERSION: Specify which version of Mantine to use for documentation (default: latest)
• CACHE_DOCS: Set to "false" to disable documentation caching
• CACHE_TTL: Documentation cache time-to-live in seconds
• CACHE_STORAGE: Storage method for cache ("memory" or "file")

Development

# Clone the repository
git clone https://github.com/hakxel/mantine-ui-server.git
cd mantine-ui-server

# Install dependencies
npm install

# Build the server
npm run build

# For development with auto-rebuild
npm run watch

Debugging

Since MCP servers communicate over stdio, you can use the MCP Inspector for debugging:

npm run inspector

License

MIT