# Element Plus Docs MCP

一个通过 MCP 查询 [Element Plus 中文组件文档](https://cn.element-plus.org/zh-CN/component/overview) 的本地服务。

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

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

## 环境要求

- Node.js 20 或更高版本

## 安装和构建

```bash
npm install
npm run build
```

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

```bash
npm link
```

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

## 配置 MCP 客户端

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

```json
{
  "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. 确认本服务已经构建：

   ```bash
   npm install
   npm run build
   npm link
   ```

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

   ```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 集成终端中运行：

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

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

可以用下面的问题验证：

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

如果连接失败，请检查：

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

## 工具示例

获取 Button 的基础用法：

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

搜索 Table 的 `span-method`：

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

## 配置项

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

## 开发

```bash
npm run dev
npm run check
```