What's next for Studdy-Buddy

🦉 Study Buddy - AI Reading Companion Extension

An animated Chrome extension that helps students understand any webpage with AI-powered summaries, chat, and multi-language support!

✨ Features

🦉 Animated Owl Character - Draggable buddy that reacts to your scrolling and text selection
💬 AI Chat - Ask questions about any webpage content
📝 Smart Summaries - Get instant summaries in English, Spanish, or Russian
🌍 Multi-language Support - Perfect for international students
💾 Save Summaries - Keep your study notes for later
🎨 Interactive Animations - Owl shows emotions and comic-style speech bubbles
🆓 FREE API - Uses Google Gemini (1,500 free requests/day)

🚀 Setup Instructions

Step 1: Install Dependencies

Open terminal in this folder and run:

npm install

This will take 1-2 minutes to download all dependencies.

Step 2: Get Your FREE Google Gemini API Key

Go to: https://aistudio.google.com/app/apikey
Sign in with your Google account
Click "Create API key"
Copy the key (starts with something like AIza...)
Keep it handy - you'll need it in Step 4!

Cost: Completely FREE! 1,500 requests per day (perfect for studying)

Step 3: Build the Extension

In terminal, run:

npm run build

This creates a dist folder with your extension. Takes about 30 seconds.

Step 4: Load Extension into Chrome

Open Chrome browser
Go to: chrome://extensions/
Enable "Developer mode" (toggle in top-right corner)
Click "Load unpacked" button
Select the dist folder inside this project
You should see "Study Buddy" appear! 🎉

Step 5: Add Your API Key

Click the Study Buddy extension icon in Chrome (top-right, looks like 🦉)
Paste your Google Gemini API key
Click "Save API Key"
You're ready to go! ✨

🎮 How to Use

Basic Usage

Visit any webpage (try Wikipedia, news sites, articles)
See the owl appear in bottom-right corner
Drag the owl anywhere you want on the page
Watch the owl react when you:
- Scroll down (falls and looks scared 😱)
- Scroll up (flies happily 🦉)
- Highlight text (gets excited 😊)

Features

📝 Summarize a Page:

Click the 📝 button next to the owl
Owl thinks for a moment...
Get an instant summary!
Summary is automatically saved

💬 Chat About the Page:

Click the owl itself
Chat window opens
Ask questions like:
- "What is the main idea?"
- "Explain this in simpler terms"
- "What are the key points?"
Owl responds based on page content!

🌍 Change Language:

Click the flag button 🇬🇧
Choose: English 🇬🇧, Spanish 🇪🇸, or Russian 🇷🇺
All summaries/chat will be in that language!

📚 View Saved Summaries:

Click extension icon (top-right)
Go to "Saved" tab
See all your summaries with links back to original pages

🛠️ Development Commands

# Build for production (what you ran above)
npm run build

# Build in development mode with auto-reload
npm run dev

# Clean build folder
npm run clean

🎨 Customization Ideas

Want to make it your own? Here are easy tweaks:

Change Owl Colors

Edit: src/components/OwlCharacter.jsx

Line 58: Body color (#8B4513 → your color)
Line 111: Eye color
Line 131: Beak color (#FFA500 → your color)

Add More Languages

Edit: src/content/StudyBuddy.jsx

Line 197-200: Add more language options

Change Owl Position

Edit: src/content/StudyBuddy.jsx

Line 11: Change x and y values

🐛 Troubleshooting

❌ "API key not set" error

Make sure you added your Gemini API key in the extension popup
Click the extension icon → Settings tab → paste key → Save

❌ Owl doesn't appear

Refresh the webpage after loading the extension
Check Chrome console (F12) for errors
Make sure extension is enabled in chrome://extensions/

❌ Chat/Summarize not working

Check your API key is correct
Make sure you have internet connection
Check you haven't exceeded 1,500 requests/day (very unlikely)

❌ Build errors

Delete node_modules folder and package-lock.json
Run npm install again
Run npm run build

📁 Project Structure

study-buddy-extension/
├── dist/                    # Built extension (load this into Chrome)
├── public/
│   ├── manifest.json        # Extension configuration
│   └── icons/              # Extension icons
├── src/
│   ├── components/
│   │   ├── OwlCharacter.jsx      # Animated owl
│   │   ├── SpeechBubble.jsx      # Comic bubbles
│   │   └── ChatInterface.jsx     # Chat UI
│   ├── content/
│   │   ├── StudyBuddy.jsx        # Main component
│   │   └── index.jsx             # Injection point
│   ├── background/
│   │   └── service-worker.js     # API calls
│   └── popup/
│       ├── Popup.jsx             # Settings UI
│       └── popup.html
├── package.json
└── webpack.config.js