🧠 Klaro — Turning Confusion Into Clarity

A Chrome extension that helps students break down assignments using AI.

🌟 Inspiration

Every student knows the feeling: staring at a confusing assignment prompt, not knowing where to start. Many students struggle not because they can’t do the work, but because they don’t understand:

What the assignment is actually asking
What steps to take
What matters most to the teacher
What ideas to bring into the work

Even with AI tools available, students rarely know how to prompt effectively. They either:

misuse AI to “just write it for me,” or
struggle to get meaningful guidance.

We wanted to build something that solves the real problem — the confusion before the work even starts. Klaro was born from the idea that AI shouldn’t do the schoolwork — it should help students understand how to approach it.

🚀 What We Built

Klaro is a browser extension that transforms any assignment prompt into a personalized, step-by-step breakdown — all within a beautiful glassmorphism sidebar UI.

✨ Key Features

Highlight-to-Understand: Highlight any assignment text → Klaro instantly appears with a guided process.
AI-Generated Clarifying Questions: The extension first asks the student two targeted clarifying questions to fill in missing information.
Context-Aware Breakdown: After the student answers, Klaro creates a personalized breakdown:
- Summary
- Plain-English instructions
- Step-by-step execution plan
- Common pitfalls
- A final meta-prompt that teaches students how to collaborate with AI ethically.
Glassmorphism Interface: A smooth, modern, React-powered sidebar with light/dark modes.
Integrity-First Design: Klaro coaches students; it doesn’t cheat for them.

🛠️ How We Built It

Klaro is built as a Chrome extension using:

React + TailwindCSS for the sleek, animated sidebar UI
Content scripts to inject the React app into any webpage
Manifest V3 service worker for background logic
OpenAI API (GPT-4o Mini) for generating clarifying questions and the final breakdown
A two-phase AI architecture:

Phase 1: Validate the assignment + generate targeted clarifying questions
Phase 2: Use the original assignment + student answers to generate the final breakdown and meta-prompt

We also engineered a custom meta-prompting system to ensure:

JSON-safe responses
Student-friendly language
Clear, structured outputs
Academic integrity guardrails

🧩 What We Learned

1. Good AI UX requires asking the right questions first.

We learned that the order of interaction matters. If you give students a breakdown too early, the AI guesses wrong. But if you ask them two clarifying questions first → the AI becomes dramatically smarter.

2. Chrome extensions are trickier than expected.

Working with:

service workers
message passing
injected scripts
React bundling in MV3 …required careful orchestration.

3. Meta-prompt engineering is a superpower.

We learned how to:

enforce strict JSON schemas
avoid hallucinations
create reusable system prompts
build tutor-like AI behavior instead of “cheating AI”

4. UI matters — a lot.

The glassmorphism design and smooth animations made the tool feel magical. Judges and users responded emotionally to great UI.

🧗 Challenges We Faced

1. Injecting a React app into any webpage

Chrome Manifest V3 makes DOM injection and bundling complex. We had to create a custom root mount, script loader, and styles system.

2. Reliable JSON responses from AI

We built multiple guardrails and fallback logic to handle malformed JSON, missing fields, or vague assignments.

3. Preventing cheating while still being helpful

We carefully designed the system prompt to:

refuse to complete assignments
teach instead of replace
encourage iterative thinking
protect students ethically

4. Time Pressure

Building a polished React experience, two-phase AI system, and extension architecture in under 48 hours was a race — but we did it.

🎉 Final Thoughts

Klaro isn’t just a productivity tool — it’s a learning companion. It helps students understand their assignments, plan their work, and collaborate ethically with AI.

We set out to make something that turns confusion into clarity — and we built exactly that.

If you want help turning this into a shorter, more promotional version, a video script, or a pitch deck slide, just let me know!