AI导哈

组件库智能访问服务

idux-ui-mcp 是一个基于 Model Context Protocol (MCP) 的服务，提供对 iDux UI 组件库的智能访问，帮助开发者和 AI 助手更有效地检索组件信息、文档和示例代码。

  • by hangboss1761
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 hangboss1761/idux-mcp

使用说明

idux-ui-mcp

idux-ui-mcp 是一个基于 Model Context Protocol (MCP) 的mcp服务，提供对 iDux UI 组件库的智能访问。本mcp服务允许开发者和 AI 助手更有效地检索 iDux 组件信息、文档和示例代码。

功能特性

Tools:

  • list_idux_components: 获取所有可用的 idux 组件列表
  • get_component_details: 获取特定 idux 组件的详细信息
  • get_component_examples: 获取特定 idux 组件的使用示例
  • search_components: 通过关键词搜索 idux 组件
  • update_components_cache: 手动更新组件信息缓存

优势对比

相较于 RAG (Retrieval-Augmented Generation) 方案：

特性 RAG 方案 idux-ui-mcp
数据新鲜度 依赖训练数据更新周期 可以实时从官方源获取
信息准确性 相似度匹配、信息不全 100% 精确匹配且信息完整
响应速度 向量检索耗时 本地缓存，毫秒级响应
版本控制 不支持 支持多版本切换

使用场景

场景一：开发使用idux-ui 的 web页面

实现一个TODO List应用，要求TODO项使用表格展示，UI组件使用idux

场景二：组件库问答

idux 的 pagination 组件如何实现分页总数自定义的效果

安装

使用npx

{
  "mcpServers": {
    "idux-ui-mcp": {
      "command": "npx",
      "args": ["-y", "idux-ui-mcp"]
    }
  }
}

环境变量配置：

环境变量 描述 必须 示例 默认值
IDUX_ZIP_URL_VUE2 Vue2 版本 zip 包下载地址（预留） 否 https://your.domain/idux-vue2.zip -
IDUX_ZIP_URL_VUE3 Vue3 版本 zip 包下载地址 否 https://your.domain/idux-vue3.zip https://github.com/IDuxFE/idux/archive/refs/heads/main.zip
DEFAULT_VUE_VERSION 默认使用的Vue版本 否 vue3 vue3
DOWNLOAD_TIMEOUT 下载超时时间（毫秒） 否 60000 60000
LOG_LEVEL 日志级别（debug/info/warn/error） 否 error error 
{
  "mcpServers": {
    "idux-ui-mcp": {
      "command": "...",
      "args": ["..."],
      "env": {
        "DOWNLOAD_TIMEOUT": "60000",
        "LOG_LEVEL": "error"
      }
    }
  }
}

开发

# 构建项目
pnpm build

# 监视文件变更并自动重新构建
pnpm watch

# 运行测试
pnpm test

调试

使用 MCP Inspector 工具可以对服务器进行调试：

# 先构建项目
pnpm watch

npx @modelcontextprotocol/inspector node dist/index.js

缓存机制

组件信息缓存存储在用户目录下：

  • macOS/Linux: ~/.idux-mcp/cache/
  • Windows: %USERPROFILE%\.idux-mcp\cache\

缓存清除也可以选择直接删掉上面的目录

日志

日志存放在缓存目录：~/.idux-mcp/logs/ or %USERPROFILE%\.idux-mcp\logs\

相关 MCP