A zero-API, zero-backend AI chat widget for any website.
No LLM. No API key. No server. Just drop in two files.
A gift from Opcelerate Neural to the world. 🎁
Free. Forever. MIT licensed. Use it, fork it, ship it — no strings attached.
- 🧠 Pattern-based AI — answers questions from your knowledge base in milliseconds
- 💬 Chat history — saves & browses past conversations via localStorage (like ChatGPT)
- 📍 Page-aware greetings — knows which page the visitor is on and tailors its opener
- ⚡ Proactive engagement — bounces after a configurable delay to invite interaction
- 📋 Lead capture — offers a name/email form after N messages (hooks to any webhook)
- 📱 Mobile-friendly — full-width bottom sheet on mobile, floating panel on desktop
- 🔌 LLM upgrade path — swap one function to add Gemini/GPT when you're ready
1. Copy the files into your project:
your-website/
├── widget.js
├── widget.css
└── avatar.png ← optional, use any square image
2. Add to your HTML:
<!-- In <head> -->
<link rel="stylesheet" href="widget.css" />
<!-- Before </body> -->
<script>
window.AgenticChatConfig = {
name: 'Aria', // Widget name
role: 'AI Assistant', // Subtitle
avatar: 'avatar.png', // Your avatar image
brand: '#6c63ff', // Primary brand color
brandDark: '#4b44cc', // Darker gradient shade
brandLight: '#8b85ff', // Lighter gradient shade
bg: '#0f172a', // Panel background
proactiveSec: 8, // Proactive bounce delay (0 = off)
leadNudgeAfter: 5, // Lead form after N messages (0 = off)
footerNote: 'Aria is an AI — for specific help, contact our team.',
};
</script>
<script src="widget.js" defer></script>3. Edit the knowledge base inside widget.js:
const KB = {
services: {
patterns: [/what do you (do|offer)|services?/i],
responses: ['We help businesses with...'],
chips: ['Learn more', 'Pricing', 'Contact us']
},
pricing: {
patterns: [/price|cost|fee|how much/i],
responses: ['Our plans start at $X/month...'],
chips: ['Get a quote', 'Talk to sales']
},
// ... add as many intents as you like
};That's it. No build step. No npm. No account.
| Key | Type | Default | Description |
|---|---|---|---|
name |
string | 'Sage' |
Widget display name |
role |
string | 'AI Assistant' |
Subtitle in header |
avatar |
string | '' |
Path to avatar image (falls back to ✦) |
brand |
string | '#6c63ff' |
Primary brand color |
brandDark |
string | '#4b44cc' |
Darker gradient shade |
brandLight |
string | '#8b85ff' |
Lighter gradient shade |
bg |
string | '#0f172a' |
Panel background color |
proactiveSec |
number | 8 |
Seconds before proactive bounce; 0 = disabled |
leadNudgeAfter |
number | 5 |
Messages before showing lead form; 0 = disabled |
footerNote |
string | '...' |
Small disclaimer text at panel bottom |
const KB = {
intentName: {
patterns: [/regex/i], // RegExp array to match user input
responses: ['Response string'], // Picked at random
chips: ['Quick reply 1', '...'], // Optional quick-reply buttons
navigate: 'page.html', // Optional "Take me there" link
handler: (text) => 'dynamic response', // Optional: overrides responses
},
fallback: {
// No patterns — always fires if nothing else matches
responses: ['I\'m not sure, but our team can help!'],
}
};Tips:
- Order intents specific → general (first match wins)
- Cover synonyms:
/price|cost|fee|how much|charge/i - Anchor greetings:
/^(hi|hello|hey)/i
| Intent | Patterns to include |
|---|---|
| Greeting | hi, hello, hey, good morning |
| Services | what do you do, offerings, help with |
| Pricing | price, cost, fee, how much |
| About | who are you, about you, background |
| Contact | contact, reach, email, call, support |
| Location | office, where, city, address |
| Get started | sign up, begin, how do I start |
| FAQ | how does it work, explain |
| Farewell | bye, thanks, that's all |
The regex approach handles ~95% of conversations. When you need full NLU:
// Replace classifyIntent() + getResponse() with:
async function askAI(text) {
const res = await fetch('/api/chat', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message: text, page: window.location.pathname })
});
const { reply } = await res.json();
return reply;
}Add a serverless function (Netlify, Vercel, Cloudflare Worker) — all the UI stays identical.
| Approach | Monthly Cost | Intelligence |
|---|---|---|
| AgenticChat (regex) | $0 | Pattern matching |
| + Gemini 2.0 Flash | ~$5–20 | True NLU |
| + GPT-4o-mini | ~$5–30 | True NLU |
| Intercom / Drift | $400–$1,000+ | Rules-based SaaS |
agentic-chat-widget/
├── widget.js ← Core widget (KB + engine + UI)
├── widget.css ← All styles
├── index.html ← Live demo / landing page
├── avatar.png ← Replace with your own
└── README.md
python3 << 'PY'
import glob
WIDGET = '<script src="widget.js" defer></script>'
for page in glob.glob('*.html'):
with open(page, 'r') as f: content = f.read()
if 'widget.js' in content: print(f'SKIP {page}'); continue
content = content.replace('</body>', f' {WIDGET}\n</body>', 1)
with open(page, 'w') as f: f.write(content)
print(f'OK {page}')
PYMIT — free for personal and commercial use. No attribution required.
AgenticChat is Opcelerate's open-source contribution to the developer community.
Opcelerate Neural builds Industrial AI and Agentic AI solutions — from predictive analytics to full agentic software platforms. This widget is our gift to every developer building on the web.
If this helped your project, a GitHub star means everything. 🌟
Bug reports and PRs are very welcome.