codemirror-ai

A CodeMirror extension that adds AI-assisted inline code editing capabilities to your editor (like Continue.dev and Cursor)

Features

• AI-Assisted Editing: Select code and use keyboard shortcuts to get AI suggestions for edits
• Accept/reject AI suggestions with a clean, modern interface
• Customizable Keyboard Shortcuts

Installation

npm install @marimo-team/codemirror-ai
# or
pnpm add @marimo-team/codemirror-ai

Usage

AI-Assisted Editing

import { aiExtension } from '@marimo-team/codemirror-ai';
import { EditorView } from '@codemirror/view';

const view = new EditorView({
  extensions: [
    // ... other extensions
    aiExtension({
      // Required: Function to generate completions
      prompt: async ({ prompt, selection, codeBefore, codeAfter }) => {
        // Call your AI service here to generate the new code,
        // given the prompt, selection, and surrounding code
        return newCode;
      },

      // Optional callbacks
      onAcceptEdit: (opts) => {
        console.log('Edit accepted', opts);
      },
      onRejectEdit: (opts) => {
        console.log('Edit rejected', opts);
      },
      onError: (error) => console.error(error),

      // Optional configuration
      inputDebounceTime: 300, // ms
      keymaps: {
        showInput: 'Mod-k',    // Trigger AI edit
        acceptEdit: 'Mod-y', // Accept suggestion
        rejectEdit: 'Mod-u'    // Reject suggestion
      }
    })
  ],
  parent: document.querySelector('#editor')
});

Next Edit Prediction (Autocomplete)

import { nextEditPrediction } from '@marimo-team/codemirror-ai';
import { EditorView } from '@codemirror/view';

const view = new EditorView({
  extensions: [
    nextEditPrediction({
      // Required: Function to predict next edits
      fetchFn: async (state) => {
        // Return diff suggestion based on current editor state
        return { newText: 'suggested code', cursorOffset: 0 };
      },

      // Optional configuration
      delay: 500,              // Debounce delay in ms
      acceptOnClick: true,     // Accept suggestion on click
      defaultKeymap: true,     // Include Tab/Escape keybindings
      showAcceptReject: true,  // Show accept/reject buttons

      // Optional callback for tracking edits
      onEdit: (oldDoc, newDoc, from, to, insert) => {
        console.log('Edit tracked:', { oldDoc, newDoc, from, to, insert });
      }
    })
  ],
  parent: document.querySelector('#editor')
});

Prompt History

import { promptHistory } from '@marimo-team/codemirror-ai';
import { EditorView } from '@codemirror/view';

const view = new EditorView({
  extensions: [
    promptHistory({
      // Optional storage callbacks
      storage: {
        load: () => JSON.parse(localStorage.getItem('prompts') || '[]'),
        save: (prompts) => localStorage.setItem('prompts', JSON.stringify(prompts))
      },
      defaultKeymap: true // Use ArrowUp/ArrowDown for navigation
    })
  ],
  parent: document.querySelector('#editor')
});

Demo

See the demo for a full example.

Example prompt

const template = (opts) => `
Given the following code context, ${opts.prompt}

SELECTED CODE:
${opts.selection}

CODE BEFORE SELECTION:
${opts.codeBefore}

CODE AFTER SELECTION:
${opts.codeAfter}

Instructions:
1. Modify ONLY the selected code
2. Maintain consistent style with surrounding code
3. Ensure the edit is complete and can be inserted directly
4. Return ONLY the replacement code, no explanations

Your task: ${opts.prompt}`;

// ...

aiExtension({
  prompt: async (opts) => {
    const fullPrompt = template(opts);
    return await llm.complete(fullPrompt);
  }
})

Development

# Install dependencies
pnpm install

# Run tests
pnpm test

# Run demo
pnpm dev

Release

Prepare the version on a branch. The release command changes package.json but does not create a tag.

git switch -c release/vX.Y.Z
pnpm release X.Y.Z
git add package.json
git commit -m "chore: release vX.Y.Z"
git push -u origin release/vX.Y.Z

Open and merge a pull request. Then create the tag from the updated main branch.

git switch main
git pull --ff-only
git tag -a vX.Y.Z -m "vX.Y.Z"
git push origin vX.Y.Z

The tag starts the release workflow. The workflow checks the tag and publishes the package to npm.

License

Apache 2.0