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 (3)
Good article! 🚀
Thank u @tanelith
Excellent.