codemirror-mcp

这是一个实现了Model Context Protocol（MCP）的CodeMirror扩展，用于资源提及和提示命令。

功能

• 资源补全：自动补全@resource提及
• 资源装饰：对@resource提及进行视觉样式处理并支持点击操作
• 提示补全：自动补全/prompt命令
• 主题支持：可定制的样式

安装

npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
# 或
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: [
    // ... 其他扩展

    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\nResources:\n${formattedResources}`;
          // ... 将提示提交到AI服务器
          // const response = await generateText(prompt);
        },
      },
    ]),
  ],
  parent: document.querySelector('#editor'),
});

资源

• 使用@resource-uri语法引用资源
• 资源具有视觉装饰效果并可点击
• 支持资源交互的点击处理
• 悬停工具提示显示资源详情
• 可定制的主题

提示

• 使用/command语法进行提示命令
• 对可用提示进行自动补全

开发

# 安装依赖
pnpm install

# 运行测试
pnpm test

# 运行演示
pnpm dev

许可证

MIT