Clarify

• 

  Home screen of the app.

• 

  Rest working screen of the app.

• 

  Live code debugging and analysis feature of the app.

• 

  live video vent session feature of the app.

Inspiration:- In the age of AI, we noticed a dangerous trend: cognitive atrophy. Engineers, students, and decision-makers are increasingly dependent on AI chatbots for instant answers, creating a panic-to-paste cycle that erodes their critical thinking skills. Every time they hit a complex problem, they immediately ask ChatGPT for the solution rather than developing their own problem-solving muscle. We asked ourselves: What if AI could make us better thinkers instead of lazy consumers? That question led us to Clarify—an AI that refuses to give you the answer. Instead, it acts as a Cognitive Coach, using Socratic questioning and structured thinking frameworks to guide you from panic to clarity, ensuring you not only solve the problem but strengthen your mental resilience for the next challenge.

What it does:- Clarify is a thinking coach, not a chatbot. It transforms how people approach complex problems through a five-phase psychological journey: Phase 1: The Brain Dump

Accepts multimodal input (text, voice, screenshots, code) Users tag their domain (Coding, Math, Life Decisions) and mood (Calm, Stressed, Confused) AI automatically cleans messy, panicked thoughts into structured sentences

Phase 2: Mode Selection Users choose their coaching style:

Deep Dive (Mentor Mode): Root cause analysis and pattern recognition Quick Fix (Guide Mode): Actionable steps for immediate unblocking Second Pair of Eyes (Screen Share): Live visual debugging for code Vent Session (Live): Real-time voice for emotional processing

Phase 3: The Thinking Session (Core Experience)

Insight Cards: AI responds with structured cards (Issue, Insight, Tension, Fix) instead of text walls Reveal Mechanic: Critical answers are hidden behind a "Reveal Insight" button with prompts like "🧠 Pause & Think: What is the bug here?" forcing active cognitive engagement Thinking Path: Visual breadcrumbs showing your logic journey (GOAL → KNOWN INFO → PATTERN → LOGIC)

Phase 4: Live Collaboration

Voice-to-Voice: Natural, interruptible conversations using Gemini Live Visual Analysis: Screen sharing with video analysis for code/UI feedback Selection Tool: Draw boxes on your screen to ask about specific sections

Phase 5: Reflection & Closure

Cognitive Metrics: 0-100 scoring of your thinking quality Skill Badges: Earn achievements like "First Principles" or "Pattern Spotter" Reusable Mental Model: Extract general rules for future problems PDF Report: Downloadable summary of your logic path

How we built it:- Frontend Architecture:

Built a client-side heavy React application with a futuristic glassmorphism UI Implemented ambient orbs that pulse with the AI's thinking state and breathing effects Designed an interactive card system with reveal mechanics using React state management Created a visual breadcrumb trail to map the user's thinking journey in real-time

AI Integration:

Gemini 3 Flash for fast reasoning and text-based coaching sessions Gemini 2.5 Live for low-latency voice-to-voice and screen analysis Custom Socratic prompt engineering that forbids the AI from giving immediate answers, forcing it to ask guiding questions instead Built a proprietary cognitive scoring algorithm that evaluates question quality and logical progression

Real-Time Features:

WebSockets for live voice and screen-sharing sessions Video chunking system to analyze screen shares frame-by-frame Selection tool using canvas overlay for region-specific queries

Data & Privacy:

All session history stored in localStorage for complete user privacy No central database—user data stays on their device Exportable PDF reports generated client-side

Design System ("The Lit Aesthetic"):

Color-coded insight system: Violet (Wisdom), Emerald (Success), Rose (Issues) Inter font with micro-labels for a technical dashboard feel Smooth animations on every interaction (card slides, orb pulses, progress bars)

Challenges we ran into:-

