Locara
← All components System & power-user

AIText

Granola's gray-AI / strong-user color treatment. Two modes for whole blocks, or pieces[] for inline mixed authorship.

Inspired by Granola enhanced notes (gray-AI / black-user).

Preview

What it looks like.

AI-generated (untouched)

The unified memory architecture in Apple Silicon means the CPU, GPU, and Neural Engine all share one pool of DRAM.

User-edited

Apple Silicon's unified memory means CPU, GPU, and Neural Engine share the same DRAM pool — eliminating the PCIe bottleneck that dominates inference on discrete-GPU systems.

Mixed authorship (pieces)

The M3 Ultra has up to 512 GB of unified memory — the highest of any consumer Mac shipped to date, enabling local inference of models in the 70B–405B parameter range at Q4 quantization.

Usage

Drop it into your app.

import { AIText } from '@locara/components'

// Whole-block mode
<AIText mode={hasUserEdited ? 'user' : 'ai'}>{paragraph}</AIText>

// Mixed-authorship pieces (Granola's gray-AI/black-user)
<AIText pieces={[
  { text: 'The M3 Ultra has up to 512 GB of unified memory ', mode: 'user' },
  { text: '— the highest of any consumer Mac shipped to date.', mode: 'ai' },
]} />

Or copy the source into your repo: locara add ai-text

Design notes

Why it works this way.

Granola solved the ownership problem with color: AI-suggested content sits in the muted (--fg-muted) tone; the moment the user touches it, it switches to full --fg color. The reader can see at a glance which words came from the model. The `flashOnChange` prop applies a brief accent-bg highlight on transition for extra visibility.