Perplexity Lens is a powerful browser extension that transforms your browsing experience by providing AI-powered insights using Perplexity AI and creating a personalized knowledge graph that visually connects the concepts you encounter online.

​
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

Edit src/config.ts: 
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