ReactBits MCP服务器
生产准备就绪 模型上下文协议 用于浏览和检索React组件的服务器 ReactBits.dev 具有全面的TypeScript支持、真正的数据集成和高级部署功能。
🚀 特性
核心MCP能力
- 🔧 5个MCP工具：搜索、浏览和检索完全符合MCP协议的React组件
- 📊 真实数据集成：来自ReactBits.dev的实时组件数据，具有自动抓取功能
- ⚡ 性能优化：高级缓存、速率限制和内存管理
- 🛡️ 生产就绪：健康监控、指标收集和错误处理
开发者体验
- 📝 TypeScript优先：具有全面类型定义的全类型安全
- 🐳 Docker支持：多阶段构建、开发/生产配置
- 🔄 CI/CD管道：使用GitHub Actions进行自动化测试、构建和发布
- 📈 监控：内置健康检查、Prometheus指标和Grafana仪表板
部署选项
- 📦 NPM包：全球或本地安装
npm install -g @johncarter09/reactbits-mcp-server - 🐳 Docker镜像：多架构支持（AMD64、ARM64），具有安全强化功能
- ☁️ 云就绪：AWS、GCP、Azure和Kubernetes的生产级配置
📋 快速开始
Docker（推荐）
# Run with Docker
docker run -d --name reactbits-mcp \
-v $(pwd)/data:/app/data \
reactbits/mcp-server:latest
# Or use Docker Compose
curl -O https://raw.githubusercontent.com/DavidHDev/react-bits/main/mcp-server/docker-compose.yml
docker-compose up -dNPM安装
# Install globally
npm install -g @johncarter09/reactbits-mcp-server
# Run the server
reactbits-mcp-server
# Or use with Claude Desktop
# Add to your MCP configurationClaude桌面集成
添加到您的Claude Desktop MCP配置中：
{
"mcpServers": {
"reactbits": {
"command": "reactbits-mcp-server",
"args": []
}
}
}🛠 可用工具
1. search_components
搜索具有高级过滤功能的React组件：
// Search for animated buttons
{
"query": "animated button",
"category": "buttons",
"difficulty": "beginner",
"limit": 10
}2. get_component
使用完整源代码检索详细的组件信息：
{
"id": "animated-button-1",
"includeCode": true,
"includeExamples": true
}3. list_categories
获取所有可用的组件类别：
{} // No parameters needed4. browse_category
浏览特定类别中的组件：
{
"categoryId": "buttons",
"limit": 20,
"offset": 0
}5. get_random_component
获取一个随机组件以获得灵感：
{} // No parameters needed📊 真实数据集成
该服务器包括与ReactBits.dev的实时数据集成：
- 25+真实组件：从ReactBits.dev自动抓取和索引
- 实时更新：计划数据刷新以保持组件最新
- 元数据：完整的组件分析，包括依赖关系、复杂性和样式
- 代码示例：使用最佳实践完成TypeScript/React源代码
组件类别
- 🎨 UI组件：核心界面元素
- 🎯 动画：平滑过渡和效果
- 🧭 导航：标题、侧栏和布局实用程序
- 💬 反馈：烤面包机、工具提示和通知
- 🔘 按钮：各种风格的互动元素
🏗 建筑
生产级特征
- 缓存系统：支持TTL的多级LRU缓存
- 速率限制：可配置的请求限制和客户端跟踪
- 错误处理：全面的错误恢复和日志记录
- 健康监测：内置健康检查和指标收集
- 安全：输入验证、净化和安全默认值
性能优化
- 内存管理：可配置的限制和垃圾收集
- 请求批处理：高效的数据加载和处理
- 压缩：优化数据结构和传输
- 延迟加载：按需获取组件代码
🚀 部署
发展
git clone https://github.com/DavidHDev/react-bits.git
cd react-bits/mcp-server
npm install
npm run dev使用Docker进行生产
# Production deployment
docker-compose -f docker-compose.prod.yml up -d
# With monitoring stack
docker-compose --profile monitoring up -d
# Access Grafana dashboard
open http://localhost:3001Kubernetes
# Deploy to Kubernetes
kubectl apply -f k8s/
# Check deployment
kubectl get pods -l app=reactbits-mcp-server📈 监测和可观察性
健康检查
# Basic health check
curl http://localhost:3000/health
# Detailed metrics
curl http://localhost:3000/health?detailed=true
# Prometheus metrics
curl http://localhost:3000/metricsGrafana仪表板
预配置的仪表板包括：
- 请求率和响应时间
- 内存和CPU使用率
- 缓存命中率和性能
- 错误率和健康状况
- 组件数据新鲜度
⚙️ 配置
环境变量
NODE_ENV=production
LOG_LEVEL=info
ENABLE_METRICS=true
CACHE_EXPIRY=3600000
MAX_REQUESTS_PER_MINUTE=1000配置文件
{
"server": {
"logLevel": "info",
"enableMetrics": true,
"maxRequestsPerMinute": 1000,
"cacheExpiry": 3600000
},
"tools": {
"search_components": {
"enabled": true,
"cacheExpiry": 300000
}
}
}🔒 安全
安全功能
- 输入验证：所有输入的JSON模式验证
- 速率限制：可配置的请求限制
- 错误清理：无数据泄漏的安全错误消息
- 集装箱安全：非root用户，只读文件系统
- 依赖关系扫描：自动漏洞检查
安全最佳实践
- 以最低权限运行
- 对敏感配置使用机密管理
- 启用安全标头和CORS
- 通过自动化CI/CD定期进行安全更新
🧪 测试
测试套件
# Run all tests
npm test
# Type checking
npm run typecheck
# CI test suite
npm run test:ci
# Docker tests
npm run docker:testMCP协议合规性
- 完整的MCP规范合规性测试
- 工具模式验证
- 错误处理验证
- 性能基准测试
📚 文档
🤝 贡献
我们欢迎捐款！请查看我们的 贡献指南 了解详情。
开发设置
# Fork and clone
git clone https://github.com/your-username/react-bits.git
cd react-bits/mcp-server
# Install dependencies
npm install
# Start development server
npm run dev
# Run tests
npm test📝 许可证
MIT© ReactBits团队
🙏 致谢
- 模型上下文协议 通过Anthropic
- ReactBits.dev 组件库。全部归功于ReactBits的创建者
- TypeScript和Node.js社区
______________________________________________________________________
🔗 链接
- 网站: https://reactbits.dev
- 文档: https://docs.reactbits.dev
- NPM包:
- Docker Hub:
- GitHub:
______________________________________________________________________
*内置于❤️ 约翰·卡特*