codemirror-mcp

A CodeMirror extension that implements the Model Context Protocol (MCP) for resource mentions and prompt commands.

Features

- Resource Completion: Autocomplete for @resource mentions
- Resource Decorations: Visual styling for @resource mentions with click handling
- Prompt Completion: Autocomplete for /prompt commands
- Theme Support: Customizable styling

Installation

``bash npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk

`or`


pnpm add @marimo-team/codemirror-mcp @modelcontextprotocol/sdk


$3
This module requires the following peer dependencies:

- @codemirror/view-@codemirror/state-@modelcontextprotocol/sdk

`Usage`

`ts import { WebSocketClientTransport } from "@modelcontextprotocol/sdk/client/websocket.js"; import { mcpExtension, extractResources } from '@marimo-team/codemirror-mcp'; import { EditorView } from '@codemirror/view';

const transport = new WebSocketClientTransport(new URL('ws://localhost:8080'));

const view = new EditorView({ extensions: [ // ... other extensions

mcpExtension({ // Required options transport: transport,

// Optional options logger: console, clientOptions: { name: 'your-client', version: '1.0.0' }, onResourceClick: (resource) => { // Open resource // e.g. open in a tab, etc. }, }),

// Handle submit keymap.of([ { key: 'Enter', run: () => { const resources = extractResources(view); const formattedResources = resources .map( ({ resource }) =>${resource.uri} (${resource.type}): ${resource.description || resource.name}) .join('\n'); const prompt =${view.state.doc.toString()}\n\nResources:\n${formattedResources}; // ... submit prompt to AI server // const response = await generateText(prompt); }, }, ]), ], parent: document.querySelector('#editor'), });`

`Resources`

- Use @resource-urisyntax to reference resources - Resources are visually decorated and clickable - Click handling for resource interactions - Hover tooltips show resource details - Customizable theme

`Prompts`

- Use /commandsyntax for prompt commands - Autocomplete for available prompts

`Development`

`bash

`Install dependencies`


pnpm install
Run tests

pnpm test
Run demo

pnpm dev

License

MIT

Usage

ts
import { WebSocketClientTransport } from "@modelcontextprotocol/sdk/client/websocket.js";
import { mcpExtension, extractResources } from '@marimo-team/codemirror-mcp';
import { EditorView } from '@codemirror/view';

const transport = new WebSocketClientTransport(new URL('ws://localhost:8080'));

const view = new EditorView({
  extensions: [
    // ... other extensions

    mcpExtension({
      // Required options
      transport: transport,

      // Optional options
      logger: console,
      clientOptions: {
        name: 'your-client',
        version: '1.0.0'
      },
      onResourceClick: (resource) => {
        // Open resource
        // e.g. open in a tab, etc.
      },
    }),

    // Handle submit
    keymap.of([
      {
        key: 'Enter',
        run: () => {
          const resources = extractResources(view);
          const formattedResources = resources
            .map(
              ({ resource }) =>

${resource.uri} (${resource.type}): ${resource.description || resource.name}


            )
            .join('\n');
          const prompt =

${view.state.doc.toString()}\n\nResources:\n${formattedResources}

;
          // ... submit prompt to AI server
          // const response = await generateText(prompt);
        },
      },
    ]),
  ],
  parent: document.querySelector('#editor'),
});