https://github.com/abhaysingh71/ai-web-reader-chatbot-extention

AI-Web-Reader-Chatbot-Extension is a smart Chrome extension that lets you interact with any webpage using AI. It scrapes and analyzes the content of the current website and answers your questions in real time. Powered by advanced language models, it delivers accurate and concise answers based only on the page content.
https://github.com/abhaysingh71/ai-web-reader-chatbot-extention

ai-assistant beautifulsoup browser-extension chatbot chrome-extension data-science flask-api gemeni-api javascript langchain large-language-models natural-language-processing python selenium web-ai webscrapping

Last synced: 2 months ago
JSON representation

AI-Web-Reader-Chatbot-Extension is a smart Chrome extension that lets you interact with any webpage using AI. It scrapes and analyzes the content of the current website and answers your questions in real time. Powered by advanced language models, it delivers accurate and concise answers based only on the page content.

• Host: GitHub
• URL: https://github.com/abhaysingh71/ai-web-reader-chatbot-extention
• Owner: AbhaySingh71
• License: apache-2.0
• Created: 2025-04-07T08:06:07.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-12T10:58:01.000Z (about 1 year ago)
• Last Synced: 2025-04-15T01:18:10.282Z (about 1 year ago)
• Topics: ai-assistant, beautifulsoup, browser-extension, chatbot, chrome-extension, data-science, flask-api, gemeni-api, javascript, langchain, large-language-models, natural-language-processing, python, selenium, web-ai, webscrapping
• Language: Python
• Homepage:
• Size: 1.3 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
  
🧠 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.



  


![ChatGPT Image May 12, 2025, 09_39_58 PM](https://github.com/user-attachments/assets/9e0460d0-f486-4d9e-b0b1-79bc30187035)

https://github.com/user-attachments/assets/a9931e11-671e-4ec3-9354-cb091389fa0f

  
📸 Demo Preview

  

  | ![Screenshot 1](assets/photo1.png) | ![Screenshot 2](assets/photo2.png) | 

  |---------------------------------|---------------------------------|  

  


  
💡 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

  


    
Go to chrome://extensions/



    
Enable Developer Mode



    
Click Load Unpacked



    
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