NutUI-React MCP Service
📖 介绍
nutui-react-mcp 是一个基于 Model Context Protocol (MCP) 的 NutUI-React 组件库智能助手服务。通过提供组件文档查询、API 文档、代码示例等功能，显著减少 AI 在生成 NutUI 组件代码时的幻觉问题，帮助开发者更准确、高效地使用 NutUI-React 组件库开发移动端应用。
核心特性
- 🎯 精确的组件查询 - 支持 H5 和小程序（Taro）两种场景的组件列表查询
- 📚 完整的文档支持 - 提供组件属性、API、使用方法等详细文档
- 💡 代码示例获取 - 获取组件的外部示例代码，快速理解使用方法
- 🚀 智能缓存机制 - 使用 node-cache 缓存查询结果，提升响应速度
- 🔧 自动化文档提取 - 支持从 NutUI-React 仓库自动提取和更新组件文档
📦 安装
全局安装
npm install -g @tony2026m/nutui-react-mcp作为依赖安装
npm install @tony2026m/nutui-react-mcp或使用 pnpm:
pnpm add @tony2026m/nutui-react-mcp🚀 使用说明
启动 MCP 服务
# 使用全局安装
nutui-react-mcp
# 使用 npx
npx @tony2026m/nutui-react-mcp
# 本地开发
pnpm start提取组件文档
# 从默认位置提取（../.temp/nutui-react）
nutui-react-mcp extract
# 从指定路径提取
nutui-react-mcp extract /path/to/nutui-react在 Cursor/Claude Desktop 中配置
在 MCP 配置文件中添加（通常在 ~/Library/Application Support/Claude/claude_desktop_config.json 或 Cursor 配置中）:
{
"mcpServers": {
"NutUI Components": {
"command": "npx",
"args": ["@tony2026m/nutui-react-mcp"]
}
}
}可用工具
- list-components - 列出所有可用组件
- 参数: isH5 (boolean) - 是否查询 H5 组件
- get-component-doc - 获取组件详细文档
- 参数: isH5 (boolean) - 是否查询 H5 组件, componentName (string) - 组件名称
- get-component-example - 获取组件示例代码
- 参数: src (string) - 示例代码路径
- get-nutui-info - 获取 NutUI 版本和简介信息
示例提示词
# 查询 H5 组件列表
我需要开发一个 H5 表单页面，有哪些可用的组件？
# 查询组件文档
告诉我 Form 组件在小程序中如何使用？
# 获取示例代码
获取 Form 组件基础用法的示例代码（路径：/form/demos/taro/demo1.tsx）🔧 开发
环境要求
- Node.js >= 20.0.0
- pnpm (推荐)
- Python 3.x (用于文档提取)
开发命令
# 安装依赖
pnpm install
# 开发模式（带 watch）
pnpm dev
# 构建
pnpm build
# 测试服务
pnpm test
# 使用 MCP Inspector 调试
pnpm inspector🤝 参与贡献
欢迎贡献代码、报告问题或提出建议！
- Fork 本仓库
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 提交 Pull Request
📄 许可证
本项目采用 MIT 许可证。
🔗 相关链接
👤 作者
tony2026m
- Email: mly7758@163.com
- GitHub: @tony2026m
Made with ❤️ by tony2026m