Cognitive-Lens

💡 Inspiration

In today's fast-paced digital world, we are constantly bombarded with dense, unstructured information. Whether it's a student trying to parse a complex research paper, or a developer reading dense documentation, the cognitive load is often overwhelming. We wanted to build a tool that acts as a buffer between the user and raw data—an intelligent layer that pre-processes information, maps out prerequisites, and clarifies ambiguity before you even start reading.

⚙️ What it does

Cognitive Lens is an AI-powered reading companion and environment analyzer. It scans complex texts and documents, extracting hidden structures and mapping out sub-concepts into an interactive knowledge graph.

Before you dive into a wall of text, Cognitive Lens will:

1. Analyze Cognitive Load: Give you a "scan score" so you know how dense the material is.
2. Map Prerequisites: Show you exactly what concepts you need to understand first.
3. Filter Ambiguity: Break down jargon-heavy paragraphs into accessible, structured chunks.
4. Environment Adaptation: Dynamically adapt its reading UI based on your focus and environment (using smart ambient backgrounds and distraction-free modes).

🛠️ How we built it

We built Cognitive Lens using a modern, highly responsive tech stack optimized for speed and AI integration:

• Frontend: Built with Next.js 16 (App Router), React 19, and styled meticulously with Tailwind CSS v4 and Framer Motion for buttery-smooth micro-animations.
• AI Orchestration: We designed a custom agentic orchestration layer (orchestrator.ts) that routes tasks to different specialized AI agents (e.g., Structure Agent, Emotion Agent, Dependency Agent).
• LLM Inference: We utilized Groq for lightning-fast, ultra-low latency AI inference, alongside the Google Gemini API for deep contextual analysis and multi-modal environment checks.
• Search: Integrated Tavily for real-time, AI-optimized web search to supplement missing knowledge gaps.
• Backend & Auth: Powered by Supabase for secure, real-time database management and authentication.

⚠️ Challenges we ran into

One of the biggest challenges was managing the asynchronous flow of multiple specialized AI agents. Waiting for 4 or 5 different LLM calls to finish before rendering the UI would have resulted in terrible UX. We solved this by building a custom orchestrator that runs non-dependent agents concurrently and streams the structured JSON results back to the Next.js frontend as they complete.

We also ran into aggressive strict TypeScript compilation issues during our Vercel deployment, which forced us to rigorously type-check our entire AI schema definition layer!

🎓 What we learned

We learned a massive amount about Agentic workflows. Instead of using one giant prompt, breaking down the AI's job into micro-decisions (one agent extracts concepts, another checks accessibility, another maps dependencies) resulted in significantly higher quality and more reliable outputs. We also learned how to perfectly leverage Groq's high-speed inference to make these multi-agent workflows feel instantaneous.

🚀 What's next for Cognitive Lens

In the future, we plan to fully release the accompanying Chrome Extension so that Cognitive Lens can overlay its analysis natively on top of any webpage you visit. We also plan to introduce personalized "Learning Profiles" stored in Supabase, where the AI remembers which prerequisites you have already mastered and automatically skips them in future scans!

Built With

• framer-motion
• gemini
• groq
• next.js
• react
• supabase
• tailwind-css
• tavily
• typescript