🤖 PageChat

PageChat is a powerful RAG-based AI chat widget Chrome extension. Seamlessly interact with any webpage, PDF, or Office document using AI-driven insights and real-time Google Search integration.

---

🚀 Key Features

• 📄 Context-Aware Chat: Instantly query the content of any tab or document.
• 🌐 Native Google Search: Integrated ReAct Agent fetches live data when internal context is insufficient.
• 📚 Knowledge Base: Aggregate multiple sources (web pages, PDFs, Office files) into a single analytical session.
• ⚡ Smart Actions: Pre-built prompts for Summaries, Quizzes, Email drafting, and Data Extraction.
• 🏢 Universal File Support: Full support for PDFs (OCR included), .docx, .pptx, and .xlsx.
• 🧠 Gemini OCR: Powered by Google Gemini for high-accuracy text extraction from scanned documents.
• 💾 Smart History: Intelligent conversation summarization to maintain context while optimizing token usage.

---

🛠️ Tech Stack

Layer	Technology
Backend	Node.js, Express, TypeScript
AI Orchestration	LlamaIndex with ReAct Agent
LLMs	Gemini 2.5 Flash Lite
Embeddings	Google text-embedding-004
Parsing	OfficeParser, PDF-Parse, Gemini OCR
Frontend	Vanilla JavaScript (Framework-free)

---

📐 Architecture

graph TD
    classDef client fill:#f9f,stroke:#333,stroke-width:2px
    classDef server fill:#bbf,stroke:#333,stroke-width:2px
    classDef ai fill:#dfd,stroke:#333,stroke-width:2px

    subgraph Client ["Chrome Extension (MVP3)"]
        UI["UI Widget (Vanilla JS)"]
        CS["Content Scripts"]
        BG["Background Worker"]
    end

    subgraph API ["Express Backend"]
        R["Routes (/chat, /extract)"]
        Ag["Agent Service"]
        RAG["RAG Service"]
        Hist["History Service"]
    end

    subgraph External ["AI Ecosystem"]
        Gemini["Gemini API"]
        Search["Google Search"]
        Index[".storage (Vector Store)"]
    end

    UI --> BG
    BG --> R
    CS --> UI
    R --> Ag
    Ag --> RAG
    Ag --> Hist
    Ag --> Gemini
    Ag --> Search
    RAG --> Index
    RAG --> Gemini

Loading

---

📦 Quick Start

1. Prerequisites

• Node.js: v18.0.0 or higher
• Google Gemini API Key: Get one here

2. Installation

git clone https://github.com/harsh194/pagechat.git
cd PageChat
npm install

3. Configuration

Create a .env file in the root:

GEMINI_API_KEY=your_api_key_here
AUTH_TOKEN=your_secure_auth_token_here
PORT=3001

4. Running the Project

# Development (with hot reload)
npm run dev

# Production Build
npm run build
npm start

5. Load Extension

1. Open chrome://extensions/
2. Enable Developer mode.
3. Click Load unpacked and select the pagechat_extension folder.
4. (Optional) Enable "Allow access to file URLs" for local PDF support.

6. Configure Extension

1. Click the PageChat extension icon and select Settings (or right-click → Options).
2. Configure the following:

Setting	Description	Example
API Base URL	URL where your PageChat server is running	http://localhost:3001 (local) or https://my-pagechat.onrender.com (deployed)
Access Token	The AUTH_TOKEN value from your server's .env file. Can be any value you choose (e.g., my-secret-token)	Must match exactly for API authentication

3. Click Save Settings.

---

🔌 API Reference

Health Check

GET /health - Check if the server is alive.

Chat API (SSE)

POST /chat - Main interaction endpoint.

• Auth: Bearer <AUTH_TOKEN>
• Payload:

  {
    "message": "Summarize this page",
    "pageContent": "...scrapped content...",
    "sessionId": "optional-session-id"
  }

Extraction

POST /extract-text - Extracts text from files or URLs.

• Auth: Bearer <AUTH_TOKEN>

---

📂 Project Structure

PageChat/
├── src/
│   ├── services/      # Business logic (Agent, RAG, LLM)
│   ├── routes/        # API Endpoints
│   ├── middleware/    # Auth, Logger, Errors
│   └── utils/         # OCR, Cleaners, Parsers
├── pagechat-extension/# Manifest V3 source
├── public/            # Injected UI assets
└── tests/             # Unit & Integration tests

---

📄 License

This project is licensed under the MIT License.

---

Made with ❤️ by Harsh Ranjan