AI Website Chatbot Widget

An embeddable AI chat assistant for small-business websites. Visitors get instant, accurate answers about the business (menu, hours, location, FAQs) 24/7 — grounded only in the info you give it, so it doesn't make things up.

Live demo: https://ai-chat-widget-five-ashen.vercel.app

Built with Next.js + TypeScript + Tailwind, powered by Groq.

✨ Features

• Floating chat bubble that drops into any page
• Answers grounded in a single, easy-to-edit knowledge file — no database needed
• Quick-reply suggestion chips
• Replies in the customer's language
• Serverless API route (your API key stays on the server, never in the browser)
• Survives a model retirement: the configured model is checked against the provider's catalogue and falls back rather than failing every request

🩺 It does not go quietly

This widget shipped pinned to llama-3.3-70b-versatile. Groq retired that model, and from then on every message returned the same generic 502 — the page loaded, the bubble opened, and only sending a message revealed anything was wrong. Nothing logged why, so a retired model looked exactly like a rate limit.

Two changes, both about being able to tell:

• lib/model.ts checks the configured model against Groq's catalogue once per process and falls back down an ordered chain if it is gone. It fails open — an unreadable catalogue returns the configured model untouched, because a checker that takes the widget down when the checker breaks is worse than the problem it guards — and it warns loudly when it substitutes.
• GET /api/health reports whether the widget can actually answer, and which model it resolved to. A URL that can say "ok": false is something a check can be pointed at; a chat bubble is not.

curl -s https://ai-chat-widget-five-ashen.vercel.app/api/health
# {"ok":true,"configured":"openai/gpt-oss-120b","model":"openai/gpt-oss-120b","substituted":false}

npm test    # 13 tests, no network, no API key

🧱 Tech stack

Next.js (App Router) · TypeScript · Tailwind CSS · Groq API · deployed on Vercel.

🚀 Run locally

npm install
cp .env.example .env.local        # add your GROQ_API_KEY (free: console.groq.com/keys)
npm run dev                        # http://localhost:3000

☁️ Deploy (Vercel)

1. Push this repo to GitHub.
2. Import it at vercel.com → New Project.
3. Add an Environment Variable: GROQ_API_KEY.
4. Deploy. That's it.

🔧 Customize for a new business

Edit one file — lib/business.ts:

• name, tagline
• suggestions (the quick-reply chips)
• systemInfo — the knowledge block the assistant answers from (hours, menu, FAQs, policies…)

No other code changes needed.

Set LLM_MODEL to pin a different Groq model; leave it unset for the default.

📄 License

MIT.