Clippy's Revenge

An AI-powered haunted coding companion that monitors your code, reacts to your behavior, and punishes sloppiness with spooky personality. Clippy is back… and it's angry.

Comment

Inspiration

Remember Microsoft Clippy? That adorable paperclip who tried to help but mostly annoyed everyone? We thought: "What if Clippy came back... but evil?"

The inspiration struck during a late-night coding session when we made a terrible mistake in our code. We wished someone (or something) would roast us for it - not gently, but with brutal honesty wrapped in dark humor. That's when Evil Clippy was born: a sarcastic AI code reviewer with a Halloween twist, combining nostalgia with modern AI to create something both functional and entertaining.

For Kiroween, we wanted to push the boundaries of what a developer tool could be - not just useful, but memorable. Why should code review be boring when it can be spooky?

What it does

Evil Clippy is an AI-powered desktop companion that watches your code in real-time and delivers brutally honest, sarcastic feedback with horror-themed visual effects.

Core Features:

  • Real-time Code Analysis: Uses Gemini 2.5 Flash to analyze your code as you save files

  • Severity-Based Feedback: Three levels (LOW/MEDIUM/HIGH) with escalating effects

    • LOW: Sarcastic message + subtle sound
    • MEDIUM: Message + screen shake + warning sound
    • HIGH: Message + shake + glitch effect + red flash + scary laugh

  • Smart Caching: 80% cache hit rate reduces API costs and improves response time

  • Horror UI: Blood drip effects, screen glitch, vignette darkening, and smooth animations

  • Customizable Avatar: Dress Clippy with witch hats, bat wings, and spooky overlays

  • Statistics Dashboard: Track your code quality over time

Easter Eggs:

  • Click Clippy 10 times for increasingly creepy messages
  • Leave your code idle for 2 minutes and hear "Where are you?" with screen shake
  • Clippy floats around your screen with physics-based motion

Evil Clippy doesn't just find bugs - it judges you for them.

How we built it

Tech Stack:

  • Electron + React + TypeScript for the desktop app
  • Gemini 2.5 Flash for AI-powered code analysis
  • Chokidar for real-time file watching
  • Tailwind CSS for styling
  • MCP (Model Context Protocol) for AI integration

Development Process:

We built Evil Clippy in 40 hours using Kiro IDE's features extensively:

  1. Vibe Coding (Chat-Based Development): Generated 1,200+ lines of UI code through natural conversation. The most impressive moment was when Kiro created the entire Electron IPC bridge with type-safe event handlers in one shot - main process, preload script, and TypeScript definitions all perfectly synchronized.

  2. Spec-Driven Development: Created detailed specs before coding complex systems:

  • mcp_server.md: Planned the entire MCP architecture, preventing 3 major refactors
  • persona_behavior.md: Defined Evil Clippy's AI personality rules
  • This saved us 14+ hours by planning architecture upfront

  1. Steering Documents: clippy_dark_persona.md taught Kiro about Evil Clippy's sarcastic personality with severity-mapped examples. This enabled consistent tone across 50+ AI-generated responses.

  2. Agent Hooks: Automated workflows:

  • test-on-save.json: Auto-run tests, caught 12 bugs immediately
  • generate-effects.json: Automated visual effect generation
  • dark-commits.json: Generated dark humor commit messages
  1. MCP Integration: Built a custom MCP server that made the project possible:
  • Real-time file watching (requires Node.js, impossible in renderer)
  • Gemini API integration with caching and rate limiting
  • Reduced analysis time from 2-3s to 200-500ms (10ms when cached)

Architecture: User saves file → Chokidar detects → Smart Analyzer checks cache → Gemini analyzes (or local fallback) → Result cached → Electron IPC → Renderer displays with effects

