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). - 🛠️ In-Browser Tool Calling Loop: Supports autonomous function execution (Calculator, Weather API, Web Sandbox) with client-side user confirmation safety controls (
Confirmation required). - 🔧 Built-in Frontend Tools:
get_current_weatherretrieves live conditions from Open-Meteo,calculatorevaluates arithmetic with exact rational decimal inputs, andweb_searchprovides an explicitly simulated result when no search service is configured. - 🛡️ Tool Execution Controls: Enable Confirm tool execution to approve or reject calls from their cards. Calls have a 10-second timeout, errors are returned to the model, and an eight-round limit prevents endless tool loops.
- ⚡ 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
- 📚 Local-First RAG: Import PDF or TXT files, extract text and split it into overlapping chunks in the browser, then generate embeddings in a Web Worker with
Xenova/bge-small-zh-v1.5. Documents and vectors stay in IndexedDB; the top three matching excerpts are added to the system prompt before either provider runs. The embedding model is downloaded on first use and cached by Transformers.js. - 🎭 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.
- 📦 Session Backup & Restore: Export all sessions, chat histories, and custom prompt presets to a single JSON backup. Imports append records without overwriting local data and also support legacy single-session JSON exports.
- 📝 Rich Markdown: Syntax-highlighted code, KaTeX math, and Mermaid diagrams render locally in the browser.
- 🔒 Local-First Data Privacy: Sessions, model settings, system prompts, and chat histories are stored in your browser's IndexedDB (via Dexie.js). WebGPU inference runs in-browser, while Ollama requests go to your local Ollama service. The weather tool sends the requested city to Open-Meteo for live data;
web_searchis simulated and does not query a search provider. 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 devSelect a model, start a conversation, and send one of these prompts. When Confirm tool execution is enabled, approve the call from its tool card.
| Tool Name (工具名称) | Purpose (作用) | Example Prompt (测试提示词) |
|---|---|---|
| Calculator | High-precision math operations | "Use the calculator tool to compute the exact result of 98765 * 43210." |
| Weather API | Fetch live Open-Meteo data (mock data is returned if the service is unavailable) | "Check the current weather in Beijing and show me the data returned by the tool." |
| Web Sandbox | Generate and render frontend code | "Create a 3D flip card with HTML/CSS/JS and preview it in the sandbox." |
LLM Stream ➔ StreamParser (Detect Tool Call) ➔ User Confirmation (Optional) ➔ Browser JS Execution ➔ Feedback Tool Result to Context ➔ Final LLM Response
When 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