Codemirror MCP

🚀 codemirror-mcp 中文版

この拡張機能は、CodeMirror でモデルコンテキストプロトコル (MCP) を実装し、リソース参照とプロンプトコマンドをサポートします。

✨ 主な機能

• リソースの自動補完：@resource 参照の自動補完をサポートします。
• リソースの装飾：@resource 参照に視覚的なスタイルを適用し、クリックイベントを処理します。
• プロンプトコマンドの自動補完：/prompt コマンドの自動補完をサポートします。
• テーマサポート：カスタマイズ可能なスタイルをレンダリングします。

📦 インストール

npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
# または
pnpm add @marimo-team/codemirror-mcp @modelcontextprotocol/sdk

依存関係

このモジュールには以下の .peerDependencies が必要です。

• @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: [
    // 他の拡張...

    mcpExtension({
      // 必須オプション
      transport: transport,

      // オプション
      logger: console,
      clientOptions: {
        name: 'your-client',
        version: '1.0.0'
      },
      onResourceClick: (resource) => {
        // リソースのクリックイベントを処理する
        // 例: リソースを新しいタブで開くなど
      },
    }),

    // 送信操作を処理する
    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\nリソースリスト:\n${formattedResources}`;
          // ... プロンプトを AI サーバーに送信する
          // const response = await generateText(prompt);
        },
      },
    ]),
  ],
  parent: document.querySelector('#editor'),
});

📚 ドキュメント

リソース参照

• @resource-uri 形式の構文を使用してリソースを参照します。
• 参照されたリソースは視覚的にハイライトされ、クリック可能です。
• クリックイベントの処理機能があります。
• ホバー時にリソースの詳細情報が表示されます。
• カスタムテーマスタイルをサポートします。

プロンプトコマンド

• /command 構文を使用してプロンプトコマンドを入力します。
• 利用可能なプロンプトコマンドの自動補完をサポートします。

開発環境

# 依存関係をインストールする
pnpm install

# テストを実行する
pnpm test

# デモを起動する
pnpm dev

📄 ライセンス

MIT