React Scan MCP CLI 🚀

AI-powered React performance monitoring with zero setup

Transform React performance analysis from complex tooling into natural language conversations with your AI assistant.

✨ What is this?

React Scan MCP CLI is the easiest way to add AI-powered React performance monitoring to your development workflow. It bridges React Scan with AI assistants like Claude, Cursor, and Augment through the Model Context Protocol (MCP).

Before React Scan MCP:

• Manual performance analysis with complex tools
• Steep learning curve for React optimization
• Time-consuming performance debugging

After React Scan MCP:

• "How's my app's performance?" → Instant AI analysis
• "Find slow components" → Intelligent bottleneck detection
• "Optimize my React app" → Step-by-step AI guidance

🚀 Quick Start

1. Try the Demo (No Installation)

npx react-scan-mcp demo --simple

2. Full Setup (One Command)

npx react-scan-mcp install

3. Configure Your AI Client

# For Cursor IDE
npx react-scan-mcp config cursor

# For Claude Desktop  
npx react-scan-mcp config claude

# For Augment
npx react-scan-mcp config augment

4. Start Analyzing

# Start the MCP server
npx react-scan-mcp start

# Or scan directly
npx react-scan-mcp scan http://localhost:3000

🎯 AI Integration Examples

Once configured, ask your AI assistant:

"Analyze my React app's performance"
→ AI scans your app and provides detailed component analysis

"Find components with slow render times"  
→ AI identifies bottlenecks and suggests optimizations

"Generate a performance optimization report"
→ AI creates comprehensive recommendations

"How can I optimize the UserProfile component?"
→ AI provides specific React optimization strategies

📋 Commands

| Command | Description | |---------|-------------| | npx react-scan-mcp install | One-time setup of Python environment and dependencies | | npx react-scan-mcp start | Start the MCP server for AI integration | | npx react-scan-mcp demo | Run interactive demo with sample data | | npx react-scan-mcp config <client> | Generate configuration for AI clients | | npx react-scan-mcp scan <url> | Perform immediate performance analysis | | npx react-scan-mcp status | Check installation and health status | | npx react-scan-mcp --help | Show all available commands |

🔧 Configuration

Cursor IDE

npx react-scan-mcp config cursor

Automatically creates .cursor/mcp.json with proper configuration.

Claude Desktop

npx react-scan-mcp config claude  

Configures Claude Desktop for React performance analysis.

Augment

npx react-scan-mcp config augment

Generates configuration for Augment MCP integration.

🎮 Demo Mode

Try React Scan MCP without any setup:

# Simple demo (no dependencies)
npx react-scan-mcp demo --simple

# Full demo (requires installation)
npx react-scan-mcp demo

⚡ Quick Scan

Analyze any React app immediately:

# Scan local development server
npx react-scan-mcp scan http://localhost:3000

# Scan production site
npx react-scan-mcp scan https://react.dev

# Custom duration and output
npx react-scan-mcp scan http://localhost:3000 --duration 60 --output markdown

🛠️ Requirements

• Node.js 16+ (for npx)
• Python 3.10+ (auto-detected and configured)
• React Scan CLI (auto-installed)

The CLI handles all dependency management automatically!

🔍 Troubleshooting

Installation Issues

# Check status
npx react-scan-mcp status

# Force reinstall
npx react-scan-mcp install --force

# Check Python version
python3 --version  # Should be 3.10+

AI Client Not Connecting

# Regenerate configuration
npx react-scan-mcp config cursor --auto-install

# Verify server starts
npx react-scan-mcp start --log-level debug

React Scan CLI Issues

# Install manually if auto-install fails
npm install -g react-scan

# Verify installation
react-scan --version

🎯 What You Get

🤖 AI Tools

• analyze_component_performance - Deep component analysis
• detect_performance_bottlenecks - Automatic issue detection
• scan_website_performance - Full application scanning
• generate_performance_report - Comprehensive reporting

📊 AI Resources

• react-scan://performance/current - Real-time metrics
• react-scan://performance/history - Historical data
• react-scan://components/problematic - Issue tracking

🔧 Performance Insights

• Component render frequency and timing
• Bottleneck identification and severity
• Optimization recommendations
• Historical performance tracking

🌟 Why React Scan MCP CLI?

1. Zero Learning Curve - Natural language performance analysis
2. One Command Setup - npx react-scan-mcp install and you're done
3. AI-Native - Built for AI-assisted development workflows
4. Cross-Platform - Works on Windows, Mac, and Linux
5. Auto-Configuration - Detects and configures AI clients automatically

📚 Learn More

• React Scan - The underlying performance monitoring tool
• Model Context Protocol - The AI integration standard
• Examples & Tutorials - Detailed usage examples

🤝 Contributing

We welcome contributions! See our Contributing Guide for details.

📄 License

MIT License - see LICENSE for details.

Ready to revolutionize your React performance workflow?

npx react-scan-mcp install

Transform complex performance analysis into simple AI conversations! 🚀