Ant Design

Servidor MCP de Ant Design

Un servidor de componentes Ant Design basado en el Protocolo de Contexto de Modelo (MCP), que proporciona a los asistentes de IA una rica documentación, ejemplos y mejores prácticas de los componentes de Ant Design.

🚀 Características

• Consulta de documentación de componentes: obtenga documentación detallada de todos los componentes de Ant Design
• Obtención de código de ejemplo: proporciona el código de ejemplo completo de cada componente
• Consulta de documentación de API: consulte las propiedades y métodos de la API de los componentes
• Guía de mejores prácticas: obtenga recomendaciones de mejores prácticas para el uso de componentes
• Consulta de registro de cambios: consulte el historial de versiones de los componentes
• Soporte de múltiples versiones: admite el cambio entre diferentes versiones de Ant Design

📦 Instalación

Compilación desde el código fuente

# 克隆仓库
git clone <repository-url>
cd antd-MCP

# 安装依赖
npm install

# 构建项目
npm run build

🛠️ Uso

Iniciar el servidor MCP

Después de compilar el proyecto, puede configurar MCP en su cliente local.

Para obtener instrucciones de configuración específicas, consulte la documentación del cliente.

Tomando Cursor como ejemplo, puede configurarlo en Tools dentro de Cursor Settings:

// 从本地导入（推荐，后面也许就不推荐了）
{
  "mcpServers": {
    "antd-components-local": {
      "command": "node",
      "args": [
        "<repository-url>/antd-MCP/dist/cli.js"
      ]
    }
  }
}

// 从npm导入
{
  "mcpServers": {
    "antd-components-local": {
      "command": "npx",
      "args": [
        "antd-mcp"
      ]
    }
  }
}

Extraer datos de Ant Design

Si necesita extraer los datos más recientes del repositorio local de Ant Design:

# 先克隆antd仓库到本地
git clone https://github.com/ant-design/ant-design

# 执行脚本
npm run extract

# 可能会出现更新日志无法正常获取的现象(如果docs文件夹下没有components-changelog.json文件)，可以执行以下脚本后重新执行extract脚本
npm run generate-component-changelog

Recopilación de mejores prácticas

Esta función aún está en desarrollo; el script actual no es muy bueno y los datos recopilados son algo desordenados. Si alguien tiene buenas ideas, las contribuciones (PR) son bienvenidas.

# 爬取全部组件的最佳实践（需要提前提取Ant Design数据）
npm run crawl-practices

# 爬取指定组件的最佳实践
npm run crawl-practices Button ...

Uso en clientes MCP

Agregue este servidor a la configuración de su cliente MCP y luego podrá usar las siguientes funciones:

• 📋 list-components - Listar todos los componentes de Ant Design disponibles
• 📖 get-component-docs - Obtener la documentación de un componente específico
• 💡 get-component-examples - Obtener el código de ejemplo del componente
• 🔍 get-component-api - Consultar la documentación de API del componente
• ⭐ get-best-practices - Obtener las mejores prácticas de uso del componente
• 📝 get-component-changelog - Ver el historial de actualizaciones del componente
• 🔄 change-component-version - Cambiar la versión de Ant Design

📁 Estructura del proyecto

antd-MCP/
├── src/                    # 源代码
│   ├── tools/             # MCP 工具实现
│   ├── scripts/           # 脚本工具
│   ├── utils/             # 工具函数
│   └── index.ts           # 主入口文件
├── docs/                  # Ant Design 组件文档
│   └── components/        # 各组件文档和示例
├── cli.ts                 # 命令行入口
└── package.json           # 项目配置

🔧 Desarrollo

Inicio del entorno de desarrollo

Puede utilizar el depurador en línea proporcionado por MCP para depurar.

Compilar el proyecto

npm run build

Depuración y verificación

npm run inspector

Generar registro de cambios de componentes

npm run generate-component-changelog

📋 Requisitos del sistema

• Node.js >= 16.0.0
• npm o yarn

🤝 Contribuciones

¡Las Issues y Pull Requests son bienvenidas!

Flujo de desarrollo

1. Haga fork de este repositorio
2. Cree una rama de características (git checkout -b feat/amazing-feature)
3. Realice los cambios (git commit -m 'Add some amazing feature')
4. Empuje a la rama (git push origin feat/amazing-feature)
5. Abra un Pull Request

Convenciones de nombres de ramas

• feat/ - Nueva funcionalidad
• fix/ - Corrección de errores
• docs/ - Actualización de documentación
• refactor/ - Refactorización de código
• test/ - Relacionado con pruebas