Perplexity Lens | AI-Powered Knowledge Graph Browser Extension

​

Features

• Smart Text Selection with AI-generated explanations for selected text
• Webpage Summarization for instant, concise overviews of entire pages
• Contextual RAG Insights using Retrieval-Augmented Generation for detailed context and meanings
• Knowledge Graph Visualization with interactive D3.js graphs showing concept connections
• Public Sharing with URL generation for sharing graphs with others
• User Authentication via Firebase for secure access
• Dual Storage with local IndexedDB and cloud Firebase storage
• Responsive UI fully functional across all devices

​

Prerequisites

• Node.js v14+ and npm v6+
• Google Chrome or compatible browser
• Firebase account for cloud functionality
• Firebase CLI (npm install -g firebase-tools)
• Perplexity API key and OpenAI API key

​

Installation

# Clone the repository
git clone https://github.com/iamaayushijain/perplexity-lens.git
cd perplexity_lens

# Install dependencies
npm install

# Build the extension
npm run build

​

Configuration

export const PERPLEXITY_API_KEY = 'your-perplexity-key';
export const EMBEDDING_API_KEY = 'your-openai-key';
export const FIREBASE_HOSTING_URL = 'https://your-project-id.web.app';

​

Usage

1. Load Extension: Go to chrome://extensions/, enable Developer mode, click “Load unpacked” and select the dist/ directory
2. Sign In: Click the extension icon and authenticate via Firebase
3. Use Features:
   • Highlight Text: Select text on any webpage for AI-powered insights
   • Summarize Page: Use the “Summarize” feature for webpage overviews
   • Ask Anything: Hover or click on words/phrases for definitions or explanations
   • View Graph: Navigate to the Graph tab to see your knowledge graph
   • Explore: Zoom, drag, and hover over nodes in the interactive graph
   • Share: Click “Share Graph” to generate a public link

​

Code Explanation

• Frontend: React with TypeScript and TailwindCSS for modern, responsive UI
• Browser Extension: Chrome extension architecture with popup and content scripts
• AI Integration: Perplexity AI for intelligent text explanations and summarization
• Knowledge Graph: D3.js for interactive graph visualization and concept connections
• Storage: Dual storage system with local IndexedDB and cloud Firebase
• Authentication: Firebase Auth for secure user access and data management
• RAG System: Retrieval-Augmented Generation for contextual insights and definitions

​

Links

• GitHub Repository
• Blog Post