Model Context Protocol server for ReactBits component library with comprehensive TypeScript build system and real data integration
npm install reactbits-mcp-tools
A production-ready Model Context Protocol server for browsing and retrieving React components from ReactBits.dev with comprehensive TypeScript support, real data integration, and advanced deployment capabilities.
npm install -g @johncarter09/reactbits-mcp-serverbash
Run with Docker
docker run -d --name reactbits-mcp \
-v $(pwd)/data:/app/data \
reactbits/mcp-server:latestOr use Docker Compose
curl -O https://raw.githubusercontent.com/DavidHDev/react-bits/main/mcp-server/docker-compose.yml
docker-compose up -d
`$3
bash
Install globally
npm install -g @johncarter09/reactbits-mcp-serverRun the server
reactbits-mcp-serverOr use with Claude Desktop
Add to your MCP configuration
`$3
Add to your Claude Desktop MCP configuration:json
{
"mcpServers": {
"reactbits": {
"command": "reactbits-mcp-server",
"args": []
}
}
}
`🛠 Available Tools
$3
Search for React components with advanced filtering:
typescript
// Search for animated buttons
{
"query": "animated button",
"category": "buttons",
"difficulty": "beginner",
"limit": 10
}
`$3
Retrieve detailed component information with full source code:
typescript
{
"id": "animated-button-1",
"includeCode": true,
"includeExamples": true
}
`$3
Get all available component categories:
typescript
{} // No parameters needed
`$3
Browse components within a specific category:
typescript
{
"categoryId": "buttons",
"limit": 20,
"offset": 0
}
`$3
Get a random component for inspiration:
typescript
{} // No parameters needed
`📊 Real Data Integration
The server includes live data integration with ReactBits.dev:
- 25+ Real Components: Automatically scraped and indexed from ReactBits.dev
- Live Updates: Scheduled data refresh to keep components current
- Rich Metadata: Full component analysis including dependencies, complexity, and styling
- Code Examples: Complete TypeScript/React source code with best practices
$3
- 🎨 UI Components: Core interface elements
- 🎯 Animations: Smooth transitions and effects
- 🧭 Navigation: Headers, sidebars, and layout utilities
- 💬 Feedback: Toasters, tooltips, and notifications
- 🔘 Buttons: Interactive elements with various styles🏗 Architecture
$3
- Caching System: Multi-level LRU caching with TTL support
- Rate Limiting: Configurable request throttling with client tracking
- Error Handling: Comprehensive error recovery and logging
- Health Monitoring: Built-in health checks and metrics collection
- Security: Input validation, sanitization, and secure defaults$3
- Memory Management: Configurable limits and garbage collection
- Request Batching: Efficient data loading and processing
- Compression: Optimized data structures and transmission
- Lazy Loading: On-demand component code fetching🚀 Deployment
$3
bash
git clone https://github.com/DavidHDev/react-bits.git
cd react-bits/mcp-server
npm install
npm run dev
`$3
bash
Production deployment
docker-compose -f docker-compose.prod.yml up -dWith monitoring stack
docker-compose --profile monitoring up -dAccess Grafana dashboard
open http://localhost:3001
`$3
bash
Deploy to Kubernetes
kubectl apply -f k8s/Check deployment
kubectl get pods -l app=reactbits-mcp-server
`📈 Monitoring & Observability
$3
bash
Basic health check
curl http://localhost:3000/healthDetailed metrics
curl http://localhost:3000/health?detailed=truePrometheus metrics
curl http://localhost:3000/metrics
`$3
Pre-configured dashboard includes:
- Request rate and response times
- Memory and CPU usage
- Cache hit rates and performance
- Error rates and health status
- Component data freshness⚙️ Configuration
$3
bash
NODE_ENV=production
LOG_LEVEL=info
ENABLE_METRICS=true
CACHE_EXPIRY=3600000
MAX_REQUESTS_PER_MINUTE=1000
`$3
json
{
"server": {
"logLevel": "info",
"enableMetrics": true,
"maxRequestsPerMinute": 1000,
"cacheExpiry": 3600000
},
"tools": {
"search_components": {
"enabled": true,
"cacheExpiry": 300000
}
}
}
`🔒 Security
$3
- Input Validation: JSON schema validation for all inputs
- Rate Limiting: Configurable request throttling
- Error Sanitization: Safe error messages without data leaks
- Container Security: Non-root user, read-only filesystem
- Dependency Scanning: Automated vulnerability checks$3
- Run with minimal privileges
- Use secrets management for sensitive configuration
- Enable security headers and CORS
- Regular security updates via automated CI/CD🧪 Testing
$3
bash
Run all tests
npm testType checking
npm run typecheckCI test suite
npm run test:ciDocker tests
npm run docker:test
`$3
- Full MCP specification compliance testing
- Tool schema validation
- Error handling verification
- Performance benchmarking📚 Documentation
- Deployment Guide: Comprehensive deployment instructions
- Architecture Guide: System design and architecture
- API Reference: Complete API documentation
- Configuration Guide: Configuration options and examples
🤝 Contributing
We welcome contributions! Please see our Contributing Guide for details.
$3
bash
Fork and clone
git clone https://github.com/your-username/react-bits.git
cd react-bits/mcp-serverInstall dependencies
npm installStart development server
npm run devRun tests
npm test
``MIT © ReactBits Team
- Model Context Protocol by Anthropic
- ReactBits.dev component library. All credit to the creator of ReactBits
- TypeScript and Node.js communities
---
- Website: https://reactbits.dev
- Documentation: https://docs.reactbits.dev
- NPM Package: https://www.npmjs.com/package/reactbits-mcp-server
- Docker Hub: https://hub.docker.com/r/reactbits/mcp-server
- GitHub: https://github.com/DavidHDev/react-bits
---
Built with ❤️ by John Carter