LocalMode components

Local-first AI toolkit for the modern web. Build privacy-first AI applications that work entirely in the browser.

Components: 143
Framework: React
Stack: React, TypeScript, Tailwind
License: MIT
GitHub stars: 59
Source: https://github.com/LocalMode-AI/LocalMode
Website: https://localmode.ai
Install: npx shadcn add @localmode/ui/{name}

All LocalMode components

Artifact: A Claude-style docked side-panel/canvas shell (header, title, description, copy/download/refresh/close toolbar, scrollable content) that…
Chart Artifact: A dependency-free inline-SVG chart (line / bar / area / scatter / radar / gauge) for local metrics — eval curves (precision/recall/F1…
Code Diff Viewer: A unified or side-by-side text/code diff of two local strings (before/after of redacted, translated, or transformed text)…
Data Table Artifact: A generic sortable data table for local row data — VectorDB results, model catalogs, evaluation rows, or generateObject() arrays. Click a…
Audio Scrub Player: A composable scrubbable audio player for local Blob/object-URL audio (Kokoro TTS output or recordings) — play/pause, a draggable seek bar…
Mic Selector: A microphone input-device picker with permission handling and live device enumeration — fully offline, using only browser device APIs…
Streaming Speech Panel: A streaming-TTS status surface: active state (WaveformActivityBars + spinner, synthesizing/playing label, processed-clause count…
Synced Transcript Viewer: A karaoke-style transcript viewer that highlights words in lockstep with audio playback using word-level alignment timestamps — the…
Transcribed Note Card: A transcription list item pairing transcript text with inline <audio> playback — relative timestamp (hover -> absolute), transcribed body…
Voice Button: A press-to-record / release-to-transcribe push-to-talk button with an explicit visual state machine: idle -> recording (pulse rings + live…
Voice Comparison Panel: A/B voice comparison — two labeled columns, each with a language-grouped voice select (VoicePicker) and a native <audio> player shown once…
Voice Orb: An animated Canvas 2D voice-agent orb/visualizer that reflects discrete agent states (idle/connecting/listening/thinking/speaking/muted)…
Voice Picker: Language-grouped TTS voice selection from one KokoroVoice[] contract — a compact grouped <select> (VoicePicker) plus rich VoiceCard /…
Waveform Activity Bars: A pure-CSS row of pulsing vertical bars (sinusoid-derived heights, staggered animation) that doubles as an active audio-processing…
Data Extractor Block: Schema-validated structured-data extraction from free text over its OWN on-device WebGPU-only WebLLM model (default…
Research Agent 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…
Audio Classifier Block: MediaPipe YAMNet (521 environmental sound categories) top-8 classification of a microphone recording (MediaRecorder; stop -> automatic…
Audiobook Reader Block: Long-text streaming synthesis (useStreamSpeech) with early playback that begins before synthesis completes, a live clause counter +…
Live Transcription Block: Open-mic streaming speech-to-text (useLiveTranscribe) with VAD-segmented utterances, plus a listen→plan→speak turn-taking assistant…
Meeting Assistant Block: Audio upload OR pasted transcript → Transcribe → Summarize (DistilBART, maxLength 200 / minLength 60) → Extract action items…
Voice Explorer Block: Browse, search, preview, and A/B-compare all 29 Kokoro voices (grouped by language label; play/stop preview where starting one preview…
Voice Notes Block: Record (push-to-talk from a selectable mic) or upload audio → Whisper/Moonshine transcription → saved notes with synced word-by-word…
Chat Block: The flagship on-device chat: a 76-model multi-provider selector (transformers, WebLLM, wllama GGUF, LiteRT) with capability gating, vision…
Device Report Block: A zero-download device capability report rendered entirely from browser APIs (useCapabilities / useStorageQuota / useAdaptiveBatchSize)…
GGUF Explorer Block: Browse 160,000+ HuggingFace GGUF models and the curated wllama catalog, inspect any file's metadata via a ~4KB HTTP Range read…
Model Advisor Block: Ranked on-device model recommendations that compute their OWN device context via useCapabilities and rank useModelRecommendations /…
DevTools Drawer Block: A global on-device observability drawer: six tabbed surfaces (inference queues, event log, pipeline runs, model cache, device…
Background Remover Block: Remove an image's background entirely on-device: SegFormer (Xenova/segformer-b0-finetuned-ade-512-512, ~15MB) segments the subject, the…
Image Captioner Block: Generate alt-text captions for images with ViT-GPT2 (Xenova/vit-gpt2-image-captioning, ~230MB) entirely on-device, accumulating results in…
Image Enhancer Block: Upscale and restore photos with Swin2SR super-resolution running fully in the browser — a 2x lightweight default…
Document QA Block: Extractive question answering (Xenova/distilbert-base-cased-distilled-squad, grounding corpus context via engine.search topK 1…
RAG Chat Block: Streaming grounded RAG over its OWN text/PDF corpus — token-by-token answers through the engine-owned generator (granite-4.0-350M) with…
Semantic Search Block: Full text/PDF/OCR ingest into its OWN corpus with off/recursive/semantic chunking and a live chunk-boundary preview, then reranked vector…
Vector Data Manager Block: Four-format vector import (Pinecone/ChromaDB/CSV/JSONL + native JSON) with auto format-detection, preview, batched cancellable import and…
Duplicate Finder Block: Union-find near-duplicate detection over cached CLIP image embeddings (no re-embedding) — a tunable threshold slider +…
Image Search 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 Categorizer Block: Editable-label-set categorization with Photo/Product presets, on-device library re-categorization with progress + cancel (no…
Smart Gallery Block: Adaptive, device-aware CLIP photo ingest (streamEmbedManyImages at a computeOptimalBatchSize batch size shown on an adaptive-batch-card)…
Encrypted Vault Block: A passphrase-locked, end-to-end encrypted item store driven by useEncryptedVault — AES-GCM ciphertext at rest in IndexedDB, the key…
PII Redactor Block: Detect PII with on-device NER (Xenova/bert-base-NER, BIO prefixes stripped, low-confidence filtered), redact it with reverse-offset…
Model Evaluator Block: Evaluate a selected classifier over a selected labeled dataset via useEvaluateModel, reporting accuracy plus macro precision/recall/F1…
Sentiment Analyzer Block: Classify one text or thousands with DistilBERT SST-2 (one item per line, or a .txt/.csv first column) via useSequentialBatch — streaming…
Text Classifier Block: Custom-label zero-shot classification with MobileBERT MNLI over a user-editable label set (add trimmed + case-insensitively deduped…
Threshold Calibrator Block: Calibrate a similarity threshold from corpus embeddings via useCalibrateThreshold at percentile 90, over a selected embedding model and…
Language Detector Block: Debounced (400 ms) automatic language detection across 110 languages (up to five candidates with name + ISO code + confidence) that runs…
Live Tracker Block: Real-time MediaPipe streaming trackers on live webcam video — one 4-mode block: Hands (21-point skeleton + handedness), Pose (33-point…
Object Detector Block: One-shot DETR (Xenova/detr-resnet-50) object detection on an uploaded image, the bundled sample, or a webcam-captured still — color-coded…
Complete Block: Fill-mask word prediction via ModernBERT (top-5) with [MASK] authoring, ranked predictions (token, confidence score, confidence label…
Summarize Block: Summarize a document with extractive and abstractive modes and short/medium/long length presets, rendered in a split pane with…
Translate Block: Translate across 24 directed offline Opus-MT language pairs (English-centric, every model id verified) with swap-direction that carries…
Write Block: A draft editor with live length feedback, preset and free-text edit instructions with prompt improvement, and an AI edit reviewed as a…
Actions: Message-level controls — copy (with copied state), regenerate, read-aloud (wire to local Kokoro TTS), an overflow more-menu, and an…
Agent Step Timeline: A vertical timeline of ReAct agent steps: collapsible per-step cards (color-coded tool badge, args, observation show-more, index…
Branch: A message-versioning navigator that pages between regenerated/edited assistant variants for one turn, with prev/next controls and an X of…
Chain of Thought: A structured step-by-step reasoning timeline (distinct from free-text Reasoning): labeled steps with per-step status and icons, and nested…
Code Block: Syntax-highlighted code (lazy Shiki, plain-pre fallback) with a language label and a copy-to-clipboard control.
Conversation: Scrollable message-display surface with first-class scroll-anchoring: auto-pins to the newest content while tokens stream, releases on…
In-Message Error: An accessible per-message error/retry block rendered inline on a failed assistant message (not a global toast), with auto-extracted error…
Inline Citation: Inline superscript citation markers in prose that open a hovercard with the cited local chunk (title, excerpt, quoted snippet), with a…
Loader: A small family of busy indicators (dots / pulse / typing / spinner) plus a Shimmer skeleton-text variant, shown while a local model warms…
Message: Role-aware chat message (data-role) rendering string or ContentPart[] — markdown text, image thumbnails with a fullscreen dialog, and file…
Multi-Step Pipeline Tracker: Progress surfaces for local workflows: a horizontal numbered-step indicator (active/completed/pending), a stage+percentage variant for…
Prompt Input: Form-based, auto-resizing chat composer: Enter submits, Shift+Enter inserts a newline, the submit control swaps to a stop control while…
Prompt Input Attachments: Attachment surface for the composer: image/file attach via picker, paste, and drag-and-drop with preview thumbnails, per-item removal, a…
Reasoning: The model's own thinking tokens (DeepSeek-R1 style) in a collapsible region: auto-expands while streaming with an elapsed timer and…
Response: Streaming markdown renderer for assistant output: shows a cursor while streaming, tolerates partial/unterminated markdown without layout…
Scroll To Bottom Button: 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…
Source Citation List: In-message attributed-sources list extending Sources: numbered items, a similarity score with a radial confidence ring, and clamped body…
Sources: Retrieval citations from local RAG results: a collapsible container with favicon/title/excerpt chips, a 0-1 relevance score, and an…
Structured Output Viewer: A result panel for useGenerateObject extending Response: pretty-printed JSON, an independently-usable inference-stats footer (tokens…
Suggestions: A horizontal row of selectable prompt chips; each Suggestion invokes a callback with its text to seed the composer.
System Notice Banner: An in-conversation info/warning banner (not a message bubble) for local-first state changes: offline/online, model switch…
Task: A multi-step agent process as an ordered list of steps (index, tool, status, args, observation) with the final-answer step distinguished…
Tool: A single tool invocation card with a status taxonomy (pending/running/streaming/completed/error), expandable ToolInput/ToolOutput, a…
Tool Approval: A human-in-the-loop confirmation card that gates a tool call before execution (pending tool + args with approve/reject), then re-renders…
Category Facet List: A domain-decoupled, filterable category facet (vertical list or horizontal pills) with per-category count badges, single-select toggle…
Chunk Boundary Visualizer: Visualizes a document split into distinct chunks: alternating accent-background segments each with a monospace C1/C2 badge; in semantic…
File Dropzone: A generic, format-agnostic drag-and-drop + click-to-browse upload zone for non-image files (PDF/CSV/JSON/vector exports). Validates each…
Format Detection Badge: A small badge displaying an auto-detected data format (PINECONE / CHROMA / CSV / JSONL or custom) with a per-format color map, used to…
Indexed Document Card: A card for a single locally-indexed document: truncated filename (native tooltip), chunk count, optional page count and file size, and a…
Event Log Viewer: Newest-first devtools event log: relative timestamps (absolute on hover), namespace-colored type badges…
Inference Queue Monitor: Per-queue inference observability: one card per registered queue showing pending, active, completed, failed, and average latency, with a…
Model Cache Table: Cached-model observability table: model ID (monospace, truncated), status badge (loaded/loading/error), load duration, and relative…
Pipeline Run Inspector: Per-run pipeline observability cards: status badge (running pulses on primary, completed emerald, failed destructive), a completed/total…
Char Limit Indicator: A radial progress ring + n/MAX monospace counter that turns error-colored when over the limit, deriving the percentage internally from…
Copy Button: A copy-to-clipboard button that shows a 2-second Copied confirmation, disables itself when there is nothing to copy, and treats an…
Language Pair Selector: A paired source/target language picker — From/To pill toggles with flag + name + a swap button, or a compact {source} → {target} pair of…
Mask Token Input: A fill-mask / cloze textarea that detects a configurable mask token (default [MASK]), shows an inline highlighted preview of the mask…
Option List: An inline multi-choice selection list (shows 5–7 options then paginates) for human-in-the-loop agent inquiries, distinct from quick-reply…
Parameter Slider: An inline range slider with a live value readout for reversible adjustment of a local generation parameter — temperature, top-k, top-p…
Prompt Enhance Button: A one-click 'enhance my prompt' control that hands the user's draft to a local model (via an onEnhance callback wired to useGenerateText)…
Segmented Mode Picker: A pill toggle for 2–4 mutually-exclusive named modes (ring-bordered container, active item tinted + ringed), plus a typed TabBar variant…
Slash Command Palette: A '/'-triggered command palette over a local tool/command list — name, category, description, and icon — to layer onto a PromptInput Tools…
System Prompt Editor: A controlled system-prompt editor (value in, onChange out) with quick-pick presets composed via the OptionList primitive: selecting a…
Text Processing Panel: A two-column (stacked on mobile) single-input → single-output NLP shell: labeled textarea + live word count + optional CharLimitIndicator…
Adaptive Batch Card: Surfaces useAdaptiveBatchSize output: a prominent computed optimal batch number, a hardware summary (cores/RAM/GPU), the detection source…
Browser Compat Card: A per-model runnability report for the current device — the feasibility check you want before a multi-GB download: a pass/fail…
Cache Badge: Annotates a result as served from the semantic cache, optionally with the hit latency (e.g. "cached · 12ms"). Drive cached/latencyMs from…
Capability Gate: A true gate: renders its children only when the device meets a stated requirement (e.g. requires="webgpu"), otherwise a themed fallback…
Chrome AI Download Gate: 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…
Context Usage Meter: A token / context-window budget meter (with composable Context/ContextTrigger/ContextContent/ContextInputUsage/ContextOutputUsage parts)…
Device Badge: A local-first capability badge. Detects WebGPU / WASM / IndexedDB support via a bundled useCapabilities() hook (copy-owned, reads…
Device Capability Grid: The expanded sibling of DeviceBadge: a full device-capability diagnostic card reading useCapabilities — a stats bar (cores/memory/GPU), a…
Embedding Drift Banner: A warning panel shown when the active embedding model is incompatible with vectors already stored (model changed or dimension mismatch)…
Model Catalog Card: A rich tile for a single model catalog entry (wllama/webllm/transformers/litert/mediapipe shapes): name, a size badge, description, a…
Model Comparison Panel: A side-by-side comparison of two scored entries with labeled rows (Score, Size, Speed, Quality, Device, Dimensions) where winning rows are…
Model Downloader: The headline local-first card a user sees while a model loads on-device: model name, size, context length, category, a live progress bar…
Model Loading Panel: A full-height "waiting for model" splash — the richer blocking sibling of ModelDownloader — combining model metadata (size, context…
Model Metadata Card: A structured key-value grid of parsed model metadata (GGUFMetadataCard, with a ModelMetadataCard alias) — architecture, parameter count…
Model Recommendation Card: A single scored recommendation: a radial score dial (0–100), the model name, a monospace model id, a badge row (provider, size…
Model Search Browser: A cmdk-based searchable model-repo browser: a controlled search input, a sort selector (downloads/likes/last-modified), result rows (repo…
Model Selector: A device-aware model picker: a list grouped by category, backend filter chips (WebGPU/ONNX/WASM/LiteRT) with live counts, per-model…
Network Badge: A reactive online/offline indicator (NetworkBadge) sourced from useNetworkStatus, plus an OfflineReady badge that signals the app's…
Provider Badge: Displays the RESOLVED provider identity - composing ProviderFallbackBadge for the tier and name - alongside the model id that actually…
Provider Fallback Badge: Surfaces the active AI backend tier — a zero-download built-in (Chrome AI) vs a model-download provider (Transformers.js) — plus a WASM…
Semantic Cache Status Bar: A compact toolbar row for useSemanticCache complementing CacheBadge: entry count, hit-rate percentage, an icon-only clear-cache button…
Storage Meter: Shows origin/IndexedDB storage usage against quota as a meter, with a warning state past a configurable threshold and a graceful…
Vector Export Panel: An export surface for vector data — the counterpart to VectorImportFlow: a record/dimension count line, a row per export format (native…
Vector Import Flow: A guarded vector-import flow for useImportExport: a preview panel (detected-format badge, total / with-vectors / text-only counts…
Vector Storage Observability: VectorDB observability complementing StorageMeter (quota): a compression-stats badge (SQ8 ratio + before/after size, e.g. "4.0x…
Before / After Image Viewer: Compare an original image with a transformed result — a two-panel grid with checkerboard transparency (shipped inline) or a segmented…
Bounding Box Overlay: Color-coded detection boxes (with a companion DetectionLabelLegend) positioned over an image as percentage offsets from its natural…
Image Processing Overlay: A full-bleed overlay over a dimmed source image while vision inference runs — spinner ring + icon + status + optional cancel, plus an…
Image Result Gallery: A responsive grid / list of image result cards sharing one data contract — in-flight overlay, hover metadata, confidence score…
Media Dropzone: A drag-and-drop + click-to-browse image upload zone with idle / drag-over / processing states, accept-list + max-size validation via…
Video Canvas: A mirrored 16:9 webcam surface — a video element with a pixel-aligned transparent canvas overlay for landmark / skeleton drawing, an FPS…
Confidence Score Badge: Maps a 0–1 score to a semantic color tier (configurable thresholds; default high ≥ 0.8 success, medium ≥ 0.5 warning, low muted) and…
Cosine Similarity Meter: A display card showing a cosine similarity (0–1) as a large numeric value with a human-readable bucket label (Very similar … Unrelated)…
Editable Label Set: An editable set of color-cycling removable chips managing a candidate-label list (zero-shot candidate labels or any string-tag…
Entity Relationship Graph: An interactive force-directed graph of typed nodes + relationship-labeled edges with drag / zoom / pan / hover / click and SVG/PNG export…
Entity Stats Bar: A horizontal stats bar showing the total detected-entity count plus per-type breakdown badges (PER / LOC / ORG / MISC — colored dot +…
Error Alert: A compact, dismissible error surface with an optional retry action - a role=alert region showing the message, a Retry button (only when…
Evaluation Metrics Dashboard: A composite evaluation dashboard: a KPI/stat-tile row (value + delta), a grid of metric cards (accuracy / precision / recall / F1), a…
Mode Error Boundary: A React error boundary that isolates a render failure in its subtree: it catches the error, renders a compact recoverable role=alert…
Redacted Text Display: An inline-annotated text renderer interleaving plain text with color-coded redaction tokens (e.g. [PER], [LOC]) styled per entity type…
Scored Result Bar List: A ranked vertical list of {label, score} pairs — each row shows the label, a confidence percentage (via ConfidenceScoreBadge), and an…
Threshold Calibration Panel: A presentational panel for similarity-threshold calibration results: the empirically calibrated threshold shown side-by-side with the…
Top Result Card: A hero card highlighting the single winning classification result — large label, prominent radial confidence dial (via…
Differential Privacy Controls: A collapsible DP settings panel (enable toggle, epsilon slider with derived High/Balanced/Low label, privacy-budget bar that warns/errors…
Lock Status Badge: A compact session-lock indicator accepting a status of locked, unlocked, or no-vault, with distinct iconography per state and an…
Passphrase Gate: A controlled passphrase screen with create and unlock modes: create renders passphrase + confirmation with a minimum-length gate and…
Password Strength Bar: A presentational password/passphrase strength meter — a themed bar + label driven by a caller-computed 0–100 strength score. The app…
Vault Item Card: A lock-state-aware card for an encrypted note or text document: locked renders a masked body with disabled actions (no plaintext in the…

LocalMode components

All LocalMode components

Browse by category