README.md•17.4 kB
# React Native MCP Server
<div align="center">
[](https://badge.fury.io/js/%40mrnitro360%2Freact-native-mcp-guide)
[](https://opensource.org/licenses/MIT)
[](https://modelcontextprotocol.io/)
[](https://github.com/MrNitro360/React-Native-MCP/actions/workflows/auto-deploy.yml)
[](https://www.typescriptlang.org/)
[](https://reactnative.dev/)
**Professional AI-powered React Native development companion with expert-level code remediation**
*Expert remediation • Automated fixes • Industry best practices • Enterprise security*
</div>
## Overview
A comprehensive Model Context Protocol (MCP) server designed for professional React Native development teams. This tool provides intelligent code analysis, **expert-level automated code remediation**, security auditing, and performance optimization with production-ready fixes.
**🆕 v1.1.0 - Expert Remediation Features:**
- 🔧 **Expert Code Remediation** - Automatically fix security, performance, and quality issues
- 🏗️ **Advanced Refactoring** - Comprehensive component modernization and optimization
- 🛡️ **Security Fixes** - Automatic hardcoded secret migration and vulnerability patching
- ⚡ **Performance Fixes** - Memory leak prevention and React Native optimization
- 📝 **Production-Ready Code** - TypeScript interfaces, StyleSheet extraction, accessibility
**Key Benefits:**
- 🚀 **Accelerated Development** - Automated code analysis, fixing, and test generation
- 🔒 **Enterprise Security** - Vulnerability detection with automatic remediation
- 📊 **Quality Assurance** - Industry-standard testing frameworks and coverage analysis
- ⚡ **Performance Optimization** - Advanced profiling with automatic fixes
- 🎯 **Best Practices** - Expert guidance with code implementation
- 🔄 **Automated Updates** - Continuous integration with automatic version management
---
## Quick Start
### Prerequisites
- **Node.js** 18.0 or higher
- **Claude CLI** or **Claude Desktop**
- **React Native** development environment
### Installation
#### Automated Installation (Recommended)
```bash
# Install globally via npm
npm install -g @mrnitro360/react-native-mcp-guide
# Configure with Claude CLI
claude mcp add react-native-guide npx @mrnitro360/react-native-mcp-guide
```
#### Development Installation
```bash
# Clone repository
git clone https://github.com/MrNitro360/React-Native-MCP.git
cd React-Native-MCP
# Install dependencies and build
npm install && npm run build
# Add to Claude CLI
claude mcp add react-native-guide node ./build/index.js
```
### Verification
```bash
claude mcp list
```
Verify that `react-native-guide` appears as **Connected** ✅
---
## 🆕 Expert Remediation Examples
### Before vs. After: Automatic Code Fixing
**❌ Before (Problematic Code):**
```typescript
const MyComponent = () => {
const apiKey = "sk-1234567890abcdef"; // Hardcoded secret
const [data, setData] = useState([]);
useEffect(() => {
console.log("API Key:", apiKey); // Sensitive logging
fetch('http://api.example.com/data') // HTTP instead of HTTPS
.then(response => response.json())
.then(data => setData(data));
const interval = setInterval(() => { // Memory leak
console.log('Polling...');
}, 1000);
}, []);
return (
<ScrollView>
{data.map(item => ( // Performance issue
<Text key={item.id} style={{color: 'red'}}>{item.name}</Text>
))}
</ScrollView>
);
};
```
**✅ After (Expert Remediation):**
```typescript
interface Props {
children?: React.ReactNode;
onPress?: () => void;
}
const MyComponent: React.FC<Props> = () => {
// TODO: Add API_KEY to your environment variables
const apiKey = process.env.API_KEY || Config.API_KEY;
const [data, setData] = useState([]);
useEffect(() => {
// Removed sensitive logging for security
// console.log('[REDACTED - contains sensitive data]');
// Upgraded to HTTPS for security
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
const interval = setInterval(() => {
console.log('Polling...');
}, 1000);
// Cleanup intervals to prevent memory leaks
return () => {
clearInterval(interval);
};
}, []);
return (
<FlatList
data={data}
keyExtractor={(item, index) => item.id?.toString() || index.toString()}
renderItem={({ item }) => (
<Text style={styles.itemText}>{item.name}</Text>
)}
/>
);
};
const styles = StyleSheet.create({
itemText: {
color: 'red'
}
});
export default React.memo(MyComponent);
```
**🎯 What Got Fixed Automatically:**
- ✅ **Security**: Hardcoded API key → Environment variable
- ✅ **Security**: Sensitive logging → Sanitized
- ✅ **Security**: HTTP → HTTPS upgrade
- ✅ **Performance**: ScrollView + map → FlatList with keyExtractor
- ✅ **Memory**: Added interval cleanup to prevent leaks
- ✅ **Best Practices**: Inline styles → StyleSheet.create
- ✅ **Type Safety**: Added TypeScript interface
- ✅ **Performance**: Wrapped with React.memo
---
## Core Features
### 🔧 Expert Code Remediation (NEW in v1.1.0)
| Tool | Capability | Level | Output |
|------|------------|-------|--------|
| **`remediate_code`** | Automatic security, performance, and quality fixes | Expert | Production-ready code |
| **`refactor_component`** | Advanced component modernization and optimization | Senior | Refactored components with tests |
| **Security Remediation** | Hardcoded secrets → environment variables | Enterprise | Secure code patterns |
| **Performance Fixes** | Memory leaks, FlatList optimization, StyleSheet | Expert | Optimized components |
| **Type Safety** | Automatic TypeScript interface generation | Professional | Type-safe code |
### 🧪 Advanced Testing Suite
| Feature | Description | Frameworks |
|---------|-------------|------------|
| **Automated Test Generation** | Industry-standard test suites for components | Jest, Testing Library |
| **Coverage Analysis** | Detailed reports with improvement strategies | Jest Coverage, LCOV |
| **Strategy Evaluation** | Testing approach analysis and recommendations | Unit, Integration, E2E |
| **Framework Integration** | Multi-platform testing support | Detox, Maestro, jest-axe |
### 🔍 Comprehensive Analysis Tools
| Analysis Type | Capabilities | Output |
|---------------|--------------|--------|
| **Security Auditing** | Vulnerability detection with auto-remediation | Risk-prioritized reports + fixes |
| **Performance Profiling** | Memory, rendering, bundle optimization + fixes | Actionable recommendations + code |
| **Code Quality** | Complexity analysis with refactoring implementation | Maintainability metrics + fixes |
| **Accessibility** | WCAG compliance with automatic improvements | Compliance reports + code |
### 📦 Dependency Management
- **Automated Package Auditing** - Security vulnerabilities and outdated dependencies
- **Intelligent Upgrades** - React Native compatibility validation
- **Conflict Resolution** - Dependency tree optimization
- **Migration Assistance** - Deprecated package modernization
### 📚 Expert Knowledge Base
- **React Native Documentation** - Complete API references and guides
- **Architecture Patterns** - Scalable application design principles
- **Platform Guidelines** - iOS and Android specific best practices
- **Security Standards** - Mobile application security frameworks
---
## Usage Examples
### 🔧 Expert Code Remediation (NEW)
```bash
# Automatically fix all detected issues with expert-level solutions
claude "remediate_code with remediation_level='expert' and add_comments=true"
# Advanced component refactoring with performance optimization
claude "refactor_component with refactor_type='comprehensive' and include_tests=true"
# Security-focused remediation
claude "remediate_code with issues=['hardcoded_secrets', 'sensitive_logging'] and remediation_level='expert'"
# Performance-focused refactoring
claude "refactor_component with refactor_type='performance' and target_rn_version='latest'"
```
### Testing & Quality Assurance
```bash
# Generate comprehensive component tests
claude "generate_component_test with component_name='LoginForm' and test_type='comprehensive'"
# Analyze testing strategy
claude "analyze_testing_strategy with focus_areas=['unit', 'accessibility', 'performance']"
# Generate coverage report
claude "analyze_test_coverage with coverage_threshold=85"
```
### Code Analysis & Optimization
```bash
# Comprehensive codebase analysis with auto-remediation suggestions
claude "analyze_codebase_comprehensive"
# Performance optimization with specific focus areas
claude "analyze_codebase_performance with focus_areas=['memory_usage', 'list_rendering']"
# Security audit with vulnerability detection
claude "analyze_codebase_comprehensive with analysis_types=['security', 'performance']"
```
### Dependency Management
```bash
# Package upgrade recommendations
claude "upgrade_packages with update_level='minor'"
# Resolve dependency conflicts
claude "resolve_dependencies with fix_conflicts=true"
# Security vulnerability audit
claude "audit_packages with auto_fix=true"
```
### Real-World Scenarios
| Scenario | Command | Outcome |
|----------|---------|---------|
| **🔧 Automatic Code Fixing** | `"Fix all security and performance issues in my component with expert solutions"` | Production-ready remediated code |
| **🏗️ Component Modernization** | `"Refactor my legacy component to modern React Native patterns with tests"` | Modernized component + test suite |
| **🛡️ Security Hardening** | `"Automatically fix hardcoded secrets and security vulnerabilities"` | Secure code with environment variables |
| **⚡ Performance Optimization** | `"Fix memory leaks and optimize FlatList performance automatically"` | Optimized code with cleanup |
| **📝 Type Safety Enhancement** | `"Add TypeScript interfaces and improve type safety automatically"` | Type-safe code with interfaces |
| **Pre-deployment Security Check** | `"Scan my React Native project for security vulnerabilities"` | Security report + automatic fixes |
| **Performance Bottleneck Analysis** | `"Analyze my app for performance bottlenecks and memory leaks"` | Optimization roadmap + fixes |
| **Code Quality Review** | `"Review my codebase for refactoring opportunities"` | Quality improvement + implementation |
| **Accessibility Compliance** | `"Check my app for accessibility issues and fix them automatically"` | WCAG compliance + code fixes |
| **Component Test Generation** | `"Generate comprehensive tests for my LoginScreen component"` | Complete test suite |
| **Testing Strategy Optimization** | `"Analyze my current testing strategy and suggest improvements"` | Testing roadmap |
---
## Claude Desktop Integration
### NPM Installation Configuration
Add to your `claude_desktop_config.json`:
```json
{
"mcpServers": {
"react-native-guide": {
"command": "npx",
"args": ["@mrnitro360/react-native-mcp-guide@1.1.0"],
"env": {}
}
}
}
```
### Development Configuration
```json
{
"mcpServers": {
"react-native-guide": {
"command": "node",
"args": ["/absolute/path/to/React-Native-MCP/build/index.js"],
"env": {}
}
}
}
```
**Configuration Paths:**
- **Windows:** `C:\Users\{Username}\Desktop\React-Native-MCP\build\index.js`
- **macOS/Linux:** `/Users/{Username}/Desktop/React-Native-MCP/build/index.js`
---
## Development & Maintenance
### Local Development
```bash
# Development with hot reload
npm run dev
# Production build
npm run build
# Production server
npm start
```
### Continuous Integration
This project implements enterprise-grade CI/CD:
- ✅ **Automated Version Management** - Semantic versioning with auto-increment
- ✅ **Continuous Deployment** - Automatic npm publishing on merge
- ✅ **Release Automation** - GitHub releases with comprehensive changelogs
- ✅ **Quality Gates** - Build validation and testing before deployment
### Update Management
```bash
# Check current version
npm list -g @mrnitro360/react-native-mcp-guide
# Update to latest version
npm update -g @mrnitro360/react-native-mcp-guide
# Reconfigure Claude CLI
claude mcp remove react-native-guide
claude mcp add react-native-guide npx @mrnitro360/react-native-mcp-guide
```
---
## Technical Specifications
### 🎯 Analysis & Remediation Capabilities
- **Expert Code Remediation** - Automatic fixing of security, performance, and quality issues
- **Advanced Component Refactoring** - Comprehensive modernization with test generation
- **Comprehensive Codebase Analysis** - Multi-dimensional quality assessment with fixes
- **Enterprise Security Auditing** - Vulnerability detection with automatic remediation
- **Performance Intelligence** - Memory, rendering, and bundle optimization with fixes
- **Quality Metrics** - Complexity analysis with refactoring implementation
- **Accessibility Compliance** - WCAG 2.1 AA standard validation with automatic fixes
- **Testing Strategy Optimization** - Coverage analysis and framework recommendations
### 🛠️ Technical Architecture
- **12 Specialized Tools** - Complete React Native development lifecycle coverage + remediation
- **2 Expert Remediation Tools** - `remediate_code` and `refactor_component`
- **6 Expert Prompt Templates** - Structured development workflows
- **5 Resource Libraries** - Comprehensive documentation and best practices
- **Industry-Standard Test Generation** - Automated test suite creation
- **Multi-Framework Integration** - Jest, Detox, Maestro, and accessibility tools
- **Real-time Coverage Analysis** - Detailed reporting with improvement strategies
- **Production-Ready Code Generation** - Expert-level automated fixes and refactoring
### 🏢 Enterprise Features
- **Expert-Level Remediation** - Senior engineer quality automatic code fixes
- **Production-Ready Solutions** - Enterprise-grade security and performance fixes
- **Professional Reporting** - Executive-level summaries with implementation code
- **Security-First Architecture** - Comprehensive vulnerability assessment with fixes
- **Scalability Planning** - Large-scale application design patterns with refactoring
- **Compliance Support** - Industry standards with automatic compliance fixes
- **Multi-Platform Optimization** - iOS and Android specific considerations with fixes
---
## 📋 Changelog
### v1.1.0 - Expert Code Remediation (Latest)
**🚀 Major Features:**
- ✨ **NEW**: `remediate_code` tool - Expert-level automatic code fixing
- ✨ **NEW**: `refactor_component` tool - Advanced component refactoring with tests
- 🔧 **Enhanced**: Component detection accuracy improved
- 🛡️ **Security**: Automatic hardcoded secret remediation
- ⚡ **Performance**: Memory leak prevention and FlatList optimization
- 📝 **Quality**: TypeScript interface generation and StyleSheet extraction
- 🎯 **Accessibility**: WCAG compliance with automatic fixes
**🎯 Remediation Capabilities:**
- Hardcoded secrets → Environment variables
- Sensitive logging → Sanitized code
- HTTP requests → HTTPS enforcement
- Memory leaks → Automatic cleanup
- Inline styles → StyleSheet.create
- Performance issues → Optimized patterns
- Type safety → TypeScript interfaces
### v1.0.5 - Previous Version
- Comprehensive analysis tools
- Testing suite generation
- Dependency management
- Performance optimization guidance
---
## Support & Community
### Resources
- 📦 **[NPM Package](https://www.npmjs.com/package/@mrnitro360/react-native-mcp-guide)** - Official package repository
- 🐙 **[GitHub Repository](https://github.com/MrNitro360/React-Native-MCP)** - Source code and development
- 🐛 **[Issue Tracker](https://github.com/MrNitro360/React-Native-MCP/issues)** - Bug reports and feature requests
- 📖 **[MCP Documentation](https://modelcontextprotocol.io/)** - Model Context Protocol specification
- ⚛️ **[React Native Docs](https://reactnative.dev/)** - Official React Native documentation
### Contributing
We welcome contributions from the React Native community. Please review our [Contributing Guidelines](CONTRIBUTING.md) for development standards and submission processes.
### License
This project is licensed under the [MIT License](LICENSE). See the license file for detailed terms and conditions.
---
<div align="center">
**Professional React Native Development with Expert-Level Remediation**
*Empowering development teams to build secure, performant, and accessible mobile applications with automated expert-level code fixes*
🆕 **v1.1.0 - Now with Expert Code Remediation!**
[Get Started](https://www.npmjs.com/package/@mrnitro360/react-native-mcp-guide) • [Documentation](https://github.com/MrNitro360/React-Native-MCP) • [Community](https://github.com/MrNitro360/React-Native-MCP/issues)
</div>