代码镜像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许可证
麻省理工学院