1. Teaching AI to NOT Give Answers The hardest challenge was fighting against the LLM's natural instinct to be helpful by giving solutions. We spent countless iterations perfecting our Socratic prompting system to make Gemini ask questions instead of answering them. We had to build multiple layers of prompt constraints and examples.
2. The Reveal Mechanic UX Balancing "forcing thinking" with "not frustrating users" was tricky. If we hide too much, users feel gatekept. If we reveal too much, we lose the cognitive benefit. We iterated on the trigger points extensively through user testing.
3. Real-Time Screen Analysis Latency Processing video frames from screen shares while maintaining low-latency voice conversation was technically demanding. We optimized by chunking video at key moments rather than continuous streaming, and using Gemini's multimodal capabilities efficiently.
4. Cognitive Scoring Algorithm Quantifying "thinking quality" is inherently subjective. We developed a heuristic model based on:

Number of clarifying questions the user asks Depth of problem decomposition Time spent before requesting reveals Pattern recognition accuracy

We're still refining this to make it truly meaningful.

1. Voice Interruption Handling Making the voice mode feel natural meant handling interruptions gracefully. We implemented a custom WebSocket protocol that lets users interrupt Gemini mid-sentence, which required careful state management.

Accomplishments that we're proud of:- 🎯 We built an AI that says "No" — In a world of instant gratification AI, we created something that actively resists giving you the answer, and users actually love it. 🧠 The Reveal Mechanic Works — Our "Pause & Think" button isn't just a gimmick. Early testers report genuinely pausing to think before clicking, creating actual cognitive engagement. 🎨 The UI Feels Alive — The pulsing orbs, breathing effects, and glassmorphism aren't just pretty—they create a calming, focused environment that reduces panic during problem-solving. 🔧 Live Screen Debugging Actually Works — We successfully integrated real-time video analysis with voice conversation, making "pair programming with AI" a reality. 📊 Cognitive Metrics Dashboard — We created a scoring system that gamifies critical thinking, turning intellectual growth into something measurable and rewarding. 🚀 End-to-End Prototype in 48 Hours — We shipped a fully functional app with multimodal input, live voice, screen sharing, and a custom UI system in a single hackathon weekend.

What we learned:- Technical Lessons:

Gemini's multimodal capabilities are incredibly powerful for combining voice, vision, and text analysis WebSocket state management for real-time interactions requires careful error handling Client-side heavy architecture can provide better privacy while maintaining rich functionality Prompt engineering is an art—small wording changes drastically affect AI behavior

Product Lessons:-

Friction can be a feature — Adding deliberate difficulty (the Reveal button) can enhance value rather than reduce it Mood matters — Asking users to identify their emotional state upfront changes how they interact with the tool Micro-interactions create macro-impact — Pulsing orbs and smooth animations genuinely reduce user anxiety People want to think, they just need structure — Users don't want answers handed to them; they want guidance to find answers themselves

Design Lessons:

Glassmorphism and ambient effects create a "safe space" aesthetic perfect for cognitive work Color-coding insights (Violet/Emerald/Rose) helps users parse information faster Typography choices (micro-labels, Inter font) can make an interface feel more "professional" and trustworthy

What's next for Clarify:- Short-term (Next 3 Months):

Mobile App: Native iOS/Android apps optimized for voice sessions Collaborative Sessions: Allow two users to work through a problem together with AI coaching Domain-Specific Models: Specialized thinking frameworks for coding, math, design, and life decisions Integration with IDEs: VS Code extension for in-editor cognitive coaching

Mid-term (6-12 Months):

Mental Model Library: Community-contributed thinking patterns and frameworks Progress Tracking: Long-term cognitive skill development analytics Team Dashboards: For engineering teams to track collective problem-solving quality Custom Voice Personalities: Different coaching styles (tough coach, gentle mentor, neutral observer)

Long-term Vision:

Educational Partnerships: Work with universities to combat academic AI dependency Enterprise Version: Help companies build teams with stronger critical thinking skills Research Initiative: Study whether using Clarify actually improves long-term cognitive resilience API for Other Apps: Allow any product to add "cognitive coaching" to their AI features

The Ultimate Goal:- Transform Clarify from a hackathon project into a movement that redefines how humanity interacts with AI—not as a crutch, but as a cognitive gym that makes us sharper, more resilient thinkers.

Built With

• css
• framer-motion
• google/genai(v1.38.0)
• indigo
• lucide-react
• react-markdown
• react19
• tailwind
• typescript
• vite