Context AI

A browser extension that integrates Gemini AI to enhance your browsing experience

View on GitHub · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Key Features
   • Demo
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
   • Configuration
3. Usage
4. Contributing
5. Contact

About The Project

Context AI is a powerful browser extension that brings the capabilities of Google's Gemini AI directly into your web browser. It provides a chat interface that contextually enhances your browsing experience by allowing you to interact with web content through AI assistance.

(back to top)

Key Features

• Contextual Web Page Chat: Chat with an AI assistant about the content of any webpage you're browsing
• Multi-Chat Support: Create and manage multiple conversations with a convenient chat history interface
• Page Content Integration: Toggle the ability to include current page content in your conversations for more contextual responses
• Search Tool Integration: Enable Gemini's search grounding capability to provide more accurate and up-to-date information
• Theme Customization: Switch between light and dark mode themes based on your preference
• Model Selection: Choose between different Gemini AI models:
  • Gemini 2.0 Flash (default) - Faster response times
  • Gemini 2.5 Pro - More advanced capabilities
• Resizable Interface: Easily resize the chat window to suit your needs
• API Key Management: Securely store and manage your Gemini API key
• Cross-Browser Compatibility: Works with Chrome, Firefox, and other Chromium-based browsers

(back to top)

Built With

• WXT Framework - Modern web extension framework
• React - UI framework
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Gemini API - Google's generative AI models
• AI SDK - AI framework for streaming responses
• Lucide Icons - Beautiful & consistent icon set

(back to top)

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• A Gemini API key (Get one here)

Installation

1. Clone the repository

   git clone https://github.com/debsouryadatta/context-ai.git
   cd context-ai

2. Install dependencies

   npm install
   # or
   yarn install

3. Build the extension

   npm run build
   # or
   yarn build

4. Load the extension in your browser:

   • Chrome: Go to chrome://extensions/, enable Developer mode, and click "Load unpacked" to select the dist folder
   • Firefox: Go to about:debugging#/runtime/this-firefox, click "Load Temporary Add-on", and select any file in the dist folder

(back to top)

Configuration

After installing the extension:

1. Click on the Context AI extension icon in your browser's toolbar
2. Enter your Gemini API key in the provided field
3. Click the toggle switch to enable the extension
4. Configure any additional preferences as needed

Your settings will be automatically saved to the browser's storage and synced across your devices if you're signed into your browser.

(back to top)

Usage

1. Starting a Conversation:

   • Navigate to any webpage
   • Click the "Ask AI" button in the bottom-right corner of the page
   • Type your question or request in the chat input

2. Including Page Content:

   • Toggle the "Include page content" switch to let the AI consider the content of the current page in its responses

3. Using Search Tool:

   • Toggle the "Enable search tool" switch to allow the AI to search for up-to-date information when answering your questions
   • This feature is particularly useful for factual queries or when you need the most current information

4. Managing Chats:

   • Click the chat history icon to view, switch between, or delete previous conversations
   • Create a new chat by clicking the "+" button in the chat list

5. Changing Models:

   • Select between Gemini models using the dropdown in the chat interface header:
     • Gemini 2.0 Flash (default): For faster responses
     • Gemini 2.5 Pro: For more advanced capabilities

6. Customizing the Interface:

   • Toggle between light and dark themes
   • Resize the chat window by dragging from the top-left corner

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

Contact

Project Link: https://github.com/debsouryadatta/context-ai

(back to top)

Storage Schema

The extension uses the following storage schema to maintain chat history and settings:

{
    "config": {
        "geminiApiKey": "your-api-key",
        "extensionEnabled": true,
        "geminiModel": "gemini-2.0-flash-exp",
        "theme": "light",
        "chatDimensions": {
            "width": 384,
            "height": 600
        },
        "current_chat_id": "uuid-of-current-chat",
        "chat_history": [
            {
                "id": "chat-uuid-1",
                "title": "Chat Title",
                "messages": [
                    {"role": "user", "content": "User message"},
                    {"role": "assistant", "content": "Assistant response"}
                ],
                "page_content_included": true,
                "search_tool_enabled": true,
                "created_at": "ISO-date-string",
                "updated_at": "ISO-date-string"
            }
        ]
    }
}