📌Overview

Purpose: To provide a CodeMirror extension that facilitates enhanced resource mentions and prompt commands through the implementation of the Model Context Protocol (MCP).

Overview: This framework enhances the CodeMirror text editor by adding features that support resource completion and command prompts, allowing for a more interactive and user-friendly coding experience.

Key Features:

• Resource Completion: Autocompletes @resource mentions, enabling users to quickly insert resource references while coding.

• Resource Decorations: Applies visual styling to @resource mentions, making them clickable for easy interaction, with additional hover tooltips revealing resource details.

• Prompt Completion: Offers autocompletion for /prompt commands, streamlining the process of issuing commands within the editor.

• Theme Support: Allows for customizable styling options to fit the aesthetic preferences of different users or applications.

---

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({
      transport: transport,

      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
        },
      },
    ]),
  ],
  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

pnpm install
pnpm test
pnpm dev

License

MIT