LocalMode UI: 100+ shadcn AI Components for Browser & Cloud

LocalMode UI is a React and shadcn/ui component registry that adds copy-paste UI components for local-first and cloud-backed AI applications.

It includes 100+ UI components across 10 functional families, with dedicated UI for conversation state, model loading, browser capabilities, RAG results, audio, vision, privacy, and agent workflows.

Every component installs directly into your codebase as plain JSX and TypeScript, styles with shadcn CSS variables on Tailwind CSS 4, and requires zero runtime packages from the registry publisher.

Official Website

Browse All Components

Features

Direct CLI installation through standard shadcn registry commands.
Local source code ownership with zero required registry runtime dependencies.
Presentational prop contract compatible with @localmode/react or @ai-sdk/react.
Native Tailwind CSS 4 theming using standard shadcn CSS variables.
Specialized local-first primitives for model download tracking and hardware capability gating.
Full MCP support for registry browsing and automated agent installations.

Use Cases

Browser AI chat with streamed markdown, tool calls, reasoning, citations, attachments, and stop controls.
Local model interfaces with download progress, WebGPU checks, model selection, cache state, and storage information.
RAG applications with indexed documents, retrieval sources, similarity scores, and vector-data controls.
Vision and audio tools with detection boxes, webcam surfaces, transcription state, waveform activity, and voice selection.
Agent interfaces with approval steps, task progress, event logs, and pipeline status.

How To Use LocalMode UI

Use a shadcn/ui project with Tailwind CSS 4, CSS variables, and a components.json file. Add the @localmode namespace to components.json:

{
  "registries": {
    "@localmode": "https://localmode.ai/r/{name}.json"
  }
}

Install Components

Install one component, one family, or the complete component set:

# One component
npx shadcn@latest add @localmode/ui/local-first/device-badge
# One family
npx shadcn@latest add @localmode/ui/conversation
# All 107 components
npx shadcn@latest add @localmode/ui/all

Basic Usage

DeviceBadge checks WebGPU by default. Set capability to wasm or storage for the other built-in badge states. Its browser capability hook arrives as a registry dependency.

import { DeviceBadge } from "@/components/device-badge";
export function ModelRequirements() {
  return (
    <div className="flex items-center gap-3">
      <DeviceBadge />
      <DeviceBadge capability="wasm" />
      <DeviceBadge capability="storage" compact />
    </div>
  );
}

Available UI Component

Category	UI Components
Conversation	Messages, prompt input, responses, tools, reasoning, sources, agent steps
Local-First	Model loading, capability gates, model selection, storage, cache, context usage
Results & Insights	Confidence scores, ranked results, similarity meters, evaluation data
Input Controls	Parameter controls, language selection, system prompts, command palettes
Audio	Voice selection, waveform state, audio playback, transcription UI
Media & Vision	Detection boxes, image comparison, webcam surfaces, image results
Data & Documents	File input, indexed documents, category filters
Security & Privacy	Passphrase UI, password strength, differential privacy controls
Artifacts & Canvas	Generated artifacts, tables, charts, code diffs
DevTools	Queue, event, pipeline, and model-cache diagnostics

Component Data Contracts

Component	Main Data
`MessageContent`	Markdown string or message-part array
`PromptInput`	`onSubmit`, `streaming`, `onStop`
`ConfidenceScoreBadge`	Score from 0 to 1
`ScoredResultBarList`	Array of `{ label, score }`
`BoundingBoxOverlay`	Detection boxes and source-image dimensions
`FileDropzone`	File rules and `onUpload`
`VoicePicker`	Voice records
`ContextUsageMeter`	Token counts and context-window size

Use LocalMode UI with the Vercel AI SDK

Install the conversation family for a cloud-backed chat:

npx shadcn@latest add @localmode/ui/conversation

Connect `useChat`

A Next.js App Router component that calls useChat needs the client boundary. Map AI SDK text parts to MessageContent and bind chat status and actions to the LocalMode components.

"use client";
import { useChat } from "@ai-sdk/react";
import {
  Conversation,
  ConversationContent,
} from "@/components/conversation";
import {
  Message,
  MessageAvatar,
  MessageContent,
} from "@/components/message";
import {
  PromptInput,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
} from "@/components/prompt-input";
const getText = (message) =>
  message.parts
    .filter((part) => part.type === "text")
    .map((part) => part.text)
    .join("");
export default function Chat() {
  const { messages, status, sendMessage, stop } = useChat();
  const streaming = status === "streaming";
  return (
    <>
      <Conversation streaming={streaming}>
        <ConversationContent>
          {messages.map((message) => (
            <Message key={message.id} role={message.role}>
              <MessageAvatar role={message.role} />
              <MessageContent
                role={message.role}
                content={getText(message)}
              />
            </Message>
          ))}
        </ConversationContent>
      </Conversation>
      <PromptInput
        streaming={streaming}
        onStop={stop}
        onSubmit={(text) => sendMessage({ text })}
      >
        <PromptInputTextarea />
        <PromptInputTools>
          <PromptInputSubmit />
        </PromptInputTools>
      </PromptInput>
    </>
  );
}

Install Ready-Made Local AI Blocks

Blocks install complete examples with LocalMode model logic already connected. They use explicit @localmode/ui/blocks/... addresses and are excluded from the component aggregates.

# Browser AI chat
npx shadcn@latest add @localmode/ui/blocks/chat
# RAG chat
npx shadcn@latest add @localmode/ui/blocks/knowledge/rag-chat
# Object detection
npx shadcn@latest add @localmode/ui/blocks/vision/object-detector

Use LocalMode UI with an AI Coding Agent

After the @localmode registry exists in components.json, initialize the shadcn MCP server for your coding agent. The shadcn CLI accepts claude, cursor, vscode, and codex as client values.

For Codex:

npx shadcn@latest mcp init --client codex

Styling and Customization

LocalMode components use shadcn/ui CSS variables and Tailwind utilities. Edit the copied .tsx files directly to change markup, classes, states, or component behavior.

The shadcn CLI resolves each item’s declared registry dependencies. Shared utilities such as cn() and component-specific npm dependencies arrive with the selected registry item. Check the aliases in components.json when generated imports do not match the project structure.