diff --git a/docs/showcase/perplexity-lens.mdx b/docs/showcase/perplexity-lens.mdx new file mode 100644 index 0000000..d4790d5 --- /dev/null +++ b/docs/showcase/perplexity-lens.mdx @@ -0,0 +1,88 @@ +--- +title: Perplexity Lens | AI-Powered Knowledge Graph Browser Extension +description: A browser extension that builds personalized knowledge graphs using Perplexity AI for smart text selection, webpage summarization, and contextual insights +sidebar_position: 18 +keywords: [perplexity lens, browser extension, knowledge graph, RAG, summarization, perplexity ai] +--- + +**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 + +```bash +# 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`: +```typescript +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](https://github.com/iamaayushijain/perplexity-lens) +- [Blog Post](https://ashjin.hashnode.dev/perplexity-lens-supercharge-your-web-experience-with-personalized-knowledge-graphs)