Element-UI MCP Server
A Model Context Protocol (MCP) server that provides comprehensive information about Element-UI v2.15.14 components. This server enables AI assistants to query Element-UI component documentation, properties, events, and usage examples.
Project Introduction
Vue.js is an extremely powerful frontend framework, and Element-UI is one of the most popular and mature UI component libraries from the Vue 2 era. Although the Vue ecosystem has now entered the Vue 3 era, with Element-UI's last commit being on August 24, 2023, there are still many projects based on Vue 2 + Element-UI that continue to be maintained and iterated.
To enable large language models to more accurately understand Element-UI's components, properties, events, and examples when reading, generating, and completing code, and to further improve our development efficiency in maintaining legacy projects, I drew inspiration from the practices of other excellent component libraries and built this Element-UI dedicated MCP Server.
I hope it will be useful in your daily development and save more time for fellow developers who continue to maintain Vue 2 projects.
Features
- 📋 List Components - Get a complete list of all Element-UI components
- 🔍 Search Components - Search components by name or description
- 📖 Component Details - Get detailed information about specific components
- ⚙️ Component Properties - Access all props, types, and defaults for components
- 🎯 Component Events - View all events and their parameters
- 📝 Usage Examples - Extract code examples from component documentation
Installation
# 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
The server provides 6 MCP API:
1. list_components
Lists all available Element-UI components.
2. search_components
Search for components by keyword.
Parameters:
keyword: Search termlimit(optional): Maximum number of results
3. get_component
Get detailed information about a specific component.
Parameters:
tagName: Component tag name (e.g., "el-button")
4. get_component_props
Get all properties for a specific component.
Parameters:
tagName: Component tag namepropName(optional): Specific property name
5. get_component_events
Get all events for a specific component.
Parameters:
tagName: Component tag nameeventName(optional): Specific event name
6. get_component_examples
Get usage examples for a specific component.
Parameters:
tagName: Component tag nameexampleIndex(optional): Index of specific example
MCP Integration
To use this server with MCP-compatible clients, you can configure it in two ways:
Option 1: Local Installation
If you have cloned and built the project locally:
{
"mcpServers": {
"element-ui": {
"command": "node",
"args": ["/path/to/element-ui-mcp/stdio.js"]
}
}
}
Option 2: Global Installation (Recommended)
Install the package globally and use npx:
npm install -g element-ui-mcp
Then configure in your MCP client:
{
"mcpServers": {
"element-ui": {
"command": "npx",
"args": ["-y", "element-ui-mcp"]
}
}
}
The npx approach is recommended as it automatically manages the package and ensures you're using the latest version.
Data Source
The component data is extracted from Element-UI v2.15.14 documentation and type definitions, including:
- Component properties and types
- Event definitions
- Usage examples from documentation
- TypeScript definitions
License
MIT