codemirror-codeium

flowchart TD
	Keystroke --> SetTimeout
	Keystroke -->|ignoreUpdate| Cancelled
	SetTimeout -->|edits| Cancelled
	SetTimeout --> GetCompletions
	GetCompletions -->|edits| Cancelled
	X[ ] -->|focusChanged| Cancelled
	GetCompletions --> DispatchEdits
	DispatchEdits -->|mousedown| Cancelled
	DispatchEdits --> SameKeyCommand
	SameKeyCommand -->|tab| AcceptSuggestionCommand

Loading

Very experimental and unofficial

Copilot-like ghost text code from modeling-app by Jess Frazelle and based on Cursor.

Documentation

See the demo source code for a reference to how it's used.

import { copilotPlugin } from "@valtown/codemirror-codeium";

// This is a CodeMirror extension
copilotPlugin();

CSS

This adds a .ghostText class to CodeMirror decorations for the AI-written text. You can add your own style for this class. The demo uses this style:

.cm-ghostText,
.cm-ghostText * {
  opacity: 0.6;
  filter: grayscale(20%);
  cursor: pointer;
}

.cm-ghostText:hover {
  background: #eee;
}

Architecture

This makes requests against the Codeium hosted product, using their Protocol Buffer-based interface. That's what the buf and connectrpc modules are doing - generating and using bindings to their service.

The extension is a composite of facets, decorations, state fields, and more that are encapsulated.