Create perplexity-lens.md

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.
+
+<iframe
+  className="w-full aspect-video rounded-xl"
+  src="https://www.youtube.com/embed/SCPklDuSR3U"
+  title="YouTube video player"
+  frameBorder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowFullScreen
+></iframe>
+
+## 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)