Ant Design

Servidor MCP Ant Design

Um servidor de componentes Ant Design baseado no Model Context Protocol (MCP), fornecendo documentação rica de componentes Ant Design, exemplos e melhores práticas para assistentes de IA.

🚀 Recursos

• Consulta de documentação de componentes: Obtenha documentação detalhada de todos os componentes Ant Design
• Obtenção de código de exemplo: Fornece código de exemplo completo para cada componente
• Consulta de documentação da API: Consulte propriedades e métodos da API dos componentes
• Orientação de melhores práticas: Obtenha recomendações de melhores práticas para uso de componentes
• Consulta de histórico de atualizações: Veja o histórico de versões dos componentes
• Suporte a múltiplas versões: Suporte para alternar entre diferentes versões do Ant Design

📦 Instalação

Compilar a partir do código-fonte

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

# 安装依赖
npm install

# 构建项目
npm run build

🛠️ Como usar

Iniciar o servidor MCP

Após compilar o projeto, você pode configurar o MCP no cliente local.

Para instruções específicas de configuração, consulte a documentação do cliente.

Usando o cursor como exemplo, você pode configurar em Tools nas Configurações do Cursor:

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

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

Extrair dados do Ant Design

Se precisar extrair os dados mais recentes do repositório local do 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

Coletar melhores práticas

Este recurso ainda está em desenvolvimento; o script atual não está bem escrito e os dados coletados estão um tanto confusos. Se você tiver boas ideias, sinta-se à vontade para enviar um PR.

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

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

Usar no cliente MCP

Adicione este servidor à configuração do seu cliente MCP e use os seguintes recursos:

• 📋 list-components - Lista todos os componentes Ant Design disponíveis
• 📖 get-component-docs - Obtém a documentação de um componente específico
• 💡 get-component-examples - Obtém código de exemplo do componente
• 🔍 get-component-api - Consulta a documentação da API do componente
• ⭐ get-best-practices - Obtém melhores práticas de uso do componente
• 📝 get-component-changelog - Visualiza o histórico de atualizações do componente
• 🔄 change-component-version - Alterna a versão do Ant Design

📁 Estrutura do projeto

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

🔧 Desenvolvimento

Iniciar ambiente de desenvolvimento

Você pode usar o depurador online fornecido pelo MCP para depuração.

Compilar o projeto

npm run build

Depuração e verificação

npm run inspector

Gerar changelog de componentes

npm run generate-component-changelog

📋 Requisitos do sistema

• Node.js >= 16.0.0
• npm ou yarn

🤝 Contribuição

Issues e Pull Requests são bem-vindos!

Fluxo de desenvolvimento

1. Faça um fork deste repositório
2. Crie um branch de recurso (git checkout -b feat/amazing-feature)
3. Envie suas alterações (git commit -m 'Add some amazing feature')
4. Envie para o branch (git push origin feat/amazing-feature)
5. Abra um Pull Request

Convenção de nomenclatura de branches

• feat/ - Novo recurso
• fix/ - Correção de bug
• docs/ - Atualização de documentação
• refactor/ - Refatoração de código
• test/ - Relacionado a testes