@localmode/ui

LocalMode UI is a shadcn registry of 100+ copy-owned, composable AI UI components across 10 families — chat surfaces, model-download progress, device-capability gates, scored-result displays, audio I/O, vision overlays, and docked artifact canvases. They are portable to any React AI app — local-first by design, cloud-compatible by contract — and pair naturally with the recommended (optional) @localmode/core and @localmode/react hooks.

It is not an npm package. Like shadcn/ui, you install components with the shadcn CLI and own the copied code. Components are styled with shadcn/ui CSS variables, so they drop into your shadcn project and inherit your theme. The full registry and docs live at localmode.ai.

Why a registry, not a package

LocalMode's @localmode/* npm packages give you the engine — embeddings, vector search, LLM chat, vision, audio, agents. @localmode/ui gives you the surface. Because AI UI is something you almost always want to customize (your own theme, your own copy, your own layout), the components ship as source you copy into your project rather than a black-box dependency. This is the shadcn model: you get the code, you keep the code.

Install

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

# A single component
npx shadcn@latest add @localmode/ui/conversation/message

# An entire family
npx shadcn@latest add @localmode/ui/conversation

# The whole catalog (92 components)
npx shadcn@latest add @localmode/ui/all

'use client';

import { useChat } from '@localmode/react';
import { webllm } from '@localmode/webllm';
import { Conversation } from '@/components/ui/conversation';
import { Message } from '@/components/ui/message';
import { PromptInput } from '@/components/ui/prompt-input';

const model = webllm.languageModel('Llama-3.2-1B-Instruct-q4f16_1-MLC');

export function Chat() {
  const { messages, send, isStreaming } = useChat({ model });

  return (
    <Conversation>
      {messages.map((m) => (
        <Message key={m.id} role={m.role} content={m.content} />
      ))}
      <PromptInput onSubmit={send} disabled={isStreaming} />
    </Conversation>
  );
}

The 10 families

How it composes with the packages

Each component maps to a hook you already use:

Next steps