codemirror-mcp

🚀 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 许可证。