League of Legends AI Insights is a comprehensive performance analysis tool that provides players with AI-powered insights into their gameplay. By analyzing recent matches, the application delivers personalized recommendations, identifies strengths and areas for improvement, and offers actionable advice to help players climb the ranked ladder.
- 🧠 AI-Powered Analysis: Advanced algorithms analyze your gameplay patterns and provide intelligent insights
- 📊 Comprehensive Statistics: Detailed breakdown of KDA, CS/min, damage, gold earnings, and more
- 🎯 Personalized Recommendations: Champion suggestions based on your playstyle and performance
- 📈 Performance Trends: Track your improvement over time with trend analysis
- 💡 Actionable Tips: Specific, practical advice you can apply immediately
- 🏆 Achievement Tracking: Monitor your perfect games, kill streaks, and other accomplishments
- ⚔️ Player Comparison: Compare your stats with other players
- 📱 Responsive Design: Beautiful UI that works seamlessly on all devices
- Next.js 16.0.0 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library for smooth interactions
- Radix UI - Accessible component primitives
- Custom Tooltip System - Enhanced tooltips with educational content
- Glass Morphism Design - Modern, translucent card designs
- Responsive Grid Layouts - Optimized for all screen sizes
- Interactive Animations - Smooth hover effects and transitions
- AWS Lambda - Serverless backend for data processing
- Riot Games API - Real-time League of Legends data
- AI Analysis Engine - Amazon BedRock
- Player lookup by summoner name and tag
- Real-time validation and error handling
- Riot Games API integration
- Strengths Analysis: Identifies your best gameplay aspects
- Play Style Detection: Categorizes your approach (Aggressive, Defensive, etc.)
- Improvement Areas: Specific areas needing attention with training drills
- Actionable Advice: Practical tips for immediate application
- Win Rate: Performance percentage with benchmarks
- KDA Ratio: Kill/Death/Assist analysis
- CS/min: Farming efficiency metrics
- Damage Per Minute: Combat effectiveness
- Gold Earnings: Economic performance
- Achievement Badges: Perfect games, high-kill matches, victories
- Performance Metrics: Best KDA, play style, recommended roles
- AI Confidence: Analysis reliability indicator
- Personalized Tips: AI-generated recommendations
- Role-Specific Advice: Tailored guidance for your preferred roles
- Champion Recommendations: Suggested champions based on your style
- Training Drills: Specific practice exercises
- Head-to-Head Stats: Compare with other players
- Performance Metrics: Side-by-side analysis
- Competitive Insights: Relative positioning
The application features a sophisticated tooltip system with multiple variants:
// Educational tooltips with League-specific explanations
const gameTooltips = {
winRate:
"Your win percentage. 60%+ is excellent, 50-60% is good, below 50% needs improvement",
kda: "Kill/Death/Assist ratio. 2.0+ is excellent, 1.0-2.0 is average, below 1.0 needs survival work",
perfectGames:
"Perfect games require: 0 deaths, 3.0+ KDA, winning the match, and 5+ CS/min",
};- Mobile-First: Optimized for mobile devices
- Tablet Support: Adapted layouts for medium screens
- Desktop Experience: Full-featured desktop interface
- Consistent Sizing: Fixed dimensions for uniform appearance
- Code Splitting: Automatic route-based splitting
- Image Optimization: Next.js Image component
- Lazy Loading: Components load on demand
- Minimal Bundle Size: Optimized dependencies
- Node.js 18.0 or later
- npm or pnpm package manager
- Riot Games API access (for backend)
- Clone the repository
git clone https://github.com/multihexagon/v0-league-of-legends-ai-insights.git
cd v0-league-of-legends-ai-insights- Install dependencies
npm install
# or
pnpm install- Set up environment variables
# Create .env.local file
LAMBDA_ENDPOINT=your_lambda_endpoint_url
RIOT_API_KEY=your_riot_api_key- Run the development server
npm run dev
# or
pnpm dev- Open your browser Navigate to http://localhost:3000
interface PlayerData {
puuid: string;
matches: Match[];
summary: Summary;
recap: Recap;
}
interface Recap {
strengths: string;
improvements: { issue: string; drill: string }[];
next_match_tip: string;
confidence: string;
style?: string;
trends?: string[];
recommended_roles?: string[];
recommended_champions?: string[];
actionable_advice?: string[];
}- Primary: Hextech Blue
oklch(0.55 0.2 240) - Secondary: Hextech Gold
oklch(0.75 0.15 80) - Accent: Hextech Cyan
oklch(0.6 0.18 220) - Background: Dark Theme
oklch(0.08 0.03 250)
- Headings: Inter font family, bold weights
- Body: Inter font family, regular weights
- UI Elements: System font stack for performance
- Grid System: CSS Grid with responsive breakpoints
- Containers: Max-width constraints for readability
- Spacing Scale: Consistent rem-based spacing
- Data Protection: Player data is processed securely
- API Security: Proper rate limiting and validation
- Privacy First: No unnecessary data collection
- Secure Headers: Next.js security best practices
The application is optimized for Vercel deployment:
- Connect your repository to Vercel
- Configure environment variables in Vercel dashboard
- Deploy automatically on every push to main branch
# Build the application
npm run build
# Start production server
npm start- Lighthouse Score: 95+ on all metrics
- Core Web Vitals: Optimized for excellent user experience
- Bundle Size: < 500KB gzipped
- Load Time: < 2s on 3G networks
- Match Replay Analysis: Video analysis integration
- Team Performance: Squad-based insights
- Tournament Mode: Competitive analysis
- Mobile App: React Native companion
- Pro Player Comparison: Compare with professional players
- Coaching Integration: Connect with coaches
- Custom Training Plans: Personalized improvement programs
- Real-time Updates: WebSocket integration
- Offline Support: PWA capabilities
- Advanced Analytics: Machine learning models
- API Rate Optimization: Smarter caching strategies
We welcome contributions! Please see our Contributing Guide for details.
- Code Style: Follow the existing TypeScript/React patterns
- Component Structure: Use functional components with hooks
- Styling: Utilize Tailwind CSS utilities
- Testing: Add tests for new features
- Documentation: Update README for significant changes
This project is licensed under the MIT License - see the LICENSE file for details.
- Riot Games for the League of Legends API
- Vercel for hosting and deployment
- Next.js Team for the amazing framework
- Tailwind CSS for the utility-first CSS framework
For support and questions:
- GitHub Issues: Create an issue
- Documentation: Check this README and code comments
Built with passion for the League of Legends community