Streaming replies · conversation memory · attach web links · works with any AI model
Live Demo • Features • Run Locally • Deploy
👉 (https://ai-chatbot-ni38.onrender.com/)
Replace the link above with your actual Render URL. ⏳ Note: on Render's free tier the app sleeps after 15 min — the first load may take ~30–50 s to wake up, then it's fast.
- 🔥 Streaming responses — words appear as they generate, just like ChatGPT/Claude
- 🧠 Conversation memory — remembers the whole chat
- 🔗 Attach web links — paste a URL and the bot reads the page to answer you
- 🎨 Clean dark UI — message bubbles, auto-growing input, one-click new chat
- 🔌 Works with ANY model — Gemini, Groq, OpenAI, OpenRouter, or local Ollama (switch by editing one line — no code changes)
- 🚀 Deploy anywhere — run locally or host free on Render.com
- 🔒 Private by design — your API key lives on the server, never in the browser
| Layer | Tech |
|---|---|
| Frontend | HTML · CSS · Vanilla JavaScript (no framework) |
| Backend | Python · FastAPI · httpx · BeautifulSoup |
| AI | Any OpenAI-compatible API (Groq / Gemini / OpenAI / Ollama) |
| Hosting | Render.com (free tier) |
mychat/
├── backend/ # FastAPI server (talks to the AI model)
│ ├── app.py # main server code
│ ├── requirements.txt # Python dependencies
│ └── .env.example # copy to .env and add your API key
├── frontend/ # the chat website
│ ├── index.html # page structure
│ ├── styles.css # dark theme styling
│ └── app.js # chat logic + link attaching
├── render.yaml # one-click Render.com deploy config
├── .gitignore # keeps your .env / key out of Git
└── README.md # you are here
| Provider | Get key | Notes |
|---|---|---|
| Groq ⭐ | https://console.groq.com/keys | Fast & free — easiest to start |
| Gemini | https://aistudio.google.com/apikey | Very smart & free |
| Ollama | https://ollama.com | 100% offline, no key needed |
git clone https://github.com/YOURNAME/mychat.git
cd mychat/backend
python -m venv venv
venv\Scripts\activate # Windows (Mac/Linux: source venv/bin/activate)
pip install -r requirements.txtcopy .env.example .env # Windows (Mac/Linux: cp .env.example .env)Open .env and paste your key (no quotes, no spaces around =):
BASE_URL=https://api.groq.com/openai/v1
API_KEY=gsk_your_real_key_here
MODEL=llama-3.3-70b-versatileuvicorn app:app --reload --port 8000Open http://localhost:8000 🎉
- Click the 🔗 button next to the message box
- Paste any web link (article, docs, blog…)
- Click Attach — a chip shows the linked page
- Type your question (e.g. "summarize this") and Send
The bot downloads the page, reads it, and answers using its content.
Just edit backend/.env — no code changes:
# Groq (fast + free)
BASE_URL=https://api.groq.com/openai/v1
MODEL=llama-3.3-70b-versatile
# Google Gemini
BASE_URL=https://generativelanguage.googleapis.com/v1beta/openai
MODEL=gemini-2.5-flash
# Local Ollama (offline, no key)
BASE_URL=http://localhost:11434/v1
MODEL=qwen2.5-coder:7bDeploy to Render.com in minutes:
- Push this repo to GitHub
- On Render: New + → Web Service → connect your repo
- Settings:
- Root Directory:
backend - Build Command:
pip install -r requirements.txt - Start Command:
uvicorn app:app --host 0.0.0.0 --port $PORT - Plan: Free
- Root Directory:
- Add environment variables
API_KEY,BASE_URL,MODELin the Environment tab - Deploy → get your public URL 🎉
🔒 Never commit your API key. Set it only as an environment variable on the host.
- 💾 Save chat history (SQLite) + sidebar of past conversations
- 👤 User login / accounts
- 📄 File uploads (PDFs, images)
- 📝 Markdown & syntax-highlighted code rendering
- 🔀 In-UI model picker
- Never put your API key in the frontend or commit it to a repo.
- Store keys as environment variables / secrets on your host.
- If a key leaks, delete it in the provider dashboard and generate a new one.
MIT — free to use, modify, and share.
Built with ❤️ using FastAPI + vanilla JS.
⭐ Star this repo if you found it useful!