README.md•3.86 kB
# Element-UI MCP Server
[](README.zh-CN.md)
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
```bash
# 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 term
- `limit` (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 name
- `propName` (optional): Specific property name
### 5. `get_component_events`
Get all events for a specific component.
**Parameters:**
- `tagName`: Component tag name
- `eventName` (optional): Specific event name
### 6. `get_component_examples`
Get usage examples for a specific component.
**Parameters:**
- `tagName`: Component tag name
- `exampleIndex` (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:
```json
{
"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:
```bash
npm install -g element-ui-mcp
```
Then configure in your MCP client:
```json
{
"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