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许可证
麻省理工学院