Challenges we ran into

  1. Electron Click-Through Window Making a transparent, always-on-top window that doesn't block clicks was tricky. We needed Clippy to be visible but not intrusive. Solution: Dynamic click-through that disables when interacting with Clippy or the dashboard.

  2. Cinematic Timing Initially, we had a complex cinematic sequence for HIGH severity (eyes closing, screen darkening, dramatic reveal). It looked cool but felt slow and annoying. We simplified to instant effects (shake + glitch + laugh) which felt much better.

  3. Speech Bubble Positioning The speech bubble kept appearing far from the avatar or covering it. We tried multiple approaches (above, below, smart positioning based on screen location) before settling on a classic side-by-side layout with a pointer arrow.

  4. Message Timing vs Motion Clippy would move to center, show a message, then stay frozen there. Users couldn't read the message before it moved away. Solution: Clippy moves to center, types the message, then resumes motion while the message stays visible.

  5. Gemini API Rate Limits During testing, we hit rate limits quickly. Implemented smart caching (15-minute TTL) and rate limiting (10 requests/minute) which reduced API calls by 80%.

  6. Laugh Detection Complexity We initially built a complex "laugh detection" system for embarrassing code patterns. It added complexity without much value. We simplified: scary laugh only plays for HIGH severity errors, making it more impactful.

Accomplishments that we're proud of

  • Built in 40 hours (would have taken 120+ without Kiro)
  • 81% of code generated by AI (~3,500 lines) while maintaining professional quality
  • Polished horror UI with 60fps animations on low-end hardware
  • Smart caching system with 80% hit rate, reducing API costs by $50+
  • Consistent personality across 50+ AI-generated sarcastic responses
  • Zero architectural refactors thanks to spec-driven development
  • 12 bugs caught by automated hooks before reaching runtime
  • Complete Kiro integration - used ALL 5 major features effectively
  • Real value - it's actually useful for code review, not just a demo

What we learned

About Kiro:

  • Vibe coding excels for UI iteration - we went through 5+ design iterations rapidly
  • Specs prevent refactors - planning complex systems upfront saved 14+ hours
  • Steering docs enable consistency - 70% faster response generation with perfect tone
  • Hooks eliminate manual work - saved 5+ hours on repetitive tasks
  • MCP unlocks capabilities - made features possible that would be impossible otherwise

About Development:

  • Simplicity > Complexity: Our initial cinematic sequence was cool but annoying. Simple effects felt better.
  • Caching is crucial: 80% cache hit rate made the difference between expensive and affordable
  • User feedback matters: We iterated on speech bubble positioning 6 times based on testing
  • Horror aesthetics are fun: Adding spooky elements made development more enjoyable

Technical Insights:

  • Electron's click-through API is powerful but requires careful state management
  • TypeScript's type system caught 20+ bugs during development
  • React's useEffect cleanup is critical for preventing memory leaks with timers
  • CSS animations are more performant than JavaScript for visual effects

What's next for Clippy's Revenge

Short-term (v1.1):

  • Multi-language support: Python, Java, Go, Rust analysis
  • Team dashboard: Share statistics with your team
  • More costumes: Vampire, zombie, ghost themes
  • Custom sound packs: Let users add their own sounds
  • Severity customization: Adjust what triggers each level

Medium-term (v2.0):

  • Cloud sync: Sync settings and statistics across devices
  • IDE plugins: VS Code, JetBrains integration
  • Custom rules: Define your own code patterns to detect
  • Advanced analytics: Code quality trends over time
  • Achievements: Gamify code quality improvements

Long-term (v3.0):

  • AI learning: Clippy learns your coding style and preferences
  • Team features: Code review assignments, team leaderboards
  • CI/CD integration: Run Evil Clippy in your pipeline
  • Monetization: Premium features for teams and enterprises
  • Community: Share custom personalities and rule sets

Startup Potential: Evil Clippy could become a SaaS product for development teams. Imagine:

  • Freemium model: Free for individuals, paid for teams
  • Enterprise tier: Custom rules, team analytics, SSO
  • Marketplace: Community-created personalities and sound packs
  • API access: Integrate Evil Clippy into any workflow

The combination of useful functionality (real code review) with entertaining presentation (horror theme + sarcasm) creates a unique product that developers actually want to use. We've already had 5 people ask "when can I download this?" during development.

Built With

Share this project:

Updates