Snippy 🎀✂️

A transparent desktop AI chatbot featuring a cranky scissors mascot that interfaces with GitHub Copilot API—a nostalgic spin on Clippy (Windows Office Assistant). Click the mascot to open a chat window and ask questions; Snippy responds with sharp wit and a grumpy but helpful attitude.

Features

• Transparent Desktop Widget - Snippy sits on your desktop as a transparent overlay
• AI-Powered Chat - Powered by GitHub Copilot SDK for intelligent responses
• Expressive Mascot - Multiple expressions based on mood (happy, sad, annoyed, laughing, etc.)
• Easter Eggs - Click Snippy repeatedly to discover hidden surprises! 🥚

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18.0.0 or higher) - Download Node.js
• npm (comes with Node.js)
• copilot cli - Download copilot cli

Verify Installation

node --version    # Should output v18.x.x or higher
npm --version     # Should output 9.x.x or higher
copilot --version

Getting Started

1. Clone the Repository

git clone https://github.com/your-username/snippy.git
cd snippy

2. Install Dependencies

npm install

This will install all required dependencies including:

• Electron (v40.0.0) - Desktop application framework
• Electron Forge - Build and packaging toolchain
• Vite - Fast development bundler with hot reload
• GitHub Copilot SDK - AI integration

3. Run in Development Mode

npm start

This launches Snippy in development mode with:

• Hot reload enabled (changes reflect immediately)
• DevTools automatically opened for debugging
• The mascot window appears in the bottom-right corner of your screen

4. Using Snippy

1. Click on Snippy to open the chat window
2. Type your question in the text area
3. Press Ctrl+Enter or click the submit button to send
4. Snippy will respond with AI-powered answers!

Project Structure

snippy/
├── src/
│   ├── main.js          # Main Electron process (window management, API calls)
│   ├── preload.js       # Secure IPC bridge between main and renderer
│   ├── renderer.js      # UI logic and event handlers
│   ├── index.css        # Application styles
│   └── public/          # Static assets (Snippy images)
├── index.html           # Main HTML template
├── forge.config.js      # Electron Forge configuration
├── vite.*.config.mjs    # Vite build configurations
└── package.json         # Project metadata and scripts

Available Scripts

Command	Description
npm start	Run in development mode with hot reload
npm run package	Create packaged app in out/ folder
npm run make	Build platform-specific installers
npm run publish	Publish to configured targets

Architecture Overview

Snippy uses Electron's multi-process architecture:

┌─────────────────────────────────────────────────────────┐
│                    Main Process                         │
│  (src/main.js - Node.js environment)                   │
│  • Window management                                    │
│  • GitHub Copilot API calls                            │
│  • Secure credential storage (safeStorage)             │
│  • IPC handlers                                         │
└─────────────────────┬───────────────────────────────────┘
                      │ IPC (Inter-Process Communication)
┌─────────────────────┴───────────────────────────────────┐
│                   Preload Script                        │
│  (src/preload.js - Bridge)                             │
│  • contextBridge.exposeInMainWorld()                   │
│  • Exposes safe API to renderer                        │
└─────────────────────┬───────────────────────────────────┘
                      │
┌─────────────────────┴───────────────────────────────────┐
│                  Renderer Process                       │
│  (src/renderer.js - Browser environment)               │
│  • UI rendering and interactions                       │
│  • Chat interface                                       │
│  • Mascot animations                                    │
└─────────────────────────────────────────────────────────┘

Development Tips

Debugging

• DevTools uncomment line in main.js to open automatically in development mode
• Use console.log() in renderer for UI debugging
• Check terminal output for main process logs

Hot Reload

• Changes to src/renderer.js and src/index.css hot-reload automatically
• Changes to src/main.js require restarting the app

Modifying the Mascot

Snippy's expressions are stored in src/public/:

• snippy.png - Default expression
• snippy_happy.png - Happy expression
• snippy_sad.png - Sad expression
• snippy_laughing.png - Laughing expression
• And more!

To add new expressions, add images to src/public/ and update getImageForFeeling() in renderer.js.

Troubleshooting

Common Issues

"Cannot find module" errors

rm -rf node_modules
npm install

Window not appearing

• Check that no other instance is running
• Verify your display settings support transparency

API not responding

• The app uses GitHub Copilot SDK which requires authentication
• Check the main process console for error messages
• Verify you have logged into the copilot cli or you have your github token stored in your environment variables GH_TOKEN or GITHUB_TOKEN.

Platform-Specific Notes

Windows

• Ensure you have Windows Build Tools for native module compilation:

  npm install --global windows-build-tools

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Inspired by Microsoft's Clippy (RIP 📎)
• Built with Electron
• Powered by GitHub Copilot

---

Snippy may be cranky, but he's here to help! ✂️