ChatAI

A minimal, trustworthy, offline-first AI chatbox PWA you can self-host on GitHub Pages (or any static host).

Add your own API connections and agents/prompts. Switch connections and agents from the composer, or let the app pick them automatically based on your first message.

• Works offline — the app shell, your conversations, and your settings all load with no network. (AI API calls themselves need network, of course.)
• Local-only — every chat, setting, and API key lives in your browser (IndexedDB + localStorage). Nothing is sent to any server except the API endpoint you choose for a given request.
• Single-file import/export — download all conversations + settings as one JSON file, and import it back on any device.
• Connection-based — add as many API endpoints as you want, enable or disable each one, and switch quickly from the composer.
• Agent-based prompts — create multiple system prompts and pick one per chat, or let the app auto-select based on the first message.
• Installable — add to home screen / desktop as a PWA.
• Open source — clone and self-host as your own SaaS in minutes.

Deploy to GitHub Pages

1. Create a new public repository and push this code to it (or fork this repo).
2. In the repo, go to Settings → Pages → Build and deployment → Source and choose GitHub Actions.
3. Push to main. The included workflow (.github/workflows/deploy.yml) builds and deploys the site to GitHub Pages automatically.
4. Open the Pages URL shown under Settings → Pages.

No build step required — this is a pure static site. The workflow simply uploads the repo root as the Pages artifact.

Run Locally

# Python 3
python3 -m http.server 8000
# then open http://localhost:8000

Or any static file server (npx serve, caddy file-server, etc.). A normal file:// URL will NOT work because service workers require an http(s) origin.

Self-Host (Any Static Host)

Copy all files to any static host root (Netlify, Vercel, Cloudflare Pages, S3, Nginx). Ensure index.html, sw.js, manifest.webmanifest, app.js, providers.js, styles.css, and the icons/ folder are all served from the same directory. That's it — no backend, no database.

Usage

1. Open Settings (gear icon in the topbar).
2. Tap + Add connection and choose an API type: Ollama, OpenAI, Anthropic, Google Gemini, Azure OpenAI, AWS Bedrock, Google Cloud Vertex AI, Moonshot Kimi, Zhipu GLM, MiniMax, NVIDIA, Alibaba Qwen, OpenRouter, Groq, Together AI, Fireworks AI, Cohere, Mistral AI, DeepSeek, Perplexity, xAI Grok, AI21 Labs, Anyscale, Replicate, Hugging Face, Cloudflare Workers AI, and more. Voice providers include OpenAI Whisper, OpenAI TTS, and ElevenLabs TTS. Image providers include OpenAI DALL·E and Stability AI. Search providers include Tavily, Brave Search, and SerpApi.
3. Tap + Add agent to create custom system prompts. Default agents include General assistant, Data assistant, Code assistant, Writing assistant, Research assistant, Reason assistant, Image creator, Web researcher, and Knowledge base researcher.
4. In the composer, pick a connection and agent from the dropdowns, or choose Auto. Auto mode selects a suitable connection and agent from the first message keywords.
5. Start chatting. Press Enter to send, Shift+Enter for a newline. While generating, a stop button appears to abort the request. Use the mic button for voice input.
6. Use export (topbar) to save everything as one JSON file, and import to restore. The HTML export button downloads the current chat as an .html file.
7. Double-click a chat title in the sidebar to rename it.
8. The clear all data action lives in Settings → Danger zone.
9. Install as an app (browser → Install / Add to Home Screen).

New Capabilities

Voice Input/Output

Mic button in the composer: click to start recording, click again to stop. Uses the free browser Web Speech API by default (Chrome/Edge). Optional Whisper API. Speaker button appears on assistant messages when text-to-speech is enabled. Uses free browser speech by default; optional OpenAI TTS or ElevenLabs.

Image Generation

Ask for an image (e.g. "draw a cat") and the app automatically routes to an enabled DALL·E or Stability AI connection. The generated image is shown inline in the chat.

Web Search

Select the Web researcher agent and the app calls Tavily, Brave Search, or SerpApi, then asks your chat model to answer with source citations. Source chips are rendered below the reply.

