demo.mp4
Chat Box is a browser extension that streamlines your online experience by integrating AI chat, advanced web search, document interaction, and more into a convenient sidebar.
- 💬 Floating Chat Window: Draggable quick-chat overlay with selected-text preview, model picker, live streaming with stop, Ctrl/Command + M.
- 🔧 Bug Fixes: Various stability improvements and bug fixes for a smoother experience.
Chat Box offers a rich set of functionalities to streamline your AI interactions and information gathering:
- 🌙 Modern Dark UI: Sleek and intuitive interface built with Shadcn UI and Tailwind CSS.
- ⚡️ Quick Access Shortcut: Open/close the sidebar instantly with
Cmd/Ctrl + E(improved toggle functionality). - 💬 AI Chat: Engage in conversations with various AI models directly from the sidebar.
- 📝 Contextual Text Selection: Highlight text on any website to use it as context in your chat.
- 🔧 Enhanced Quick Actions: Select any text to reveal improved quick action buttons for:
- 📊 Summarize: Get concise summaries of lengthy content
- 💡 Explain: Understand complex concepts in simple terms
- 🌍 Translate: Translate text to any language
- ✍️ Rewrite: Improve text clarity and engagement
- 📝 Fix Grammar: Automatically correct grammar, spelling, and punctuation in any language
- ✨ Custom Prompts: Create and save your own custom prompts for quick reuse.
- 📚 Improved Chat History: Easily access and manage multiple past conversations with improved reliability.
- 🎨 Custom Theme Colors: Personalize your Chat Box with custom color themes for primary, background, and message colors.
- ⚙️ Flexible API Configuration & Refreshed UI:
- Configure API keys and endpoints for various AI providers in a more intuitive settings panel.
- Supports major providers like OpenAI, DeepSeek, Claude (Anthropic), Cerebras, OpenRouter, as well as Local LLMs (via Ollama) and Custom OpenAI-compatible endpoints.
- Load and select from available AI models from your configured provider.
- 🚀 Advanced Web Search & Scraping:
- Integrates with Firecrawl and Jina AI for superior web search results.
- Requires configuring your Firecrawl or Jina API key in settings for these features.
- Defaults to DuckDuckGo for web searches if Firecrawl/Jina are not configured.
- Leverage AI (including Local LLMs) to refine search queries or process search results for enhanced information gathering.
- Scrape and summarize content directly from URLs to use as context in your chat.
- 📄 Document Chat Powerhouse:
- Upload and interact with various document types including PDF, DOCX, TXT, HTML, CSS, JS, MD, and JSON.
- Utilizes semantic chunking to handle large documents effectively.
- View document context (name, size, estimated tokens) directly in the chat interface.
- 🖼️ Multimedia & Contextual Awareness:
- Upload images to include in your conversations with AI models that support vision.
- 📺 Enhanced YouTube Integration: Get summaries, ask questions, and interact with YouTube videos more effectively.
- 🔒 Secure Local Storage: Your API credentials and conversations are stored securely in your browser's local storage.
- Clone this repository:
git clone https://github.com/MinhxThanh/Chat-Box.git cd Chat-Box - Install dependencies:
npm install
- Build the extension:
npm run build
- Load the extension in Chrome:
- Open Chrome and navigate to
chrome://extensions/. - Enable "Developer mode" in the top-right corner.
- Click "Load unpacked" and select the
distdirectory from this project.
- Open Chrome and navigate to
- Build the Firefox bundle:
npm run build:firefox
- Open Firefox and navigate to
about:debugging#/runtime/this-firefox. - Click "Load Temporary Add-on…".
- Select
dist-firefox/manifest.json.
Note: Temporary add-ons are removed when Firefox restarts. Re-load via about:debugging when needed.
- Pin the extension icon to your browser toolbar for easy access.
- Click the extension icon in your browser toolbar to open the chat sidebar.
- Use the right navigation panel to access different features:
- 💬 Chat: Return to the main chat interface.
- 📚 History: Access your previous conversations.
- ➕ New Chat: Start a fresh conversation.
- ⚙️ Settings: Configure API keys and preferences.
- In Settings, configure your APIs:
- AI Provider:
- Enter your AI provider API key.
- Specify the base API endpoint (e.g.,
https://api.openai.com/v1). - Click "Load Models" to fetch and select your desired AI model.
- Custom Search Engine (Optional but Recommended):
- Choose between Firecrawl, Jina, or Default.
- Enter the API key for your selected search engine (Firecrawl or Jina) to enable advanced web search and URL scraping features.
- AI Provider:
- Start chatting with the AI, searching the web, or interacting with your documents!
You can configure Chat Box to work with local LLMs like those served by Ollama.
-
Run your Ollama server: Open your terminal and run the following command. This makes Ollama accessible to the extension.
OLLAMA_HOST=0.0.0.0 OLLAMA_PORT=11434 OLLAMA_ORIGINS='*' ollama serveOLLAMA_HOST=0.0.0.0: Allows connections from any network interface.OLLAMA_PORT=11434: Standard Ollama port.OLLAMA_ORIGINS='*': Allows requests from any origin, necessary for the Chrome extension to connect.
-
Configure Chat Box Settings:
- Go to the Chat Box Settings panel.
- For Endpoint, enter:
http://localhost:11434/v1 - For API Key, enter:
no-key(Ollama's OpenAI-compatible endpoint doesn't strictly require a key, but the field might be mandatory in the UI. Any non-empty string should work). - Click "Load Models" to see models available from your Ollama instance.
floating-chat.mp4
- Core Framework: React
- Bundler & Compiler: Webpack, Babel
- UI & Styling: Tailwind CSS, Shadcn UI, Radix UI, Lucide React
- Browser Extension: Chrome Extension APIs (Manifest V3)
- Local Database: Dexie (IndexedDB)
- AI: OpenAI-compatible REST plus provider SDKs (OpenAI, Anthropic/Claude, Cerebras); local LLMs via Ollama.
This project is licensed under the GPL-3.0 license - see the LICENSE file for details.