🧠 AI Web Reader Chatbot Extension

A Chrome Extension that scrapes webpage content and uses Google Gemini 2.0 Flash via LangChain to intelligently answer user questions based on the current page content.

It supports smart webpage parsing using BeautifulSoup, LangChain WebBaseLoader, and SeleniumURLLoader — making it highly versatile for both static and JavaScript-heavy websites. Ideal for product pages, portfolio sites, news articles, blog summaries, and more.

---

screen-recording-2025-04-11-164935-qbibqlfp_Kq5Smj9V.mp4

📸 Demo Preview

---

💡 Features

• ✅ Chrome Extension UI
• ✅ Scrapes and analyzes live webpage content using BeautifulSoup
• ✅ Supports both static and dynamic pages via WebBaseLoader and SeleniumURLLoader
• ✅ Uses LangChain with gemini-2.0-flash for blazing fast, contextual responses
• ✅ Answers questions intelligently based on current webpage context
• ✅ Secure Gemini API key using .env
• ✅ Clean, modular Flask backend

---

📁 Project Structure

AI_Web_Reader_Extension/
│
├── Backend/               # Flask API for Gemini
│   └── app.py             # Main backend logic
├── popup.html             # Extension popup UI
├── popup.js               # Frontend logic for chat
├── manifest.json          # Chrome Extension manifest
├── content.js             # content script
├── background.js          # background logic
├── .env                   # Contains API key (not pushed)
├── .gitignore             # Ignores venv, .env, logs
├── requirements.txt       # Python dependencies
└── README.md              # You're reading it!
  

---

🚀 How to Run

🧪 1. Backend Setup

git clone https://github.com/AbhaySingh71/AI-Web-Reader-Chatbot-Extention.git
cd AI-Web-Reader-Chatbot-Extention
Create virtual environment

python -m venv venv
venv\Scripts\activate  # or source venv/bin/activate (Linux/mac)
Install dependencies

pip install -r requirements.txt

🔑 2. Create .env file

GOOGLE_API_KEY=your_gemini_api_key_here
USER_AGENT=ai-web-reader-bot
  

You can get your Gemini API key from: https://makersuite.google.com/app/apikey

⚙️ 3. Run the Flask server

python app.py

🧩 4. Load Chrome Extension

1. Go to chrome://extensions/
2. Enable Developer Mode
3. Click Load Unpacked
4. Select your project folder

---

💻 Technologies Used

• 🧠 Google Gemini 2.0 Flash (via google-generativeai)
• 🔗 LangChain
• 🌐 BeautifulSoup
• 🕹️ LangChain WebBaseLoader
• 📸 LangChain SeleniumURLLoader
• 🧪 Flask
• 🎨 HTML, CSS, JavaScript (Chrome Extension)

---

🔐 Security

• .env is not pushed to GitHub
• venv/, .pyc, and logs are ignored
• Only requirements.txt is tracked for clean dependency install

---

📣 Credits

Built with ❤️ by Abhay Singh
Powered by Google Gemini, LangChain

---