🐾 Askie AI

A friendly, privacy-first AI chat assistant, hand-drawn sketchbook style, that runs entirely in your browser.

No server · No account · No tracking · Bring your own OpenRouter API key · installable as an app · no build step, no framework.

▶️ Try it · 🐛 Report a bug

---

📑 Contents

• ✨ Features
• 🔒 Why it's safe to paste in an API key
• 🚀 Installation and usage
• 📂 Code structure
• 🛠️ Tech stack
• ⚠️ Known limitations

---

✨ Features

💬 Streaming chat. Full Markdown rendering — headings, code blocks, lists, links — all sanitized before it ever touches the page.

🔑 Bring your own key. Paste an OpenRouter API key in Settings and you're chatting; the key never leaves your browser except to call OpenRouter directly.

💾 Local persistence. Chat history and settings are saved in localStorage, so your conversation survives a refresh.

🎙️ Voice input. Dictate messages via the Web Speech API on Chromium-based browsers.

📋 Copy & retry. One-click actions on any message, plus swipe-to-copy on touch devices.

📴 Installable PWA. Add it to your home screen and the app shell keeps working offline.

♿ Accessible. Every interactive element is a real, focusable, labeled control — built for keyboard and screen-reader use from the start.

🌍 Model-agnostic. Talk to GPT-4o, Claude, Gemini, Llama, DeepSeek, Qwen, or anything else available on OpenRouter, without running a backend of your own.

---

🔒 Why it's safe to paste in an API key

This is a fair question for any "bring your own key" tool, so here's the actual threat model:

• 🖥️ 100% static. There is no backend that could see, log, or leak your key.
• 📍 One destination. Your key lives only in this browser's localStorage and is sent, with every request, straight to https://openrouter.ai — nowhere else.
• 🧱 Locked-down CSP. A strict Content-Security-Policy restricts connect-src to 'self' and openrouter.ai only, so even a hypothetical script-injection bug couldn't exfiltrate your key to a third-party server.
• 🔗 Pinned dependencies. Every third-party script is pinned to an exact version with a Subresource Integrity hash, so a compromised CDN can't silently swap the code that runs.
• 🧼 Sanitized output. All model output is parsed as Markdown and sanitized with DOMPurify before render — the model can't inject scripts, images, or styling into the UI.

That said: localStorage is readable by anyone with access to this browser profile. Don't use this on a shared or public computer, and use an OpenRouter key with a spend cap you're comfortable with.

---

🚀 Installation and usage

There's no build step — it's plain HTML/CSS/JS. To run it locally, serve the folder over HTTP (opening index.html directly as a file:// URL breaks the Content-Security-Policy and service worker):

# from the project folder, pick whichever you have installed
python -m http.server 8000
# or
npx serve .

Then open http://localhost:8000, click Settings, and paste in an OpenRouter API key.

📲 Installing as a PWA

Platform	Steps
Desktop (Chrome/Edge)	Click the install icon (⊕) in the address bar
Mobile (Safari/iOS)	Tap Share, scroll down, tap Add to Home Screen
Mobile (Chrome/Android)	Tap the three-dot menu, select Add to Home screen

Once installed, the app shell works offline, and your chats and settings stay saved locally on your device.

---

📂 Code structure

AskieAI-public/
├── index.html                 Markup, inline styles, CSP, manifest/meta links
├── app.js                     All client-side logic: chat, storage, settings, voice, PWA install
├── sw.js                      Service worker — caches the app shell for offline use
├── .nojekyll                  Tells GitHub Pages to skip the Jekyll build step
├── robots.txt
├── sitemap.xml
├── README.md
├── PatrickHand-Regular.woff2  Self-hosted webfont (Patrick Hand), used everywhere
├── askieogimage.png           Open Graph / Twitter share image (1200×630)
└── favicon/
    ├── site.webmanifest       PWA manifest (name, icons, start_url, theme colors)
    ├── favicon.ico / favicon.svg / favicon-96x96.png
    ├── apple-touch-icon.png
    └── web-app-manifest-{192,512}x512.png

---

🛠️ Tech stack

No framework, no bundler, no node_modules — just three pinned dependencies loaded from jsDelivr with Subresource Integrity:

Library	Purpose
marked	Parses assistant responses as Markdown
DOMPurify	Sanitizes the resulting HTML before render
OpenRouter	The actual LLM API — not a dependency in the code, but the whole point

---

⚠️ Known limitations

• 🎙️ Voice input is Chromium-only. It relies on the Web Speech API, which is only implemented in Chromium-based browsers (Chrome, Edge) — Firefox and Safari users won't see it work.
• 📴 No sync. Chat history is per-browser, per-device — there's no sync, since there's no account or server to sync through.
• 🌐 Offline chat still needs a connection. The service worker caches this app's own files for offline use; it deliberately does not cache OpenRouter responses, so you still need a connection to actually chat.