Mantine Ui Server

🚀 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。