codemirror-mcp
2025.01.10
59
TypeScript代码编辑器扩展开发工具开发效率
codemirror-mcp 是一个 CodeMirror 扩展，实现了 Model Context Protocol (MCP) 用于资源提及和提示命令。它提供了资源自动完成、资源装饰、提示命令自动完成等功能，适用于开发者在代码编辑器中高效引用资源和执行提示命令的场景。
View on GitHub
Overview
基本能力
产品定位
codemirror-mcp 是一个 CodeMirror 扩展，旨在通过 Model Context Protocol (MCP) 提供资源提及和提示命令的功能，提升开发效率。
核心功能
- 资源自动完成：支持
@resource提及的自动完成。 - 资源装饰：为
@resource提及提供视觉样式和点击处理。 - 提示命令自动完成：支持
/prompt命令的自动完成。 - 主题支持：可自定义样式。
适用场景
- 在代码编辑器中高效引用资源。
- 执行提示命令以提升开发效率。
工具列表
@marimo-team/codemirror-mcp：提供 MCP 扩展功能。@modelcontextprotocol/sdk：提供 MCP SDK 支持。
常见问题解答
- 无明确常见问题解答部分。
使用教程
使用依赖
npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
# or
pnpm add @marimo-team/codemirror-mcp @modelcontextprotocol/sdk
安装教程
- 安装依赖：
npm install @marimo-team/codemirror-mcp @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) => {
// Open 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}`;
},
},
]),
],
parent: document.querySelector('#editor'),
});
调试方式
# 运行测试
pnpm test
# 运行演示
pnpm dev