codemirror-codeium

npm

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

Very experimental and unofficial

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

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();

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;
}

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.