idux-ui-mcp
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-mcpshow 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
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\
Available Tools
5 toolsget_component_detailsA
获取特定idux组件的详细信息,包括组件名称、描述、API文档(默认使用Vue3版本)
| Name | Required | Description | Default |
|---|---|---|---|
| vueVersion | No | Vue版本(默认使用vue3) | vue3 |
| componentName | Yes | 组件名称 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must carry behavioral disclosure. The verb '获取' (get) implies a non-mutating read and the default Vue3 note is helpful, but there is no statement about read-only guarantees, caching, permissions, or whether results are exhaustive.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single front-loaded sentence that states purpose, scope, and the return payload with no wasted words. It is efficient, though minimal.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple two-parameter read tool with fully documented schema and no output schema, the description covers what is fetched and the version default. Only minor gaps remain, such as how the API documentation is returned.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so both parameters are already documented in the schema. The description's mention of the Vue3 default merely restates the schema's default/enum, adding no new semantics beyond the structured data.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names a specific verb+resource (get detailed info for a specific idux component) and enumerates what is returned (name, description, API docs). It is clearly distinguishable from list/search siblings, though it does not name them explicitly.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is only implied: fetch details when you already have a component name. There is no explicit when-to-use/when-not guidance and no mention of the sibling tools (list_idux_components, search_components, get_component_examples) that cover adjacent needs.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_component_examplesC
获取特定idux组件的使用示例(默认使用Vue3版本)
| Name | Required | Description | Default |
|---|---|---|---|
| vueVersion | No | Vue版本(默认使用vue3) | vue3 |
| componentName | Yes | 组件名称 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so the description carries the full burden. It doesn't disclose whether the operation is read-only, how many examples are returned, pagination behavior, or any rate limits. The only behavioral trait mentioned is the Vue3 default, which is also in the schema. This is a significant gap for an unannotated read tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single short sentence that front-loads the core purpose and notes the default version. No wasted words, appropriately sized for a simple retrieval tool.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with two parameters, no annotations, and no output schema, the description is far too minimal. It doesn't explain what an 'example' is (code snippet, usage pattern, etc.), how many are returned, or how to interpret results. The agent is left with significant unknowns about the return value and application context.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents both parameters (vueVersion with description and default, componentName with description). The description repeats the Vue3 default but adds no syntax, format, or constraint details beyond what the schema provides. Baseline 3 is appropriate when schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clear verb+resource: 'get' + 'component usage examples' for a specific idux component. It distinguishes from siblings like get_component_details by retrieving examples rather than details. However, the scope is somewhat ambiguous: it's unclear whether it returns all examples or a single example, and how it relates to list_idux_components or search_components.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit guidance on when to use this tool versus alternatives. The description mentions the default Vue3 version but doesn't say when to choose Vue2 or when this tool is preferable over get_component_details or search_components. The agent must infer context from the name alone.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_idux_componentsB
获取所有可用的idux组件列表(默认使用Vue3版本)
| Name | Required | Description | Default |
|---|---|---|---|
| vueVersion | No | Vue版本(默认使用vue3) | vue3 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden, and it does disclose the meaningful default (Vue3) and that the result is the complete set. However, it says nothing about the read-only nature, whether the list is cached, or what a returned entry contains, leaving moderate gaps.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single tight sentence with the scope and version default front-loaded and no filler. It is appropriately sized for a one-parameter list tool, though it could front-load more clearly what is returned.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple no-required-argument list tool this is roughly adequate, but with no output schema the description never indicates the shape or contents of a component entry, and it omits any note on the sibling tools that refine or cache this list.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% and the only parameter (vueVersion, enum vue2/vue3, default vue3) is fully documented in the schema; the description's parenthetical about the Vue3 default merely restates it. Baseline 3 applies since the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb+resource (获取...列表 / list of idux components) and adds scope via "所有可用的" (all available), which implicitly separates it from search_components. It does not explicitly name or contrast with any sibling, so it falls short of a 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is only implied: you call this to enumerate everything, versus the sibling search_components for filtered lookup. There is no explicit when-to-use/when-not statement, no mention of the alternatives, and no prerequisites or caching guidance in light of update_components_cache.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_componentsC
通过关键词搜索idux组件(默认使用Vue3版本)
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | 搜索关键词 | |
| vueVersion | No | Vue版本(默认使用vue3) | vue3 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations are absent, so the description carries the full behavioral burden. It says nothing about result format, ranking, limits, or whether the search is fuzzy/exact. Only the default Vue version is hinted, but that's already in the schema.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single efficient sentence that front-loads the action. No waste, though it's too sparse to be truly helpful.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a search tool with no annotations, no output schema, and siblings that overlap, the description should explain scope and relationship to list_idux_components but does not. It's incomplete for an agent to choose correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%; both query and vueVersion are documented in the schema. The description only restates the default version, which is redundant with the schema's default field. Baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a verb (search) and resource (idux components), which is clear. But it doesn't distinguish itself from sibling list_idux_components or get_component_details, leaving the boundary unclear.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No when-to-use guidance, no when-not-to-use, no mention of alternatives like list_idux_components. The Vue3 default is implied but not explained as an option.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
update_components_cacheC
手动更新组件信息缓存(默认使用Vue3版本)
| Name | Required | Description | Default |
|---|---|---|---|
| vueVersion | No | Vue版本(默认使用vue3) | vue3 |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full behavioral burden and largely fails it: it does not say whether this invalidates or rebuilds the cache, how long it takes, whether it blocks subsequent tool calls, whether it requires network access, or what it returns on failure. Only the version default is disclosed, which is duplicated from the schema.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single short sentence with the action front-loaded and no wasted clauses. It is efficient, though the trailing "(defaults to Vue3)" repeats what the schema already declares rather than adding new information.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a side-effecting cache-refresh tool with zero annotation coverage and no output schema, an agent still lacks the essentials: whether this must be run before the read siblings, what state it leaves the cache in, and how completion is signaled. The rich enum/default schema covers only the one input, not the behavior around it.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100% with a single enumerated parameter (vue2/vue3) that already documents its default. The description merely repeats that same default, adding no syntax, format, or consequence-level meaning beyond the schema. Baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource: manually updating the component information cache, with the scope qualifier that it defaults to the Vue3 variant. It reads clearly against the read-oriented siblings (list/get/search components), though it never explicitly names or contrasts them.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The only usage signal is the word "手动" (manual), which faintly implies forcing a refresh outside automatic updates, but there is no statement of when a refresh is needed, what condition triggers it, or which sibling tools depend on a fresh cache. No alternatives or exclusions are given.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
5 tool updates
v0.1.0- First observed
get_component_details - First observed
get_component_examples - First observed
list_idux_components - First observed
search_components - First observed
update_components_cache
TDQS
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.
Maintenance
Related MCP Connectors
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Read-only MCP tools for AI agent discovery, structured resources, and NIULAI information.
Search your team's Storybook components by text or image, so agents reuse what exists.
Knowledge base MCP for AI agents on iknow.dev. Search, read, and maintain via OAuth.
Related MCP Servers
- AlicenseAqualityDmaintenanceHelps AI assistants access shadcn/ui component documentation and examples through a TypeScript-based MCP server that provides reference information for component details, usage examples, and search capabilities.4876 npm60MIT
- AlicenseAqualityDmaintenanceProvides reference information for Flux UI components, enabling AI assistants to access component documentation and examples from the Flux UI design system.413 npm93MIT
- AlicenseAqualityDmaintenanceProvides access to Ant Design component library documentation and information for automated code generation. Enables searching components by category or keyword, retrieving component props, examples, API documentation, and available icons.64 npmISC

Ruixen MCP Serverofficial
AlicenseBqualityDmaintenanceEnables AI assistants to discover, search, and retrieve Ruixen UI components from the live registry, providing installation commands for MCP-compatible clients.38 npm1MIT