SideKick AI

Your always-on AI learning companion — explain first, answer second.

Comment

🧠 SidekickAI

Your always-on AI learning companion — explain first, answer second.

📌 How It Started (and Why It Even Exists)

As a college student in this era of AI boom, I’ve always felt tools like ChatGPT or Gemini are insanely helpful — but they kinda miss the part I need most: understanding the approach. Sure, they can give you the answer. But if you don’t grasp the why, did you really learn anything? (Spoiler: no.)

To be honest, I tried going "AI-less" for a bit to challenge myself — I lasted two days, and that too on a weekend 🫠

Initially, I wasn’t even going to participate in this hackathon. I was busy, burned out, and planned to sit this one out. Which I successfully did... until Saturday noon.

See, all my friends were building stuff, asking what I was working on, and I was like, “oh, not participating 😌” — but that never ends the convo, right?
“Why not?” “Skill issue?” “You got ditched?” “Bro you good?”
I was just trying to vibe in peace and they hit me with the deep concern 😂

So I thought, alright — I've been meaning to explore Chrome extensions + AI anyway...
Why not jump in and see what’s possible?

And that’s how SidekickAI was born:
A Chrome extension that sits with you, helps you understand, and gives you answers only if you ask for them.
Not a replacement — a learning buddy. A Sidekick.

🛠 What It Does

SidekickAI is a Chrome extension that acts as your personal AI tutor:

  • It's super simple! No extra tabs, apps, or crazy setup.
  • 🖱 Just right-click any selected text → “Explain with AI”
  • 🧠 SidekickAI grabs the selected text and page context
  • 💬 When you open the extension, it’s already thinking — and gives you a conceptual breakdown
  • 🔄 You can ask follow-up questions right in the chat
  • 🔓 If you just want the answer (like most of my friends), hit Reveal Answer
  • 🧾 It’ll even try to inject the answer into the input box on the page — if it finds one

This isn’t just about solving stuff. It’s about learning how to think through stuff.

💡 How It Works

  • Right-click context menu stores the selected text via chrome.storage.local
  • The popup UI is styled with a smooth, gray-800 palette, markdown rendering, and fade-in animations
  • Under the hood, it uses Gemini Flash 2.0 API to generate thoughtful responses
  • I also extract page info like:
    • ✅ page title
    • ✅ surrounding headers
    • ✅ placeholder labels
      ...and craft a smart prompt that gives Gemini the full picture
  • If you reveal the answer, it tries to inject it into:
    • a focused <textarea>
    • the closest input near your selection
    • or just pops up a floating box with a Copy button

⚔️ Challenges I Ran Into

😵‍💫 Chrome extension security

Yeah so... Chrome doesn’t play nice with file:// pages, chrome:// tabs, or blank tabs. Took a bunch of reloads, Google searches, and confused silence to sort that out.

🤯 Messaging between popup ↔ content script

Felt like building a walkie-talkie. You send a message, no one replies. “Receiving end does not exist.” Mood.

🔁 Figuring out where to inject the answer

At first, I just shoved the answer into the first input box I could find. But that wasn’t smart. I tried detecting where the user selected the text and finding the next closest input — didn’t fully finish it, but got the basic idea working, and it’s on my roadmap.

🔄 Pivots I Made

  • Wanted to make the extension resizable — learned Chrome popups can’t be. So I kept it clean and non-clunky.
  • Was going to auto-answer the question instantly — but then thought: nah. Let the user choose when to get the answer. Hence the Reveal Answer button.
  • Started with a static prompt — later added dynamic prompt construction from the page context (section headers, titles, etc.)
  • UI? I kept polishing it over and over. Borders, transitions, fade-ins, scrollbars, spacing... all the tiny things that make a big difference.

🧠 What I Learned

Honestly, this was the most “full-stack” thing I’ve ever done inside a browser that wasn’t a traditional web app. No frameworks, no libraries — just raw JavaScript + Chrome APIs + UI tweaking.

  • Learned how Chrome extensions really work, and how AI fits in that world
  • How to send messages across scripts, hook into the DOM, and store stuff
  • The difference between a basic AI tool and a real tutoring assistant
  • That how you prompt the AI matters just as much as what you ask
  • And that honestly, UI is everything. If it’s confusing or clunky, nobody’s gonna use it

🚀 What’s Next

  • 🔍 Page-specific prompting — smarter prompt tuning depending on the subject (math, essays, etc.)
  • 💾 Save session history per webpage
  • 📌 Pin answers inline like sticky notes

🏁 Built With

  • JavaScript (Vanilla + DOM APIs)
  • Chrome Extension APIs
  • Gemini Flash 2.0 API (free version)
  • HTML/CSS (gray-800 inspired palette)
  • Markdown rendering (marked.js)

🧪 Try It Live

📦 Just clone the repo, load as an unpacked extension, right-click any question, and you’re learning smarter — not harder. (you will unfortunately need your own gemini api, I was not able publish this extension in this short time frame ;( )

Share this project:

Updates