RDesign MCP Server

基于 Model Context Protocol (MCP) 的 RDesign Flutter 组件库查询服务。为 AI 编程助手提供组件列表、API 文档、代码示例的结构化查询能力。

本项目是独立的 stdio 模式 MCP Server（3 个文档查询工具）。完整的 25 个 MCP 工具（含组件映射、Figma 写入等）将在 rdesign-server 中通过 Streamable HTTP /mcp 端点统一提供，详见 AI 设计到代码工作流 和 组件映射能力总览。

功能

• get_component_list — 查询组件列表（55 个组件），支持按分类过滤（base / navigation / form / data / message / layout）
• get_component_docs — 查询组件 API 文档（Markdown 格式），支持单个或批量查询，模糊匹配组件名
• get_component_demos — 查询组件代码示例，支持按示例名称过滤

架构

src/
├── index.ts              ← 入口，初始化数据源 → 注册表 → MCP Tools
├── categories.ts         ← 55 个组件元数据定义、分类、文件名映射
├── registry.ts           ← 组件注册表，构建组件索引（支持两种数据源模式）
├── name-resolver.ts      ← 组件名解析，TD/RD 前缀归一化 + Levenshtein 模糊匹配
├── prefix-replacer.ts    ← TD→RD 前缀替换（包名 + 类名）
├── content-cache.ts      ← 内容缓存层，统一两种数据源的读取接口
├── data-source.ts        ← 四种数据源实现（见下文）
├── readme-parser.ts      ← README.md 解析器，提取 front-matter / API 文档 / 代码示例
└── tools/
    ├── get-component-list.ts
    ├── get-component-docs.ts
    └── get-component-demos.ts

数据源

服务支持四种数据源，按优先级从高到低：

| 优先级 | 环境变量 | 模式 | 说明 | |--------|----------|------|------| | 1 | RDESIGN_SITE_PATH | 本地 Site | 扫描本地 rdesign-site 目录的 README.md | | 2 | RDESIGN_SITE_BASE_URL | 远程 Site | 通过 HTTP 获取 rdesign-site 的 README.md | | 3 | RDESIGN_CDN_BASE_URL | 远程 CDN | 通过 CDN manifest.json + 文件下载（旧模式） | | 4 | RDESIGN_COMPONENT_PATH | 本地文件 | 读取 rdesign-component 的 assets 目录（旧模式，默认） |

Site 模式下，数据直接从 README.md 解析获取，已包含 RD 前缀，无需额外替换。 旧模式下，数据来自 TDesign 原始文件，通过 PrefixReplacer 自动完成 TD→RD 前缀转换。

安装与构建

cd rdesign-mcp-server
pnpm install
pnpm build

MCP 客户端配置

在 IDE 的 MCP 配置文件中添加（如 Kiro 的 .kiro/settings/mcp.json）：

{
  "mcpServers": {
    "rdesign": {
      "command": "node",
      "args": ["/path/to/rdesign-mcp-server/dist/index.js"],
      "env": {
        "RDESIGN_SITE_PATH": "/path/to/rdesign-site/src"
      }
    }
  }
}

环境变量

| 变量 | 说明 | 默认值 | |------|------|--------| | RDESIGN_SITE_PATH | rdesign-site/src 目录的绝对路径 | — | | RDESIGN_SITE_BASE_URL | rdesign-site README.md 的远程 base URL | — | | RDESIGN_CDN_BASE_URL | CDN 资源的 base URL（旧模式） | — | | RDESIGN_COMPONENT_PATH | rdesign-component 目录的绝对路径（旧模式） | ./rdesign-component |

未设置任何环境变量时，默认使用当前工作目录下的 rdesign-component 路径。

启动

# 通常由 MCP 客户端自动调用
node dist/index.js

# 或通过 pnpm
pnpm start

测试

pnpm test

演进计划

本项目的 3 个文档查询工具将迁移到 rdesign-server，与组件映射、Figma 写入工具合并为统一的 MCP 端点（Streamable HTTP /mcp）。完整工具集包含 25 个工具：

| 分类 | 工具数 | 说明 | |------|--------|------| | 组件文档查询 | 3 | get_component_list / get_component_docs / get_component_demos | | 组件映射查询 | 4 | get_component_key / resolve_component / resolve_figma_nodes / sync_component_keys | | Figma 节点创建 | 4 | create_frame / create_component_instance / create_text / create_rectangle | | Figma 布局样式 | 8 | set_layout_mode / set_padding / set_item_spacing / set_axis_align 等 | | Figma 节点操作 | 3 | move_node / resize_node / delete_node | | Figma 检查导出 | 3 | get_node_info / export_node_as_image / invoke_figma_api |

迁移后，MCP 客户端配置将改为 URL 模式：

{
  "mcpServers": {
    "rdesign": {
      "url": "https://<server>/mcp",
      "headers": { "X-Figma-Token": "<your-figma-pat>" }
    }
  }
}

技术栈

• TypeScript (ES2022, Node16 模块)
• @modelcontextprotocol/sdk — MCP 协议 SDK
• Zod — 参数校验
• Vitest + fast-check — 测试