Codemirror MCP

🚀 codemirror-mcp - Chinese Version

This is an extension for CodeMirror that implements the Model Context Protocol (MCP) for resource referencing and prompt commands. It offers enhanced functionality for resource handling and command input within the CodeMirror editor.

✨ Features

• Resource Autocompletion: Supports autocompletion for @resource references.
• Resource Decoration: Renders visual styles for @resource references and handles click events.
• Prompt Command Autocompletion: Supports autocompletion for /prompt commands.
• Theme Support: Allows for customizable style rendering.

📦 Installation

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

Dependencies

This module requires the following .peerDependencies:

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

💻 Usage Examples

Basic 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 option
      transport: transport,

      // Optional options
      logger: console,
      clientOptions: {
        name: 'your-client',
        version: '1.0.0'
      },
      onResourceClick: (resource) => {
        // Handle resource click event
        // For example: open the resource, such as in a new tab.
      },
    }),

    // Handle submission operation
    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\nResource list:\n${formattedResources}`;
          // ... Submit the prompt to the AI server
          // const response = await generateText(prompt);
        },
      },
    ]),
  ],
  parent: document.querySelector('#editor'),
});

📚 Documentation

Resource References

• Use the @resource-uri syntax to reference resources.
• Referenced resources are highlighted with visual styles and are clickable for interaction.
• Click events are handled.
• Hovering over a resource shows detailed information.
• Custom theme styles are supported.

Prompt Commands

• Use the /command syntax to input prompt commands.
• Autocompletion for available prompt commands is supported.

🔧 Technical Details

Development Environment

# Install dependencies
pnpm install

# Run tests
pnpm test

# Start the demo
pnpm dev

📄 License

MIT