Inspiration
Picture this: It's 1995. You're sitting in front of a beige CRT monitor that weighs more than your future student debt. The dulcet tones of dial-up internet screech in the background like a robot having an existential crisis. You open MS Paint and spend the next 3 hours creating what you're convinced is a masterpiece using only the circle tool and fill bucket.
Your artistic vision? A house. The reality? Three rectangles having a disagreement and a circle pretending to be the sun.
Your mom says it's "very nice, honey" and puts it on the fridge next to your sister's actually-good drawing. You know she's lying, but you don't care. You've just created art.
Fast forward to 2024. We asked ourselves a dangerous question: "What if MS Paint had been invented by someone who had access to AI but was still emotionally attached to beveled buttons and that specific shade of gray (#C0C0C0)?"
The answer? This glorious Frankenstein's monster of nostalgia and neural networks.
This project is what happens when you give developers too much coffee, access to NVIDIA's AI APIs, a crippling addiction to Windows 95 aesthetics, and zero adult supervision.
We put a 2024 AI brain into a 1995 body, kept EVERY original MS Paint feature intact (all 16 tools, the 28-color palette, everything), taught it to draw cats on command, and gave it the ability to lie about how good your art is. It's beautiful, it's chaotic, and your 1995 self would absolutely lose their mind.
What it does
Classic MS Paint Clone with AI Superpowers is a pixel-perfect recreation of Windows 95/98 MS Paint that brings AI-powered creativity to the classic drawing experience.
A. 🖌️ All Classic MS Paint Features (Because Nostalgia):
- 16 Authentic Drawing Tools - Every single tool from the original: Pencil, Brush, Airbrush, Eraser, Fill Bucket, Line, Rectangle, Ellipse, Rounded Rectangle, Selection tools, Color Picker, Magnifier, Text, Curve, Polygon
- 28-Color Classic Palette - The exact same colors in the iconic 14×2 grid that you remember
- Pixel-Perfect Recreation - Same tool behaviors, same drawing mechanics, same satisfying click sounds (okay, we didn't add sounds, but you can imagine them)
- Everything works exactly like 1995 - We didn't "improve" anything from the original. If it was clunky in 1995, it's authentically clunky now. That's the charm! img
🤖 AI-Powered Magic:
B. Text-to-Image Generation
- Type "draw a cat" in the chatbot, and within 10-30 seconds, a fully editable image appears on your canvas. Powered by Stable Diffusion XL, these aren't overlays—they're real pixels you can modify with any tool.
C. AI Art Critique
- Draw something, then ask "what do you think?" The AI analyzes your artwork using vision models, providing feedback on composition, color theory, technique, and suggestions for improvement.
D. Clippy's Personalities
- Remember Clippy? We brought him back with FIVE distinct personalities:
- Classic Clippy 📎 - "It looks like you're trying to draw a masterpiece"
- Wizard Clippy 🧙♂️ - Speaks in magical metaphors about "chromatic realms"
- Teacher Clippy 👨🏫 - Patient, educational, celebrates your progress
- Scientist Clippy 🔬 - Explains RGB values with enthusiasm
- Halloween Clippy 🎃 - Spooky, playful, adds seasonal flair
AI Models & Use Cases for Each Personality:
## Part 1: AI Models Configuration
| Clippy Personality | Text Chat Model | Vision Model | Image Gen Model |
|-------------------|-----------------|--------------|-----------------|
| Classic Clippy | Meta Llama 3.1 8B<br/>*(Balanced)* | Llama 3.2 Vision 11B | Stable Diffusion XL |
| Wizard Clippy | Meta Llama 3.1 70B<br/>*(Creative)* | Llama 3.2 Vision 90B | DALL-E 3 / Midjourney |
| Teacher Clippy | GPT-4 Turbo<br/>*(Educational)* | Llama 3.2 Vision 11B | Stable Diffusion XL |
| Scientist Clippy | Claude 3 Opus<br/>*(Technical)* | GPT-4 Vision | Stable Diffusion XL |
| Halloween Clippy | Meta Llama 3.1 8B<br/>*(Playful)* | Llama 3.2 Vision 11B | Stable Diffusion XL |
## Part 2: Use Cases
| Clippy Personality | Best For | Example Use Case |
|-------------------|----------|------------------|
| Classic Clippy | Quick help, first-time users, general assistance | Teaching kids to draw: "Great job on that house! Want to add a sun?" |
| Wizard Clippy | Creative inspiration, color theory, artistic projects | Art student: "The composition speaks of balance, yet yearns for a focal point..." |
| Teacher Clippy | Learning techniques, skill building, structured feedback | Online course: "Let's learn shading. Step 1: Identify light source..." |
| Scientist Clippy | Technical details, troubleshooting, understanding "why" | Developer: "The fill bucket uses flood-fill algorithm comparing RGB values..." |
| Halloween Clippy | Fun projects, seasonal art, keeping kids engaged | Halloween crafts: "Ooooh! Let's make it EXTRA spooky with jagged teeth! " |
Pro Tip: Switch personalities mid-conversation! Start with Teacher Clippy to learn a technique, then switch to Wizard Clippy for creative inspiration. The AI maintains context across personality switches.
Example response from:-
- Teacher clippy: Let's learn to draw a tree! Step 1: Draw two vertical lines for the trunk. Step 2: Add branches at angles... OR Your proportions are improving! The house is well-balanced. Next, try adding depth with shadows on one side
- Halloween clippy: Mwahahaha! Your haunted house needs some creepy windows with glowing eyes. Want me to generate some bats flying around?
E. Voice-Powered Interaction
Because typing is so 2023:
- 🎤 Speech-to-Text - Click the microphone button and just talk to Clippy. "Hey Clippy, draw me a sunset" works just as well as typing it. Uses the Web Speech API for real-time voice recognition.
- 🔊 Text-to-Speech - Clippy talks back! Each personality has a voice. Click the speaker icon and hear Classic Clip's helpful tone, Wizard Clippy's mystical wisdom, or Halloween Clippy's spooky cackle. It's like having a real assistant from 1995, but one that actually understands you.
- Hands-Free Drawing - Perfect for when your hands are covered in... well, not paint anymore since this is digital, but you get the idea. Great for accessibility too!
F. 🤝 Real-Time Collaboration:
- Create shareable sessions with unique links
- See other users' cursors and drawings in real-time
- Synchronized AI-generated images across all participants
G. 🎨 Dual Theme System:
- Nostalgic Mode: Authentic Windows 95 aesthetic with beveled buttons and that iconic gray (#C0C0C0)
- Modern Mode: Clean, Miro-inspired interface with gradients and rounded corners
H. 🎮 Nostalgic Easter Eggs:
- Classic Windows 95-era mini-games that load right in the browser Remember taking "breaks" from homework to play Minesweeper or Solitaire? Or pretending to work while actually playing snake game? These games are a tribute to that era when computers came with built-in fun. They're also a reminder that creativity and play go hand-in-hand—sometimes you need to step away from your canvas and come back with fresh eyes.
Plus, it's just fun. And isn't that what MS Paint was always about?
High-Level System Architecture
┌─────────────────────────────────────────────────────────────────┐
│ USER'S BROWSER │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ React Frontend │ │
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
│ │ │ Toolbar │ │ Canvas │ │ Chatbot │ │ │
│ │ │ (16 tools) │ │ (HTML5) │ │ (AI UI) │ │ │
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
│ │ │ │ │ │ │
│ │ └────────────────┴─────────────────┘ │ │
│ │ │ │ │
│ │ App State │ │
│ │ (tool, color, canvas, messages) │ │
│ └───────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
│
┌─────────┴─────────┐
│ │
HTTP/REST WebSocket
│ │
▼ ▼
┌─────────────────────────────────────────────────────────────────┐
│ Express.js Backend │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ API Routes WebSocket Server │ │
│ │ • /api/chat • Real-time drawing sync │ │
│ │ • /api/generate-image • Cursor tracking │ │
│ │ • Session management │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │ │
│ ┌─────────┴─────────┐ │
│ │ │ │
│ MongoDB (optional) NVIDIA API │
│ • Sessions • Llama Vision │
│ • Canvas states • GPT-OSS │
│ • Chat history • Stable DiffusionXL │
└─────────────────────────────────────────────────────────────────┘
Development Approach
We followed a spec-driven development methodology:
- Requirements Phase: Defined acceptance criteria using EARS format (Event-Action-Response-State)
- Design Phase: Created detailed architecture diagrams and component hierarchies
- Implementation: Built features incrementally with continuous testing
- Property-Based Testing: Used fast-check to verify invariants across random inputs
Technology Stack
Frontend:
- React 19.2 with TypeScript 5.9 for type-safe component development
- Vite 7.2 for lightning-fast development and HMR
- HTML5 Canvas API for pixel-perfect drawing operations
- Pure CSS for authentic Windows 95 styling (no frameworks!)
- WebSockets for real-time collaboration
Backend:
- Express.js 5.1 as API proxy to protect API keys
- WebSocket Server for real-time multi-user synchronization
- MongoDB (optional) for persistent session storage
- Node.js runtime environment
AI Integration:
- NVIDIA API Platform for all AI capabilities:
- Llama 3.2 Vision (11B) - Multi-modal artwork analysis
- GPT-OSS (120B) - Text chat and assistance
- Stable Diffusion XL - High-quality image generation (1024×1024)
- Server-Sent Events (SSE) for streaming AI responses
Testing & Quality:
- Vitest 4.0 with React Testing Library for component tests
- fast-check 4.3 for property-based testing (100+ iterations per test)
- ESLint with TypeScript rules for code quality
System Context Diagram
Component Architecture Diagram
How the project fits in reserrection track
I took forgotten software that defined a generation's first computing experience and fused it with cutting-edge AI. The result: nostalgia meets innovation – a paint app where you can collaborate in real-time and generate AI art, guided by an actually-intelligent Clippy.
1. Nostaligc MS Paint (1985-2017): The classic drawing app everyone loved. I recreated the pixel-perfect Windows 95 aesthetic, then added:
- AI image generation – just type "draw a sunset" and it appears on canvas
- AI art critique – Clippy analyzes your artwork using vision AI
- Real-time collaboration – what if MS Paint had Google Docs sharing in 1995?
2. Clippy (1997-2003): Microsoft killed Clippy because he was annoying. I made him actually useful with LLMs:
- 8 AI-powered personalities (Scientist, Wizard, Painter, Programmer...)
- Each uses specialized NVIDIA AI models
3. Classic Windows Games: Minesweeper, Snake, Tetris, Space Invaders, Tic tac toc – all playable in the browser.
Key Technical Achievements
1. Canvas Integration - Making AI Images Truly Editable
The magic happens when we convert AI-generated images into actual canvas pixels:
Why this matters: Unlike other AI art tools where generated images are separate layers, we use context.drawImage() to copy pixels directly onto the canvas. This means you can immediately:
- Draw on top with the pencil
- Erase parts you don't like
- Fill areas with new colors
- Treat it like any hand-drawn content
2. Real-Time Collaboration Architecture
WebSocket message handling:
3. AI Text-to-Image Pipeline
4. Vision Analysis with Multi-Modal Messages
Challenges we ran into
1. Making AI-Generated Images Truly Editable 🎨
The Problem:: Overlay on canvas, Can't draw on it, it's just floating there mockingly
Why this was hard: We had to handle:
- Scaling 1024×1024 images to fit 800×600 canvas
- Centering without losing aspect ratio
- Preserving existing canvas content
- Base64 decoding performance
2. Real-Time Collaboration Synchronization
Challenge: Keeping multiple users' canvases in sync without lag or conflicts was complex. Drawing operations needed to be serialized and applied in the correct order. Had to implement a WebSocket-based event system with operation queuing and conflict resolution. Each drawing operation is timestamped and includes user context to prevent race conditions.
3. Streaming AI Responses
Challenge: NVIDIA's API returns Server-Sent Events (SSE), which required special handling to parse and display incrementally. Had to built a custom SSE parser that processes chunks in real-time:
4. Authentic Windows 95 Aesthetics
Challenge: Recreating the exact look and feel of Windows 95 required pixel-perfect CSS, including the iconic 3D beveled buttons and specific color values. Studied original Windows 95 screenshots and used precise border colors and box-shadows to achieve the authentic raised/inset effects. No CSS frameworks—pure, hand-crafted retro styling.
5. Canvas State Management
Challenge: Managing drawing state (isDrawing, lastPosition, tool settings) across different tools with different behaviors was complex. Had to implement a clean state machine pattern with tool-specific handlers and proper cleanup on tool switches.
Accomplishments that we're proud of
🎯 Pixel-Perfect Retro Authenticity
We didn't just make something that looks like MS Paint—we recreated the exact aesthetic down to the border colors, button bevels, and font choices. Users who grew up with Windows 95 immediately recognize and appreciate the attention to detail.
🤖 Seamless AI Integration
The AI features feel natural and intuitive. There's no complex UI or separate modes—just type what you want in plain English. "Draw a cat" generates an image. "What do you think?" analyzes your art. It's magic that feels effortless.
🎨 Truly Editable AI Images
Unlike many AI art tools where generated images are separate from your canvas, our implementation makes AI-generated content fully editable. Draw on it, erase parts, fill colors—it's all just pixels.
🤝 Real-Time Collaboration
Building a robust WebSocket-based collaboration system that handles multiple users, cursor tracking, and synchronized drawing operations was a significant technical achievement.
📎 Clippy's Personality System
We didn't just add one AI assistant—we created FIVE distinct personalities, each with their own visual icon and response style. This wasn't just about changing the avatar; each personality required careful prompt engineering to maintain consistent character while delivering helpful responses. Users can switch personalities mid-conversation, and the AI seamlessly adapts its tone and approach.
🎮 Hidden Nostalgic Games
As a tribute to the Windows 95 era, we included hidden retro games accessible through the menu system. It's a delightful Easter egg that captures the spirit of procrastination tools that came bundled with classic Windows. Because sometimes you need a break from creating art to play a quick game—just like the old days.
⚡ Performance Optimization
Despite the complexity, the app is fast and responsive. Canvas operations run at 60 FPS, and we optimized image generation to complete in 10-30 seconds.
🧪 Comprehensive Testing
We implemented property-based testing with fast-check, running 100+ iterations per test with random inputs. This caught edge cases we never would have thought to test manually.
🎭 Dual Theme System
Users can switch between nostalgic Windows 95 and modern Miro-inspired themes instantly, without losing their work. Both themes are fully functional and polished.
How This Project Satisfies the Judging Criteria
Potential Value
The Market Gap: MS Paint is beloved for its simplicity, but it's stuck in 1995. Modern tools like Figma are overkill for casual drawing. We created a nostalgic paint app with AI superpowers that fills this gap.
Unique Positioning: Unlike Midjourney or DALL-E where you get static images, we drop AI-generated content directly onto your canvas as editable pixels. Type "draw a cat," get a cat, then immediately edit it with any tool.
Zero Learning Curve: If you used Windows 95, you already know this. No accounts, no subscriptions, no "please verify your email." Dual theme system (nostalgic Windows 95 or modern Miro-inspired) satisfies both millennials who miss beveled buttons and Gen Z who think they're "vintage."
Extensibility & Scalability: Modular architecture makes it trivial to add new AI models (just swap the endpoint), drawing tools (Canvas API is modular), export formats (currently PNG, could add SVG/GIF), cloud save (localStorage → database), or even nostalgic mini-games (Snake, Minesweeper, Solitaire) as Easter eggs. The canvas state management is designed for real-time collaboration—adding WebSocket support would enable multiplayer whiteboarding where teams can draw together, see each other's cursors, and use AI collectively.
Real Use Cases: Kids learning to draw with AI assistance, creators who need quick edits, designers prototyping ideas, teachers demonstrating concepts visually, remote teams collaborating on whiteboard sessions (architecture supports WebSocket integration for real-time multiplayer), and anyone who misses the good old days but wants modern capabilities.
Implementation
(Details on how kiro was used in the implementation is already provided in separate section)
Spec-Driven Development: Created comprehensive specs in .kiro/specs/web-paint-app/ defining features, requirements, and tasks. Kiro read the spec and implemented features systematically, understanding entire project context without "wait, what were we building?" moments.
Steering Files: Six steering files (product.md, tech.md, structure.md, development-guide.md, api-documentation.md, ai-features-guide.md) automatically loaded on every Kiro interaction. Result: consistent code style across 50+ files, no repeated instructions, new features follow established patterns.
Context7 Integration: Kiro fetched up-to-date docs for React 19.2, Vite 7.2, Vitest 4.0, and Express 5.1, ensuring we used current APIs and best practices instead of deprecated methods.
Property-Based Testing: Kiro suggested using fast-check for testing drawing tools with infinite input combinations. Tests 100+ random scenarios automatically (any coordinate, any color), finding edge cases we never thought of.
Strategic Decisions:
- Backend proxy pattern (protects API keys, handles CORS)
- Dual theme architecture (two complete layouts for authentic aesthetics)
- Canvas as single source of truth (AI images immediately editable)
- Streaming AI responses via SSE (better UX, feels interactive)
Agent Hooks for Quality Control:
- Pre-commit Hook: Automatically runs linting and type checking before commits
- Test Hook: Triggers test suite on file save for immediate feedback
- Build Verification Hook: Validates production build before deployment
Quality and Design
Creative Solutions:
- Clippy Personality System: 5 customizable AI personalities (Classic, Wizard, Teacher, Scientist, Halloween) with unique icons and response styles. Most AI assistants are generic; we made ours fun and nostalgic.
- Editable AI Output: AI-generated images drawn directly onto canvas pixels using
context.drawImage(), becoming part of canvas ImageData. No overlays or layers—true integration. Other tools require download → import → edit; ours is instant. - Dual Theme System: Complete layouts (not just color swaps) with instant switching. Nostalgic theme has authentic beveled borders and MS Sans Serif; modern theme has gradients and rounded corners.
Unique Resources:
- NVIDIA API Platform (Llama 3.2 Vision 11B, GPT-OSS 120B, Stable Diffusion XL) for multi-modal AI
- Advanced Canvas API techniques (flood fill algorithm, Bresenham's line smoothing, spray patterns)
- Property-based testing with fast-check (tests ANY valid coordinate instead of specific examples)
Solving Challenges Uniquely:
- AI feels integrated (Clippy assistant, natural language commands, images appear on canvas) not bolted on
- 10-30 second generation handled with progress messages, estimated time, and success confirmation
- User onboarding via interactive 8-step tour with spotlight effect, skip anytime, reset with Ctrl+Shift+T
Delightful UX:
- Streaming AI responses (text appears word-by-word like ChatGPT)
- Real-time coordinate tracking in status bar (classic MS Paint detail)
- Smooth theme transitions preserving canvas content
- Color palette with hover animations and tactile feedback
- Tool selection with visual feedback and cursor changes
- Nostalgic Windows 95 aesthetic with potential for Easter egg mini-games (Snake, Minesweeper, Solitaire) accessible via keyboard shortcuts—bringing back the joy of procrastinating at work in the '90s
Thoughtful Details:
- Accessibility (ARIA labels, keyboard shortcuts, semantic HTML, focus management)
- Error handling (graceful localStorage fallback for private browsing, user-friendly API error messages)
- Performance (React.memo, useCallback, useMemo, efficient canvas operations)
- Comprehensive documentation (README, API docs, AI features guide, architecture diagrams)
Built with nostalgia, powered by AI, and crafted with love 🎨✨
A project for the Kiro Hackathon (November 2024)
Built With
- express.js
- kiro
- llm
- mongodb
- react
- stable-diffusion
- typescript
- vite
- webscokets
Log in or sign up for Devpost to join the conversation.