AI导哈

Mantine UI组件工具服务

一个提供Mantine UI组件文档、搜索、生成和主题配置功能的服务器工具。

  • by hakxel
  • TypeScript
  • 本地部署
  • 17 星标
  • 更新于
在 GitHub 查看 hakxel/mantine-ui-server

使用说明

Mantine UI MCP服务器

一个模型上下文协议（MCP）服务器，提供使用Mantine UI组件的工具。

特性

文档工具

  • get_component_docs：获取任何Mantine组件的详细文档
  • 搜索组件：按关键字搜索Mantine组件
  • 列表_组件：列出所有可用的Mantine组件

组件生成

  • 发电机组件：生成基于Mantine的自定义组件及其变体

主题实用程序

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

安装

全球安装

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

# Run the server directly
mantine-ui-server

与npx一起使用

npx @hakxel/mantine-ui-server

配置

适用于克劳德桌面

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

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
视窗: %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
      }
    }
  }
}

适用于带Claude扩展名的VS代码

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

{
  "mcpServers": {
    "mantine": {
      "command": "npx", 
      "args": ["@hakxel/mantine-ui-server"],
      "env": {
        "MANTINE_VERSION": "7.16.2" // Optional: specify version
      }
    }
  }
}

使用示例

获取组件文档

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
)

为亮模式和暗模式创建调色板主题配置。

环境变量

  • MANTINE_VERSION：指定用于文档的Mantine版本（默认：最新）
  • CACHE_DOCS：设置为“false”禁用文档缓存
  • CACHE_TTL：文档缓存生存时间（秒）
  • CACHE_STORAGE：缓存的存储方法（“内存”或“文件”）

发展

# 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

调试

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

npm run inspector

许可证

麻省理工学院

相关 MCP