CodeMirror MCP Server

Overview

CodeMirror MCP is an extension that implements the Model Context Protocol for CodeMirror editors. It enables AI assistants to understand resources mentioned in your editor and provides prompt command functionality.

Installation

To install the CodeMirror MCP extension, you need to add both the extension package and the MCP SDK:

npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
# or
pnpm add @marimo-team/codemirror-mcp @modelcontextprotocol/sdk

Peer Dependencies

This extension requires the following peer dependencies:

• @codemirror/view
• @codemirror/state
• @modelcontextprotocol/sdk

Make sure these are installed in your project.

Basic Setup

Here's how to set up the CodeMirror MCP extension in your project:

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

// Create a transport to connect to your MCP server
const transport = new WebSocketClientTransport(new URL('ws://localhost:8080'));

// Create a new editor view with the MCP extension
const view = new EditorView({
  extensions: [
    // Other CodeMirror extensions...
    
    mcpExtension({
      // Required options
      transport: transport,
      
      // Optional options
      logger: console,
      clientOptions: {
        name: 'your-client',
        version: '1.0.0'
      },
      onResourceClick: (resource) => {
        // Handle resource clicks
        console.log(`Resource clicked: ${resource.uri}`);
        // Open resource in a new tab, panel, etc.
      },
    }),
    
    // Handle submit with Enter key
    keymap.of([
      {
        key: 'Enter',
        run: () => {
          // Extract resources from the editor
          const resources = extractResources(view);
          const formattedResources = resources
            .map(
              ({ resource }) =>
                `${resource.uri} (${resource.type}): ${resource.description || resource.name}`
            )
            .join('\n');
          
          // Create the prompt with resources
          const prompt = `${view.state.doc.toString()}\n\nResources:\n${formattedResources}`;
          
          // Submit prompt to your AI service
          // const response = await generateText(prompt);
          
          return true;
        },
      },
    ]),
  ],
  parent: document.querySelector('#editor'),
});

Features

Resource Mentions

The extension supports the @resource-uri syntax for referencing resources. When you type @ in the editor, it will trigger autocomplete suggestions for available resources from your MCP server.

Resources are visually decorated in the editor and are clickable. You can customize the click behavior using the onResourceClick callback in the extension configuration.

Prompt Commands

The extension also supports /command syntax for prompt commands. When you type / in the editor, it will show autocomplete suggestions for available prompt commands from your MCP server.

Customization

You can customize the appearance of resource mentions and prompt commands by providing custom CSS. The extension uses CSS variables that you can override to match your application's theme.

Advanced Usage

Extracting Resources

You can extract resources from the editor using the extractResources function:

import { extractResources } from '@marimo-team/codemirror-mcp';

// Get all resources mentioned in the editor
const resources = extractResources(editorView);
console.log(resources);

This is useful when submitting the editor content to an AI service, as it allows you to include the resource metadata along with the text.

Custom Transport

You can use different transport mechanisms to connect to your MCP server:

// WebSocket transport
import { WebSocketClientTransport } from "@modelcontextprotocol/sdk/client/websocket.js";
const wsTransport = new WebSocketClientTransport(new URL('ws://localhost:8080'));

// HTTP transport
import { HttpClientTransport } from "@modelcontextprotocol/sdk/client/http.js";
const httpTransport = new HttpClientTransport(new URL('http://localhost:8080'));

Troubleshooting

If you encounter issues with the extension:

1. Check that your MCP server is running and accessible
2. Verify that you've provided the correct transport configuration
3. Check the browser console for any error messages
4. Make sure all peer dependencies are installed correctly

For more detailed information, enable logging by providing a logger in the extension configuration.