codemirror-mcp

# codemirror-mcp A CodeMirror extension that implements the [Model Context Protocol](https://modelcontextprotocol.io) (MCP) for resource mentions and prompt commands. ## Features - Resource Completion: Autocomplete for `@resource` mentions - Resource Decorations: Visual styling for `@resource` mentions with click handling - Prompt Completion: Autocomplete for `/prompt` commands - Theme Support: Customizable styling ## Installation ```bash npm install @marimo-team/codemirror-mcp @modelcontextprotocol/sdk # or pnpm add @marimo-team/codemirror-mcp @modelcontextprotocol/sdk ``` ### Peer Dependencies This module requires the following peer dependencies: - `@codemirror/view` - `@codemirror/state` - `@modelcontextprotocol/sdk` ## Usage ```ts 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'), }); ``` ## Resources - Use `@resource-uri` syntax to reference resources - Resources are visually decorated and clickable - Click handling for resource interactions - Hover tooltips show resource details - Customizable theme ## Prompts - Use `/command` syntax for prompt commands - Autocomplete for available prompts ## Development ```bash # Install dependencies pnpm install # Run tests pnpm test # Run demo pnpm dev ``` ## License MIT