Element Plus MCP Server

What is element-plus-mcp?

element-plus-mcp is an MCP (Model Context Protocol) server that generates Element Plus Vue components on demand using large language models (LLMs). It is designed for developers who want to quickly scaffold Vue components by describing them in natural language, with support for multiple LLM providers and a built-in live preview service.

How to use element-plus-mcp?

Configure API keys in a .env file (supports DeepSeek, OpenAI, Anthropic, Gemini). Start the server, then send HTTP requests to the /api/mcp/generate endpoint with a userPrompt and optional llmConfig. For MCP protocol usage, send JSON-RPC calls to /api/mcp-protocol/mcp or use SSE connections at /api/mcp-protocol/sse. Use the /api/mcp/models endpoint to list available models.

Key features of element-plus-mcp

• Generates Vue components from natural language descriptions
• Supports multiple LLM providers (OpenAI, DeepSeek, Anthropic, Gemini)
• Offers MCP protocol endpoints (HTTP JSON-RPC and SSE)
• Provides component filtering and selection via LLM analysis
• Includes a live code preview service (Vite + Vue sandbox)
• Uses LRU caching and prompt optimization to reduce API costs

Use cases of element-plus-mcp

• Rapidly prototyping Element Plus components by describing them in plain text
• Integrating component generation into CI/CD pipelines or internal tools
• Generating complex UI patterns (e.g., searchable tables, date pickers) with a single prompt
• Previewing generated Vue components before adding them to a project