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 許可證。