What is Codemirror Mcp

codemirror-mcp is a CodeMirror extension that implements the Model Context Protocol (MCP) for resource mentions and prompt commands, enabling enhanced code editing features.

Use cases

Use cases include collaborative coding platforms, integrated development environments (IDEs), and applications that involve dynamic resource management and interactive prompt commands.

How to use

To use codemirror-mcp, install it via npm or pnpm, and then import it into your project. Set up a WebSocket transport and configure the extension with required options such as transport and optional settings like logging and resource click handling.

Key features

Key features include resource completion for @resource mentions, visual styling for these mentions, prompt completion for /prompt commands, and customizable theme support.

Where to use

codemirror-mcp can be used in web applications that require advanced code editing capabilities, particularly in environments where resource management and prompt commands are essential.

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

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

Peer Dependencies

This module requires the following peer dependencies:

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

Usage

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-uri syntax to reference resources
• Resources are visually decorated and clickable
• Click handling for resource interactions
• Hover tooltips show resource details
• Customizable theme

Prompts

• Use /command syntax for prompt commands
• Autocomplete for available prompts

Development

# Install dependencies
pnpm install

# Run tests
pnpm test

# Run demo
pnpm dev

License

MIT