Codemirror MCP

🚀 codemirror-mcp 中文版

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

🚀 クイックスタート

この拡張機能は、CodeMirrorにおけるリソース参照とプロンプトコマンドの自動補完や視覚的な装飾を提供します。以下に、基本的な使い方を説明します。

✨ 主な機能

• リソースの自動補完：@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