Element Plus Docs MCP

一个通过 MCP 查询 Element Plus 中文组件文档 的本地服务。

服务会实时读取官网，并在内存中缓存一小时。它提供三个工具：

• list_components：列出或筛选全部组件
• get_component_doc：按中英文名或 slug 获取组件文档，可指定小节
• search_component_docs：在全部或指定组件文档中搜索关键词

环境要求

• Node.js 20 或更高版本

安装和构建

npm install
npm run build

从源码使用时，可以将命令链接到本机：

npm link

完成后可以直接运行 element-plus-docs-mcp 启动服务。

配置 MCP 客户端

在支持 stdio MCP 的客户端配置中加入：

{
  "mcpServers": {
    "element-plus-docs": {
      "command": "element-plus-docs-mcp",
      "args": []
    }
  }
}

使用上述配置前，请先执行 npm run build && npm link。

Claude Code VS Code 扩展

Claude Code 的 VS Code 扩展可以管理已经配置的 MCP 服务。添加服务时，可以使用项目级 .mcp.json，或者在 VS Code 集成终端中写入用户级配置。

项目级配置

适合只在当前项目中使用，也可以将配置提交到版本库与团队共享。

1. 确认本服务已经构建：

   npm install
   npm run build
   npm link
   

2. 在需要使用 MCP 的 VS Code 项目根目录创建 .mcp.json：

   {
     "mcpServers": {
       "element-plus-docs": {
         "type": "stdio",
         "command": "element-plus-docs-mcp",
         "args": [],
         "env": {}
       }
     }
   }
   

3. 在 VS Code 中执行 Developer: Reload Window，然后打开 Claude Code 聊天面板并输入 /mcp。

4. 首次加载项目级 MCP 时确认授权，并检查 element-plus-docs 是否显示为已连接。

用户级配置

如果希望 Claude Code VS Code 扩展在所有项目中都能使用该服务，请在 VS Code 集成终端中运行：

claude mcp add \
  --transport stdio \
  --scope user \
  element-plus-docs \
  -- element-plus-docs-mcp

配置完成后，在 Claude Code 聊天面板输入 /mcp 进行查看、重连或停用。用户级 MCP 配置会同时提供给 Claude Code CLI 和 VS Code 扩展。

可以用下面的问题验证：

使用 element-plus-docs 查询 Table 组件的 span-method 用法

如果连接失败，请检查：

• dist/index.js 是否存在；不存在时重新运行 npm run build
• 是否已经执行 npm link，并能在终端中运行 element-plus-docs-mcp
• 在 Claude Code 面板的 /mcp 中尝试重新连接

工具示例

获取 Button 的基础用法：

{
  "component": "button",
  "section": "基础用法"
}

搜索 Table 的 span-method：

{
  "query": "span-method",
  "components": ["table"]
}

配置项

• ELEMENT_PLUS_DOCS_BASE_URL：文档基础地址，默认 https://cn.element-plus.org/zh-CN/component
• ELEMENT_PLUS_CACHE_TTL_MS：缓存时间（毫秒），默认 3600000

开发

npm run dev
npm run check