@nascent/pro-components MCP 服务

一个基于 Model Context Protocol (MCP) 的服务器，为 Claude、Cursor 等 AI 客户端提供 @nascent/pro-components 组件库的文档查询能力。

@nascent/pro-components 是基于 Ant Design Pro 封装的高级组件库，提供开箱即用的业务组件（ProTable、ProCard、ProFilter 等）。

✨ 特性

• 🚀 开箱即用 - 已预处理组件文档数据，无需额外配置
• 📚 完整文档 - 提供组件文档、API 定义、代码示例
• ⚡ 高性能 - 内置缓存机制，有效减少 IO 压力
• 🎯 智能提示 - 内置专业 prompt，减少重复工具调用
• 🔧 多客户端支持 - 支持 Claude Desktop、Cursor、Cline 等客户端

📦 安装

npm install -g nascent-pro-components-mcp
# 或
pnpm add -g nascent-pro-components-mcp
# 或
yarn global add nascent-pro-components-mcp

🚀 快速开始

Cursor 配置

在 Cursor 中编辑 .cursor/mcp.json 配置文件：

{
  "mcpServers": {
    "Nascent Pro Components MCP": {
      "command": "npx",
      "args": ["-p", "nascent-pro-components-mcp@latest", "nascent-pro-components-mcp"]
    }
  }
}

Claude Desktop 配置

在 Claude Desktop 中编辑 claude_desktop_config.json 配置文件：

macOS:

~/Library/Application Support/Claude/claude_desktop_config.json

Windows:

%APPDATA%\Claude\claude_desktop_config.json

配置内容：

{
  "mcpServers": {
    "Nascent Pro Components MCP": {
      "command": "npx",
      "args": ["-p", "nascent-pro-components-mcp@latest", "nascent-pro-components-mcp"]
    }
  }
}

配置完成后，重启客户端即可使用。

🛠️ 可用工具

MCP 服务器提供以下工具供 AI 客户端调用：

list-components

列出所有可用的 Pro 组件列表。

返回信息：

• 组件名称
• 组件描述
• 可用版本
• 使用场景说明

示例查询：

有哪些可用的 Pro 组件？

get-component-docs

获取特定组件的详细文档和 API 定义。

参数：

• componentName (string): 组件名称，如 "ProTable"、"ProCard"

返回内容：

• 组件文档
• Props 说明
• API 定义
• 使用说明

示例查询：

显示 ProTable 组件的文档

list-component-examples

获取特定组件的代码示例。

参数：

• componentName (string): 组件名称

返回内容：

• 完整的代码示例
• 使用场景说明

示例查询：

显示 ProTable 组件的代码示例

📋 内置 Prompt

服务器内置了专业的 prompt，帮助 AI 更好地理解和使用组件库：

system-description

专业的 @nascent/pro-components 组件库专家助手，专注于提供准确、高效的组件技术支持。

特点：

• 快速检索和列出所有可用的 Pro 组件
• 精确获取组件的 props、API 和用法说明
• 提供完整可运行的代码示例
• 查询组件的更新历史

system-pages-generate

专业的前端 @nascent/pro-components 页面开发助手，偏向页面生成场景。

特点：

• 理解业务组件需求
• 生成符合代码规范的完整业务组件代码
• 优先使用 Pro 组件的高级功能
• 遵循单一职责、开放封闭等设计原则

💡 提示：如果客户端不支持 prompt 功能，可以手动复制 prompt 内容到对话中。

📚 支持的组件

当前版本支持以下 Pro 组件：

• ProTable - 高级表格组件
• ProCard - 高级卡片组件
• ProFilter - 筛选组件
• ProLayoutForm - 表单布局组件
• ProLayoutList - 列表布局组件
• ProColumnConfig - 列配置组件
• ProTreeContainer - 树容器组件

🔧 开发

本地开发

# 克隆仓库
git clone https://github.com/Cosmiumx/nascent-pro-components-mcp.git
cd nascent-pro-components-mcp

# 安装依赖
pnpm install

# 开发模式（监听文件变化）
pnpm dev

# 构建
pnpm build

# 测试
pnpm test

提取组件文档

如果你需要更新组件文档数据：

# 使用默认路径提取
pnpm extract

# 指定 @nascent/pro-components 仓库路径
pnpm extract /path/to/nascent-pro-components

📝 使用示例

配置完成后，你可以在 AI 客户端中这样使用：

有哪些可用的 Pro 组件？

显示 ProTable 组件的文档和 API

给我一个带筛选功能的 ProTable 示例代码

如何使用 ProCard 组件？

🤝 贡献

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 许可证

本项目采用 MIT 许可证。

🔗 相关链接

• @nascent/pro-components - 组件库源码
• Model Context Protocol - MCP 协议文档
• GitHub 仓库

👤 作者

Cosimac

• GitHub: @Cosmiumx
• Email: [email protected]

如果这个项目对你有帮助，请给个 ⭐ Star！