This is a submission for the KendoReact Free Components Challenge.
TL;DR
Built an AI image detection game using Kiro AI IDE + KendoReact MCP Server to generate components & override styles effortlessly—turning traditionally tedious UI customization into a breeze! ⚡
What I Built
Bot or Not challenges players to distinguish AI-generated images from real photos—a critical skill in today's AI-powered world! 🌍
Two Game Modes:
🎯 Daily Challenge: 3 rounds with results reveal
🔥 Streak Mode: Unlimited rounds with progressive difficulty
⚙️ Admin Panel: Manage images, create pairs, monitor stats
Why it matters:
Sharpen your ability to spot AI-generated content—an increasingly valuable skill!
Demo
📦 GitHub
🎥 Video Demo:
KendoReact Components Used
+10 KendoReact packages powering the entire experience:
Core UI Components:
🔘 Buttons - Game actions, navigation, mode selection
🎴 Layout (Card, PanelBar, StackLayout) - Image containers, game structure
📋 Grid - Admin panel data management
💬 Dialogs (Dialog, Window) - Confirmations, instructions, results screens
Form & Input Components:
📝 Dropdowns (DropDownList, ComboBox) - Category & difficulty filters
📤 Upload - Admin image uploading
🔤 Inputs (TextBox, NumericTextBox, Switch) - Admin forms & toggles
🏷️ Labels - Form labels & accessibility
📋 Form - Structured admin input handling
Feedback & Visualization:
🏅 Indicators (Loader, Badge) - Loading states, scores, streaks
📊 ProgressBars - Round progress (1/3, 2/3, 3/3)
🔔 Notification - Success messages, alerts, feedback
Additional:
🎨 Kendo Theme Default - Consistent styling
🎯 SVG Icons - Visual polish throughout
AI Coding Assistant Usage
What is Kiro? 🤔
Kiro AI IDE is an AI-powered development environment that integrates with MCP servers to provide intelligent coding assistance.
The MCP Server Magic: Two Game-Changing Features ✨
1️⃣ Instant Component Generation 🏗️
Without AI Coding Assistant Usage: Hours writing boilerplate, reading docs, configuring props
With AI Coding Assistant Usage: Describe what you need → Get production-ready components
Me: "Add a progress bar to the daily challenge session"
Kiro + KendoReact MCP Server: *Complete Progress Bar with proper config, TypeScript, accessibility*
🎥: Add KendoReact UI Component & Fix Bugs
2️⃣ Effortless Style Overrides 🎨 - THE GAME CHANGER!
The Traditional Nightmare: 😫
- Inspect nested CSS classes
- Trial-and-error with specificity
- Break component functionality
- Spend hours on simple visual tweaks
With AI Coding Assistant Usage: ⚡
Me: "Make Group Button have mint green gradient backgrounds with hover animation"
Kiro + KendoReact MCP Server: *Perfect CSS overrides, maintains functionality*
🎥: Add Custom Style To KendoReact UI Component
This alone saved 200% of UI development time! 🎯
Real Impact 💪
Developer Experience:
❌ No more CSS frustration
❌ No more documentation rabbit holes
✅ Focus on creative design
Key Takeaway:
The KendoReact MCP Server isn't just convenient—it fundamentally changes how you work with component libraries. What used to be frustrating (style overrides) became the easiest part! 💎
Happy prompting⚡
Top comments (6)
Congratulations on your winning entry! My name is Kathryn, and I'm the Senior Developer Advocate for KendoReact. If you're interested, our team would love to speak with you about your idea, your process, and your experience with KendoReact to feature on our website and social media accounts! If that's something you'd like to participate in, either reply to this comment with the best way to contact you, or send me an email at nanz @ progress.com. Thanks so much, and congrats again on the win!
Good article! 🚀
Thank u @tanelith
Excellent.
Appreciate it @william_andersen
thank you.