ai-chat-widget
Описание
Готовый AI чат-виджет для любого сайта. Работает с OpenAI, Claude, Gemini, GigaChat, YandexGPT, Ollama и любым OpenAI-совместимым API.
Языки
- Python63,8%
- JavaScript21,2%
- HTML8,6%
- CSS5,1%
- Shell0,9%
- Dockerfile0,4%
AI Chat Widget
Drop-in AI chat widget for any website. Works with OpenAI, Claude, Gemini, GigaChat, YandexGPT, Ollama, and any OpenAI-compatible API.
Screenshots
Features
- Page Context Awareness - Bot sees the current page: URL, title, headings, content, selected text
- Universal AI Support - OpenAI, Claude, Gemini, GigaChat, YandexGPT, DeepSeek, Qwen, Ollama, OpenRouter
- One-line Integration - Just add a
tag<script> - Self-hosted - Full control over your data
- Knowledge Base - Load custom knowledge from markdown files
- Chat History - Persists across page reloads (localStorage)
- Telegram Alerts - Get notified about escalations and feedback
- Security - Rate limiting, attack detection, IP blocking
- Privacy Settings - Exclude sensitive pages from context collection
- Markdown Support - Rich text formatting in responses
- Mobile Responsive - Works on all devices
Quick Start
1. Clone and Configure
2. Run with Docker (Recommended)
3. Or Run Locally
4. Add to Your Website
That's it! The widget will appear on your website.
Configuration
AI Providers
Edit to configure your AI provider:
OpenAI (default):
Claude (Anthropic):
Google Gemini (native API):
GigaChat (Sber, Russia):
Ollama (local, free):
See for all providers.
Widget Options
| Attribute | Default | Description |
|---|---|---|
| Required | Your backend URL |
| "Chat" | Widget header title |
| "Hello!" | Initial greeting message |
| "Type a message..." | Input placeholder |
| "bottom-right" | Position: , |
| "#2563eb" | Primary color (hex) |
| "" | Show only on these pages (comma-separated paths) |
| "" | Hide on these pages |
| "" | Don't collect page content on these pages |
| "" | Collect URL/title only, not content |
Page Context Awareness
The bot automatically sees the current page context and can answer questions about it:
| Context | Description |
|---|---|
| URL | Current page URL |
| Title | Page title |
| Meta Description | SEO description |
| Headings | H1, H2 headings structure |
| Main Content | Page text content |
| Selected Text | Text highlighted by user |
Example: User is on page and asks "How much does Pro cost?" — the bot sees the pricing page content and gives an accurate answer.
Example: User selects text "Enterprise plan" and asks "Tell me more about this" — the bot knows exactly what they're referring to.
Privacy Settings
Control what page context is sent to AI:
Knowledge Base
Add markdown files to folder to customize bot's knowledge:
knowledge/
about.md # Company info
faq.md # Frequently asked questions
pricing.md # Pricing information
The bot will use this content to answer questions.
Telegram Alerts
Get notified when users:
- Ask for human help ("I want to talk to a human")
- Report problems ("this doesn't work")
- Leave positive feedback ("thank you, great help!")
- Leave negative feedback ("this is useless")
To get your chat ID:
- Message @userinfobot on Telegram
- It will reply with your chat ID
API Endpoints
| Endpoint | Method | Description |
|---|---|---|
| POST | Send message, get AI response |
| GET | Get chat history |
| DELETE | Clear session |
| GET | Test Telegram connection |
| GET | Widget JavaScript |
| GET | Widget styles |
Architecture
ai-chat-widget/
├── backend/
│ ├── app/
│ │ ├── api/ # API endpoints
│ │ ├── services/ # Business logic
│ │ │ ├── ai_service.py # AI provider integration
│ │ │ ├── telegram.py # Telegram notifications
│ │ │ ├── security.py # Rate limiting, attack detection
│ │ │ └── storage/ # Chat history storage
│ │ ├── config.py # Configuration
│ │ └── main.py # FastAPI app
│ ├── data/ # Chat history (json/sqlite)
│ └── .env # Configuration
├── widget/
│ ├── widget.js # Self-contained widget
│ └── widget.css # Standalone CSS (optional)
├── knowledge/ # Knowledge base markdown files
├── docker-compose.yml
└── Dockerfile
Security Features
- Rate Limiting: Configurable requests per minute/hour
- Attack Detection: SQL injection, XSS, prompt injection detection
- IP Blocking: Automatic temporary bans for attackers
- Strike System: Progressive penalties for violations
- Message Validation: Length limits, content sanitization
Storage Options
JSON (default, development):
SQLite (single server):
PostgreSQL (production):
Development
Production Deployment
With Docker Compose
With systemd
Nginx Reverse Proxy
License
MIT License - see LICENSE
Contributing
Pull requests welcome! Please ensure tests pass and code is formatted.
Support
- Issues: GitHub Issues
- Telegram: @bzc_e