Mantine UI MCP 服务器

一个模型上下文协议 (MCP) 服务器，提供用于处理 Mantine UI 组件的工具。

功能

文档工具

• 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 Desktop

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

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

对于带有 Claude 扩展的 VS Code

添加到您的 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 组件的详细文档，特别是其 props。

搜索组件

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
)

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

环境变量

• MANTINE_VERSION: 指定用于文档的 Mantine 版本（默认：最新）
• CACHE_DOCS: 设置为 "false" 以禁用文档缓存
• CACHE_TTL: 文档缓存的生存时间（以秒为单位）
• CACHE_STORAGE: 缓存的存储方法（"memory" 或 "file"）

开发

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

# 安装依赖项
npm install

# 构建服务器
npm run build

# 用于自动重新构建的开发
npm run watch

调试

由于 MCP 服务器通过 stdio 进行通信，因此您可以使用 MCP Inspector 进行调试：

npm run inspector

许可证

MIT