AI导哈

组件文档查询工具

my-design 组件库的 MCP Server，提供组件文档、Props、示例、源码、Design Tokens的查询和代码生成功能。

  • by Davont
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 Davont/my-compoent-mcp

使用说明

@my-design/mcp

my-design 组件库的 MCP Server，让 AI 能够查询组件文档、Props、示例、源码、Design Tokens，生成符合规范的代码。

工具一览

工具 说明
get_context_bundle 一次性获取组件的完整上下文（文档 + Props + 示例 + Tokens），适合代码生成场景
component_search 按关键词搜索组件，返回匹配列表和适用场景
component_details 获取组件详情（Props、Events、行为说明），支持按章节和属性过滤
theme_tokens 查询 Design Tokens（颜色、字号、间距等）和 CSS 变量映射
changelog_query 查询组件变更日志和 breaking changes
source_inspect 查看组件源码结构和关键函数实现
fetch_design_data 从 Octo 平台下载设计稿到本地（支持分享口令和 fileKey）
design_to_code 将设计稿 JSON 转换为 DSL / HTML / Vue 代码

快速开始

安装依赖

npm install

构建

npm run build

启动

Stdio 模式（Cursor / Claude Desktop 等 MCP 客户端）：

node dist/stdio.js

HTTP 模式：

node dist/http.js --port 3000

MCP 客户端配置

{
  "mcpServers": {
    "my-design": {
      "command": "node",
      "args": ["/path/to/dist/stdio.js"]
    }
  }
}

环境变量

变量 必需 说明
OCTO_API_BASE 否 Octo API 地址（fileKey 下载模式需要）
OCTO_TOKEN 否 Octo 认证 Token（fileKey 下载模式需要）
OCTO_DIR 否 .octo/ 目录路径，默认当前目录
COMPONENT_PACKAGE_ROOT 否 组件包源码路径（source_inspect 用），默认读 node_modules/@douyinfe/semi-ui

项目结构

src/
  tools/          # MCP 工具定义和处理器
  utils/          # 工具函数（文档读取、源码解析等）
  server.ts       # MCP Server 创建和配置
  stdio.ts        # stdio 传输入口
  http.ts         # HTTP 传输入口
doc/
  components/     # 组件文档（Markdown）
  tokens/         # Design Tokens（JSON）
  guidelines/     # 设计规范
  changelog/      # 变更日志
  index.json      # 组件索引
tests/
  tools/          # 工具测试
  utils/          # 工具函数测试

开发

npm run build          # 构建
npm run dev            # watch 模式
npx rstest run         # 运行测试

控量策略

工具设计遵循渐进式获取，减少 token 消耗：

  • component_details brief 模式只返回概述 + Props 名称列表
  • sections 参数按需获取指定章节
  • propFilter 只返回指定属性
  • 大文档自动隐藏代码块，配合 get_code_block 按需获取
  • get_context_bundle 一次打包常用上下文，减少多次调用

相关 MCP