Perplexity Lens

• GIF

🚀 Inspiration Ever highlighted a confusing sentence on a website and thought, “I wish someone could just explain this to me”? We did too. So we built Perplexity Lens—a browser extension that turns any selected text into an interactive, AI-powered learning experience. Think of it as a magic highlighter with a brain.

🔍 What it does Select any text on a webpage → get instant AI explanations.

Dive deeper with follow-up questions or custom prompts.

Automatically maps concepts into a dynamic knowledge graph.

Share your graph with friends or go full geek and export it.

All with Google sign-in, offline storage, and a slick popup UI.

🛠️ How we built it React + TypeScript for the UI

Tailwind CSS for beautiful styling

D3.js for the knowledge graph (because static is boring)

Firebase for user auth, data storage, and hosting

OpenAI + Perplexity API for the AI smarts

IndexedDB for local persistence

Background scripts + Proxy for seamless CORS handling

🧱 Challenges we ran into CORS headaches (we built a custom proxy to solve it)

Embedding semantic relationships was trickier than expected

Getting D3.js to behave in a React world took some negotiation 😅

Balancing performance with real-time graph updates

🏆 Accomplishments that we're proud of Created a fully working Chrome extension with full-stack features

Seamlessly integrated AI responses into natural browsing

Made learning visual, shareable, and actually fun

Built a custom knowledge graph engine from scratch

📚 What we learned How to manage large-scale UI state inside extensions

IndexedDB can be your best friend—or worst enemy

Visual feedback matters (users love responsive graphs!)

AI is powerful, but UX makes it usable

🔮 What's next for Perplexity Lens Add support for other browsers (Firefox, Edge)

Enable collaboration on shared graphs

Enhance semantic clustering using embeddings

Launch it to a wider audience via the Chrome Web Store

Mobile-friendly graph viewer

Built With

• firebase-functions-(for-proxying)-dev-tools:-webpack
• indexeddb
• indexeddb-hosting-&-backend:-firebase-hosting
• javascript-frameworks:-react
• languages:-typescript
• openai-embeddings-visualization:-d3.js-browser-tech:-chrome-extensions-api
• tailwind-css-apis:-perplexity-api
• vite
• webpack-authentication:-firebase-authentication-(google-oauth)-database-&-storage:-firebase-firestore