A lightweight AI chat app that runs entirely in your browser. No server. No installation. No data leaves your device.
- Multi-provider AI — DeepSeek and Xiaomi MiMo via their official APIs (bring your own key)
- Agent with tools — JS sandbox (
run_js) and persistent memory - Streaming responses — real-time token streaming with thinking block support
- Markdown rendering — full Markdown with syntax-highlighted code blocks (lazy-loaded hljs)
- Personas — built-in conversational roles (thinking partner, prompt explorer, etc.)
- Image generation — via Gemini image models (optional, per-conversation toggle; key from a proxy provider)
- Local-only storage — conversations/messages/memories in IndexedDB, settings/soul in localStorage
- Dark / light / system theme
- Auto-titling — AI-generated conversation titles after a few rounds
git clone <repo>
cd thinclaw
bun install
just devOpen http://localhost:5173.
just buildOutput is in build/ — a directory of plain static files. See docs/deployment.md for hosting guides (nginx, Caddy, Cloudflare Pages, Docker).
All configuration is done in the Settings page (gear icon in the sidebar).
| Setting | Description |
|---|---|
| Provider API Keys | Chat keys: api.deepseek.com, api.xiaomimimo.com. Image-only keys: bianxie.ai, laozhang.ai, lingyaai.cn. A single key unlocks multiple models. |
| Model Selection | Choose default and utility (auto-title) models from enabled providers. |
| Model Toggles | Enable/disable individual models per provider. |
| Theme | Light, dark, or follow system preference. |
| Custom Instructions | Extra text appended to the system prompt for all conversations. |
| Soul | The AI's persistent identity — editable by you or the AI itself. |
| Memory | Persistent facts about you, saved by the AI across conversations. |
- API keys, soul, and UI settings are stored in
localStoragein your browser only. - Conversations, messages, and memories are stored in
IndexedDBin your browser only. - No analytics, no telemetry, no external requests except to the configured AI provider APIs.
- Clearing your browser's site data for this origin deletes everything.
| Layer | Choice |
|---|---|
| Framework | SvelteKit 2 + Svelte 5 (runes) |
| Language | TypeScript (strict) |
| AI | @earendil-works/pi-ai + @earendil-works/pi-agent-core |
| Storage | idb (IndexedDB) + localStorage |
| Styling | Tailwind CSS v4 + CSS custom properties |
| Build | Vite 8 + Bun + just |
| Deploy | @sveltejs/adapter-static (pure SPA, ssr=false) |
Preferred:
just dev # start dev server (http://localhost:5173)
just build # production build → build/
just preview # preview production build locally
just check # TypeScript + Svelte type check
just format # Prettier formatDirect Bun equivalents:
bun run dev
bun run build
bun run preview
bun run check
bun run formatsrc/
├── app.css # Design tokens (CSS custom properties), light/dark theme
├── lib/
│ ├── agent/
│ │ ├── content-processor.ts # Long tool output → utility model extract/summary
│ │ ├── image.ts # Image generation/editing tools (Gemini generateContent)
│ │ ├── models.ts # MODELS array + getModelByKey + DEFAULT_*_MODEL_KEY
│ │ ├── personas.ts # BUILTIN_PERSONAS + getPersonaById
│ │ ├── prompts.ts # buildSystemPrompt()
│ │ ├── soul.ts # AI identity stored in localStorage
│ │ ├── title.ts # AI auto-title generation
│ │ └── tools.ts # Agent tools: run_js, memory_save, memory_delete
│ ├── components/
│ │ ├── ChatInput.svelte # Textarea + image attach + send controls
│ │ ├── ChatMessage.svelte # Message bubble: Markdown, tool calls/results, thinking
│ │ ├── ModelSwitcher.svelte # Inline model picker
│ │ ├── PersonaPicker.svelte # Persona selector before first message
│ │ ├── SettingsMemory.svelte # Memory list section
│ │ ├── SettingsSoul.svelte # Soul editor section
│ │ ├── Sidebar.svelte # Conversation list: new / select / rename / delete
│ │ ├── Toast.svelte # Toast notifications
│ │ └── ToolCard.svelte # Tool call/result rendering
│ ├── db/
│ │ └── index.ts # IndexedDB schema + persistence helpers
│ ├── stores/
│ │ ├── chat.ts # Conversation state, Agent lifecycle, streaming
│ │ ├── memory.ts # Reactive memory store
│ │ ├── settings.ts # API keys, models, theme, instructions
│ │ └── toast.ts # Toast store
│ ├── themes.ts # Theme definitions
│ └── utils/
│ ├── markdown.ts # marked + highlight.js (hljs lazy-loaded)
│ └── nanoid.ts # crypto.getRandomValues ID generator
└── routes/
├── +layout.ts # ssr=false, prerender=true — pure SPA
├── +layout.svelte # imports app.css
├── +page.svelte # Main chat UI: sidebar + chat thread
└── settings/
└── +page.svelte # Settings page: providers, models, appearance, soul, memory
- Deployment Guide — nginx, Caddy, Cloudflare Pages, Docker
- Provider Details — endpoints, auth, per-provider notes
- Caching & Compaction — provider caching behavior, system prompt layout, long-content summarization
- Message Types — all message types, lifecycle, persistence
MIT