The AI Chat Plugin is a comprehensive, multimodal conversational assistant built specifically for BinaryCMS. It transforms the CMS into an interactive workspace.
The AI Chat Plugin is a comprehensive, multimodal conversational assistant built specifically for BinaryCMS. It transforms the CMS into an interactive workspace by providing a persistent, AI-powered chat interface in both the administrative backend (“AI Chat Studio”) and the public-facing frontend via a floating widget.
Powered by OpenRouter API integration, it allows users to dynamically switch between cutting-edge LLMs (like GPT-4o, Claude 3.5 Sonnet, and Llama 3) on the fly, while supporting advanced multimodal capabilities including text, file parsing, image vision, and voice inputs.
Voice Notes (Speech-to-Text): Use the built-in microphone integration to record voice notes directly in the browser and send them to native audio-processing models (e.g., gpt-4o-audio-preview).
File Parsing: Upload text-based files (.txt, .py, .json, .csv, etc.). The plugin extracts the raw text client-side and injects it securely into the prompt, ensuring 100% compatibility across all AI models, even those without native file support.
Inline Chat Management: Hover over any chat in the sidebar to reveal a quick-delete trash icon, or use the Options dropdown to rename chats for better organization.
Model Overrides: Easily override the default global AI model on a per-conversation basis. Use Claude for coding in one tab, and ChatGPT for copywriting in another.
Syntax Highlighting & Markdown Rendering: Code blocks are automatically formatted with Prism.js syntax highlighting. Each code block features a convenient one-click “Copy” button.
Customizable Aesthetics: Tailor the widget’s primary color and default welcome message through the backend settings to match your brand identity.
Shortcode Integration: Can be conditionally rendered or managed via CMS shortcodes or layout injection.
Temperature & Token Limits: Fine-tune the AI’s creativity and response length.
Rate Limiting: Protect your OpenRouter API credits by setting maximum requests per minute.
Context Window Management: Configure the maximum number of historical messages sent with each new prompt to optimize token usage.
Technical Architecture Backend (Go / SQLite) Data Models: Stores conversations and messages in robust SQLite tables (ai_conversations, ai_messages).
Payload Handling: Converts complex multi-part messages (Base64 images, audio blobs) into standardized OpenRouter JSON payloads (ContentPart struct) dynamically.
Secure Isolation: Runs entirely as an isolated plugin inside BinaryCMS without modifying core framework files.
Frontend (Vanilla JS / Bootstrap)
Responsive Design: Built using Bootstrap 5 utility classes for a clean, modern, and mobile-friendly interface.
Client-Side Media Processing: Utilizes the native FileReader API for images/documents and MediaRecorder API for WebRTC microphone capture, offloading processing from the server.
Optimistic UI: Messages appear instantly in the chat window while the background request processes, ensuring a snappy user experience.
Setup & Usage
API Key: Ensure you have configured your OpenRouter API key in the AI Provider Settings plugin (this chat plugin hooks into the core AI provider).
Settings: Navigate to AI Chat > Settings to configure your System Prompt, Default Model, and Frontend Widget preferences. Frontend Display: Check “Enable Frontend Widget” in the settings. The chat bubble will automatically appear in the bottom-right corner of your live website.
Interacting: In the AI Chat Studio, click the Paperclip icon to attach files or the Microphone icon to record audio. Hit Ctrl Enter or click Send to communicate with the AI.