🚀 Mantine UI MCP 服务器

Mantine UI MCP 服务器是一个提供与 Mantine UI 组件协作工具的 Model Context Protocol (MCP) 服务器，它能帮助开发者更高效地使用 Mantine UI 组件，提供了丰富的文档工具、组件生成功能以及主题实用工具。

🚀 快速开始

Mantine UI MCP 服务器提供了便捷的安装方式，你可以选择全局安装或者使用 npx 进行安装。安装完成后，根据你的使用场景进行相应配置，即可开始使用服务器提供的各项功能。

✨ 主要特性

文档工具

• get_component_docs：获取任意 Mantine 组件的详细文档。
• search_components：根据关键词搜索 Mantine 组件。
• list_components：列出所有可用的 Mantine 组件。

组件生成

• generate_component：生成基于 Mantine 的自定义组件及其变体。

主题实用工具

• create_theme_config：创建 Mantine 主题配置。
• create_component_theme：创建组件特定的主题配置。

📦 安装指南

全局安装

# 全局安装
npm install -g @hakxel/mantine-ui-server

# 直接运行服务器
mantine-ui-server

使用 npx

npx @hakxel/mantine-ui-server

📚 详细文档

适用于 Claude 桌面版

将服务器配置添加到您的 Claude 桌面版配置文件中：

• 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" // 可选：指定版本
      }
    }
  }
}

适用于 VS Code 的 Claude 扩展

添加到您的 VSCode 设置或 Cline 扩展设置中：

{
  "mcpServers": {
    "mantine": {
      "command": "npx", 
      "args": ["@hakxel/mantine-ui-server"],
      "env": {
        "MANTINE_VERSION": "7.16.2" // 可选：指定版本
      }
    }
  }
}

💻 使用示例

基础用法

获取组件文档

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

返回 Button 组件的详细文档，特别是其属性部分。

搜索组件

search_components(query: "input")

返回所有匹配搜索查询“input”的组件列表。

生成组件

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

基于 Mantine 的 Button 组件生成一个新的 CustomButton 组件。

创建主题配置

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

创建包含深色和浅色模式配置的颜色调色板主题。

🔧 技术细节

环境变量

开发

# 克隆仓库
git clone https://github.com/hakxel/mantine-ui-server.git
cd mantine-ui-server

# 安装依赖
npm install

# 构建服务器
npm run build

# 带自动重建的开发
npm run watch

调试

由于 MCP 服务器通过标准输入输出通信，您可以使用 MCP 调试工具：

mantine-ui-server --inspect=8700

然后在 chrome://devtools 中打开调试界面。

📄 许可证

项目采用 MIT License。