---
name: "@localmode"
slug: "localmode"
description: "Local-first, offline AI UI primitives + blocks - run ML models (chat, RAG, vision, audio) entirely in the browser. No servers, no API keys."
category: "AI/chat UI"
tags: ["ai", "audio", "backgrounds", "blocks", "buttons", "cards", "charts", "dashboard", "design-system", "developer-tools", "editor", "forms", "hooks", "loaders", "media", "mobile", "overlays", "tables"]
framework: "react"
license: "MIT"
author: "LocalMode-AI"
website: "https://localmode.ai"
github: "https://github.com/LocalMode-AI/LocalMode"
registry: "https://localmode.ai/r/registry.json"
pro: false
pro_url: null
github_stars: 36
component_count: 147
generated_at: "2026-09-21T01:50:16.753Z"
---

# @localmode

Local-first, offline AI UI primitives + blocks - run ML models (chat, RAG, vision, audio) entirely in the browser. No servers, no API keys.

## Links

- Website: https://localmode.ai
- GitHub: https://github.com/LocalMode-AI/LocalMode
- Registry JSON: https://localmode.ai/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/localmode
- This file: https://sh4dcn.vercel.app/md/localmode.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://localmode.ai/r/registry.json
pnpm dlx shadcn@latest add https://localmode.ai/r/registry.json
bunx shadcn@latest add https://localmode.ai/r/registry.json
# clone the source repo
git clone https://github.com/LocalMode-AI/LocalMode.git
# fetch the raw registry index
curl -s https://localmode.ai/r/registry.json
```

## Components (147)

| name | type | description | install |
| --- | --- | --- | --- |
| ui/lib/utils | registry:lib | The class-name merge helper (clsx + tailwind-merge) shared by all LocalMode UI components. | `npx shadcn@latest add https://localmode.ai/r/ui/lib/utils.json` |
| ui/lib/browser-utils | registry:lib | Dependency-free browser helpers shared by LocalMode UI components: formatBytes, validateFile, readFileAsDataUrl, downloadBlob, the useObjectUrl hook, and the i… | `npx shadcn@latest add https://localmode.ai/r/ui/lib/browser-utils.json` |
| ui/lib/use-environment | registry:lib | Dependency-free React hooks for browser/device capability detection, storage quota, and online/offline status (useCapabilities, useStorageQuota, useNetworkStat… | `npx shadcn@latest add https://localmode.ai/r/ui/lib/use-environment.json` |
| ui/local-first/device-badge | registry:component | A local-first capability badge. Detects WebGPU / WASM / IndexedDB support via a bundled useCapabilities() hook (copy-owned, reads navigator — no @localmode dep… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/device-badge.json` |
| ui/artifacts/artifact | registry:component | A Claude-style docked side-panel/canvas shell (header, title, description, copy/download/refresh/close toolbar, scrollable content) that renders generated code… | `npx shadcn@latest add https://localmode.ai/r/ui/artifacts/artifact.json` |
| ui/artifacts/data-table-artifact | registry:component | A generic sortable data table for local row data — VectorDB results, model catalogs, evaluation rows, or generateObject() arrays. Click a column header to sort… | `npx shadcn@latest add https://localmode.ai/r/ui/artifacts/data-table-artifact.json` |
| ui/artifacts/chart-artifact | registry:component | A dependency-free inline-SVG chart (line / bar / area / scatter / radar / gauge) for local metrics — eval curves (precision/recall/F1 radar), 2D embedding proj… | `npx shadcn@latest add https://localmode.ai/r/ui/artifacts/chart-artifact.json` |
| ui/artifacts/code-diff-viewer | registry:component | A unified or side-by-side text/code diff of two local strings (before/after of redacted, translated, or transformed text). Additions/deletions highlighted, com… | `npx shadcn@latest add https://localmode.ai/r/ui/artifacts/code-diff-viewer.json` |
| ui/audio/waveform-activity-bars | registry:component | A pure-CSS row of pulsing vertical bars (sinusoid-derived heights, staggered animation) that doubles as an active audio-processing indicator and an idle empty-… | `npx shadcn@latest add https://localmode.ai/r/ui/audio/waveform-activity-bars.json` |
| ui/audio/voice-picker | registry:component | Language-grouped TTS voice selection from one KokoroVoice[] contract — a compact grouped <select> (VoicePicker) plus rich VoiceCard / VoiceGrid variants with a… | `npx shadcn@latest add https://localmode.ai/r/ui/audio/voice-picker.json` |
| ui/audio/streaming-speech-panel | registry:component | A streaming-TTS status surface: active state (WaveformActivityBars + spinner, synthesizing/playing label, processed-clause count, highlighted now-playing claus… | `npx shadcn@latest add https://localmode.ai/r/ui/audio/streaming-speech-panel.json` |
| ui/audio/voice-comparison-panel | registry:component | A/B voice comparison — two labeled columns, each with a language-grouped voice select (VoicePicker) and a native <audio> player shown once audio is set, a shar… | `npx shadcn@latest add https://localmode.ai/r/ui/audio/voice-comparison-panel.json` |
| ui/audio/transcribed-note-card | registry:component | A transcription list item pairing transcript text with inline <audio> playback — relative timestamp (hover -> absolute), transcribed body, and a hover-revealed… | `npx shadcn@latest add https://localmode.ai/r/ui/audio/transcribed-note-card.json` |
| ui/audio/voice-orb | registry:component | An animated Canvas 2D voice-agent orb/visualizer that reflects discrete agent states (idle/connecting/listening/thinking/speaking/muted) and pulses with input/… | `npx shadcn@latest add https://localmode.ai/r/ui/audio/voice-orb.json` |
| ui/audio/voice-button | registry:component | A press-to-record / release-to-transcribe push-to-talk button with an explicit visual state machine: idle -> recording (pulse rings + live waveform) -> process… | `npx shadcn@latest add https://localmode.ai/r/ui/audio/voice-button.json` |
| ui/audio/mic-selector | registry:component | A microphone input-device picker with permission handling and live device enumeration — fully offline, using only browser device APIs (getUserMedia for the per… | `npx shadcn@latest add https://localmode.ai/r/ui/audio/mic-selector.json` |
| ui/audio/audio-scrub-player | registry:component | A composable scrubbable audio player for local Blob/object-URL audio (Kokoro TTS output or recordings) — play/pause, a draggable seek bar, and a time/duration … | `npx shadcn@latest add https://localmode.ai/r/ui/audio/audio-scrub-player.json` |
| ui/audio/synced-transcript-viewer | registry:component | A karaoke-style transcript viewer that highlights words in lockstep with audio playback using word-level alignment timestamps — the playback-time -> word-index… | `npx shadcn@latest add https://localmode.ai/r/ui/audio/synced-transcript-viewer.json` |
| ui/conversation/conversation | registry:component | Scrollable message-display surface with first-class scroll-anchoring: auto-pins to the newest content while tokens stream, releases on scroll-up with a scroll-… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/conversation.json` |
| ui/conversation/message | registry:component | Role-aware chat message (data-role) rendering string or ContentPart[] — markdown text, image thumbnails with a fullscreen dialog, and file download chips from … | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/message.json` |
| ui/conversation/response | registry:component | Streaming markdown renderer for assistant output: shows a cursor while streaming, tolerates partial/unterminated markdown without layout breakage, supports an … | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/response.json` |
| ui/conversation/loader | registry:component | A small family of busy indicators (dots / pulse / typing / spinner) plus a Shimmer skeleton-text variant, shown while a local model warms up or streams its fir… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/loader.json` |
| ui/conversation/prompt-input | registry:component | Form-based, auto-resizing chat composer: Enter submits, Shift+Enter inserts a newline, the submit control swaps to a stop control while streaming, with optiona… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/prompt-input.json` |
| ui/conversation/prompt-input-attachments | registry:component | Attachment surface for the composer: image/file attach via picker, paste, and drag-and-drop with preview thumbnails, per-item removal, a hovercard preview, med… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/prompt-input-attachments.json` |
| ui/conversation/suggestions | registry:component | A horizontal row of selectable prompt chips; each Suggestion invokes a callback with its text to seed the composer. | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/suggestions.json` |
| ui/conversation/actions | registry:component | Message-level controls — copy (with copied state), regenerate, read-aloud (wire to local Kokoro TTS), an overflow more-menu, and an on-device FeedbackBar (thum… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/actions.json` |
| ui/conversation/reasoning | registry:component | The model's own thinking tokens (DeepSeek-R1 style) in a collapsible region: auto-expands while streaming with an elapsed timer and auto-collapses on the final… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/reasoning.json` |
| ui/conversation/sources | registry:component | Retrieval citations from local RAG results: a collapsible container with favicon/title/excerpt chips, a 0-1 relevance score, and an optional Web/Images/News ta… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/sources.json` |
| ui/conversation/tool | registry:component | A single tool invocation card with a status taxonomy (pending/running/streaming/completed/error), expandable ToolInput/ToolOutput, a per-tool renderer registry… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/tool.json` |
| ui/conversation/task | registry:component | A multi-step agent process as an ordered list of steps (index, tool, status, args, observation) with the final-answer step distinguished. Its data shape aligns… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/task.json` |
| ui/conversation/code-block | registry:component | Syntax-highlighted code (lazy Shiki, plain-pre fallback) with a language label and a copy-to-clipboard control. | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/code-block.json` |
| ui/conversation/agent-step-timeline | registry:component | A vertical timeline of ReAct agent steps: collapsible per-step cards (color-coded tool badge, args, observation show-more, index, elapsed-ms), a finish final-a… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/agent-step-timeline.json` |
| ui/conversation/source-citation-list | registry:component | In-message attributed-sources list extending Sources: numbered items, a similarity score with a radial confidence ring, and clamped body text with staggered fa… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/source-citation-list.json` |
| ui/conversation/structured-output-viewer | registry:component | A result panel for useGenerateObject extending Response: pretty-printed JSON, an independently-usable inference-stats footer (tokens, duration, attempts), and … | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/structured-output-viewer.json` |
| ui/conversation/pipeline-tracker | registry:component | Progress surfaces for local workflows: a horizontal numbered-step indicator (active/completed/pending), a stage+percentage variant for ingest, a Steps/Plan ver… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/pipeline-tracker.json` |
| ui/conversation/branch | registry:component | A message-versioning navigator that pages between regenerated/edited assistant variants for one turn, with prev/next controls and an X of N indicator (hidden a… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/branch.json` |
| ui/conversation/inline-citation | registry:component | Inline superscript citation markers in prose that open a hovercard with the cited local chunk (title, excerpt, quoted snippet), with a carousel paging multiple… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/inline-citation.json` |
| ui/conversation/tool-approval | registry:component | A human-in-the-loop confirmation card that gates a tool call before execution (pending tool + args with approve/reject), then re-renders read-only as an immuta… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/tool-approval.json` |
| ui/conversation/chain-of-thought | registry:component | A structured step-by-step reasoning timeline (distinct from free-text Reasoning): labeled steps with per-step status and icons, and nested slots for embedded r… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/chain-of-thought.json` |
| ui/conversation/scroll-to-bottom-button | registry:component | A floating scroll-to-bottom affordance tied to a chat container's scroll state — appears when the user scrolls up, scrolls to and pins the latest content. Pair… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/scroll-to-bottom-button.json` |
| ui/conversation/system-notice-banner | registry:component | An in-conversation info/warning banner (not a message bubble) for local-first state changes: offline/online, model switch, capability-unavailable, WebGPU->WASM… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/system-notice-banner.json` |
| ui/conversation/in-message-error | registry:component | An accessible per-message error/retry block rendered inline on a failed assistant message (not a global toast), with auto-extracted error text, a classified hi… | `npx shadcn@latest add https://localmode.ai/r/ui/conversation/in-message-error.json` |
| ui/data-documents/file-dropzone | registry:component | A generic, format-agnostic drag-and-drop + click-to-browse upload zone for non-image files (PDF/CSV/JSON/vector exports). Validates each file with a bundled va… | `npx shadcn@latest add https://localmode.ai/r/ui/data-documents/file-dropzone.json` |
| ui/data-documents/indexed-document-card | registry:component | A card for a single locally-indexed document: truncated filename (native tooltip), chunk count, optional page count and file size, and a hover/focus-revealed d… | `npx shadcn@latest add https://localmode.ai/r/ui/data-documents/indexed-document-card.json` |
| ui/data-documents/format-detection-badge | registry:component | A small badge displaying an auto-detected data format (PINECONE / CHROMA / CSV / JSONL or custom) with a per-format color map, used to confirm a detected sourc… | `npx shadcn@latest add https://localmode.ai/r/ui/data-documents/format-detection-badge.json` |
| ui/data-documents/category-facet-list | registry:component | A domain-decoupled, filterable category facet (vertical list or horizontal pills) with per-category count badges, single-select toggle (re-click deselects), an… | `npx shadcn@latest add https://localmode.ai/r/ui/data-documents/category-facet-list.json` |
| ui/data-documents/chunk-boundary-visualizer | registry:component | Visualizes a document split into distinct chunks: alternating accent-background segments each with a monospace C1/C2 badge; in semantic mode, inter-chunk bound… | `npx shadcn@latest add https://localmode.ai/r/ui/data-documents/chunk-boundary-visualizer.json` |
| ui/input-controls/char-limit-indicator | registry:component | A radial progress ring + n/MAX monospace counter that turns error-colored when over the limit, deriving the percentage internally from charCount + maxLength. P… | `npx shadcn@latest add https://localmode.ai/r/ui/input-controls/char-limit-indicator.json` |
| ui/input-controls/mask-token-input | registry:component | A fill-mask / cloze textarea that detects a configurable mask token (default [MASK]), shows an inline highlighted preview of the mask span, a 'detected' vs 'Ad… | `npx shadcn@latest add https://localmode.ai/r/ui/input-controls/mask-token-input.json` |
| ui/input-controls/segmented-mode-picker | registry:component | A pill toggle for 2–4 mutually-exclusive named modes (ring-bordered container, active item tinted + ringed), plus a typed TabBar variant with disabledTabs gati… | `npx shadcn@latest add https://localmode.ai/r/ui/input-controls/segmented-mode-picker.json` |
| ui/input-controls/language-pair-selector | registry:component | A paired source/target language picker — From/To pill toggles with flag + name + a swap button, or a compact {source} → {target} pair of selects. Fully control… | `npx shadcn@latest add https://localmode.ai/r/ui/input-controls/language-pair-selector.json` |
| ui/input-controls/text-processing-panel | registry:component | A two-column (stacked on mobile) single-input → single-output NLP shell: labeled textarea + live word count + optional CharLimitIndicator on the left; a result… | `npx shadcn@latest add https://localmode.ai/r/ui/input-controls/text-processing-panel.json` |
| ui/input-controls/parameter-slider | registry:component | An inline range slider with a live value readout for reversible adjustment of a local generation parameter — temperature, top-k, top-p, maxTokens, nGpuLayers, … | `npx shadcn@latest add https://localmode.ai/r/ui/input-controls/parameter-slider.json` |
| ui/input-controls/slash-command-palette | registry:component | A '/'-triggered command palette over a local tool/command list — name, category, description, and icon — to layer onto a PromptInput Tools slot. Purely present… | `npx shadcn@latest add https://localmode.ai/r/ui/input-controls/slash-command-palette.json` |
| ui/input-controls/option-list | registry:component | An inline multi-choice selection list (shows 5–7 options then paginates) for human-in-the-loop agent inquiries, distinct from quick-reply suggestion chips. The… | `npx shadcn@latest add https://localmode.ai/r/ui/input-controls/option-list.json` |
| ui/input-controls/prompt-enhance-button | registry:component | A one-click 'enhance my prompt' control that hands the user's draft to a local model (via an onEnhance callback wired to useGenerateText) and applies the rewri… | `npx shadcn@latest add https://localmode.ai/r/ui/input-controls/prompt-enhance-button.json` |
| ui/input-controls/copy-button | registry:component | A copy-to-clipboard button that shows a 2-second Copied confirmation, disables itself when there is nothing to copy, and treats an unavailable clipboard (insec… | `npx shadcn@latest add https://localmode.ai/r/ui/input-controls/copy-button.json` |
| ui/input-controls/system-prompt-editor | registry:component | A controlled system-prompt editor (value in, onChange out) with quick-pick presets composed via the OptionList primitive: selecting a preset replaces the texta… | `npx shadcn@latest add https://localmode.ai/r/ui/input-controls/system-prompt-editor.json` |
| ui/local-first/model-downloader | registry:component | The headline local-first card a user sees while a model loads on-device: model name, size, context length, category, a live progress bar, and a clear first-tim… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/model-downloader.json` |
| ui/local-first/model-selector | registry:component | A device-aware model picker: a list grouped by category, backend filter chips (WebGPU/ONNX/WASM/LiteRT) with live counts, per-model vision/tool-calling/cached … | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/model-selector.json` |
| ui/local-first/capability-gate | registry:component | A true gate: renders its children only when the device meets a stated requirement (e.g. requires="webgpu"), otherwise a themed fallback slot with guidance. The… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/capability-gate.json` |
| ui/local-first/storage-meter | registry:component | Shows origin/IndexedDB storage usage against quota as a meter, with a warning state past a configurable threshold and a graceful unavailable state (estimates a… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/storage-meter.json` |
| ui/local-first/network-badge | registry:component | A reactive online/offline indicator (NetworkBadge) sourced from useNetworkStatus, plus an OfflineReady badge that signals the app's required model is cached on… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/network-badge.json` |
| ui/local-first/cache-badge | registry:component | Annotates a result as served from the semantic cache, optionally with the hit latency (e.g. "cached · 12ms"). Drive cached/latencyMs from a useSemanticCache lo… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/cache-badge.json` |
| ui/local-first/device-capability-grid | registry:component | The expanded sibling of DeviceBadge: a full device-capability diagnostic card reading useCapabilities — a stats bar (cores/memory/GPU), a status row per featur… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/device-capability-grid.json` |
| ui/local-first/browser-compat-card | registry:component | A per-model runnability report for the current device — the feasibility check you want before a multi-GB download: a pass/fail RAM-headroom bar (model RAM vs d… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/browser-compat-card.json` |
| ui/local-first/provider-fallback-badge | registry:component | Surfaces the active AI backend tier — a zero-download built-in (Chrome AI) vs a model-download provider (Transformers.js) — plus a WASM threading variant (Mult… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/provider-fallback-badge.json` |
| ui/local-first/context-usage-meter | registry:component | A token / context-window budget meter (with composable Context/ContextTrigger/ContextContent/ContextInputUsage/ContextOutputUsage parts) breaking down input/ou… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/context-usage-meter.json` |
| ui/local-first/model-catalog-card | registry:component | A rich tile for a single model catalog entry (wllama/webllm/transformers/litert/mediapipe shapes): name, a size badge, description, a metadata chip row (archit… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/model-catalog-card.json` |
| ui/local-first/model-loading-panel | registry:component | A full-height "waiting for model" splash — the richer blocking sibling of ModelDownloader — combining model metadata (size, context length, category, cached-vs… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/model-loading-panel.json` |
| ui/local-first/model-metadata-card | registry:component | A structured key-value grid of parsed model metadata (GGUFMetadataCard, with a ModelMetadataCard alias) — architecture, parameter count, quantization, context … | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/model-metadata-card.json` |
| ui/local-first/model-recommendation-card | registry:component | A single scored recommendation: a radial score dial (0–100), the model name, a monospace model id, a badge row (provider, size, speed/quality tiers, recommende… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/model-recommendation-card.json` |
| ui/local-first/model-search-browser | registry:component | A cmdk-based searchable model-repo browser: a controlled search input, a sort selector (downloads/likes/last-modified), result rows (repo id, author, compact d… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/model-search-browser.json` |
| ui/local-first/model-comparison-panel | registry:component | A side-by-side comparison of two scored entries with labeled rows (Score, Size, Speed, Quality, Device, Dimensions) where winning rows are accent-highlighted a… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/model-comparison-panel.json` |
| ui/local-first/adaptive-batch-card | registry:component | Surfaces useAdaptiveBatchSize output: a prominent computed optimal batch number, a hardware summary (cores/RAM/GPU), the detection source (detected/estimated/o… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/adaptive-batch-card.json` |
| ui/local-first/vector-storage-observability | registry:component | VectorDB observability complementing StorageMeter (quota): a compression-stats badge (SQ8 ratio + before/after size, e.g. "4.0x — 15KB→3.7KB"), a three-tier st… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/vector-storage-observability.json` |
| ui/local-first/embedding-drift-banner | registry:component | A warning panel shown when the active embedding model is incompatible with vectors already stored (model changed or dimension mismatch): explains stored vs cur… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/embedding-drift-banner.json` |
| ui/local-first/vector-export-panel | registry:component | An export surface for vector data — the counterpart to VectorImportFlow: a record/dimension count line, a row per export format (native JSON with vectors, CSV,… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/vector-export-panel.json` |
| ui/local-first/vector-import-flow | registry:component | A guarded vector-import flow for useImportExport: a preview panel (detected-format badge, total / with-vectors / text-only counts, detected dimensions, dimensi… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/vector-import-flow.json` |
| ui/local-first/semantic-cache-status-bar | registry:component | A compact toolbar row for useSemanticCache complementing CacheBadge: entry count, hit-rate percentage, an icon-only clear-cache button (when entries > 0), and … | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/semantic-cache-status-bar.json` |
| ui/local-first/provider-badge | registry:component | Displays the RESOLVED provider identity - composing ProviderFallbackBadge for the tier and name - alongside the model id that actually served the request. Whil… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/provider-badge.json` |
| ui/local-first/chrome-ai-download-gate | registry:component | The gate a user sees when a Chrome Built-in AI capability exists but its on-device model has not been fetched yet. Chrome refuses to start the model download o… | `npx shadcn@latest add https://localmode.ai/r/ui/local-first/chrome-ai-download-gate.json` |
| ui/media-vision/media-dropzone | registry:component | A drag-and-drop + click-to-browse image upload zone with idle / drag-over / processing states, accept-list + max-size validation via validateFile, an "add anot… | `npx shadcn@latest add https://localmode.ai/r/ui/media-vision/media-dropzone.json` |
| ui/media-vision/bounding-box-overlay | registry:component | Color-coded detection boxes (with a companion DetectionLabelLegend) positioned over an image as percentage offsets from its natural dimensions, so placement is… | `npx shadcn@latest add https://localmode.ai/r/ui/media-vision/bounding-box-overlay.json` |
| ui/media-vision/before-after-image-viewer | registry:component | Compare an original image with a transformed result — a two-panel grid with checkerboard transparency (shipped inline) or a segmented Original / Enhanced toggl… | `npx shadcn@latest add https://localmode.ai/r/ui/media-vision/before-after-image-viewer.json` |
| ui/media-vision/image-processing-overlay | registry:component | A full-bleed overlay over a dimmed source image while vision inference runs — spinner ring + icon + status + optional cancel, plus an animated scan variant (ke… | `npx shadcn@latest add https://localmode.ai/r/ui/media-vision/image-processing-overlay.json` |
| ui/media-vision/video-canvas | registry:component | A mirrored 16:9 webcam surface — a video element with a pixel-aligned transparent canvas overlay for landmark / skeleton drawing, an FPS badge, and a child slo… | `npx shadcn@latest add https://localmode.ai/r/ui/media-vision/video-canvas.json` |
| ui/media-vision/image-result-gallery | registry:component | A responsive grid / list of image result cards sharing one data contract — in-flight overlay, hover metadata, confidence score, multi-select, delete, and stagg… | `npx shadcn@latest add https://localmode.ai/r/ui/media-vision/image-result-gallery.json` |
| ui/media-vision/use-webcam | registry:hook | A React hook that owns a getUserMedia video stream: start() acquires (or re-acquires after a denial - the retry path), stop() releases every track, and unmount… | `npx shadcn@latest add https://localmode.ai/r/ui/media-vision/use-webcam.json` |
| ui/results/confidence-score-badge | registry:component | Maps a 0–1 score to a semantic color tier (configurable thresholds; default high ≥ 0.8 success, medium ≥ 0.5 warning, low muted) and renders the formatted perc… | `npx shadcn@latest add https://localmode.ai/r/ui/results/confidence-score-badge.json` |
| ui/results/scored-result-bar-list | registry:component | A ranked vertical list of {label, score} pairs — each row shows the label, a confidence percentage (via ConfidenceScoreBadge), and an animated horizontal fill … | `npx shadcn@latest add https://localmode.ai/r/ui/results/scored-result-bar-list.json` |
| ui/results/top-result-card | registry:component | A hero card highlighting the single winning classification result — large label, prominent radial confidence dial (via ConfidenceScoreBadge), and a tier-tinted… | `npx shadcn@latest add https://localmode.ai/r/ui/results/top-result-card.json` |
| ui/results/cosine-similarity-meter | registry:component | A display card showing a cosine similarity (0–1) as a large numeric value with a human-readable bucket label (Very similar … Unrelated) using configurable thre… | `npx shadcn@latest add https://localmode.ai/r/ui/results/cosine-similarity-meter.json` |
| ui/results/editable-label-set | registry:component | An editable set of color-cycling removable chips managing a candidate-label list (zero-shot candidate labels or any string-tag collection): hover-reveal remove… | `npx shadcn@latest add https://localmode.ai/r/ui/results/editable-label-set.json` |
| ui/results/entity-stats-bar | registry:component | A horizontal stats bar showing the total detected-entity count plus per-type breakdown badges (PER / LOC / ORG / MISC — colored dot + count + label), computing… | `npx shadcn@latest add https://localmode.ai/r/ui/results/entity-stats-bar.json` |
| ui/results/redacted-text-display | registry:component | An inline-annotated text renderer interleaving plain text with color-coded redaction tokens (e.g. [PER], [LOC]) styled per entity type with native tooltips, in… | `npx shadcn@latest add https://localmode.ai/r/ui/results/redacted-text-display.json` |
| ui/results/evaluation-metrics-dashboard | registry:component | A composite evaluation dashboard: a KPI/stat-tile row (value + delta), a grid of metric cards (accuracy / precision / recall / F1), a color-coded N×N confusion… | `npx shadcn@latest add https://localmode.ai/r/ui/results/evaluation-metrics-dashboard.json` |
| ui/results/entity-relationship-graph | registry:component | An interactive force-directed graph of typed nodes + relationship-labeled edges with drag / zoom / pan / hover / click and SVG/PNG export — for visualizing Vec… | `npx shadcn@latest add https://localmode.ai/r/ui/results/entity-relationship-graph.json` |
| ui/results/threshold-calibration-panel | registry:component | A presentational panel for similarity-threshold calibration results: the empirically calibrated threshold shown side-by-side with the model's preset default (o… | `npx shadcn@latest add https://localmode.ai/r/ui/results/threshold-calibration-panel.json` |
| ui/results/error-alert | registry:component | A compact, dismissible error surface with an optional retry action - a role=alert region showing the message, a Retry button (only when onRetry is provided), a… | `npx shadcn@latest add https://localmode.ai/r/ui/results/error-alert.json` |
| ui/results/mode-error-boundary | registry:component | A React error boundary that isolates a render failure in its subtree: it catches the error, renders a compact recoverable role=alert notice with the message an… | `npx shadcn@latest add https://localmode.ai/r/ui/results/mode-error-boundary.json` |
| ui/security-privacy/password-strength-bar | registry:component | A presentational password/passphrase strength meter — a themed bar + label driven by a caller-computed 0–100 strength score. The app computes strength (pairs w… | `npx shadcn@latest add https://localmode.ai/r/ui/security-privacy/password-strength-bar.json` |
| ui/security-privacy/differential-privacy-controls | registry:component | A collapsible DP settings panel (enable toggle, epsilon slider with derived High/Balanced/Low label, privacy-budget bar that warns/errors as budget is consumed… | `npx shadcn@latest add https://localmode.ai/r/ui/security-privacy/differential-privacy-controls.json` |
| ui/security-privacy/passphrase-gate | registry:component | A controlled passphrase screen with create and unlock modes: create renders passphrase + confirmation with a minimum-length gate and composes the password-stre… | `npx shadcn@latest add https://localmode.ai/r/ui/security-privacy/passphrase-gate.json` |
| ui/security-privacy/vault-item-card | registry:component | A lock-state-aware card for an encrypted note or text document: locked renders a masked body with disabled actions (no plaintext in the DOM); unlocked renders … | `npx shadcn@latest add https://localmode.ai/r/ui/security-privacy/vault-item-card.json` |
| ui/security-privacy/lock-status-badge | registry:component | A compact session-lock indicator accepting a status of locked, unlocked, or no-vault, with distinct iconography per state and an accessible text label (never c… | `npx shadcn@latest add https://localmode.ai/r/ui/security-privacy/lock-status-badge.json` |
| ui/devtools/inference-queue-monitor | registry:component | Per-queue inference observability: one card per registered queue showing pending, active, completed, failed, and average latency, with a live pulsing badge + e… | `npx shadcn@latest add https://localmode.ai/r/ui/devtools/inference-queue-monitor.json` |
| ui/devtools/event-log-viewer | registry:component | Newest-first devtools event log: relative timestamps (absolute on hover), namespace-colored type badges (vectordb/embedding/model/queue/pipeline/storage), seri… | `npx shadcn@latest add https://localmode.ai/r/ui/devtools/event-log-viewer.json` |
| ui/devtools/pipeline-run-inspector | registry:component | Per-run pipeline observability cards: status badge (running pulses on primary, completed emerald, failed destructive), a completed/total progress bar, the curr… | `npx shadcn@latest add https://localmode.ai/r/ui/devtools/pipeline-run-inspector.json` |
| ui/devtools/model-cache-table | registry:component | Cached-model observability table: model ID (monospace, truncated), status badge (loaded/loading/error), load duration, and relative last-used time per model — … | `npx shadcn@latest add https://localmode.ai/r/ui/devtools/model-cache-table.json` |
| ui/blocks/chat | registry:block | The flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with capability gating, vision attachments, DeepSee… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/chat.json` |
| ui/blocks/devtools-drawer | registry:block | A global on-device observability drawer: six tabbed surfaces (inference queues, event log, pipeline runs, model cache, device capabilities, per-collection Vect… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/devtools-drawer.json` |
| ui/blocks/vision/object-detector | registry:block | One-shot DETR (Xenova/detr-resnet-50) object detection on an uploaded image, the bundled sample, or a webcam-captured still — color-coded bounding boxes, a uni… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/vision/object-detector.json` |
| ui/blocks/vision/live-tracker | registry:block | Real-time MediaPipe streaming trackers on live webcam video — one 4-mode block: Hands (21-point skeleton + handedness), Pose (33-point skeleton + person count)… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/vision/live-tracker.json` |
| ui/blocks/audio/audio-classifier | registry:block | MediaPipe YAMNet (521 environmental sound categories) top-8 classification of a microphone recording (MediaRecorder; stop -> automatic classification; recordin… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/audio/audio-classifier.json` |
| ui/blocks/text/language-detector | registry:block | Debounced (400 ms) automatic language detection across 110 languages (up to five candidates with name + ISO code + confidence) that runs once typed text reache… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/text/language-detector.json` |
| ui/blocks/image-studio/background-remover | registry:block | Remove an image's background entirely on-device: SegFormer (Xenova/segformer-b0-finetuned-ade-512-512, ~15MB) segments the subject, the highest-scoring mask is… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/image-studio/background-remover.json` |
| ui/blocks/image-studio/image-enhancer | registry:block | Upscale and restore photos with Swin2SR super-resolution running fully in the browser — a 2x lightweight default (Xenova/swin2SR-lightweight-x2-64), plus 4x cl… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/image-studio/image-enhancer.json` |
| ui/blocks/image-studio/image-captioner | registry:block | Generate alt-text captions for images with ViT-GPT2 (Xenova/vit-gpt2-image-captioning, ~230MB) entirely on-device, accumulating results in a gallery (caption a… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/image-studio/image-captioner.json` |
| ui/blocks/privacy/pii-redactor | registry:block | Detect PII with on-device NER (Xenova/bert-base-NER, BIO prefixes stripped, low-confidence filtered), redact it with reverse-offset [<TYPE>] placeholders honor… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/privacy/pii-redactor.json` |
| ui/blocks/privacy/encrypted-vault | registry:block | A passphrase-locked, end-to-end encrypted item store driven by useEncryptedVault — AES-GCM ciphertext at rest in IndexedDB, the key derived from the passphrase… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/privacy/encrypted-vault.json` |
| ui/blocks/writing-tools/write | registry:block | A draft editor with live length feedback, preset and free-text edit instructions with prompt improvement, and an AI edit reviewed as a before/after diff with e… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/writing-tools/write.json` |
| ui/blocks/writing-tools/translate | registry:block | Translate across 24 directed offline Opus-MT language pairs (English-centric, every model id verified) with swap-direction that carries the output into the inp… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/writing-tools/translate.json` |
| ui/blocks/writing-tools/summarize | registry:block | Summarize a document with extractive and abstractive modes and short/medium/long length presets, rendered in a split pane with input/summary word counts, a com… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/writing-tools/summarize.json` |
| ui/blocks/writing-tools/complete | registry:block | Fill-mask word prediction via ModernBERT (top-5) with [MASK] authoring, ranked predictions (token, confidence score, confidence label, score bar) and a substit… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/writing-tools/complete.json` |
| ui/blocks/text-insights/sentiment-analyzer | registry:block | Classify one text or thousands with DistilBERT SST-2 (one item per line, or a .txt/.csv first column) via useSequentialBatch — streaming results in input order… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/text-insights/sentiment-analyzer.json` |
| ui/blocks/text-insights/text-classifier | registry:block | Custom-label zero-shot classification with MobileBERT MNLI over a user-editable label set (add trimmed + case-insensitively deduped, remove, live count) with a… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/text-insights/text-classifier.json` |
| ui/blocks/text-insights/model-evaluator | registry:block | Evaluate a selected classifier over a selected labeled dataset via useEvaluateModel, reporting accuracy plus macro precision/recall/F1, run duration, and a col… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/text-insights/model-evaluator.json` |
| ui/blocks/text-insights/threshold-calibrator | registry:block | Calibrate a similarity threshold from corpus embeddings via useCalibrateThreshold at percentile 90, over a selected embedding model and corpus, rendering the c… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/text-insights/threshold-calibrator.json` |
| ui/blocks/agents/research-agent | registry:block | A tool-using ReAct research agent over its OWN on-device WebGPU-only WebLLM model (default Qwen3-1.7B-q4f16_1-MLC): three block-local tools (search over a bund… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/agents/research-agent.json` |
| ui/blocks/agents/data-extractor | registry:block | Schema-validated structured-data extraction from free text over its OWN on-device WebGPU-only WebLLM model (default Qwen3-1.7B-q4f16_1-MLC): five zod templates… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/agents/data-extractor.json` |
| ui/blocks/device/device-report | registry:block | A zero-download device capability report rendered entirely from browser APIs (useCapabilities / useStorageQuota / useAdaptiveBatchSize): hardware cores/memory/… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/device/device-report.json` |
| ui/blocks/device/model-advisor | registry:block | Ranked on-device model recommendations that compute their OWN device context via useCapabilities and rank useModelRecommendations / getModelRegistry over the i… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/device/model-advisor.json` |
| ui/blocks/device/gguf-explorer | registry:block | Browse 160,000+ HuggingFace GGUF models and the curated wllama catalog, inspect any file's metadata via a ~4KB HTTP Range read (checkGGUFBrowserCompatFromURL —… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/device/gguf-explorer.json` |
| ui/blocks/knowledge/semantic-search | registry:block | Full text/PDF/OCR ingest into its OWN corpus with off/recursive/semantic chunking and a live chunk-boundary preview, then reranked vector search (over-fetch to… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/knowledge/semantic-search.json` |
| ui/blocks/knowledge/document-qa | registry:block | Extractive question answering (Xenova/distilbert-base-cased-distilled-squad, grounding corpus context via engine.search topK 1, High/Medium/Low confidence tier… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/knowledge/document-qa.json` |
| ui/blocks/knowledge/rag-chat | registry:block | Streaming grounded RAG over its OWN text/PDF corpus — token-by-token answers through the engine-owned generator (granite-4.0-350M) with [n] markers upgraded to… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/knowledge/rag-chat.json` |
| ui/blocks/knowledge/vector-data-manager | registry:block | Four-format vector import (Pinecone/ChromaDB/CSV/JSONL + native JSON) with auto format-detection, preview, batched cancellable import and a re-embed toggle for… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/knowledge/vector-data-manager.json` |
| ui/blocks/photo/smart-gallery | registry:block | Adaptive, device-aware CLIP photo ingest (streamEmbedManyImages at a computeOptimalBatchSize batch size shown on an adaptive-batch-card) with per-item progress… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/photo/smart-gallery.json` |
| ui/blocks/photo/image-search | registry:block | Text→image AND image→image search over one shared CLIP vector space — embed a free-text query or a reference image and rank the ingested photo library with a t… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/photo/image-search.json` |
| ui/blocks/photo/duplicate-finder | registry:block | Union-find near-duplicate detection over cached CLIP image embeddings (no re-embedding) — a tunable threshold slider + Strict/Balanced/Relaxed presets, per-gro… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/photo/duplicate-finder.json` |
| ui/blocks/photo/photo-categorizer | registry:block | Editable-label-set categorization with Photo/Product presets, on-device library re-categorization with progress + cancel (no re-embedding), and a counted, sing… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/photo/photo-categorizer.json` |
| ui/blocks/audio/voice-notes | registry:block | Record (push-to-talk from a selectable mic) or upload audio → Whisper/Moonshine transcription → saved notes with synced word-by-word replay (real Whisper segme… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/audio/voice-notes.json` |
| ui/blocks/audio/live-transcription | registry:block | Open-mic streaming speech-to-text (useLiveTranscribe) with VAD-segmented utterances, plus a listen→plan→speak turn-taking assistant (useTurnTaker: Granite 4.0 … | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/audio/live-transcription.json` |
| ui/blocks/audio/meeting-assistant | registry:block | Audio upload OR pasted transcript → Transcribe → Summarize (DistilBART, maxLength 200 / minLength 60) → Extract action items (useGenerateObject on Granite 4.0 … | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/audio/meeting-assistant.json` |
| ui/blocks/audio/voice-explorer | registry:block | Browse, search, preview, and A/B-compare all 29 Kokoro voices (grouped by language label; play/stop preview where starting one preview stops the previous; sequ… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/audio/voice-explorer.json` |
| ui/blocks/audio/audiobook-reader | registry:block | Long-text streaming synthesis (useStreamSpeech) with early playback that begins before synthesis completes, a live clause counter + current-clause display, spe… | `npx shadcn@latest add https://localmode.ai/r/ui/blocks/audio/audiobook-reader.json` |

## For AI agents

```text
You are adding components from @localmode to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/localmode.md) for the component list.
2. Fetch the machine-readable index: https://localmode.ai/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: localmode).
```