AI导哈

代码编辑器MCP扩展

一个实现Model Context Protocol（MCP）的CodeMirror扩展，提供资源提及和提示命令的自动完成及可视化样式。

  • by marimo-team
  • TypeScript
  • 本地部署
  • 79 星标
  • 更新于
在 GitHub 查看 marimo-team/codemirror-mcp

使用说明

代码镜像mcp

实现以下功能的CodeMirror扩展 模型上下文协议 （MCP）用于资源提及和提示命令。

特性

  • 资源完成：自动完成 @resource 提及
  • 资源装饰：视觉样式 @resource 带有点击处理的提及
  • 快速完成：自动完成 /prompt 命令
  • 主题支持：可定制的样式

安装

npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
# or
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: [
    // ... other extensions

    mcpExtension({
      // Required options
      transport: transport,

      // Optional options
      logger: console,
      clientOptions: {
        name: 'your-client',
        version: '1.0.0'
      },
      onResourceClick: (resource) => {
        // Open resource
        // e.g. open in a tab, etc.
      },
    }),

    // Handle submit
    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}`;
          // ... submit prompt to AI server
          // const response = await generateText(prompt);
        },
      },
    ]),
  ],
  parent: document.querySelector('#editor'),
});

资源

  • 使用 @resource-uri 引用资源的语法
  • 资源具有视觉装饰和可点击性
  • 资源交互的点击处理
  • 悬停工具提示显示资源详细信息
  • 可定制主题

鼓励

  • 使用 /command 提示命令的语法
  • 自动完成可用提示

发展

# Install dependencies
pnpm install

# Run tests
pnpm test

# Run demo
pnpm dev

许可证

麻省理工学院

相关 MCP