Mantine Ui Server

🚀 Mantine UI MCP Server

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

🚀 Quick Start

The Mantine UI MCP Server offers a range of tools for interacting with Mantine UI components. It simplifies the process of obtaining component documentation, generating custom components, and creating theme configurations.

✨ Features

Documentation Tools

• get_component_docs: Retrieve 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 and their variants.

Theme Utilities

• create_theme_config: Create a Mantine theme configuration.
• create_component_theme: Create a component-specific theme configuration.

📦 Installation

Global Installation

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

# Run the server directly
mantine-ui-server

Using npx

npx @hakxel/mantine-ui-server

📚 Documentation

Configuration for Claude Desktop

Add the server configuration to your Claude desktop configuration 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 the version
      }
    }
  }
}

Configuration for the Claude Extension in VS Code

Add it 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 the version
      }
    }
  }
}

💻 Usage Examples

Get Component Documentation

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

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

Search for Components

search_components(query: "input")

Returns a list of all components that match 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 component.

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 with both dark and light mode configurations.

🔧 Technical Details

Environment Variables

• MANTINE_VERSION: Specify the Mantine version to use (default: latest).
• CACHE_DOCS: Set to "false" to disable documentation caching.
• CACHE_TTL: Expiration time for documentation caching (in seconds).
• CACHE_STORAGE: Caching storage method ("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

# Development with automatic rebuild
npm run watch

Debugging

Since the MCP server communicates via standard input and output, you can use the MCP debugging tool:

mantine-ui-server --inspect=8700

Then open the debugging interface at chrome://devtools.

📄 License

This project is licensed under the MIT License.