Lightweight, Local-First AI Agent Workbench UI powered by WebGPU (WebLLM) and Ollama. Zero backend dependencies required.
LocalAgent-UI is a modern, high-performance in-browser AI Agent studio. It brings a native-like DevTools experience for visual Chain-of-Thought (CoT) reasoning, interactive Tool Calling visualization, and isolated client-side live code sandboxes directly inside your browser.
- 🧠 Visual Chain of Thought (CoT): Automatically parses
<think>...</think>streaming tags into collapsible, high-tech reasoning cards (ThoughtAccordion). - 🔧 Interactive Tool Calling Tree: Visualizes agent function executions with real-time status nodes (
pending|running|success|failed) and interactive JSON inspectors. - ⚡ Client-Side Live Code Sandbox: Renders generated HTML, SVG, CSS, and JS in an isolated iframe (
CodeArtifactBox) with 1-click fullscreen preview and auto-merging for fragmented LLM outputs. - 🔌 Hybrid Provider Architecture:
- In-Browser WebGPU: Runs 100% local, zero-backend LLMs (via
@mlc-ai/web-llmin WebWorker). - Ollama REST API: Connects to local Ollama endpoints with dynamic health checks and auto-discovery of pulled models.
- In-Browser WebGPU: Runs 100% local, zero-backend LLMs (via
- 🎭 Prompt Presets & Session Settings: Includes Code Assistant, Translator, and Custom Agent prompts; create, edit, delete, and reuse custom presets across sessions. Engine, model, and prompt selection are stored per session in IndexedDB.
- 📝 Rich Markdown: Syntax-highlighted code, KaTeX math, and Mermaid diagrams render locally in the browser.
- 🔒 100% Local-First Data Privacy: Sessions, model settings, system prompts, and full chat histories stay strictly inside your browser's IndexedDB (via Dexie.js). Streaming replies are periodically saved so partial output can be recovered after a reload.
- 💨 Anti-Jank Stream Pipeline: Engineered with Zustand state buffering and RAF-throttled smart auto-scrolling for high-frequency token streams without UI jitter.
- Framework: React 19 + Vite + TypeScript
- Styling: Tailwind CSS + Lucide Icons + Custom Modern Scrollbars
- State & DB: Zustand + Dexie.js (IndexedDB)
- Inference Engines:
@mlc-ai/web-llm(WebGPU) & Ollama REST Endpoint - Markdown & Syntax: React-Markdown, highlight.js, KaTeX, and Mermaid
- Tests: Vitest + fake-indexeddb (
npm test)
# Clone the repository
git clone https://github.com/real-rain/LocalAgent-UI.git
# Install dependencies
npm install
# Start local dev server
npm run devWhen accessing LocalAgent-UI from a hosted web domain (e.g., Vercel / GitHub Pages), your browser will block requests to local Ollama (http://localhost:11434) due to CORS policies unless OLLAMA_ORIGINS is configured.
- Press
Win + R, typesysdm.cpl, and press Enter. - Go to Advanced tab -> Click Environment Variables.
- Under User variables, click New:
- Variable name:
OLLAMA_ORIGINS - Variable value:
*
- Variable name:
- Click OK to save.
- Right-click the Ollama icon in the system tray and select Quit Ollama, then re-launch Ollama from the Start Menu.
(Or run in PowerShell as Administrator once: [System.Environment]::SetEnvironmentVariable('OLLAMA_ORIGINS', '*', 'User'))
Run Ollama with the OLLAMA_ORIGINS environment variable in your terminal:
OLLAMA_ORIGINS="*" ollama serve