MCP Element UI

Element UI 的 ModelContextProtocol (MCP) 服务器，为 AI 助手提供 Element UI 组件的元数据信息。

功能特点

• 提供 Element UI 组件的完整元数据
• 支持组件属性、事件、插槽的查询
• 包含组件示例代码和最佳实践
• 实时更新的组件文档数据
• 支持主题定制和样式变量管理

安装

npm install @thunder_ai/mcp-element-ui

使用方法

在 Claude Desktop 中使用

在 claude_desktop_config.json 中添加以下配置：

{
  "mcpServers": {
    "element-ui": {
      "command": "npx",
      "args": ["-y", "@thunder_ai/mcp-element-ui"]
    }
  }
}

在 Cursor 中使用

在 AI 助手配置中添加以下设置：

{
  "mcpServers": {
    "element-ui": {
      "command": "npx",
      "args": ["-y", "@thunder_ai/mcp-element-ui"]
    }
  }
}

可用工具

1. 获取组件元数据

use_mcp_tool({
  server_name: "element-ui",
  tool_name: "get_component_meta",
  arguments: {
    component: "Button"
  }
});

返回组件的完整元数据，包括：

• 属性定义
• 事件定义
• 插槽信息
• 类型定义
• 示例代码

2. 搜索组件

use_mcp_tool({
  server_name: "element-ui",
  tool_name: "search_components",
  arguments: {
    query: "表单"
  }
});

根据关键词搜索相关组件。

3. 获取组件列表

use_mcp_tool({
  server_name: "element-ui",
  tool_name: "list_components",
  arguments: {}
});

返回所有可用组件的列表。

4. 主题定制工具

主题定制工具提供了一系列用于查询和自定义主题样式的功能：

// 获取所有主题变量列表
use_mcp_tool({
  server_name: "element-ui",
  tool_name: "mcp_element_ui_getThemeVars",
  arguments: {}
});

// 获取默认主题配置
use_mcp_tool({
  server_name: "element-ui",
  tool_name: "mcp_element_ui_getThemeDefault",
  arguments: {}
});

// 获取颜色系统配置
use_mcp_tool({
  server_name: "element-ui",
  tool_name: "mcp_element_ui_getColorSystem",
  arguments: {}
});

// 自定义主题配置
use_mcp_tool({
  server_name: "element-ui",
  tool_name: "mcp_element_ui_customizeTheme",
  arguments: {
    config: {
      colors: {
        primary: '#409EFF',
        success: '#67C23A'
      },
      border: {
        radius: {
          base: '4px'
        }
      }
    }
  }
});

// 生成主题样式
use_mcp_tool({
  server_name: "element-ui",
  tool_name: "mcp_element_ui_generateTheme",
  arguments: {
    config: {
      colors: {
        primary: '#409EFF'
      }
    },
    format: 'css'  // 或 'scss'
  }
});

支持的主题配置项包括：

• 颜色系统（主色、功能色、文本色等）
• 边框样式（颜色、圆角）
• 字体设置（大小、字体族）

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 测试
npm run test

许可证

MIT

作者

Thunder AI