Mcp Element Ui

# MCP Element UI Element UI 的 ModelContextProtocol (MCP) 服务器，为 AI 助手提供 Element UI 组件的元数据信息。 ## 功能特点 - 提供 Element UI 组件的完整元数据 - 支持组件属性、事件、插槽的查询 - 包含组件示例代码和最佳实践 - 实时更新的组件文档数据 - 支持主题定制和样式变量管理 ## 安装 ```bash npm install @thunder_ai/mcp-element-ui ``` ## 使用方法 ### 在 Claude Desktop 中使用 在 `claude_desktop_config.json` 中添加以下配置： ```json { "mcpServers": { "element-ui": { "command": "npx", "args": ["-y", "@thunder_ai/mcp-element-ui"] } } } ``` ### 在 Cursor 中使用 在 AI 助手配置中添加以下设置： ```json { "mcpServers": { "element-ui": { "command": "npx", "args": ["-y", "@thunder_ai/mcp-element-ui"] } } } ``` ## 可用工具 ### 1. 获取组件元数据 ```typescript use_mcp_tool({ server_name: "element-ui", tool_name: "get_component_meta", arguments: { component: "Button" } }); ``` 返回组件的完整元数据，包括： - 属性定义 - 事件定义 - 插槽信息 - 类型定义 - 示例代码 ### 2. 搜索组件 ```typescript use_mcp_tool({ server_name: "element-ui", tool_name: "search_components", arguments: { query: "表单" } }); ``` 根据关键词搜索相关组件。 ### 3. 获取组件列表 ```typescript use_mcp_tool({ server_name: "element-ui", tool_name: "list_components", arguments: {} }); ``` 返回所有可用组件的列表。 ### 4. 主题定制工具 主题定制工具提供了一系列用于查询和自定义主题样式的功能： ```typescript // 获取所有主题变量列表 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' } }); ``` 支持的主题配置项包括： - 颜色系统（主色、功能色、文本色等） - 边框样式（颜色、圆角） - 字体设置（大小、字体族） ## 开发 ```bash # 安装依赖 npm install # 开发模式 npm run dev # 构建 npm run build # 测试 npm run test ``` ## 许可证 MIT ## 作者 Thunder AI