SuggestionGhostText

Cursor's Tab-to-accept inline ghost text. Tab accepts whole, Cmd+→ accepts next word, Esc dismisses.

Inspired by Cursor tab-complete (cursor.com/docs/tab/overview), VS Code Copilot inline suggestions.

Preview

What it looks like.

const recordings = await db.query('SELECT * FROM recordings WHERE user_id = ? ORDER BY created_at DESC LIMIT 50', [userId])

tab accept · ⌘→ next word · esc dismiss

Usage

Drop it into your app.

import { SuggestionGhostText } from '@locara/components'

// Anchor measured from the textarea caret position.
<SuggestionGhostText
  text={value}
  caret={caretPos}
  suggestion={completion}
  position={ghostAnchor}
  onAccept={() => insertAtCaret(completion)}
  onAcceptWord={(word) => insertAtCaret(word)}
  onDismiss={() => clearSuggestion()}
/>

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

Design notes

Why it works this way.

Display-only primitive — the consumer manages the predictive model and decides when to surface a suggestion. The keymap (Tab / Cmd+→ / Esc) is the now-standardized expectation set by Cursor and Copilot; don't invent variants.