codemirror-mcp

codemirror-mcp

リソースへのメンションとプロンプトコマンドに対応する Model Context Protocol（MCP）を実装した CodeMirror 拡張機能です。

機能

• リソース補完：@resource メンションのオートコンプリート
• リソースの装飾：クリック処理に対応した @resource メンションの視覚的なスタイル設定
• プロンプト補完：/prompt コマンドのオートコンプリート
• テーマのサポート：カスタマイズ可能なスタイル設定

インストール

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

ピア依存関係

このモジュールには、以下のピア依存関係が必要です。

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

使い方

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'),
});

リソース

• リソースを参照するには @resource-uri 構文を使用します
• リソースは視覚的に装飾され、クリックできます
• リソースの操作に対するクリック処理
• ホバー時のツールチップにリソースの詳細を表示します
• カスタマイズ可能なテーマ

プロンプト

• プロンプトコマンドには /command 構文を使用します
• 使用可能なプロンプトのオートコンプリート

開発

# Install dependencies
pnpm install

# Run tests
pnpm test

# Run demo
pnpm dev

ライセンス

MIT