RAG Knowledge Base

In Settings → Knowledge base, choose an embedding provider and upload PDF, DOCX, TXT, MD, CSV, or HTML documents. The app chunks, embeds, and stores vectors locally in IndexedDB. Ask the Knowledge base researcher agent to retrieve relevant excerpts and answer from your uploaded files.

Document Parsing

Attach PDF or DOCX files to any chat. Text is extracted in the browser using pdfjs-dist and mammoth.js and included in the message context.

Browser Agent

Click the globe icon in the composer to open the browser panel in split view. The browser panel shows a search interface when first opened — type a URL or a search query to navigate. Send a message in browser mode and the AI uses a fetch-based browser agent to navigate pages, extract content, click links, and fill forms.

Agentic Tools (Folder/File Coding)

Link a folder or file in the composer. The autonomous agent loop can call web search, image generation, URL fetch, and knowledge base search when those connections are enabled, in addition to reading/writing files.

Where to Get API Keys

• OpenAI: platform.openai.com/api-keys
• Anthropic Claude: console.anthropic.com/settings/keys
• Google Gemini / AI Studio: aistudio.google.com/app/apikey
• Azure OpenAI: portal.azure.com
• OpenRouter: openrouter.ai/keys
• Groq: console.groq.com/keys
• Together AI: api.together.xyz/settings/api-keys
• Mistral AI: console.mistral.ai/api-keys
• DeepSeek: platform.deepseek.com/api_keys
• Perplexity: perplexity.ai/settings/api
• Hugging Face: huggingface.co/settings/tokens
• Cloudflare: dash.cloudflare.com/profile/api-tokens
• ElevenLabs TTS: elevenlabs.io/app/settings/api-keys
• Stability AI: platform.stability.ai/account/keys
• Tavily Search: app.tavily.com/home
• Brave Search API: api.search.brave.com/app/keys
• SerpApi: serpapi.com/manage-api-key
• Local (Ollama): no key — ollama.com

Privacy

• API keys, conversations, and settings are stored locally in your browser only.
• Requests go directly from your browser to the endpoint you select.
• There is no server, no analytics, no accounts, no tracking.
• Clearing your browser data deletes everything. Use export to back up.

Agentic Folder/File Coding

1. Click the folder icon next to the attachment button in the composer to link a location:
   • Link a folder — the agent can list, read, write, search, and patch any file inside it.
   • Link a file — the agent can read and write a single file directly.
2. Once a folder or file is linked, every agent automatically becomes folder-aware for that chat and can read/write the linked location.
3. Ask the agent to do something with the project, e.g. "Create an about.html page" or "Refactor app.js to use async/await everywhere."
4. The agent runs an autonomous loop (read → plan → write → verify) until it emits a final answer. A live stop button lets you interrupt it.

Project Structure

index.html            App shell
app.js                Chat UI, IndexedDB history, streaming, import/export, settings, folder wiring, routing
providers.js          API connection presets and default agents
model-router.js       Connection selection, API routing, streaming SSE parsing, fallback logic
browser-agent.js      AI-driven browser control agent (fetch-based page extraction)
agent-loop.js         Autonomous multi-step coding/writing/research loop with extra tools
voice.js              Web Speech API + Whisper/TTS helpers
tools.js              Image generation and web search API wrappers
doc-parser.js         PDF/DOCX/text extraction and text chunking
rag.js                Knowledge-base chunking, embedding, vector storage, retrieval
memory.js             Lightweight agent memory layer (scoped notes)
tool-parser.js        Shared XML/JSON tool call parser
fs-tools.js           File System Access API wrapper (list, read, write, patch, search)
db.js                 IndexedDB wrapper (conversations, folder handles, knowledge base)
styles.css            Minimal responsive dark/light UI
sw.js                 Service worker (app-shell precache + stale-while-revalidate)
manifest.webmanifest  PWA manifest (installable)
icons/                App icons (SVG + PNG)

License

MIT — do whatever you want. Attribution appreciated.

← Back to ChatAI · Technical Documentation