Ghost Text / AI Completions

Show dimmed inline completions. Tab to accept. Wire up any LLM or autocomplete backend.

Basic Usage

import { useState } from "react";
import { Mentions } from "@skyastrall/mentions-react";

function AIEditor() {
  const [ghost, setGhost] = useState("");

  const handleChange = (_markup: string, plainText: string) => {
    fetchCompletion(plainText).then(setGhost);
  };

  return (
    <Mentions
      triggers={[{ char: "@", data: users }]}
      ghostText={ghost}
      onChange={handleChange}
      onAcceptGhostText={() => setGhost("")}
    />
  );
}

How It Works

• Pass ghostText — it appears dimmed after the cursor
• Press Tab to accept — the ghost text is inserted into the editor
• Any other key dismisses the ghost text (it simply disappears on next input)
• onAcceptGhostText fires when Tab is pressed — clear the ghost and fetch a new one

With Dropdown

Ghost text and the mention dropdown coexist. When the dropdown is open with a highlighted item, Tab selects the item instead of accepting ghost text. When the dropdown is closed (or nothing is highlighted), Tab accepts ghost text.

Integration with AI APIs

async function fetchCompletion(text: string): Promise<string> {
  const res = await fetch("/api/complete", {
    method: "POST",
    body: JSON.stringify({ prompt: text }),
  });
  const { completion } = await res.json();
  return completion;
}

Debounce the fetch in your application code — the library doesn't debounce ghost text updates.