LocalMode UI

Overview

LocalMode UI is a shadcn-style registry of local-first AI components for the browser. It offers more than 100 copy-owned React components and 36 installable blocks that run real models on-device, with no server and no API key, across chat, knowledge and RAG, vision, audio, photo, agents and privacy.

Components are installed with paths such as @localmode/ui/conversation/message. Blocks build on the LocalMode packages, which wrap runtimes including Transformers.js, WebLLM, wllama, MediaPipe, LiteRT and Chrome's built-in AI. The project describes itself as local-first by design and cloud-compatible by contract.

Features

• Conversation components: Messages, prompt input with attachments, reasoning, sources, inline citations, tool calls, tool approval, branches and agent step timelines.
• Local-first model UI: Model downloader, selector, loading panel, catalog cards, storage meter, device capability grid and browser compatibility card.
• Media and vision: Bounding box overlay, video canvas, before-and-after viewer, media dropzone and a use-webcam hook.
• Audio: Voice orb, voice picker, mic selector, streaming speech panel and synced transcript viewer.
• Results and privacy: Confidence badges, similarity meters, redacted text display, passphrase gate and vault item cards.
• DevTools: Inference queue monitor, event log viewer, pipeline run inspector and model cache table.
• On-device blocks: Chat, RAG chat, object detector, voice notes, image search, PII redactor, background remover and image captioner.

Tech stack

• React, Tailwind CSS, Radix UI, shadcn CLI registry
• @localmode/* packages for Transformers.js, WebLLM, wllama, MediaPipe, LiteRT and Chrome AI

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @localmode/component-name