RuneSight

• 

  HeroImage

• 

• 

  Dashboard-ChatDark

• 

  DashBoardResponseDark

• 

  MainDashboardDark

• 

  Stats

• 

  Chatlight

Inspiration

As a dedicated LOL player, I've spent countless hours trying to climb out of bronze! :'D and after every loss, I found myself asking: "What could I have done better?", "I wish I could have some tips". Most of my friends always research on YouTube, learning about different stuff like wave control, drafting, etc. Still, I never have time for research or putting in so much effort watching 30-minute videos, so without this extra dedication, understanding the game deeply is challenging. The game gives you numbers—KDA, CS, damage—but it doesn't tell you the why or the how to improve.

Professional coaching costs hundreds of dollars, and most analytics tools just show you stats without context. I wanted to create an AI-powered coach that could analyze my gameplay like a Diamond+ player would, but accessible to everyone. When Amazon Bedrock and the Strands framework became available, I saw the perfect opportunity to build something that could democratize high-quality gameplay analysis.

The visual design was inspired by my favorite champions—Irelia's graceful blade dance and the mystical aesthetics of Ionia. The teal and gold color palette reflects the spiritual energy of Ionia, while the sharp, clean lines mirror Irelia's precision and Akali's deadly efficiency.

---

What it does

RuneSight is an AI-powered League of Legends analytics platform featuring five specialized AI agents, each powered by Amazon Bedrock's Claude Sonnet model:

🎯 Performance Analysis Agent

• Analyzes individual match performance with KDA, CS, damage, and vision metrics
  
• Identifies specific strengths and weaknesses with data-backed reasoning
  
• Provides actionable recommendations for improvement
  

⚔️ Champion Expert Agent

• Offers champion-specific advice for optimal builds and runes
  
• Analyzes matchup strategies and power spikes
  
• Suggests itemization based on team composition and game state
  

👥 Comparison Agent

• Benchmarks your performance against friends and similar-ranked players
  
• Identifies areas where you excel or fall behind
  
• Provides competitive insights to help you climb
  

🤝 Team Synergy Agent

• Evaluates team composition and champion synergies
  
• Analyzes player role compatibility
  
• Suggests optimal team fighting strategies
  

📊 Match Summary Agent

• Generates comprehensive match retrospectives
  
• Highlights key moments and turning points
  
• Provides holistic game analysis
  

Key Features:

• Real-time match data from Riot Games API
  
• Progressive loading dashboard (1–2 second load times)
  
• Smart caching reduces API calls by 50%
  
• Dark/light mode with Ionia-inspired design
  
• Responsive design for desktop and mobile
  
• Knowledge based on research about League of Legends and professional YouTube channels

---

How we built it

🧩 Frontend Architecture

• React 18 + TypeScript for type-safe, modern UI development
  
• Vite for lightning-fast builds and hot module replacement
  
• Tailwind CSS + shadcn/ui for the Ionia-inspired gaming aesthetic
  
• React Query for intelligent data fetching and caching
  
• Framer Motion for smooth, blade-dance-like animations
  

⚙️ Backend Architecture

• FastAPI (Python) for high-performance REST API
  
• Strands Agents Framework for multi-agent AI orchestration
  
• Amazon Bedrock with Claude Sonnet for natural language understanding
  
• Boto3 for AWS service integration
  
• Mangum adapter to run FastAPI on AWS Lambda
  

☁️ Infrastructure & Deployment

• AWS Lambda with Function URLs for serverless compute
  
• AWS Amplify for frontend hosting and CI/CD
  
• Docker for building Linux-compatible Lambda packages
  
• CloudWatch for logging and monitoring
  
• PowerShell scripts or AWS CLI for automated deployment
  
• S3 Bucket for saving knowledge base
  

---

Key Technical Implementations

1. Docker-Based Lambda Deployment

The principal challenge was understanding how to deploy my full-stack application to production. Amplify could host static files pretty well, but for the backend, my solution was using Lambda functions with Docker containers. I could have built a more robust architecture using API Gateway calling each Lambda function, but I realized that for this demo it was more than enough.

2. Multi-Layer Caching Strategy

Getting the information in time was key, so I used in-memory cache for hot data (< 1 minute). I couldn't try DynamoDB to store the data due to time constraints, so I decided to go for a simple approach. The real challenge was reducing the loading time from several seconds to just a few using async calling and cache optimization.

3. Specialized Agent System Prompts

Getting the right answer was key for this project. I designed several scripts specifically to transform raw data into information the agents can understand. Each agent has carefully crafted prompts with specific roles, output formats, and metric interpretation guidelines, ensuring consistent, high-quality responses. I also managed to create an agent orchestrator that assigns tasks to each specific agent.

Accomplishments that we're proud of

I'm really happy with the overall design of the website—the layout, the vibe, and how smoothly the data loads. I'm also pleased with how well the agents respond to the assigned queries. Even though I didn't have much time, I think I achieved an interesting product that I would be more than happy to use until my credits are gone :D

What we learned

I had never used AWS before. I learned a lot with this project about deploying via command line using AWS CLI, which was really helpful and saved a lot of time. Before starting this project, I only knew a little bit about Lambda functions, but through my research on how to build this app and make it more scalable, I learned about the several tools Amazon has to offer, like Amplify, DynamoDB, Bedrock, SageMaker, etc. Even though I decided not to use all of them, I did some basic tests for each technology just to understand them. My initial architecture idea was to use Amplify → API Gateway → Lambdas → DynamoDB → Bedrock, but in the end I reduced it to something simpler. Even so, the learning was amazing, and I'm really excited to work on another AWS project. I'll use these credits to work until December on Kubernetes :D

What's next for RuneSight

I will improve the architecture and now focus on scalability, maintenance, and performance. I will find the best architecture for this use case and implement monitoring in my agents, observability, and RAG system. I also want to implement search functionality so the agents can find information in real-time. Probably, I'll fine-tune a model with data from the best Irelia players to get better insights into their play style and have different scenarios for items and strategies against specific champions, but always with respect to the game's rules, just to gain insights.

Built With

• agenticai
• agents
• amazon-web-services
• amplify
• cli
• fastapi
• python
• react
• s3bucket
• strands
• tailwind
• vite