Roth is a privacy-focused AI chat application that runs entirely in your browser using WebGPU. It features a multi-model orchestration pipeline with optional web search integration via a companion Chrome extension.
The application is hosted at: rothai.netlify.app
- Roth AI
| Feature | Description |
|---|---|
| 100% Client-Side | All AI models run locally in your browser using WebGPU. No data sent to servers. |
| Model Caching | Models are downloaded once and then cached in your browser's Cache API for instant subsequent loads. |
| Multi-Model Pipeline | Uses Halugate Sentinel for query classification and Qwen3 for reasoning/generation. |
| Web Search Integration | Optional Chrome extension enables real-time DuckDuckGo searches to ground responses in facts. |
| Streaming Markdown | Real-time markdown rendering with syntax highlighting as the AI generates responses. |
| Think Tag Support | Displays AI reasoning in a collapsible panel, separating thought process from final answer. |
| Neomorphic UI | Modern dark theme with pronounced shadows and responsive mobile layout. |
┌─────────────────────────────────────────────────────────────────────┐
│ BROWSER (WebGPU) │
├─────────────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────────┐ ┌─────────────────────┐ │
│ │ tinkering │───▶│ orchestrator │───▶│ markdown-renderer │ │
│ │ .ts │ │ .ts │ │ .ts │ │
│ │ (Main App) │ │ (State Machine) │ │ (Real-time Render) │ │
│ └─────────────┘ └────────┬────────┘ └─────────────────────┘ │
│ │ │
│ ┌─────────▼─────────┐ │
│ │ extension-bridge │◀────┐ │
│ │ .ts │ │ │
│ └───────────────────┘ │ │
└──────────────────────────────────────────────│──────────────────────┘
│
┌──────────────────────────────────────────────│──────────────────────┐
│ CHROME EXTENSION │ │
├──────────────────────────────────────────────│──────────────────────┤
│ ┌─────────────┐ ┌──────────────────┐ │ │
│ │ content.js │◀──▶│ background.js │─────┘ │
│ │ (DOM Bridge)│ │ (Service Worker) │ │
│ └─────────────┘ └────────┬─────────┘ │
│ │ │
│ ▼ │
│ [ DuckDuckGo API ] │
└─────────────────────────────────────────────────────────────────────┘The Roth Search Helper extension enables web search without compromising privacy.
- Installation: When prompted by the onboarding modal, click the "Enable Search" button.
- Direct Link: Alternatively, you can download the extension from the Chrome Web Store: Roth Search Helper.
- Reload: After installing the extension, you must reload the page for the extension to be detected and full mode to be initialized.
| File | Purpose |
|---|---|
background.js |
Service worker that fetches raw HTML from DuckDuckGo. |
content.js |
Parses HTML using DOMParser, filters ads, limits to 3 results, and relays to the page. |
manifest.json |
Manifest V3 configuration with host_permissions for DuckDuckGo. |
roth/
├── index.html # Main HTML entry point
├── styles.css # Neomorphic UI styles (design tokens, responsive)
├── tinkering.ts # Main application logic (model loading, UI events)
├── build.ts # Bun build script
├── _headers # Netlify headers for COOP/COEP (SharedArrayBuffer)
│
├── src/
│ ├── orchestrator.ts # Multi-model pipeline state machine
│ ├── extension-bridge.ts # Chrome extension communication layer
│ ├── streaming-parser.ts # FSM for <think> tag extraction
│ └── markdown-renderer.ts# Real-time markdown streaming with highlight.js
│
├── extension/
│ ├── manifest.json # Chrome extension manifest (Manifest V3)
│ ├── background.js # Service worker for DuckDuckGo fetch
│ ├── content.js # DOM bridge + HTML parsing
│ └── icon*.png # Extension icons (16, 48, 128)
│
├── Assets/ # SVG icons for UI
│ ├── Roth-Logo.svg
│ ├── Send-Button.svg / Stop-Response.svg
│ ├── Brain-lightning.svg / Brain-Icon.svg
│ ├── GuardIcon.svg / SearchIcon.svg / GlobeIcon.svg
│ ├── TickMarkIcon.svg / DownArrow.svg
│
└── dist/ # Build output (tinkering.js)
The entry point that orchestrates:
- GPU Detection: Checks for WebGPU support and selects the best adapter.
- Model Loading: Downloads and initializes Qwen3 (0.6B) and Halugate Sentinel classifier. Models are cached locally for faster startup.
- UI Management: Handles chat messages, process/reasoning panels, and input events.
- Interruptibility:
AbortControllerallows users to stop generation mid-stream.
Coordinates the multi-model workflow:
- Classify → Uses Halugate Sentinel to determine if the query needs web search.
- Search → If needed, fetches DuckDuckGo results via the extension.
- Reason → Sends the query (with search context) to Qwen3 for generation.
A character-by-character Finite State Machine that:
- Detects
<think>...</think>tags in LLM output. - Routes thinking content to the Reasoning panel.
- Routes visible content to the main chat.
Incrementally renders markdown as tokens stream in:
- Uses
markedfor parsing andhighlight.jsfor code blocks. - Buffers content to avoid rendering incomplete syntax.
- Integrates with
DOMPurifyfor XSS protection.
Provides an API for the main app to:
- Detect if the Chrome extension is installed.
- Send search queries and receive parsed results.
- Uses
postMessagewith request/response correlation.
- Bun (for building): Install Bun
- WebGPU-capable browser: Chrome 113+, Edge 113+, or similar
# Clone the repository
git clone https://github.com/your-username/roth.git
cd roth
# Install dependencies
bun install
# Build the project
bun run buildServe the project with any static file server:
# Using Bun's built-in serve (or any alternative)
bun x serve .Then open http://localhost:3000 in your browser.
The UI uses CSS custom properties for consistent theming:
| Token | Value | Usage |
|---|---|---|
--bg-primary |
#171821 |
Main background |
--bg-card |
#545454 |
Card surfaces |
--accent |
#00a7e9 |
Interactive elements |
--font-display |
Tienne |
Headings |
--font-body |
Onest |
Body text |
--neo-outset |
Shadow values | Neomorphic raised effect |
--neo-inset |
Shadow values | Neomorphic pressed effect |
This project is provided as-is for educational and personal use.
- Hugging Face Transformers.js — Client-side ML inference
- Qwen3 — Language model
- Halugate Sentinel — Hallucination detection classifier
- marked — Markdown parser
- highlight.js — Syntax highlighting
- DOMPurify — XSS sanitization