Element-UI MCP Server

元素UI MCP服务器


一个模型上下文协议（MCP）服务器，提供有关Element UI v2.15.14组件的全面信息。此服务器使AI助手能够查询Element UI组件文档、属性、事件和使用示例。

项目介绍

Vue.js是一个非常强大的前端框架，Element-UI是Vue 2时代最流行、最成熟的UI组件库之一。尽管Vue生态系统现在已经进入了Vue 3时代，Element UI的最后一次提交是在2023年8月24日，但仍然有许多基于Vue 2+Element UI的项目在继续维护和迭代。

为了使大型语言模型在阅读、生成和完成代码时能够更准确地理解ElementUI的组件、属性、事件和示例，并进一步提高我们维护遗留项目的开发效率，我从其他优秀组件库的实践中汲取灵感，构建了这个ElementUI专用的MCP服务器。

我希望它对你的日常开发有用，并为继续维护Vue 2项目的其他开发人员节省更多时间。

特性

• 📋 列出组件 -获取所有Element UI组件的完整列表
• 🔍 搜索组件 -按名称或描述搜索组件
• 📖 组件详细信息 -获取特定组件的详细信息
• ⚙️ 组件属性 -访问组件的所有道具、类型和默认值
• 🎯 组件事件 -查看所有事件及其参数
• 📝 使用示例 -从组件文档中提取代码示例

安装

# Clone the repository
git clone https://github.com/yun8711/element-ui-mcp.git
cd element-ui-mcp

# Install dependencies
pnpm install

# Build the project
pnpm run build

MCP API

服务器提供6个MCP API：

1. list_components

列出所有可用的元素UI组件。

2. search_components

按关键字搜索组件。

参数：

• keyword：搜索词
• limit （可选）：最大结果数

3. get_component

获取特定组件的详细信息。

参数：

• tagName：组件标签名称（例如“el按钮”）

4. get_component_props

获取特定组件的所有属性。

参数：

• tagName：组件标记名称
• propName （可选）：特定属性名称

5. get_component_events

获取特定组件的所有事件。

参数：

• tagName：组件标记名称
• eventName （可选）：特定事件名称

6. get_component_examples

获取特定组件的使用示例。

参数：

• tagName：组件标记名称
• exampleIndex （可选）：具体示例索引

MCP集成

要将此服务器与MCP兼容的客户端一起使用，您可以通过两种方式进行配置：

选项1：本地安装

如果您已在本地克隆并构建了项目：

{
  "mcpServers": {
    "element-ui": {
      "command": "node",
      "args": ["/path/to/element-ui-mcp/stdio.js"]
    }
  }
}

选项2：全局安装（推荐）

全局安装软件包并使用npx：

npm install -g element-ui-mcp

然后在MCP客户端中配置：

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

建议使用npx方法，因为它会自动管理包并确保您使用的是最新版本。

数据源

组件数据从Element UI v2.15.14文档和类型定义中提取，包括：

• 组件属性和类型
• 事件定义
• 文档中的使用示例
• TypeScript定义

许可证

麻省理工学院