hakxel/mantine-ui-server
If you are the rightful owner of mantine-ui-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.
Mantine UI MCP Server provides tools for working with Mantine UI components.
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.
generate_component
Generate custom Mantine-based components with variants.
create_theme_config
Create Mantine theme configurations.
create_component_theme
Create component-specific theme configurations.
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 cachingCACHE_TTL: Documentation cache time-to-live in secondsCACHE_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
