Clippy.ai

Your Retro Web Assistant with Modern AI

Comment

🤖 Clippy.ai — Your Retro Assistant with a Modern Brain

🧠 Inspiration

Clippy.ai was born from a wave of nostalgia for the beloved Microsoft Office paperclip. We thought — what if we could bring Clippy back, but with a modern twist? Our goal was to reimagine Clippy as a helpful AI assistant that lives inside your Chrome browser, blending retro charm with real intelligence and playful interactions.

💬 What It Does

Clippy.ai is a Chrome Extension that adds a floating, draggable assistant to any webpage. Here's what it can do:

  • Chat with users using LLMs (like Mistral via OpenRouter)
  • React when text is selected (e.g. summarize, explain, translate)
  • Offer fun suggestions and quirky replies
  • Support voice input
  • Save chat history (with sync!)
  • Keeps the UI modern, but infused with classic 90s charm

🛠️ How We Built It

Frontend: HTML, CSS, and vanilla JavaScript — designed a clean UI that fits in a Chrome popup while feeling alive and playful

  • Extension: Used Chrome Manifest V3 and clippy.html to render the assistant UI
  • Backend: Node.js + Express server that sends prompts to LLMs
  • APIs: Integrated API for flexible LLM access (can swap to OpenAI, Together, Groq, etc.)
  • Extras: Voice recognition using Web Speech API, chat syncing using chrome.storage.sync

🚧 Challenges We Ran Into

  • Making the popup resizable and avoiding scroll glitches in the limited Chrome extension view
  • CORS issues when sending requests from the extension to a local Node.js server
  • Ensuring consistent styling across sites while injecting Clippy
  • Handling long chat history within Chrome's 100KB sync limit
  • Crafting a playful voice and personality for Clippy without overdoing it

🏆 Accomplishments We're Proud Of

  • Revived Clippy with an actual working AI backend and gave it a modern purpose
  • Fully working end-to-end chat assistant that runs right inside the browser
  • Built both client and server logic within 48 hours at a hackathon
  • Delivered a delightful UX with custom animations and personality

📚 What We Learned

  • Chrome Extensions can be powerful — but require strict control of permissions and structure
  • How to keep state persistent using chrome.storage.sync while avoiding memory bloat
  • How to clean and format LLM responses to stay in character (no model IDs, no junk)
  • Deploying AI with custom models and handling structured completions

🚀 What’s Next for Clippy.ai

  • Global assistant mode — let Clippy follow the user across tabs
  • Make Clippy context-aware by reading content from the active tab
  • Add Dark mode & theme customization
  • Add Chat export or shareable sessions
  • Add Plugin-style support for adding skills (like grammar fixes, jokes, etc.)

"We didn’t just build a chatbot — we gave Clippy a second life." 🧷✨

Share this project:

Updates