Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@idux-ui-mcp show me the button component examples"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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: 手动更新组件信息缓存
Related MCP server: Flux UI MCP Server
相较于 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 包下载地址（预留） | 否 | - | |
IDUX_ZIP_URL_VUE3 | Vue3 版本 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\
获取特定idux组件的详细信息，包括组件名称、描述、API文档（默认使用Vue3版本）
Inputs: componentName (required), vueVersion.
获取特定idux组件的使用示例（默认使用Vue3版本）
Inputs: componentName (required), vueVersion.
获取所有可用的idux组件列表（默认使用Vue3版本）
Inputs: vueVersion.
通过关键词搜索idux组件（默认使用Vue3版本）
Inputs: query (required), vueVersion.
手动更新组件信息缓存（默认使用Vue3版本）
Inputs: vueVersion.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 5 tools
Tools target distinct operations: listing all components, searching by keyword, retrieving details, retrieving examples, and cache maintenance. list_idux_components and search_components have some overlap since search can also return component lists, but descriptions clarify. An agent could occasionally confuse when to list versus search.
Names mostly follow verb_noun snake_case (list_idux_components, get_component_details, get_component_examples, search_components, update_components_cache). Minor deviations: list_idux_components embeds 'idux' while others do not, and singular/plural varies (component vs components). Still readable and largely consistent.
Five tools are well-scoped for a component documentation MCP: discovery, detail, examples, search, and cache refresh. Each has a clear role with no bloat or missing essentials. The count fits the narrow domain perfectly.
Core lifecycle for component lookup is covered: list/search, details, examples, and cache update. Minor gap: no explicit version listing or selection despite 'default Vue3' mentions, but agents can likely pass arguments or work around it.
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
UI encyclopedia for agents — search Elements and fetch component specs over MCP (OAuth).
Find Flood UI components, recipes, tokens, and design skills for coding agents.
Search, read and install agent-ready React components, screens and blocks for AI products.
